/* quote.css — A1 Global Logistics quote assistant. Extends styles.css tokens. */
.q-body{background:var(--bg-alt);min-height:100vh;display:flex;flex-direction:column}
.q-main{flex:1;padding:1.75rem 0 3rem}
.q-main .wrap{max-width:860px}
.q-wa-link{display:inline-flex;align-items:center;gap:.4rem;color:var(--ink-2);font-weight:600;font-size:.9rem;text-decoration:none}
.q-wa-link:hover{color:var(--accent)}
.q-wa-link svg{color:#25d366}

.q-trust{display:flex;align-items:center;gap:.5rem;color:var(--muted);font-size:.82rem;font-weight:600;letter-spacing:.01em;margin:.25rem 0 1.25rem;text-transform:none}
.q-trust .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}

.q-head{margin-bottom:1.25rem}
.q-head h1,.q-head h2{font-size:clamp(1.5rem,4vw,2.1rem);margin-bottom:.35rem}
.q-sub{color:var(--muted);font-size:1rem;max-width:56ch}
.q-back{background:none;border:0;color:var(--muted);font:inherit;font-weight:600;cursor:pointer;padding:.25rem 0;margin-bottom:.6rem;display:inline-flex;gap:.3rem;align-items:center}
.q-back:hover{color:var(--accent)}

/* Step 1 cards */
.q-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.9rem}
.q-card{position:relative;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem;cursor:pointer;display:flex;flex-direction:column;gap:.55rem;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;color:var(--ink)}
.q-card:hover{border-color:var(--line-strong);transform:translateY(-2px);box-shadow:0 10px 30px -18px rgba(11,22,38,.5)}
.q-card:focus-visible{outline:3px solid var(--tech);outline-offset:2px}
.q-card[aria-checked="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.q-card .q-ico{width:34px;height:34px;color:var(--tech)}
.q-card .q-ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.q-card .q-card-title{font-family:var(--f-display);font-weight:700;font-size:1.02rem;line-height:1.1;color:var(--ink)}
.q-card p{color:var(--muted);font-size:.86rem;line-height:1.4}
.q-card.is-brain{border-color:var(--tech)}
.q-card .q-tag{position:absolute;top:.8rem;right:.8rem;font:600 .64rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tech);background:var(--tech-soft);padding:.25rem .45rem;border-radius:4px}

/* Progress */
.q-progress{height:6px;background:var(--line);border-radius:99px;overflow:hidden;margin-bottom:.5rem}
.q-progress-bar{display:block;height:100%;width:33%;background:linear-gradient(90deg,var(--tech),var(--accent));border-radius:99px;transition:width .4s cubic-bezier(.4,0,.2,1)}
.q-progress-label{font:600 .8rem/1 var(--f-mono);color:var(--muted);margin-bottom:1.5rem}

/* Fields */
.q-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.q-field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.4rem}
.q-field label{font-weight:600;font-size:.9rem;color:var(--ink-2)}
.q-field .req{color:var(--accent)}
.q-field input,.q-field select,.q-field textarea{font:inherit;font-size:1rem;padding:.7rem .8rem;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);color:var(--ink);width:100%}
.q-field input:focus,.q-field select:focus,.q-field textarea:focus{outline:none;border-color:var(--tech);box-shadow:0 0 0 3px var(--tech-soft)}
.q-field textarea{resize:vertical}
.q-field.invalid input,.q-field.invalid select{border-color:#c0392b;box-shadow:0 0 0 3px rgba(192,57,43,.15)}
.q-hint{color:var(--muted);font-size:.8rem}
.q-err{color:#c0392b;font-size:.82rem;font-weight:600;min-height:0}
.q-err:empty{display:none}
.q-suggest{cursor:pointer;color:var(--tech);font-weight:600}
.q-inline{display:flex;gap:.5rem;align-items:stretch}
.q-inline input{flex:1}

/* kg/lb + billing switches */
.q-switch,.q-billing{display:inline-flex;border:1px solid var(--line-strong);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.q-switch button,.q-billing button{font:600 .9rem/1 var(--f-body);padding:.6rem .9rem;border:0;background:none;color:var(--muted);cursor:pointer}
.q-switch button[aria-pressed="true"],.q-billing button.is-on{background:var(--ink);color:var(--bg)}
.q-billing{margin:0 0 1.25rem}
.q-billing button[disabled]{opacity:.5;cursor:not-allowed}

/* Combobox */
.q-combo{position:relative}
.q-combo input{width:100%}
.q-combo-list{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);max-height:260px;overflow:auto;box-shadow:0 18px 40px -22px rgba(11,22,38,.7);padding:.25rem}
.q-combo-list[hidden]{display:none}
.q-combo-opt{padding:.55rem .6rem;border-radius:4px;cursor:pointer;display:flex;gap:.55rem;align-items:center;font-size:.95rem}
.q-combo-opt[aria-selected="true"],.q-combo-opt:hover{background:var(--tech-soft)}
.q-combo-opt .flag{font-size:1.1rem;line-height:1}
.q-combo-sep{font:600 .68rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:.5rem .6rem .25rem}

/* Actions */
.q-actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:1.25rem}
.btn.is-loading{opacity:.7;pointer-events:none;position:relative}
.q-wa-alt,.q-demo .btn-line{--_wa:1}

/* Plans */
.q-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1rem}
.q-plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem 1.2rem;display:flex;flex-direction:column;gap:.5rem}
.q-plan.is-hot{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.q-plan.is-focus{outline:3px solid var(--tech);outline-offset:2px}
.q-plan .q-badge{align-self:flex-start;font:600 .64rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent);padding:.3rem .5rem;border-radius:4px}
.q-plan h3{font-size:1.2rem}
.q-plan .q-price{font:800 2rem/1 var(--f-display);color:var(--ink)}
.q-plan .q-price small{font:600 .9rem/1 var(--f-body);color:var(--muted)}
.q-plan ul{list-style:none;display:flex;flex-direction:column;gap:.45rem;margin:.5rem 0;flex:1}
.q-plan li{position:relative;padding-left:1.4rem;font-size:.9rem;color:var(--ink-2);line-height:1.35}
.q-plan li::before{content:"";position:absolute;left:0;top:.35rem;width:14px;height:9px;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}
.q-microguarantee{text-align:center;color:var(--muted);font-size:.84rem;margin:.5rem 0 1.5rem}

