/* ============================================================
   test-drive.css — "Book a Test Drive" page
   Load AFTER css/style.css. Everything is scoped under .td-* or
   body.td-page so it can't leak into other pages.
   Mobile-first; tablet >=768px; desktop >=1024px.
   ============================================================ */

body.td-page{
  --td-muted:#7A7A72;
  --td-line:#2B2B27;
  --td-field:#D8D8D8;
  --td-card:#F5F5F5;
  --td-dark:#1D1D18;
  background:var(--paper);
  padding-bottom:0;              /* cancels the 68px that style.css adds for the homepage's fixed bottom bar */
}
.td-page [hidden]{display:none !important;}


/* ---------- Layout shell ---------- */
.td-main{padding:calc(var(--td-header-h) + 22px) 20px 44px;}
.td-layout{max-width:560px;margin:0 auto;}

.td-title{
  font-family:var(--display);font-weight:700;font-size:1.3rem;line-height:1.2;
  margin:0 0 16px 4px;
}
.td-banner{display:block;width:100%;height:auto;margin-bottom:30px;}

/* ---------- Selected car ---------- */
.td-car{
  display:flex;align-items:center;
  background:var(--td-card);border-radius:6px;padding:14px;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.td-car-thumb{
  flex:0 0 56px;height:44px;margin-right:14px;border-radius:5px;overflow:hidden;
  background:var(--td-dark);display:flex;align-items:center;justify-content:center;
}
.td-car-thumb img{width:100%;height:100%;object-fit:contain;padding:2px;}
.td-car-info{flex:1;min-width:0;display:flex;flex-direction:column;}
.td-car-info strong{font-weight:700;font-size:.92rem;line-height:1.25;}
.td-car-info span{font-size:.78rem;margin-top:3px;}
.td-change{flex:0 0 auto;margin-left:10px;padding:8px 2px;font-weight:700;font-size:.8rem;color:var(--ink);}
.td-change:hover{text-decoration:underline;}

.td-picker{
  list-style:none;margin:10px 0 0;padding:0;
  background:#fff;border-radius:6px;overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.td-picker li + li{border-top:1px solid rgba(0,0,0,.07);}
.td-picker-item{display:flex;align-items:center;width:100%;padding:10px 14px;text-align:left;}
.td-picker-item:hover,.td-picker-item.is-current{background:#F0F0EC;}
.td-picker-thumb{flex:0 0 50px;height:38px;margin-right:12px;border-radius:5px;background:var(--td-dark);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.td-picker-thumb img{width:100%;height:100%;object-fit:contain;padding:2px;}
.td-picker-text{display:flex;flex-direction:column;}
.td-picker-text strong{font-size:.86rem;font-weight:700;}
.td-picker-text span{font-size:.74rem;margin-top:2px;color:#55554F;}

/* ---------- Steps ---------- */
.td-step{border:0;margin:30px 0 0;padding:0;min-width:0;scroll-margin-top:84px;}
.td-label{
  display:block;width:100%;padding:0;margin:0 0 10px 3px;
  font-weight:700;font-size:.7rem;letter-spacing:.03em;text-transform:uppercase;color:var(--td-muted);
}

/* dealerships */
.td-dealer{position:relative;margin-bottom:10px;}
.td-dealer input{position:absolute;opacity:0;pointer-events:none;}
.td-dealer label{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--td-card);border:1.5px solid #E1E1E1;border-radius:6px;padding:13px 14px;
  box-shadow:0 2px 6px rgba(0,0,0,.18);cursor:pointer;
}
.td-dealer-main{display:flex;flex-direction:column;min-width:0;}
.td-dealer-name{font-weight:700;font-size:.86rem;line-height:1.3;}
.td-dealer-addr{font-size:.76rem;margin-top:3px;line-height:1.3;}
.td-dealer-km{flex:0 0 auto;margin-left:12px;font-size:.74rem;}
.td-dealer input:checked + label{border-color:var(--td-line);box-shadow:none;}
.td-dealer input:focus-visible + label{outline:2.5px solid var(--ink);outline-offset:2px;}
.td-link{display:inline-block;margin:0 0 0 3px;padding:6px 0;font-weight:700;font-size:.78rem;text-decoration:underline;color:var(--ink);}

/* dates (flex + margins, no gap) */
.td-dates{display:flex;margin:0 -3px;}
.td-date{flex:1 1 0;min-width:0;padding:0 3px;position:relative;}
.td-date input{position:absolute;opacity:0;pointer-events:none;}
.td-date label{
  display:flex;flex-direction:column;justify-content:space-between;
  height:56px;padding:9px 8px 8px;border-radius:7px;
  background:var(--td-dark);color:#fff;box-shadow:0 2px 5px rgba(0,0,0,.3);cursor:pointer;
}
.td-date-dow{align-self:flex-end;font-size:.58rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1;}
.td-date-num{font-size:1.02rem;font-weight:700;line-height:1;}
.td-date input:checked + label{background:var(--yellow);color:var(--ink);}
.td-date input:focus-visible + label{outline:2.5px solid var(--ink);outline-offset:2px;}

/* time slots: 3 per row */
.td-slots{display:flex;flex-wrap:wrap;margin:-4px;}
.td-slot{width:33.3333%;padding:4px;position:relative;box-sizing:border-box;}
.td-slot input{position:absolute;opacity:0;pointer-events:none;}
.td-slot label{
  display:flex;align-items:center;justify-content:center;text-align:center;
  height:36px;padding:0 4px;border:1.5px solid #E1E1E1;border-radius:6px;
  background:var(--td-card);font-weight:700;font-size:.78rem;cursor:pointer;
}
.td-slot input:checked + label{background:var(--td-dark);border-color:var(--td-dark);color:#fff;}
.td-slot input:disabled + label{background:#8A8A8A;border-color:#8A8A8A;color:#EDEDED;cursor:not-allowed;}
.td-slot input:focus-visible + label{outline:2.5px solid var(--ink);outline-offset:2px;}

/* details */
.td-details{margin-top:30px;}
.td-field{margin-bottom:16px;scroll-margin-top:90px;}
.td-field label{display:block;margin:0 0 4px 4px;font-weight:700;font-size:.72rem;color:var(--td-muted);}
.td-field input{
  display:block;width:100%;height:44px;padding:0 13px;
  background:var(--td-field);border:1.5px solid #3A3A36;border-radius:5px;
  font-family:inherit;font-size:.88rem;color:var(--ink);
}
.td-field input::placeholder{color:#7B7B74;}
.td-field input:focus{outline:2.5px solid var(--ink);outline-offset:1px;}
.td-field input.is-invalid{border-color:#B3261E;}

.td-consent{display:flex;align-items:flex-start;margin-top:4px;}
.td-consent input{
  -webkit-appearance:none;appearance:none;position:relative;
  flex:0 0 18px;width:18px;height:18px;margin:1px 12px 0 0;
  background:#fff;border:1.5px solid #CFCFCF;border-radius:3px;cursor:pointer;
}
.td-consent input:checked{background:var(--ink);border-color:var(--ink);}
.td-consent input:checked::after{
  content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.td-consent input:focus-visible{outline:2.5px solid var(--ink);outline-offset:2px;}
.td-consent label{flex:1;text-align:center;font-size:.72rem;line-height:1.4;color:#6F6F68;cursor:pointer;}

.td-error{margin:6px 0 0 4px;font-size:.74rem;line-height:1.3;color:#B3261E;}
.td-error a{text-decoration:underline;}
.td-error-form{margin:18px 0 0;padding:10px 12px;background:#FBEAE8;border-radius:5px;}

.td-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}

/* submit */
.td-submit{
  display:block;width:100%;height:50px;line-height:50px;margin-top:26px;
  background:var(--yellow);color:var(--ink);border-radius:4px;
  font-weight:700;font-size:.95rem;text-align:center;cursor:pointer;
}
.td-submit:hover{filter:brightness(.97);}
.td-submit[disabled]{opacity:.6;cursor:wait;}
.td-submit:focus-visible{outline:2.5px solid var(--ink);outline-offset:3px;}
.td-note{margin-top:14px;text-align:center;font-size:.74rem;color:#6F6F68;}
.td-rule{border:0;border-top:1px solid var(--td-line);margin:26px 0 20px;}
.td-trust{list-style:none;display:flex;justify-content:space-between;margin:0;padding:0 4px;font-size:.74rem;color:var(--td-muted);}

/* success */
.td-success{margin-top:0;padding:24px 20px;background:#fff;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.1);}
.td-success:focus{outline:none;}
.td-success h2{font-family:var(--display);font-weight:800;font-size:1.3rem;}
.td-success-lead{margin-top:6px;font-size:.88rem;color:#55554F;}
.td-summary{margin:16px 0 4px;}
.td-summary > div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.08);font-size:.85rem;}
.td-summary dt{color:#6F6F68;}
.td-summary dd{margin:0 0 0 16px;font-weight:700;text-align:right;}
.td-submit-link{margin-top:20px;}

/* ============================================================
   TABLET (>=768px)
   ============================================================ */
@media (min-width:768px){
  body.td-page{--td-header-h:58px;}
  .td-main{padding-left:40px;padding-right:40px;padding-bottom:64px;}
  .td-layout{max-width:640px;}
  .td-title{font-size:1.6rem;margin-bottom:20px;}
  .td-date label{height:64px;padding:11px 10px 10px;}
  .td-date-dow{font-size:.62rem;}
  .td-date-num{font-size:1.15rem;}
  .td-slot label{height:40px;font-size:.84rem;}
  .td-field input{height:48px;font-size:.92rem;}
  .td-dealer-name{font-size:.92rem;}
  .td-dealer-addr{font-size:.8rem;}
}

/* ============================================================
   DESKTOP (>=1024px): banner + car on the left, form on the right
   ============================================================ */
@media (min-width:1024px){
  body.td-page{--td-header-h:108px;}
  .td-header .util-bar{display:block;background:transparent;}
  .td-header .util-bar a{color:var(--ink);}
  .td-header .header-actions .icon-btn{display:flex !important;border-color:rgba(0,0,0,.3);color:var(--ink);}
  .td-header .header-actions .btn-red{display:inline-flex !important;}
  .td-header .mobile-toggle{display:none !important;}
  .td-header .header-inner{max-width:var(--maxw);padding:12px 28px;}

  .td-main{padding:calc(var(--td-header-h) + 28px) 60px 80px;}
  .td-layout{display:flex;align-items:flex-start;max-width:1160px;}
  .td-intro{flex:0 0 44%;max-width:44%;padding-right:56px;position:sticky;top:calc(var(--td-header-h) + 20px);}
  .td-formcol{flex:1 1 0;min-width:0;}
  .td-title{font-size:2.1rem;margin-left:0;}
  .td-hp + .td-step{margin-top:0;}
  .td-step{scroll-margin-top:130px;}
}