/* 7Code — quote request form (/quote) + thank-you page (/quote/thanks) */

/* ---- layout ---- */
.qt,.qdone{padding-block:clamp(40px,6vw,84px) clamp(64px,8vw,110px);border-bottom:1.5px solid var(--ink)}
.qt-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:clamp(32px,5vw,80px);align-items:start}
.qt-form{min-width:0}
.qt-form .formmsg{margin-bottom:26px}

/* ---- progress (JS step mode only) ---- */
.qprog{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:6px}
.qprog[hidden]{display:none}
.qprog button{display:block;width:100%;text-align:start;background:none;border:0;border-top:3px solid var(--line);padding:12px 0 6px;color:var(--ink45);font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;cursor:default;transition:color .25s,border-color .25s}
.qprog b{font-weight:700;margin-inline-end:4px}
.qprog .done button{border-top-color:var(--ink);color:var(--ink70);cursor:pointer}
.qprog .done button:hover{color:var(--red)}
.qprog .on button{border-top-color:var(--red);color:var(--ink)}
.qprog .on b{color:var(--red)}

/* ---- steps ---- */
.qstep{border:0;margin:0;padding:0 0 10px;min-width:0}
.qstep legend{display:block;width:100%;padding:26px 0 0;margin-bottom:26px;border-top:1.5px solid var(--ink)}
.qstep+.qstep{margin-top:18px}
.qstep legend .n{display:block;font-family:var(--mono);font-weight:700;font-size:14px;color:var(--red);margin-bottom:10px}
.qstep legend .t{display:block;font-weight:900;font-size:clamp(28px,3.4vw,46px);line-height:.95;letter-spacing:-.03em;text-transform:uppercase;outline:none}
.is-steps .qstep legend{border-top:0;padding-top:30px}
.is-steps .qstep legend .n{display:none}
.is-steps .qstep:not([hidden]){animation:qIn .35s ease both}
@keyframes qIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---- labels, inputs ---- */
.qfield{margin-bottom:30px}
.qlabel{display:block;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink45);margin-bottom:12px}
.qlabel-sub{margin-top:22px}
.qt .hint{font-family:inherit;text-transform:none;letter-spacing:0;color:var(--ink45);font-size:13px}
.qlabel .hint{margin-inline-start:8px}
.qt .field .hint{display:block;margin-top:8px}
.qt .req{color:var(--red)}
.qt .opt{text-transform:none;letter-spacing:0;color:var(--ink45);opacity:.85;margin-inline-start:4px}
.qt .opt::before{content:"("}.qt .opt::after{content:")"}
.qt .field{margin-bottom:22px}
.qt .field input::placeholder,.qt .field textarea::placeholder{color:rgba(242,241,236,.4)}
.qt .field textarea{min-height:170px;resize:vertical;line-height:1.55;display:block}
.qt .field select{width:100%;appearance:none;-webkit-appearance:none;border-radius:0;background:rgba(255,255,255,.03) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F2F1EC' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 15px center;border:1.5px solid var(--ink);padding:12px 14px;padding-inline-end:42px;font-family:inherit;font-size:16px;color:var(--ink);min-height:50px;cursor:pointer}
html[dir=rtl] .qt .field select{background-position:left 15px center}
.qt .field select:focus{outline:none;border-color:var(--red)}
.qt .field select option{background:var(--panel);color:var(--ink)}
.qt .field input{min-height:50px}
.qrow{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}

/* ---- chips (checkbox / radio) ---- */
.qchips{display:flex;flex-wrap:wrap;gap:8px}
.qchip{position:relative;display:inline-flex;cursor:pointer}
.qchip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.qchip span{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:10px 16px;border:1.5px solid var(--line);font-size:15px;font-weight:600;line-height:1.25;color:var(--ink70);transition:background .18s,color .18s,border-color .18s;user-select:none}
.qchip span::before{content:"";flex:0 0 auto;width:13px;height:13px;border:1.5px solid currentColor;transition:.18s}
.qchip--r span::before{border-radius:50%}
.qchip:hover span{border-color:var(--ink);color:var(--ink)}
.qchip input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.qchip input:checked+span::before{background:var(--red);border-color:var(--red)}
.qchip input:focus-visible+span{outline:2px solid var(--red);outline-offset:2px}

/* ---- errors ---- */
.qt .has-err input,.qt .has-err textarea,.qt .has-err select{border-color:var(--red)}
.qt .has-err .qchip span{border-color:rgba(255,65,50,.55)}
.ferr{color:var(--red);font-size:14px;font-weight:600;margin-top:10px}
.ferr[hidden]{display:none}
#e-type{margin:2px 0 14px}
/* the type chosen by a link, confirmed on the first screen */
.qpre{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:4px 0 14px;padding:12px 14px;border:1.5px solid var(--red);background:rgba(255,65,50,.07);font-size:15px;line-height:1.5}
.qpre>span:first-child{color:var(--red);font-weight:900}
.qpre b{font-weight:800}
.qpre-n{color:var(--ink70);font-size:14px}

/* ---- step buttons + submit ---- */
.qnav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px}
.qnav[hidden],.qsend [hidden]{display:none}
.qsend{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:6px}
.qt .btn,.qdone .btn{min-height:48px;justify-content:center}
.qsubmit{padding:15px 30px;font-size:14px}
.qsubmit[disabled]{opacity:.6;cursor:progress}
.qsend .note{flex:1 1 220px;font-size:13px;color:var(--ink45);line-height:1.5}
.qsend .note a{color:var(--ink70);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px}