/* Demo + notes */
.q-demo{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;margin-top:1rem}
.q-note{background:var(--surface);border:1px solid var(--line-strong);border-left:4px solid var(--tech);border-radius:var(--r);padding:1rem 1.2rem;margin-bottom:1.25rem}
.q-note-warn{border-left-color:#c0392b}
.q-note-soft{border-left-color:var(--accent)}
.q-note-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.75rem}

/* Success */
.q-success{text-align:center;padding:1.5rem 0}
.q-success:focus{outline:none}
.q-check{width:72px;height:72px;margin:0 auto 1rem}
.q-check svg{width:100%;height:100%}
.q-check circle{stroke-dasharray:151;stroke-dashoffset:151;animation:qdash .6s ease forwards}
.q-check path{stroke-dasharray:40;stroke-dashoffset:40;animation:qdash .4s .4s ease forwards}
@keyframes qdash{to{stroke-dashoffset:0}}
.q-reqid{font-size:1.05rem;margin:.75rem 0}
.q-reqid code{background:var(--band);color:var(--band-ink);padding:.3rem .55rem;border-radius:4px;font-size:1rem}
.q-copy{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);border-radius:4px;padding:.3rem .55rem;font:600 .78rem/1 var(--f-body);cursor:pointer;margin-left:.4rem}
.q-summary{display:grid;grid-template-columns:auto 1fr;gap:.3rem .9rem;max-width:30rem;margin:1.25rem auto;text-align:left;font-size:.9rem}
.q-summary dt{color:var(--muted);font-weight:600}
.q-summary dd{color:var(--ink-2)}
.q-success .q-actions{justify-content:center}

.q-link{background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;font:inherit;font-size:.85rem}
.q-restart-row{text-align:center;margin-top:1.5rem}
.q-foot{background:var(--band);color:var(--band-muted);padding:1.5rem 0;font-size:.82rem;text-align:center}
.q-foot a{color:var(--band-ink)}

/* intl-tel-input dark-mode alignment */
.iti{width:100%}
.iti__dropdown-content{background:var(--surface);color:var(--ink)}

@media (max-width:640px){
  .q-grid,.q-plans{grid-template-columns:1fr}
  .q-cards{grid-template-columns:1fr 1fr}
  .q-main .wrap{padding-left:16px;padding-right:16px}
}
@media (max-width:380px){ .q-cards{grid-template-columns:1fr} }

@media (prefers-reduced-motion:reduce){
  .q-card,.q-progress-bar{transition:none}
  .q-check circle,.q-check path{animation:none;stroke-dashoffset:0}
}

/* ── A11y: WCAG-AA contrast for the plans accent (assistant-scoped only) ──
   Global brand --accent (#C8541A) on white is ~4.44:1 — just under AA 4.5:1 for normal text.
   Here we darken ONLY the plans badge and the primary plan button to #BC4F17 (~4.9:1 on white).
   styles.css and the global --accent token are intentionally NOT touched (same issue exists
   elsewhere on the site and is tracked for a separate fix). Dark theme already passes (~6.3:1),
   kept explicit below. */
.q-plan .q-badge,
.q-plan .btn-primary{
  background:#BC4F17;
  color:#FFFFFF;
  border-color:#BC4F17;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .q-plan .q-badge,
  :root:not([data-theme="light"]) .q-plan .btn-primary{ background:#E8743A; color:#0A111C; border-color:#E8743A; }
}
:root[data-theme="dark"] .q-plan .q-badge,
:root[data-theme="dark"] .q-plan .btn-primary{ background:#E8743A; color:#0A111C; border-color:#E8743A; }