/* =========================================================================
   Changan Antigua — contact page (test-drive wizard + message form)
   Reuses the design tokens from styles.css (:root vars, Lexend, dark theme).
   ========================================================================= */

/* ---- intro band ---- */
.contact-hero { position: relative; padding: 130px 0 44px; background:
  radial-gradient(900px 460px at 82% -10%, rgba(46,124,246,.16), transparent 60%),
  linear-gradient(180deg, var(--void), var(--navy-950)); border-bottom: 1px solid var(--line); }
.contact-hero h1 { font-size: clamp(38px, 6vw, 68px); font-weight: 800; text-transform: uppercase; letter-spacing: .005em; margin-top: 18px; }
.contact-hero .c-lede { color: var(--muted); font-size: clamp(16px, 1.8vw, 20px); font-weight: 300; margin-top: 16px; max-width: 54ch; }

/* ---- layout ---- */
.contact-main { padding-top: clamp(48px, 6vw, 80px); }
.contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 5vw, 68px); align-items: start; }

/* ---- info column ---- */
.contact-info { position: sticky; top: 96px; }
.contact-info .overline { margin-bottom: 22px; }
.ci-line { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.ci-line .ci-k { flex: none; width: 92px; color: var(--muted-2); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding-top: 3px; }
.ci-line a { color: var(--ink); font-weight: 500; }
.ci-line a:hover { color: var(--accent); }
.contact-info .btn { display: inline-flex; gap: 9px; align-items: center; }
.contact-info .socials a { color: var(--muted); }
.contact-info .socials a:hover { color: var(--accent); }

/* ---- form card ---- */
.contact-card { background: var(--navy-900); border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.cc-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.cc-tab { font-family: var(--disp); font-weight: 600; font-size: 14px; letter-spacing: .02em; text-transform: uppercase; padding: 18px 12px; background: transparent; border: 0; color: var(--muted); cursor: pointer; position: relative; transition: color .2s; }
.cc-tab:hover { color: var(--ink); }
.cc-tab.active { color: var(--ink); }
.cc-tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); }
.cc-pane { padding: clamp(22px, 3vw, 32px); }
.cc-pane[hidden] { display: none; }
.contact-card { color-scheme: dark; }   /* dark native date/select pickers */

/* ---- test-drive progress ---- */
.td-progress { margin-bottom: 24px; }
.td-bar { height: 4px; border-radius: 999px; background: var(--glass); overflow: hidden; }
.td-bar span { display: block; height: 100%; width: 33.33%; background: var(--accent); border-radius: 999px; transition: width .35s var(--ease); }
.td-steplabel { margin-top: 12px; font-size: 13px; color: var(--muted); }
.td-steplabel b { color: var(--accent); }
.td-steplabel .td-title { color: var(--ink); font-weight: 600; }

.td-panel[hidden] { display: none; }
.opt { color: var(--muted-2); font-weight: 400; }

/* ---- model chooser (step 1) ---- */
.td-models { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.td-model { cursor: pointer; }
.td-model input { position: absolute; opacity: 0; pointer-events: none; }
.td-mcard { display: flex; flex-direction: column; border: 1.5px solid var(--line-2); border-radius: 10px; overflow: hidden; background: var(--navy-950); transition: border-color .2s, transform .2s; position: relative; }
.td-model:hover .td-mcard { border-color: var(--muted-2); }
.td-mthumb { aspect-ratio: 16/10; overflow: hidden; background: var(--navy-850); }
.td-mthumb img { width: 100%; height: 100%; object-fit: cover; }
.td-minfo { padding: 10px 12px 12px; }
.td-minfo .nm { display: block; font-family: var(--disp); font-weight: 700; font-size: 15px; text-transform: uppercase; }
.td-minfo .ty { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 3px; }
.td-check { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s; }
.td-check .tick { width: 15px; height: 15px; color: #fff; }
.td-model input:checked + .td-mcard { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.td-model input:checked + .td-mcard .td-check { opacity: 1; transform: scale(1); }
.td-model input:focus-visible + .td-mcard { border-color: var(--accent); }

/* ---- time chips (step 2) ---- */
.td-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.td-chip { cursor: pointer; }
.td-chip input { position: absolute; opacity: 0; pointer-events: none; }
.td-chip span { display: inline-block; padding: 11px 20px; border: 1.5px solid var(--line-2); border-radius: 999px; font-size: 14px; font-weight: 500; transition: border-color .2s, background .2s, color .2s; }
.td-chip:hover span { border-color: var(--muted-2); }
.td-chip input:checked + span { border-color: var(--accent); background: rgba(46,124,246,.14); color: var(--accent); }

/* ---- nav buttons ---- */
.td-nav { display: flex; gap: 12px; margin-top: 24px; }
.td-nav .td-next, .td-nav .td-submit { margin-left: auto; }

/* ---- success state ---- */
.cc-done { text-align: center; padding: 30px 10px 20px; }
.cc-done .check { width: 66px; height: 66px; border-radius: 50%; background: rgba(37,211,102,.16); color: #25D366; display: grid; place-items: center; margin: 0 auto 20px; font-size: 32px; }
.cc-done h3 { font-size: 24px; text-transform: uppercase; margin-bottom: 10px; }
.cc-done p { color: var(--muted); font-weight: 300; max-width: 44ch; margin: 0 auto 22px; }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-info { position: static; }
}
@media (max-width: 560px) {
  .td-models { grid-template-columns: 1fr 1fr; }
  .td-nav { flex-wrap: wrap; }
  .td-nav .btn { flex: 1; }
}