.booking-section{padding-block:28px 60px;scroll-margin-top:calc(var(--header-height,76px) + 18px)}
/* The focused step must remain below the sticky masthead on document-scrolling screens. */
.booking-main>section{scroll-margin-top:12px}
.booking-progress{display:flex;align-items:center;gap:28px;list-style:none;margin:0 0 30px;padding:0;color:var(--muted);font-size:.86rem}
.booking-progress li{display:flex;align-items:center;gap:9px;white-space:nowrap}
.booking-progress li+li:before{content:'';height:1px;width:42px;background:var(--line);margin-right:17px}
.booking-progress li>span{display:grid;place-items:center;width:27px;height:27px;border:1px solid #ccd7dd;border-radius:50%;font-size:.74rem;font-weight:600}
.booking-progress li[aria-current=step]{color:var(--ink);font-weight:600}
.booking-progress li[aria-current=step]>span{background:var(--ink);color:#fff;border-color:var(--ink)}
.booking-progress li.is-done>span{background:#e8f1ed;color:#346449;border-color:#e8f1ed}
.booking-layout{display:grid;grid-template-columns:minmax(0,1fr) 295px;gap:46px;align-items:start}
.booking-main{min-width:0}
.booking-main h2{font-size:1.6rem;letter-spacing:-.025em;line-height:1.2}
.booking-purposes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:0;border:0;margin:19px 0 30px}
.booking-purposes label{position:relative;display:flex;min-width:0;cursor:pointer}
.booking-purposes input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;padding:0;pointer-events:none}
.booking-purposes label>span{display:flex;flex-direction:column;width:100%;padding:17px 14px;border:1px solid var(--line);border-radius:8px;min-height:142px;background:#fff;transition:border-color .15s,background .15s}
.booking-purposes label:hover>span{border-color:#819ba9;background:#f8fafb}
.booking-purposes input:checked+span{border:2px solid var(--ink);padding:16px 13px;background:#f3f7f8}
.booking-purposes input:focus-visible+span{outline:3px solid #2187ba;outline-offset:4px}
.booking-purposes svg{width:25px;height:25px;margin-bottom:14px;color:var(--blue)}
.booking-purposes strong{font-size:1rem;line-height:1.25}
.booking-purposes small{display:block;font-size:.75rem;line-height:1.4;color:var(--muted);margin-top:6px;font-weight:400}
.booking-date-head{display:flex;gap:12px;align-items:center;justify-content:space-between}
#booking-duration{color:var(--muted);font-size:.83rem;white-space:nowrap}
.booking-availability-status{font-size:.84rem;line-height:1.5;color:var(--muted);min-height:24px;margin-block:11px 19px}
.booking-availability-status.is-error{padding:13px 16px;background:#fff2ec;color:#7a381d;border:1px solid #f0cdbc;border-radius:6px;display:flex;gap:12px;justify-content:space-between;align-items:center}
.booking-text-button,.booking-back{border:0;background:none;color:var(--blue);padding:4px 0;text-decoration:underline;text-underline-offset:4px;font-size:.83rem}
.booking-text-button{white-space:nowrap}
.booking-calendar-layout{display:grid;grid-template-columns:minmax(260px,1fr) minmax(180px,.78fr);border:1px solid var(--line);border-radius:9px;overflow:hidden;min-height:376px}
.booking-calendar{padding:19px 23px 15px;min-width:0}
.booking-month{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px}
.booking-month h3{font-size:1rem;font-weight:600;text-transform:capitalize}
.booking-month .icon-button{min-width:32px;min-height:32px;width:32px;height:32px;border-color:transparent;border-radius:50%;font-size:1.45rem;line-height:1}
.booking-month .icon-button:not(:disabled):hover{background:var(--light)}
.booking-month .icon-button:disabled{cursor:default}
.booking-weekdays,.booking-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.booking-weekdays span{text-align:center;font-size:.7rem;color:var(--muted);padding-bottom:9px}
.booking-day{min-width:0;min-height:38px;aspect-ratio:1.06;border:1px solid transparent;background:#eff5f6;border-radius:5px;padding:4px 0;font-size:.85rem;font-weight:500;position:relative}
.booking-day:not(:disabled):hover{background:#dceaf0;border-color:#9bb7c6}
.booking-day:disabled{opacity:1;color:#aeb9c0;background:transparent;cursor:default}
.booking-day.is-today:after{content:'';width:3px;height:3px;position:absolute;bottom:4px;left:calc(50% - 1.5px);border-radius:50%;background:currentColor}
.booking-day[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:#eff5f6;color:var(--ink)}
.booking-day[aria-pressed=true]:not(:disabled):hover{background:#e2edf1}
.booking-cross{display:inline-flex;align-items:center;justify-content:center;color:#8d4b45;font-size:1.15rem;font-weight:500;line-height:1;flex:none}
.booking-day.is-occupied{background:#faf5f3;color:var(--ink)}
.booking-day .booking-cross{position:absolute;right:4px;top:3px;font-size:.9rem}
.booking-day.is-occupied[aria-pressed=true]{background:#faf5f3;border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.booking-calendar-key{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:15px;font-size:.72rem}
.booking-calendar-key .booking-cross{margin-left:8px;font-size:1rem}
.booking-calendar-key i{display:inline-block;width:10px;height:10px;border-radius:2px;background:#eff5f6;border:1px solid #d5e4e8}
.booking-times{padding:25px 20px;background:#f8fafb;border-left:1px solid var(--line)}
.booking-times h3{font-size:1rem;line-height:1.35}
.booking-times>p{font-size:.77rem;line-height:1.5;margin-top:8px;max-width:220px}
.booking-time-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:17px;max-height:none;overflow:visible;padding:4px;margin-left:-4px;margin-right:-4px;scrollbar-width:thin}
.booking-time{border:1px solid #cbd8df;background:#fff;border-radius:5px;min-height:39px;padding:6px 3px;font-size:.78rem}
.booking-time:not(:disabled):hover{border-color:var(--blue);background:#f0f6f8}
.booking-time.is-occupied{display:flex;gap:6px;align-items:center;justify-content:center;border-color:#e1d4d0;background:#faf5f3;color:#735c57;opacity:1;cursor:not-allowed}
.booking-time[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.booking-step-actions{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:23px}
.booking-step-actions>p{font-size:.84rem;max-width:240px;line-height:1.5}
.booking-step-actions .button,.booking-form>.button{gap:25px;font-size:.87rem;min-height:48px;padding:11px 18px}
.booking-step-actions .button:disabled{background:#82929c;border-color:#82929c;opacity:1;cursor:default;transform:none}
.booking-aside{background:var(--light);border-radius:9px;padding:28px;position:sticky;top:calc(var(--header-height,76px) + 22px)}
.booking-aside>.eyebrow{font-size:.66rem;margin-bottom:10px}
.booking-aside h2{font-size:1.65rem;line-height:1.15;letter-spacing:-.025em}
#booking-summary{margin:25px 0 0;font-size:.88rem}
#booking-summary>div{padding:12px 0;border-bottom:1px solid #d9e2e6}
#booking-summary dt{font-size:.71rem;color:var(--muted);margin:0 0 4px}
#booking-summary dd{margin:0;font-weight:500;line-height:1.5}
.booking-address{padding-block:23px;font-size:.86rem}
.booking-address>strong{font-weight:600}
.booking-address p{font-size:.84rem;margin-top:4px;line-height:1.6}
.booking-confirm-note{display:flex;gap:10px;align-items:start;padding:15px 0;border-top:1px solid #d9e2e6;font-size:.77rem;line-height:1.5}
.booking-confirm-note svg{flex:none;width:21px;height:21px;color:var(--blue)}
.booking-phone{display:block;border-top:1px solid #d9e2e6;padding-top:17px;font-size:.76rem;color:var(--muted)}
.booking-phone strong{display:block;font-size:1.1rem;color:var(--ink);margin-top:2px}
.booking-back{margin-bottom:21px}
.booking-form-intro{font-size:.94rem;margin-top:13px;max-width:580px;line-height:1.6}
.booking-form{display:grid;gap:21px;margin-top:25px}
.booking-field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.booking-form label{font-size:.84rem}
.booking-form label small{font-weight:400;color:var(--muted);font-size:.76rem}
.booking-form input,.booking-form textarea{margin-top:7px}
.booking-form>.button{justify-self:start}
.booking-fine{font-size:.77rem;line-height:1.6}
.booking-form-error{padding:14px 17px;border:1px solid #f0cdbc;border-radius:6px;background:#fff2ec;color:#7a381d;font-size:.88rem}
.booking-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.booking-section.is-complete .booking-aside{display:none}
.booking-section.is-complete .booking-layout{grid-template-columns:minmax(0,780px);justify-content:center}
.booking-section.is-complete .booking-progress{justify-content:center}
@media(max-width:1100px){.booking-layout{grid-template-columns:minmax(0,1fr) 260px;gap:26px}.booking-aside{padding:23px}.booking-purposes{gap:9px}.booking-purposes label>span{padding:15px 10px}.booking-purposes input:checked+span{padding:14px 9px}.booking-calendar{padding:18px 14px 14px}.booking-calendar-layout{grid-template-columns:minmax(240px,1fr) minmax(160px,.7fr)}.booking-times{padding:23px 14px}.booking-time-options{grid-template-columns:repeat(2,minmax(0,1fr))}.booking-purposes strong{font-size:.93rem}.booking-purposes small{font-size:.7rem}}
@media(max-width:900px){.booking-layout{grid-template-columns:minmax(0,1fr)}.booking-aside{position:static;display:grid;grid-template-columns:1fr 1fr;column-gap:25px}.booking-aside>.eyebrow,.booking-aside>h2{grid-column:1}.booking-aside #booking-summary{grid-column:2;grid-row:1/5;margin:0}.booking-aside .booking-confirm-note{grid-column:1/-1}.booking-phone{grid-column:1/-1}.booking-calendar-layout{grid-template-columns:minmax(260px,1fr) minmax(210px,.85fr)}.booking-calendar{padding:21px 25px 15px}.booking-time-options{grid-template-columns:repeat(3,minmax(0,1fr))}.booking-purposes label>span{padding:18px 16px}.booking-purposes input:checked+span{padding:17px 15px}.booking-purposes small{font-size:.76rem}}
@media(max-width:600px){.booking-section{padding-block:22px 42px}.booking-progress{gap:0;justify-content:space-between;margin-bottom:27px;font-size:.67rem}.booking-progress li{gap:5px}.booking-progress li+li:before{display:none}.booking-progress li>span{width:22px;height:22px;font-size:.66rem}.booking-section.is-complete .booking-progress{justify-content:space-between}.booking-main h2{font-size:1.4rem}.booking-purposes{grid-template-columns:1fr 1fr;gap:9px;margin:16px 0 25px}.booking-purposes label>span{min-height:104px;padding:13px;display:grid;grid-template-columns:23px minmax(0,1fr);align-content:start;column-gap:9px}.booking-purposes input:checked+span{padding:12px}.booking-purposes svg{width:23px;height:23px;margin:0;grid-row:1/3}.booking-purposes strong{font-size:.93rem;margin-top:2px}.booking-purposes small{font-size:.71rem;grid-column:2;line-height:1.35;margin-top:6px}.booking-date-head h2{font-size:1.3rem}#booking-duration{font-size:.74rem}.booking-availability-status{font-size:.77rem;margin-bottom:16px}.booking-availability-status.is-error{display:block}.booking-availability-status.is-error button{display:block;margin-top:7px}.booking-calendar-layout{grid-template-columns:1fr;min-height:0}.booking-calendar{padding:18px 23px 15px}.booking-month{margin-bottom:13px}.booking-day{min-height:38px;aspect-ratio:1.2}.booking-times{border-left:0;border-top:1px solid var(--line);padding:19px 22px}.booking-times>p{max-width:none}.booking-time-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-height:none;margin-top:12px}.booking-time{min-height:42px}.booking-step-actions{flex-direction:column;align-items:stretch;gap:14px;margin-top:18px}.booking-step-actions>p{max-width:none;text-align:center;font-size:.81rem}.booking-step-actions .button{width:100%;min-height:48px}.booking-field-row{grid-template-columns:1fr;gap:19px}.booking-form{gap:19px;margin-top:21px}.booking-form>.button{width:100%}.booking-form-intro{font-size:.87rem}.booking-aside{padding:22px;column-gap:18px}.booking-aside h2{font-size:1.4rem}.booking-address{padding-top:17px;padding-bottom:16px;font-size:.8rem}#booking-summary{font-size:.79rem}#booking-summary>div{padding-block:8px}.booking-confirm-note{margin-top:8px}.booking-back{margin-bottom:19px}}
@media(max-width:359px){.booking-progress{font-size:.59rem}.booking-progress li{gap:4px}.booking-progress li>span{width:20px;height:20px}.booking-purposes label>span{padding:11px;grid-template-columns:20px minmax(0,1fr);gap:7px}.booking-purposes input:checked+span{padding:10px}.booking-purposes small{font-size:.65rem}.booking-calendar{padding-inline:15px}.booking-times{padding-inline:15px}.booking-time-options{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Vehicle intake follows the shared AutoKern number-plate treatment. */
.booking-progress{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.booking-section.has-vehicle-step .booking-progress{grid-template-columns:repeat(6,minmax(0,1fr))}
.booking-progress li[hidden]{display:none}
.booking-progress li{white-space:normal;line-height:1.35;min-width:0}
.booking-progress li>span{flex:none}
.booking-progress li+li:before{display:none}
.booking-step-kicker{font-size:.67rem;margin-bottom:12px;color:var(--blue)}
.booking-vehicle-form{margin-top:28px}
.booking-vehicle-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.booking-vehicle-fields>label{font-size:.85rem;font-weight:600;min-width:0}
.booking-plate{display:flex;width:100%;height:58px;min-height:58px;min-width:0;overflow:hidden;border:2px solid #262724;border-radius:5px;background:#f6cd48;box-shadow:inset 0 0 0 2px #f6cd48;margin-top:9px}
.booking-plate-country{flex:0 0 30px;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#123c83;border:2px solid #f6cd48;color:white;font:700 10px/1.5 Arial,sans-serif}
.booking-plate-country>span{color:#ffd650;font-size:13px}
.booking-plate input{appearance:none;border:0;border-radius:0;flex:1;width:100%;min-width:0;min-height:0;padding:8px;outline-offset:-4px;background:transparent;color:#202220;font:700 26px/1.2 Arial,Helvetica,sans-serif;letter-spacing:2px;text-transform:uppercase;text-align:center}
.booking-plate input::placeholder{color:#87752f;opacity:1}
.booking-odometer{display:flex;align-items:center;gap:10px;height:58px;margin-top:9px;border:1px solid #bbcbd3;border-radius:5px;background:white;padding-right:17px}
.booking-odometer input{border:0;min-width:0;min-height:0;height:100%;background:transparent;font-size:1.1rem;font-weight:500;padding-inline:17px;outline-offset:-4px}
.booking-odometer>span{font-size:.9rem;color:var(--muted);font-weight:400}
.booking-lookup-row{display:flex;align-items:start;justify-content:space-between;gap:18px;margin-top:15px;min-height:35px}
.booking-lookup-row>p{font-size:.8rem;line-height:1.5;max-width:470px}
.booking-lookup-row .is-error{color:#8d3f2b}
.booking-lookup-row .booking-text-button{padding:0;font-size:.78rem;flex:none}
.booking-vehicle-card{margin-top:24px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#f8fafb}
.booking-vehicle-card-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 22px;border-bottom:1px solid var(--line)}
.booking-vehicle-card-head h3{font-size:1rem;letter-spacing:-.015em}
.booking-vehicle-card-head>span{font-size:.68rem;letter-spacing:.04em;color:var(--muted)}
.booking-car-facts{display:grid;grid-template-columns:1fr 1fr;margin:0;padding:7px 22px}
.booking-car-facts>div{min-width:0;padding:20px 0}
.booking-car-facts>div:nth-child(odd){padding-right:20px}
.booking-car-facts>div:nth-child(n+3){border-top:1px solid var(--line)}
.booking-car-facts dt{font-size:.72rem;color:var(--muted);margin-bottom:7px}
.booking-car-facts dd{margin:0;font-size:1.06rem;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.booking-car-facts:not(.is-filled) dd{color:#9badb8}
.booking-apk{padding:10px 16px;border-top:1px solid var(--line)}
.booking-apk dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0}
.booking-apk dt{font-size:.72rem;color:var(--muted);margin-bottom:3px}
.booking-apk dd{margin:0;font-size:.96rem;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.booking-apk p{margin:8px 0 0;font-size:.78rem;line-height:1.45}
.booking-apk.is-expiring{background:#fff6df;color:#79500b}
.booking-apk.is-expired{background:#fff0ee;color:#9b3024}
.booking-apk.is-expiring dt,.booking-apk.is-expired dt{color:inherit}
@media(max-width:600px){.booking-apk{padding:8px 12px}.booking-apk dl{grid-template-columns:repeat(2,minmax(0,1fr))}.booking-apk dt{font-size:.68rem}.booking-apk dd{font-size:.87rem}}
@media(max-width:600px){.booking-progress{gap:8px}.booking-progress li{flex-direction:column;gap:6px;text-align:center;font-size:.72rem}.booking-vehicle-fields{gap:19px;grid-template-columns:1fr}.booking-vehicle-form{margin-top:22px}.booking-lookup-row{flex-direction:column;gap:10px}.booking-vehicle-card{margin-top:21px}.booking-vehicle-card-head{padding:17px;align-items:start}.booking-vehicle-card-head h3{font-size:.93rem}.booking-vehicle-card-head>span{font-size:.61rem;white-space:nowrap}.booking-car-facts{padding-inline:17px}.booking-car-facts dd{font-size:.96rem}.booking-car-facts>div{padding-block:17px}.booking-car-facts dt{font-size:.68rem}.booking-vehicle-form .booking-step-actions>p{text-align:left}.booking-step-kicker{font-size:.63rem}}
/* Compact appointment intake; eight RDW facts remain readable without a tall card. */
.booking-intro{padding:16px 0}
.booking-intro .breadcrumbs{margin-bottom:8px}
.booking-intro .eyebrow{display:none}
.booking-intro h1{font-size:clamp(1.8rem,2.6vw,2.2rem)}
.booking-intro p{margin-top:7px;font-size:.9rem}
.booking-section{padding-block:18px 30px}
.booking-progress{margin-bottom:18px}
.booking-layout{gap:28px}
#booking-vehicle .booking-step-kicker{margin-bottom:6px}
#booking-vehicle .booking-form-intro{margin-top:7px}
.booking-vehicle-form{margin-top:15px}
.booking-plate,.booking-odometer{height:48px;min-height:48px;margin-top:5px}
.booking-plate input{font-size:23px}
.booking-lookup-row{margin-top:8px;min-height:24px;gap:12px}
.booking-vehicle-card{margin-top:10px}
.booking-vehicle-card-head{padding:11px 16px}
.booking-car-facts{grid-template-columns:repeat(4,minmax(0,1fr));padding:0 16px;column-gap:16px}
.booking-car-facts>div,.booking-car-facts>div:nth-child(odd){padding:10px 0}
.booking-car-facts>div:nth-child(n+3){border-top:0}
.booking-car-facts>div:nth-child(n+5){border-top:1px solid var(--line)}
.booking-car-facts dt{margin-bottom:3px}
.booking-car-facts dd{font-size:.96rem}
#booking-vehicle .booking-step-actions{margin-top:14px}
#booking-vehicle .booking-step-actions>p{max-width:360px}
.booking-aside{padding:20px}
.booking-aside h2{font-size:1.4rem}
#booking-summary{margin-top:14px}
#booking-summary>div{padding-block:8px}
.booking-address{padding-block:12px}
.booking-confirm-note{padding-block:10px}
.booking-phone{padding-top:10px}
/* Availability is conveyed by color, the legend and the exact accessible count. */
.booking-day[data-availability=low]{--day-bg:#fbe3df;--day-border:#d99387;--day-ink:#79352b}
.booking-day[data-availability=medium]{--day-bg:#fff0ce;--day-border:#d7b35d;--day-ink:#745015}
.booking-day[data-availability=high]{--day-bg:#dff1e3;--day-border:#8ab997;--day-ink:#28583a}
.booking-day[data-availability]{background:var(--day-bg);border-color:var(--day-border);color:var(--day-ink)}
.booking-day[data-availability]:not(:disabled):hover{background:var(--day-bg);border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.booking-day[data-availability][aria-pressed=true]{background:var(--day-bg);border-color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.booking-calendar-key{gap:6px 13px}
.booking-calendar-key>span{display:inline-flex;align-items:center;gap:5px}
.booking-calendar-key .availability-low{background:#fbe3df;border-color:#d99387}
.booking-calendar-key .availability-medium{background:#fff0ce;border-color:#d7b35d}
.booking-calendar-key .availability-high{background:#dff1e3;border-color:#8ab997}
.booking-calendar-key .booking-cross{margin-left:0}
@media(max-width:600px){
 .booking-intro{padding-block:12px}
 .booking-intro h1{font-size:1.6rem}
 .booking-intro p{font-size:.8rem;line-height:1.45}
 .booking-section{padding-top:14px}
 .booking-progress{margin-bottom:14px}
 .booking-progress li{font-size:.66rem;gap:4px}
 #booking-vehicle .booking-step-kicker{display:none}
 #booking-vehicle .booking-form-intro{font-size:.8rem}
 .booking-vehicle-fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
 .booking-vehicle-fields>label{font-size:.75rem}
 .booking-plate input{font-size:17px;letter-spacing:1px;padding-inline:3px}
 .booking-plate-country{flex-basis:23px}
 .booking-odometer{padding-right:8px;gap:3px}
 .booking-odometer input{font-size:1rem;padding-inline:8px}
 .booking-odometer>span{font-size:.75rem}
 .booking-lookup-row{flex-direction:row;align-items:center}
 .booking-lookup-row>p{font-size:.71rem}
 .booking-lookup-row .booking-text-button{font-size:.7rem;min-height:44px}
 .booking-vehicle-card-head{padding:10px 12px}
 .booking-car-facts{grid-template-columns:repeat(2,minmax(0,1fr));padding-inline:12px;column-gap:12px}
 .booking-car-facts>div,.booking-car-facts>div:nth-child(odd){padding-block:7px}
 .booking-car-facts>div:nth-child(n+3){border-top:1px solid var(--line)}
 .booking-car-facts dt{font-size:.68rem;margin-bottom:1px}
 .booking-car-facts dd{font-size:.87rem}
 #booking-vehicle .booking-step-actions{gap:8px;margin-top:12px}
 #booking-vehicle .booking-step-actions>p{font-size:.73rem;max-width:none}
}
/* Keep the complete first step within a normal laptop viewport. */
.booking-intro{padding-block:12px}
.booking-intro p{display:none}
.booking-intro h1{font-size:clamp(1.6rem,2.4vw,2rem)}
.booking-intro .breadcrumbs{margin-bottom:6px}
@media(min-width:901px){
 .booking-section #booking-summary{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
 .booking-section #booking-summary>div{padding-block:7px}
 .booking-section #booking-summary dd{font-size:.82rem}
 .booking-purposes{margin:12px 0 18px}
 .booking-purposes label>span{min-height:94px;padding:12px;display:grid;grid-template-columns:24px 1fr;align-content:start;column-gap:8px}
 .booking-purposes input:checked+span{padding:11px}
 .booking-purposes svg{width:24px;height:24px;grid-row:1/3;margin-bottom:0}
 .booking-purposes small{grid-column:2}
 .booking-back{margin-bottom:12px}
 .booking-calendar-layout{min-height:0}
 .booking-day{aspect-ratio:auto;height:38px}
 .booking-availability-status{margin-block:8px 12px}
}

/* Keep the appointment content compact; the footer uses the shared site styles. */
@media(min-width:901px){
 body:has(#booking-app) .header-inner{min-height:60px}
 body:has(#booking-app) .header .brand img{width:170px}
 .booking-intro{padding-block:8px}
 .booking-intro h1{font-size:1.7rem}
 .booking-section{padding-block:12px}
 .booking-progress{margin-bottom:10px}
 #booking-vehicle .booking-step-kicker{display:none}
 #booking-vehicle h2{font-size:1.4rem}
 #booking-vehicle .booking-form-intro{font-size:.85rem;margin-top:4px;line-height:1.5}
 .booking-vehicle-form{margin-top:10px}
 .booking-plate,.booking-odometer{height:44px;min-height:44px}
 .booking-lookup-row{margin-top:4px}
 .booking-vehicle-card{margin-top:6px}
 .booking-vehicle-card-head{padding-block:6px}
 .booking-car-facts>div,.booking-car-facts>div:nth-child(odd){padding-block:6px}
 #booking-vehicle .booking-step-actions{margin-top:10px}
 #booking-vehicle .booking-step-actions .button{min-height:44px;padding-block:9px}
 .booking-section .booking-aside{padding:16px}
 .booking-section .booking-aside>.eyebrow{margin-bottom:5px}
 .booking-section #booking-summary{margin-top:8px}
 .booking-section #booking-summary>div{padding-block:5px}
 .booking-section .booking-address{padding-block:8px}
 .booking-section .booking-confirm-note{padding-block:8px}
 .booking-section .booking-phone{padding-top:8px}
 .booking-section .booking-aside{padding:12px 16px}
 .booking-section .booking-aside>.eyebrow{display:none}
 .booking-section .booking-aside h2{font-size:1.2rem}
 .booking-section #booking-summary{margin-top:6px}
 .booking-section #booking-summary>div{padding-block:3px}
 .booking-section .booking-address{font-size:.8rem;padding-block:6px}
 .booking-section .booking-address p{font-size:.75rem;line-height:1.4}
 .booking-section .booking-confirm-note{font-size:.72rem;padding-block:6px}
 .booking-section .booking-phone{font-size:.72rem;padding-top:6px}
 .booking-section .booking-phone strong{display:inline-block;font-size:.95rem;margin:0 0 0 8px}
}
@media(min-width:1200px){
 #booking-vehicle{position:relative}
 #booking-vehicle>.booking-back{position:absolute;top:0;right:0;margin:0}
 #booking-vehicle h2{padding-right:210px}
 .booking-car-facts{grid-template-columns:repeat(8,minmax(0,1fr));column-gap:10px}
 .booking-car-facts>div:nth-child(n+5){border-top:0}
 .booking-car-facts dt{font-size:.67rem}
}

/* Short intake steps set their own height; the visit summary starts at the calendar. */
.booking-section.is-intake{padding-block:18px 24px}
.booking-section.is-intake .booking-layout{grid-template-columns:minmax(0,1fr);gap:0}
.booking-section.is-intake .booking-aside{display:none}
.booking-section.is-intake .booking-main{width:100%;max-width:980px;margin-inline:auto}
.booking-section.is-intake .booking-progress{width:100%;max-width:980px;margin:0 auto 22px}
.booking-section.is-intake .booking-step-actions{margin-top:20px}
@media(max-width:600px){
 .booking-section.is-intake{padding-block:14px 20px}
 .booking-section.is-intake .booking-progress{margin-bottom:18px}
 .booking-section.is-intake .booking-step-actions{margin-top:16px}
}

/* Workshop selection: illustrations remain lightweight and sharp on every screen. */
.booking-progress{column-gap:14px;row-gap:12px}
.booking-services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;border:0;padding:0;margin:22px 0 0;align-items:start;min-width:0}
.booking-service-card{border:1px solid #d4dfe4;border-radius:12px;overflow:hidden;background:white;transition:border-color .15s,box-shadow .15s;min-width:0}
.booking-service-card:hover{border-color:#789aaa}
.booking-service-card.is-selected{border-color:#245b75;box-shadow:0 0 0 1px #245b75}
.booking-service-choice{display:block;position:relative;cursor:pointer}
.booking-service-choice input{position:absolute;top:14px;right:14px;width:24px;height:24px;min-height:0;margin:0;opacity:0}
.booking-service-choice:has(input:focus-visible){outline:3px solid #2187ba;outline-offset:-4px;border-radius:10px}
.booking-service-visual{display:block;position:relative}
.booking-service-visual img{display:block;width:100%;height:118px;object-fit:contain;background:#e5eef1}
.booking-service-tick{position:absolute;right:12px;top:12px;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;border:1px solid #8ba4b1;background:white;color:transparent;font-size:15px}
.booking-service-choice input:checked+.booking-service-visual .booking-service-tick{background:#245b75;border-color:#245b75;color:white}
.booking-service-copy{display:grid;gap:5px;padding:14px 16px 16px}
.booking-service-copy strong{font-size:1rem;font-weight:600;line-height:1.25}
.booking-service-copy>span{font-size:.78rem;line-height:1.45;color:var(--muted)}
.booking-service-extra{padding:0 16px 16px}
.booking-service-extra label{display:block;font-size:.76rem;line-height:1.5}
.booking-service-extra small{color:var(--muted);font-size:.7rem;font-weight:400}
.booking-service-extra textarea{display:block;box-sizing:border-box;width:100%;margin-top:7px;min-height:90px;resize:vertical;font-size:.82rem;line-height:1.5;padding:10px;border-radius:6px}
#booking-summary-services{overflow-wrap:anywhere}
#booking-services .booking-step-actions>p{max-width:450px}
@media(max-width:650px){.booking-services-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.booking-service-visual img{height:95px}.booking-service-copy{padding:12px;min-height:95px}.booking-service-copy strong{font-size:.93rem}.booking-service-extra{padding:0 12px 12px}.booking-service-tick{right:8px;top:8px}.booking-progress{gap:10px}.booking-progress li+li:before{display:none}}
@media(max-width:370px){.booking-services-grid{grid-template-columns:minmax(0,1fr)}.booking-service-visual img{height:125px}.booking-service-copy{min-height:0}}

/* Equal columns, centered labels and a continuous visual path through the steps. */
.booking-section .booking-progress{width:100%;max-width:980px;margin-inline:auto;gap:0;align-items:start}
.booking-section .booking-progress li{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:9px;min-height:66px;padding:0 6px;text-align:center;font-size:.8rem;line-height:1.4}
.booking-section .booking-progress li[hidden]{display:none}
.booking-section .booking-progress li>span{position:relative;display:grid;place-items:center;width:32px;height:32px;background:#fff;font-size:.75rem;line-height:1;margin:0;border-radius:50%}
.booking-section .booking-progress li+li:before{content:'';display:block;position:absolute;z-index:-1;top:15px;left:calc(-50% + 22px);width:calc(100% - 44px);height:1px;margin:0;background:var(--line)}
.booking-section .booking-progress li.is-done>span{background:#e8f1ed;color:#346449;border-color:#e8f1ed}
.booking-section .booking-progress li[aria-current=step]>span{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 0 0 4px #f0f4f6}
@media(max-width:600px){
 .booking-section.has-vehicle-step .booking-progress{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:15px}
 .booking-section .booking-progress li{min-height:60px;padding-inline:3px;gap:7px;font-size:.71rem}
 .booking-section .booking-progress li>span{width:28px;height:28px;font-size:.7rem}
 .booking-section .booking-progress li+li:before{top:13px;left:calc(-50% + 19px);width:calc(100% - 38px)}
 .booking-section.has-vehicle-step .booking-progress li[data-step=choose]:before{display:none}
}

/* A compact booking shell: the footer stays put; long forms scroll in their panel.
   Text sizes and all copy are preserved. */
body:has(> #main[data-rendered=booking]){display:flex;flex-direction:column;height:100vh;height:100dvh;min-height:0;overflow:hidden}
body:has(> #main[data-rendered=booking])>main{display:flex;flex-direction:column;flex:1 1 0;min-height:0;overflow:hidden}
.booking-intro{flex-shrink:0;padding-block:4px}
.booking-intro .breadcrumbs{margin-bottom:2px}
.booking-section,.booking-section.is-intake{display:flex;flex-direction:column;flex:1 1 0;min-height:0;padding-block:8px}
.booking-section .booking-progress,.booking-section.is-intake .booking-progress{flex-shrink:0;margin-bottom:8px}
.booking-section .booking-progress li{min-height:56px;gap:5px}
.booking-section .booking-layout{flex:1 1 0;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scroll-padding:8px;padding:4px 5px 4px 0}
.booking-section .booking-aside{position:static}
.booking-back{margin-bottom:8px}
.booking-step-kicker{margin-bottom:4px}
.booking-form-intro{margin-top:6px}
.booking-section .booking-step-actions,.booking-section.is-intake .booking-step-actions{margin-top:10px;gap:10px}
.booking-services-grid{margin-top:12px;gap:10px}
.booking-service-choice{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;min-height:96px}
.booking-service-visual img{width:76px;height:76px;object-fit:cover}
.booking-service-tick{top:3px;right:3px;width:22px;height:22px}
.booking-service-copy{padding:10px;gap:4px;min-height:0}
.booking-service-extra{padding:0 10px 10px}
.booking-service-extra textarea{min-height:72px;height:72px;margin-top:4px}
.booking-form{gap:12px;margin-top:12px}
.booking-field-row{gap:12px}
.booking-form textarea{height:76px;min-height:76px}
.booking-calendar{padding-block:12px}
.booking-month{margin-bottom:8px}
.booking-calendar-key{margin-top:8px}
.booking-times{padding-block:14px}
@media(max-width:600px){
 .booking-section.has-vehicle-step .booking-progress{row-gap:4px}
 .booking-section .booking-progress li{min-height:48px;gap:3px}
 .booking-service-choice{grid-template-columns:54px minmax(0,1fr);min-height:102px}
 .booking-service-visual img{width:54px;height:64px}
 .booking-service-copy{padding:8px}
 .booking-service-tick{right:1px;top:1px}
 .booking-step-actions>p{margin:0}
 .booking-section .booking-step-actions{gap:6px}
 .booking-form{gap:10px}
}

@media(min-width:901px){
 #booking-services{position:relative}
 #booking-services>.booking-back{position:absolute;top:0;right:0;margin:0}
 #booking-services .booking-form-intro{max-width:none}
}

@media(min-width:901px){
 #booking-details{position:relative}
 #booking-details>.booking-back{position:absolute;right:0;top:0;margin:0}
 #booking-details h2{padding-right:220px}
 .booking-form{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
 .booking-form .booking-field-row{display:contents}
 .booking-form>label{grid-column:1/3}
 .booking-form>.booking-fine{grid-column:3;grid-row:2}
 .booking-form>.button{grid-column:1/3}
 .booking-form>.booking-form-error{grid-column:1/-1}
 .booking-form textarea{height:100px;min-height:100px}
 .booking-section.is-complete .booking-layout{grid-template-columns:minmax(0,980px)}
 .booking-section .ticket-receipt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:10px 24px;max-width:none;padding:16px}
 .booking-section .ticket-receipt-check{margin-bottom:0}
 .booking-section .ticket-receipt>.eyebrow,.booking-section .ticket-receipt>h2,.booking-section .ticket-receipt>p,.booking-section .ticket-receipt-details,.booking-section .ticket-receipt>.button{grid-column:1;margin:0}
 .booking-section .ticket-receipt-details{padding-block:8px}
 .booking-section .ticket-receipt-save{grid-column:2;grid-row:1/7;margin:0;padding:14px}
 .booking-section .ticket-receipt>.button{justify-self:start;align-self:start}
}

@media(min-width:901px){
 #booking-choose{position:relative}
 #booking-choose>.booking-back{position:absolute;top:0;right:0;margin:0}
 .booking-calendar .booking-day{height:32px;min-height:32px}
}

.booking-times{display:flex;flex-direction:column}
.booking-times .booking-step-actions{flex-direction:column;align-items:stretch;margin-top:auto;padding-top:12px}
.booking-times .booking-step-actions>p{max-width:none}
@media(min-width:901px){
 .booking-time-options{max-height:100px;overflow:auto;scrollbar-gutter:stable}
 .booking-times .booking-step-actions .button{width:100%;gap:10px}
}

@media(min-width:901px) and (max-height:800px){
 /* Short laptops use space beside the heading, without reducing type sizes. */
 .booking-intro .wrap{display:flex;align-items:baseline;gap:18px}
 .booking-intro .breadcrumbs{margin:0;flex:none}
 .booking-section .booking-progress,.booking-section.is-intake .booking-progress{margin-bottom:4px}
 .booking-section .booking-progress li{min-height:52px;gap:3px}
 .booking-services-grid{margin-top:8px;gap:8px}
 .booking-service-choice{min-height:86px}
 .booking-section .booking-step-actions,.booking-section.is-intake .booking-step-actions{margin-top:8px}
 .booking-section .booking-aside{padding:10px 12px}
 .booking-section #booking-summary{gap:0 10px}
 .booking-section .booking-address,.booking-section .booking-confirm-note,.booking-section .booking-phone{padding-block:4px}
 .booking-form{gap:8px;margin-top:8px}
 .booking-form textarea{height:82px;min-height:82px}
 .booking-section .ticket-receipt{padding:12px;gap:6px 20px}
 .booking-section .ticket-receipt-save{padding:10px}
 .booking-section .ticket-receipt-details{padding-block:6px}
}
.booking-stock{margin-top:16px;max-width:none}
.booking-stock>label{display:block;font-weight:700;margin-bottom:8px}
.booking-stock>input{width:100%;min-height:46px;border:1px solid var(--line);border-radius:6px;padding:10px 14px;font:inherit;background:#fff;color:var(--ink)}
.booking-stock>p{margin:8px 0;font-size:.875rem}
.booking-stock-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:8px;max-height:320px;overflow:auto;padding:3px}
.booking-stock-option{display:flex;flex-direction:column;gap:4px;text-align:left;min-height:64px;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);font:inherit;cursor:pointer}
.booking-stock-option span{font-size:.8rem;overflow-wrap:anywhere}
.booking-stock-option[aria-pressed=true]{border-color:#286786;background:#edf5f8;box-shadow:inset 0 0 0 1px #286786}
.booking-stock-option:focus-visible,.booking-stock>input:focus-visible{outline:2px solid #286786;outline-offset:2px}
@media(max-width:600px){.booking-stock-results{grid-template-columns:1fr;max-height:230px}}
@media(min-width:901px){
 .has-stock-choice.is-intake .booking-layout{align-items:stretch}
 .has-stock-choice.is-intake .booking-main{display:flex;flex-direction:column;min-height:0}
 .has-stock-choice #booking-purpose:not([hidden]){display:flex;flex:1;flex-direction:column;min-height:0}
 .has-stock-choice #booking-purpose>.booking-step-kicker{display:none}
 .has-stock-choice #booking-purpose>h2,.has-stock-choice #booking-purpose>.booking-form-intro,.has-stock-choice .booking-purposes,.has-stock-choice #booking-purpose>.booking-step-actions{flex-shrink:0}
 .has-stock-choice .booking-purposes{grid-template-columns:repeat(4,minmax(0,1fr));margin:12px 0 16px}
 .has-stock-choice .booking-stock{display:flex;flex:1;flex-direction:column;min-height:194px;margin:0}
 .has-stock-choice .booking-stock>label,.has-stock-choice .booking-stock>input,.has-stock-choice .booking-stock>p{flex-shrink:0}
 .has-stock-choice .booking-stock-results{flex:1;min-height:76px;max-height:none}
 .has-stock-choice #booking-purpose>.booking-step-actions{margin-top:12px;padding-bottom:4px}
 .has-stock-choice #booking-purpose>.booking-step-actions>p{max-width:none}
}
@media(min-width:901px) and (max-height:850px){
 body:has(#booking-app.has-stock-choice.is-intake #booking-purpose:not([hidden])){height:auto;min-height:100dvh;overflow:visible}
 body:has(#booking-app.has-stock-choice.is-intake #booking-purpose:not([hidden]))>main{flex:1 0 auto;overflow:visible}
 .has-stock-choice.is-intake:has(#booking-purpose:not([hidden])){flex:0 0 auto}
 .has-stock-choice.is-intake:has(#booking-purpose:not([hidden])) .booking-layout{overflow:visible;flex:none}
 .has-stock-choice .booking-purposes{margin:8px 0 10px}
 .has-stock-choice .booking-stock>label{margin-bottom:4px}
 .has-stock-choice .booking-stock>p{margin:4px 0}
 .has-stock-choice .booking-stock-results{flex:none;max-height:160px;min-height:76px}
 .has-stock-choice #booking-purpose>.booking-step-actions{margin-top:8px}
 body:has(#booking-choose:not([hidden])){height:auto;min-height:100dvh;overflow:visible}
 body:has(#booking-choose:not([hidden]))>main{flex:1 0 auto;overflow:visible}
 .booking-section:has(#booking-choose:not([hidden])){flex:0 0 auto}
 .booking-section:has(#booking-choose:not([hidden])) .booking-layout{overflow:visible;flex:none}
 .booking-section #booking-choose .booking-calendar-layout{flex:none;height:360px}
}
@media(min-width:901px){
 .booking-section:has(#booking-choose:not([hidden])) .booking-layout{align-items:stretch}
 .booking-section:has(#booking-choose:not([hidden])) .booking-main{display:flex;flex-direction:column;min-height:0}
 #booking-choose:not([hidden]){display:flex;flex:1;flex-direction:column;min-height:0}
 #booking-choose>.booking-step-kicker,#booking-choose>.booking-date-head,#booking-choose>.booking-availability-status{flex-shrink:0}
 #booking-choose .booking-calendar-layout{flex:1;min-height:360px}
 #booking-choose .booking-calendar{display:flex;flex-direction:column;min-height:0}
 #booking-choose .booking-month,#booking-choose .booking-weekdays,#booking-choose .booking-calendar-key{flex-shrink:0}
 #booking-choose .booking-days{flex:1;grid-auto-rows:minmax(32px,1fr)}
 #booking-choose .booking-day{height:auto;min-height:32px}
 #booking-choose .booking-times{min-height:0}
 #booking-choose .booking-times>h3,#booking-choose .booking-times>p,#booking-choose .booking-step-actions{flex-shrink:0}
 #booking-choose .booking-time-options{flex:1;min-height:120px;max-height:none;grid-auto-rows:minmax(48px,auto);align-content:start}
 #booking-choose .booking-step-actions{margin-top:12px}
 .booking-section:has(#booking-choose:not([hidden])) .booking-aside{align-self:start}
}
/* Preserve the full original footer; save space in the header and vehicle form. */
body:has(> #main[data-rendered=booking])>.topbar,body:has(> #main[data-rendered=booking])>.header,body:has(> #main[data-rendered=booking])>footer{flex-shrink:0}
body:has(#booking-app) .header-inner{min-height:52px}
body:has(#booking-app) .header .brand{padding:5px 10px}
body:has(#booking-app) .header .brand img{width:150px;height:auto;object-fit:contain}
@media(min-width:1200px){
 .booking-vehicle-form{display:grid;grid-template-columns:440px minmax(0,1fr);gap:8px 22px}
 .booking-vehicle-fields{grid-column:1;grid-row:1;gap:12px;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
 .booking-lookup-row{grid-column:1;grid-row:2;margin:0;align-self:start}
 .booking-vehicle-card{grid-column:2;grid-row:1/3;margin:0}
 .booking-car-facts{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:12px}
 .booking-car-facts>div:nth-child(n+5){border-top:1px solid var(--line)}
 #booking-vehicle .booking-step-actions{grid-column:1/-1;margin-top:4px}
}
@media(min-width:901px) and (max-height:800px){
 .booking-section .booking-progress li{min-height:50px}
 .booking-availability-status{margin-block:4px 6px}
 .booking-calendar{padding-block:8px}
 .booking-calendar-key{margin-top:4px}
 .booking-calendar .booking-day{height:30px;min-height:30px}
 .booking-section .booking-aside{padding-block:8px}
}
@media(max-width:900px){
 /* Keep the original full footer and readable content on narrow displays. */
 body:has(> #main[data-rendered=booking]){height:auto;min-height:100dvh;overflow:visible}
 body:has(> #main[data-rendered=booking])>main{flex:1 0 auto;overflow:visible}
 .booking-section,.booking-section.is-intake{flex:0 0 auto;display:block}
 .booking-section .booking-layout{overflow:visible;scrollbar-gutter:auto;flex:none}
}

/* Mobile booking: comfortable touch targets without a second scrolling panel. */
@media(max-width:900px){
 .booking-main input:not([type=checkbox]):not([type=radio]),.booking-main select,.booking-main textarea{font-size:16px;min-height:48px}
 .booking-main .booking-back,.booking-main .booking-text-button{min-height:44px;font-size:.9rem}
 .booking-month .icon-button{width:44px;height:44px;min-width:44px;min-height:44px}
 .booking-calendar .booking-day{min-height:44px;height:44px;font-size:.9rem;aspect-ratio:auto}
 .booking-time-options .booking-time{min-height:48px;font-size:.9rem}
 .booking-availability-status,.booking-times>p,.booking-step-actions>p{font-size:.875rem}
 .booking-calendar-key,.booking-weekdays span{font-size:.8rem}
 .booking-calendar{padding-inline:12px}
 .booking-days,.booking-weekdays{gap:4px}
 .booking-purposes small{font-size:.8125rem;line-height:1.45}
 .booking-progress{font-size:.8rem}
 .booking-stock-option{min-height:48px}
}
@media(max-width:359px){
 .booking-calendar{padding-inline:6px}
 .booking-days,.booking-weekdays{gap:3px}
 .booking-day .booking-cross{right:2px;top:2px;font-size:.7rem}
 .booking-calendar-key{gap:5px}
 .booking-time-options{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
 body:has(#booking-app) .header-inner{min-height:68px}
 body:has(#booking-app) .header .brand{padding:8px 10px}
 body:has(#booking-app) .header .brand img{width:clamp(120px,38vw,160px)}
}