/* Booking controls share the navy and gold palette. The calendar uses the
   browser's top layer, outside the hero's stacking and overflow contexts. */
/* The booking card extends below the isolated hero. Its whole stacking
   context must sit above the next section, whose transparent padding can
   otherwise intercept clicks on the vehicle selector and submit button. */
.hero{z-index:2}
.hero+.intro{position:relative;z-index:1}
.booking-grid .booking-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.hero .booking-grid{grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;gap:18px}
.booking-grid .booking-date{grid-column:span 2}
.booking-grid .booking-vehicle{grid-column:span 2}
.booking-grid .booking-submit{grid-column:3/5;align-self:end;min-height:48px}
.hero .booking-grid input,.hero .booking-grid select{min-height:48px;padding:12px;font-size:16px;line-height:1.4;border-color:#a1b7c455}
.booking-grid select{appearance:none;-webkit-appearance:none;padding-right:38px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='m2 2 6 6 6-6' fill='none' stroke='%23ecd5ad' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;cursor:pointer;text-overflow:ellipsis}
.booking-grid select option{background:#102231;color:#f3f4f2}
.booking-grid select option:disabled{color:#8794a2}
.booking-grid [aria-invalid=true]{border-color:#ffb5a5!important;box-shadow:0 0 0 1px #ffb5a540}
.booking-date-control{position:relative;display:flex;min-width:0}
.hero .booking-date-control input{padding-right:55px}
.calendar-open{position:absolute;inset:1px 1px 1px auto;min-width:48px;min-height:46px;display:grid;place-items:center;border:0;border-left:1px solid #a1b7c433;border-radius:0 6px 6px 0;background:#d2bb9015;color:#efdbb6;cursor:pointer}
.calendar-open:hover{background:#d2bb9030}
.booking-field-hint{font-size:12px;font-weight:400;line-height:1.5;color:#bac6d1}
.booking-capacity{font-size:14px;line-height:1.6;color:#efdbb6;margin:16px 0 0;min-height:1.6em}
/* Keep the native time picker, but size its field like the other controls on iOS. */
.booking-grid .booking-time input{appearance:none;-webkit-appearance:none;display:block;box-sizing:border-box;width:100%;min-width:0;max-width:100%;margin:0}
.booking-grid .booking-time input::-webkit-date-and-time-value{min-width:0;text-align:left}
.booking-grid .booking-time input::-webkit-calendar-picker-indicator{opacity:1;cursor:pointer;min-width:20px;min-height:20px}
.booking-calendar{box-sizing:border-box;width:min(440px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 32px);overflow:auto;padding:24px;margin:auto;border:1px solid #d2bb9088;border-radius:16px;background:#0c1b29;color:#f3f4f2;box-shadow:0 28px 90px #0009;color-scheme:dark;font-family:var(--font-body);overscroll-behavior:contain}
.booking-calendar:not([open]){display:none}
.booking-calendar::backdrop{background:#030a13bd;backdrop-filter:blur(5px)}
.calendar-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.calendar-top h2{font-size:27px;line-height:1.2;margin:0}
.booking-calendar button{font-family:var(--font-body);font-size:14px;min-height:44px;border:1px solid #d2bb9050;border-radius:7px;color:#efdbb6;background:transparent;cursor:pointer}
.booking-calendar button:hover:not(:disabled){background:#d2bb9026;border-color:#e9d4ad}
.booking-calendar button:focus-visible{outline:2px solid #efdbb6;outline-offset:2px}
.booking-calendar button:disabled{opacity:.3;cursor:default}
.calendar-close{padding:8px 12px}
.calendar-month-nav{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px}
.calendar-month-nav h3{font:600 16px/1.5 var(--font-body);text-align:center;text-transform:capitalize;margin:0}
.calendar-month-nav button{padding:7px 9px;font-size:12px}
.booking-calendar table{table-layout:fixed;border-collapse:separate;border-spacing:3px;width:100%;margin:16px 0}
.booking-calendar th{padding:6px 0;font-size:13px;color:#b6c6d2;font-weight:500}
.booking-calendar td{padding:0;text-align:center}
.booking-calendar td button{display:block;width:100%;min-height:44px;font-size:15px;border-color:transparent;padding:5px 0;color:#f3f4f2}
.booking-calendar [aria-current=date]{border-color:#d2bb9088}
.booking-calendar [aria-pressed=true]{background:#e6cca0;color:#0b1420;font-weight:700}
.booking-calendar [aria-pressed=true]:hover{background:#f2ddb9!important;color:#0b1420}
.calendar-bottom{border-top:1px solid #d2bb9033;padding-top:16px}
.calendar-bottom button{padding:8px 16px}
.calendar-bottom p{font-size:13px;line-height:1.6;color:#b6c6d2;margin:14px 0 0}
@media(max-width:1100px){.hero .booking-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.booking-grid .booking-submit{grid-column:1/-1}.booking-grid .booking-date,.booking-grid .booking-vehicle{grid-column:auto}}
@media(max-width:700px){.booking-grid .booking-vehicle,.booking-grid .booking-passengers{grid-column:1/-1}.hero .booking-grid{gap:16px 12px}}
@media(max-width:460px){.hero .booking-grid{grid-template-columns:minmax(0,1fr)}.booking-grid .booking-vehicle,.booking-grid .booking-passengers,.booking-grid .booking-submit{grid-column:auto}.booking-calendar{padding:18px 12px}.calendar-top h2{font-size:25px}}
@media(prefers-reduced-motion:reduce){.booking-calendar::backdrop{backdrop-filter:none}}