/* ---- side column ---- */
.qside{position:sticky;top:86px;display:flex;flex-direction:column;gap:14px}
.qbox{border:1.5px solid var(--ink);background:var(--panel);padding:24px}
.qbox h2{font-family:var(--mono);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--ink45);margin-bottom:16px}
.qnext{list-style:none}
.qnext li{display:grid;grid-template-columns:32px 1fr;gap:8px;padding:15px 0;border-top:1.5px solid var(--line)}
.qnext li:first-child{border-top:0;padding-top:0}
.qnext li:last-child{padding-bottom:0}
.qnext .n{font-family:var(--mono);font-weight:700;font-size:13px;color:var(--red);padding-top:2px}
.qnext h3{font-weight:800;font-size:16px;line-height:1.15;text-transform:uppercase;letter-spacing:-.01em}
.qnext p{color:var(--ink70);font-size:14px;margin-top:5px;line-height:1.5}
.qtalk .btn{display:flex;width:100%}
.qtalk .btn+.btn{margin-top:8px}
.btn-wa{background:#25D366;border-color:#25D366;color:#fff}
.btn-wa:hover{background:#1fb457;border-color:#1fb457;color:#fff}
.qtrust{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink70);line-height:1.5;padding-inline:2px}
.qtrust span{flex:0 0 auto;width:8px;height:8px;background:var(--red);margin-top:6px}

/* ---- thank-you page ---- */
.qdone-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,420px);gap:clamp(28px,5vw,72px);align-items:start}
.qwa-card{border:1.5px solid var(--ink);background:var(--panel);padding:clamp(22px,3vw,36px)}
.qwa-card h2{font-weight:900;font-size:clamp(24px,2.8vw,38px);line-height:1;letter-spacing:-.02em;text-transform:uppercase}
.qwa-card>p{color:var(--ink70);margin-top:12px;max-width:52ch}
.qwa-go{display:flex;width:100%;gap:12px;margin-top:22px;padding:18px 24px;font-size:clamp(14px,1.4vw,16px)}
.qwa-go svg{flex:0 0 auto}
.qauto{margin-top:16px;font-family:var(--mono);font-size:13px;color:var(--ink70)}
.qauto[hidden]{display:none}
.qauto .bar{display:block;height:3px;background:var(--line);margin-bottom:10px;overflow:hidden}
.qauto .bar i{display:block;height:100%;width:100%;background:#25D366;transform-origin:left center;animation:qBar 1.5s linear both}
html[dir=rtl] .qauto .bar i{transform-origin:right center}
@keyframes qBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.qauto button{background:none;border:0;color:var(--ink);font:inherit;text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px;cursor:pointer;margin-inline-start:6px;padding:8px 0}
.qlinks{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.qbook{display:flex;width:100%;margin-top:20px}

/* ---- Arabic ---- */
html[dir=rtl] .qstep legend .t,html[dir=rtl] .qwa-card h2{line-height:1.35}
html[dir=rtl] .qnext h3{line-height:1.4}
html[dir=rtl] .qlabel,html[dir=rtl] .qprog button,html[dir=rtl] .qbox h2,html[dir=rtl] .qauto{font-size:14px}
html[dir=rtl] .qlabel{font-weight:700}
html[dir=rtl] .qt .hint{font-size:14px}
html[dir=rtl] .qchip span{font-size:15.5px}

/* ---- responsive ---- */
@media(max-width:980px){
  .qt-grid,.qdone-grid{grid-template-columns:1fr}
  .qside{position:static}
}
@media(max-width:620px){
  .qrow{grid-template-columns:1fr}
  .qchip span{font-size:14px;padding:10px 14px}
  .qprog button{font-size:11px}
  .qnav .btn{flex:1}
  .qnav span:empty{display:none}
  .qsend .btn{flex:1 1 auto}
  .qlinks .btn{flex:1 1 auto}
}
@media(prefers-reduced-motion:reduce){.is-steps .qstep:not([hidden]){animation:none}.qauto .bar i{animation:none}}