/* United Cars / navy and gold, from the owner's mockup (2026-10-11). Shared by booking, operations and confirmation. */
@font-face {
  font-family: "Dubai";
  src: url("assets/fonts/dubai/Dubai-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
:root {
  /* Navy and gold (2026-10-11), from the owner's mockup. The old names keep working: --blue now means the accent. */
  --canvas: #081a3f;
  --canvas-deep: #0b2459;
  --card: #0f2a5e;
  --card-raised: #14336f;
  --card-glow: 0 10px 30px rgba(3,10,30,.45);
  --surface-dark: #0f2a5e;
  --surface-raised: #14336f;
  --line-dark: #24478f;
  --on-dark: #ffffff;
  --muted-dark: #b9c6e0;
  --accent: #f6c21c;
  --accent-hover: #ffd23f;
  --on-accent: #0b1d45;
  --ink: #ffffff;
  --muted: #b9c6e0;
  --slate: #b9c6e0;
  --line: #24478f;
  --cloud: #14336f;
  --white: #fff;
  --blue: #f6c21c;
  --blue-dark: #ffd23f;
  --blue-soft: #14336f;
  --green: #4ade80;
  --success: #4ade80;
  --info: #7fb2ff;
  --red: #b22d3b;
  --danger-ink: #ff7a7a;
  --amber: #f6c21c;
  --red-soft: #3a1a2c;
  --red-soft-hover: #4a2034;
  --red-line: #8a3a4a;
  --amber-ink: #f6c21c;
  --amber-soft: #2c2a1a;
  --card-hover-line: #3a63b8;
  --card-hover-shadow: 0 12px 32px rgba(3,10,30,.55);
  --field: #f7f9fd;
  --field-ink: #1c2426;
  --field-line: #c9d3e6;
  --radius: 22px;
  --control-radius: 12px;
  --control-border: #c9d3e6;
  --control-border-hover: #9fb0d1;
  --control-fill: #f7f9fd;
  --control-focus: #f6c21c80;
  --glow: 246 194 28; /* the hover and focus glows, the sign-in aura and the live pill: rgb(var(--glow) / alpha), gold (was #0057ff) */
  --control-shadow: none;
  --action-shadow: none;
  --display: "Dubai", "Tajawal", Arial, sans-serif;
  --body: "Tajawal", Arial, sans-serif;
  --app-max-width: 1320px;
}
/* The English interface runs on Aptos. It is Microsoft's Office/Windows 11 typeface: proprietary, with no
   webfont distribution, so it is picked up when installed on the machine and falls back to the platform's
   own UI face otherwise. Arabic stays on Dubai/Tajawal, which carry the Arabic glyphs Aptos does not. */
html[lang="en"] {
  --display: "Aptos Display", "Aptos", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --body: "Aptos", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
html { background: var(--canvas); color-scheme: dark; }
body { background: linear-gradient(180deg, var(--canvas) 0%, var(--canvas-deep) 100%) fixed; background-color: var(--canvas); color: var(--ink); font-size: 16px; line-height: 1.65; }
/* Fields stay light (owner's choice), so their native parts (date wheels, select arrows) are drawn light too. */
:is(input, select, textarea) { color-scheme: light; }
button, input, select, textarea { font-family: var(--body); }
h1, h2, h3 { font-family: var(--display); text-transform: none; letter-spacing: normal; line-height: 1.4; }
html[lang="ar"] :is(h1,h2,h3,.stat-grid strong) { font-family: var(--display); letter-spacing: normal; line-height: 1.4; }
html[lang="ar"] :is(label,legend,dt,th,button) { letter-spacing: normal; }
input, select, textarea, time, .amount, .price-value { font-variant-numeric: tabular-nums; }
::selection { background: var(--accent); color: var(--canvas); }
:root :is(button,a,input,select,textarea,[tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  box-shadow: none;
}
/* Fields wrapped in a rounded shell show focus on the shell (:focus-within: blue border + ring).
   Without this the bare control also draws a square outline inside it — two indicators at once. */
:root :is(.reservation-input-shell,.filter-control,.sort-control) :is(input,select,textarea,.fancy-select-trigger):focus-visible {
  outline: 0;
}
/* …and the shell must actually show it. The :focus-within styles in styles.css lose to the later,
   equally specific shell rules in this file, so they are restated here with higher specificity. */
:root :is(.reservation-input-shell,.filter-control,.sort-control):focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--control-focus);
}
:root :is(button,a) { -webkit-tap-highlight-color: transparent; }
:root a.app-icon-action { color: var(--blue-dark); }
:root :is(.primary-action,.auth-submit,.show-cars-button,.select-button,.continue-button,.save-trip,
  .reservation-lookup-submit,.document-viewer-print,.reference-panel button,.confirmation-actions a,
  .customer-reservation-link,.customer-access-dialog [data-save],.support-actions a:first-child) {
  background: var(--accent);
  color: var(--canvas);
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  box-shadow: none;
  font-weight: 700;
  min-height: 44px;
}
:root :is(.primary-action,.auth-submit,.show-cars-button,.select-button,.continue-button,.save-trip,
  .reservation-lookup-submit,.document-viewer-print,.reference-panel button,.confirmation-actions a,
  .customer-reservation-link,.customer-access-dialog [data-save],.support-actions a:first-child):hover:not(:disabled) {
  background: var(--accent-hover); color: var(--canvas); box-shadow: none;
}
:root :is(.language-icon-button,.icon-action,.modal-head button,.dialog-head button,.drawer-close,
  .customer-detail-head > button,.customer-blacklist-dialog header > button) { min-width: 44px; min-height: 44px; border-radius: 12px; }
:root :is(.auth-panel,.trip-dialog,.vehicle-dialog,.customer-access-dialog,.selection-drawer,
  .customer-blacklist-dialog,.customer-detail-dialog,.document-viewer) {
  color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 24px;
  box-shadow: 0 24px 90px #0005;
}
:root dialog::backdrop { background: #080c12b8; backdrop-filter: blur(5px); }
:root :is(.trip-dialog,.vehicle-dialog,.customer-detail-dialog,.customer-access-dialog) :is(h2,h3) { line-height: 1.4; }
:root :is(.auth-panel,.driver-fields,.form-grid,.dialog-grid,.customer-form-grid,.customer-side-panel,
  .loyalty-panel,.loyalty-picker,.customer-tools,.promotion-settings-form,.assignment-select) :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) {
  border-color: var(--control-border); background: var(--control-fill); color: var(--ink); border-radius: 12px;
  font-size: 16px; box-shadow: none;
}
:root :is(.auth-panel,.driver-fields,.form-grid,.dialog-grid,.customer-form-grid,.customer-side-panel,
  .loyalty-panel,.loyalty-picker,.customer-tools,.promotion-settings-form,.assignment-select) :is(input:not([type="checkbox"]):not([type="radio"]),select) { min-height: 48px; }
:root input::placeholder, :root textarea::placeholder { color: #687475; opacity: 1; }
:root input[type="checkbox"], :root input[type="radio"] { accent-color: #0057ff; }
.eyebrow,.auth-panel-head p,.modal-head p,.panel-head p,.settings-card-head p,
.customer-detail-head p,.customer-blacklist-dialog header p { color: var(--blue); letter-spacing: normal; }
.field-help,.warning-copy,.customer-form-grid label,.customer-side-panel label,
.customer-activity time,.customer-activity li p,.blacklist-entry p { color: var(--muted); }
.customer-phone-call { color: var(--blue); }
.customer-phone-call:hover { background: var(--blue-soft); }
.customer-detail-shell { background: var(--canvas); }
.customer-detail-head { padding-bottom: 14px; }
.customer-record-form,.customer-side-panel,.customer-rentals,.customer-activity { border-radius: 20px; }
.toast,.confirmation-toast { border: 1px solid var(--line-dark); border-radius: 14px; background: var(--surface-dark); color: var(--on-dark); font-size: 14px; }

/* Light navigation shell; preserve RTL order and the mobile drawer. */
.admin-shell { background: var(--canvas); gap: 8px; }
.admin-main { color: var(--on-dark); padding-inline: 28px; }
.sidebar { background: var(--canvas); padding-inline: 16px; border-inline-end: 1px solid var(--line-dark); }
.side-nav { gap: 9px; }
.nav-item { min-height: 48px; border-radius: 14px; color: var(--muted-dark); font-size: 16px; }
.nav-item b { background: var(--surface-raised); color: var(--on-dark); font-size:12px; min-height: 22px; }
/* admin.css still sets color:white on hover (from the old dark sidebar); on this light sidebar that hid the label. */
.nav-item:hover { background: var(--cloud); color: var(--ink); }
.nav-item.active { background: var(--accent); color: var(--canvas); box-shadow: none; }
.nav-item.active b { background: #0d2f8a1a; color: var(--canvas); }
.side-bottom > a,.side-bottom > button { color: var(--muted-dark); font-size: 14px; border-radius: 12px; }
.admin-user { border-color: var(--line-dark); }
.admin-user > span { background: var(--surface-raised); color: var(--accent); }
.admin-user strong { font-size: 12px; }
.admin-user small { color: var(--muted-dark); }
.admin-header { min-height: 108px; border-color: var(--line-dark); gap: 16px; }
.admin-header h1 { color: var(--on-dark); font-size: 34px; }
.admin-header p { color: var(--muted-dark); font-size: 12px; }
.admin-search { background: var(--surface-dark); border: 1px solid var(--line-dark); border-radius: 14px; box-shadow: none; }
.admin-search input { background: transparent; color: var(--on-dark); }
.admin-search svg { stroke: var(--muted-dark); }
:root .admin-search input::placeholder { color: var(--muted-dark); }
.live-pill { color: var(--accent); background: rgb(var(--glow) / .07); border: 1px solid rgb(var(--glow) / .15); border-radius: 20px; }
.live-pill i { background: var(--accent); animation: none; }
.loading-bar span { background: var(--accent); }
.view { padding-top: 18px; }
.page-breadcrumbs { color: var(--muted-dark); }
.page-breadcrumbs :is(a,button) { color: var(--muted-dark); }
.page-breadcrumbs [aria-current] { color: var(--on-dark); }
.page-breadcrumbs :is(a,button):hover { background: var(--surface-raised); color: var(--accent); }
.admin-main > .page-breadcrumbs { margin-block: 12px 20px; }
.settings-tabs { background: var(--card); border-color: transparent; border-radius: 18px; padding: 6px; }
.settings-tabs [role="tab"] { color: var(--muted-dark); border-radius: 12px; }
.settings-tabs [role="tab"]:hover { color: var(--on-dark); background: var(--white); }
.settings-tabs [role="tab"][aria-selected="true"] { background: var(--accent); color: var(--canvas); box-shadow: none; }
.section-toolbar > div > p { color: var(--accent); }
.section-toolbar label { color: var(--muted-dark); }
.section-toolbar select { min-height: 44px; font-size: 14px; }
.reservation-lookup { background: var(--card); color: var(--on-dark); border-color: transparent; border-radius: 20px; padding: 22px; margin-bottom: 20px; }
.reservation-lookup-copy h2,.reservation-lookup-field { color: var(--on-dark); }
.reservation-lookup-copy p,.reservation-lookup-results > p { color: var(--muted-dark); }
.reservation-lookup-results { border-color: var(--line-dark); }
.reservation-lookup-result { background: var(--white); border-radius: 16px; }
.reservation-lookup-result:hover { background: var(--blue-soft); border-color: var(--accent); }
.reservation-lookup-error { color: #b42318; }
.stat-grid { gap: 14px; }
.stat-grid article { background: var(--card); border: 1px solid transparent; border-radius: 20px; padding: 22px; }
.stat-grid article:first-child { background: var(--accent); color: var(--canvas); border-color: var(--accent); }
.stat-grid article:first-child::after { display: none; }
.stat-grid p,.stat-grid span { color: var(--muted-dark); letter-spacing: normal; }
.stat-grid strong { font-size: 38px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat-grid b { color: inherit; }
.stat-grid article:first-child :is(p,span,b,strong) { color: #fff; }
.overview-grid { gap: 16px; margin-top: 20px; }
.data-table-wrap,.table-empty { color: var(--ink); background: var(--white); border-color: var(--line); border-radius: 22px; }
/* Grey card surface (same as the car cards): no outline at rest, white controls inside. */
.panel,.promotion-settings-form,.promotion-settings-preview { color: var(--ink); background: var(--card); border: 1px solid transparent; border-radius: 20px; box-shadow: none; }
.panel .data-table-wrap { border-color: transparent; border-radius: 16px; }
:root :is(.panel,.promotion-settings-form,.reservation-lookup) :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) { background: var(--white); }
.panel { padding: 24px; }
.panel-head { align-items: center; gap: 12px; }
.panel-head h2,.section-toolbar h2 { font-size: 25px; line-height: 1.4; }
.compact-booking { padding-block: 17px; gap: 12px; font-size: 14px; }
.compact-booking strong { font-size: 14px; }
.compact-booking small { font-size: 12px; }
.status-badge { font-size: 12px; letter-spacing: normal; border-radius: 8px; }
.data-table-wrap { overflow: auto; }
th { background: var(--cloud); color: var(--muted); letter-spacing: normal; text-align: start; }
td { font-size: 14px; padding-block: 16px; }
tbody tr:hover,.booking-row:hover,.booking-row:focus-within { background: var(--blue-soft); }
.vehicle-cell strong,.customer-cell strong { font-size: 14px; }
.inline-select,.assignment-button { font-size: 13px; min-height: 44px; border-radius: 10px; }
.table-actions { gap: 8px; }
.customer-card-container { background: var(--card); color: var(--ink); border-radius: 20px; border: 1px solid transparent; box-shadow: none; }
.customer-card-container:hover,.customer-card-container:focus-within { border-color: var(--card-hover-line); box-shadow: var(--card-hover-shadow); }
.customer-tools input { background: var(--surface-dark); border-color: var(--line-dark); color: var(--on-dark); }
:root .customer-tools input { background: var(--surface-dark); border-color: var(--line-dark); color: var(--on-dark); }
:root .customer-tools input::placeholder { color: var(--muted-dark); }
.customer-empty { color: var(--ink); }
.loyalty-layout { gap: 18px; }
.loyalty-panel { min-height: 0; }
.loyalty-example { background: var(--blue-soft); color: var(--blue-dark); border-radius: 12px; }
.loyalty-picker [role="option"]:hover,.loyalty-picker [role="option"].is-active { background: var(--blue-soft); color: var(--blue-dark); }
.loyalty-balance { background: var(--surface-dark); color: var(--on-dark); border-radius: 14px; padding: 16px; }
.loyalty-balance strong { color: var(--accent); font-size: 32px; }
.loyalty-notice { color: #4f79df; }
.loyalty-notice.error { color: #ffb3ad; }
.loyalty-history a { color: var(--blue-dark); }
.loyalty-badge { border-radius: 10px; }
.customer-loyalty-summary { background: var(--card); color: var(--on-dark); border-color: transparent; }
.customer-loyalty-summary dt { color: var(--muted-dark); }
.customer-loyalty-points { color: var(--accent); }
.customer-loyalty-summary dl > div + div { border-color: var(--line-dark); }
html[dir] .admin-auth { background: var(--canvas); }
/* Sign-in is a grey card on the white canvas, like every other card; its fields are white. */
:root .admin-auth .auth-panel { background: var(--card); border: 1px solid transparent; border-radius: 20px; box-shadow: none; }
:root .admin-auth .auth-panel :is(input:not([type="checkbox"]):not([type="radio"]),select) { background: var(--white); }
.auth-security { color: var(--muted-dark); }

/* Shared card motion (admin): cards rise in one after another, lift on hover, and a short accent beside the
   title grows to full height. Each card file opts in; reduced-motion users get none of it (rule at the end). */
@keyframes card-rise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
/* The car card rises without fading. Its photos ship on white and rely on multiply to take the card's grey;
   while the card is semi-transparent that grey is itself washed toward the white page behind it, so the
   knockout looks like it has not happened and the photo reads as a white box until the fade ends. Staying
   opaque costs nothing here — the rise still reads as an entrance. */
@keyframes car-card-rise { from { transform: translateY(14px) scale(.985); } to { transform: none; } }
:root { --card-ease: cubic-bezier(.2, .7, .2, 1); }
.stat-grid article { animation: card-rise 420ms var(--card-ease) backwards; transition: transform 220ms var(--card-ease), box-shadow 220ms ease; }
.stat-grid article:nth-child(2) { animation-delay: 60ms; } .stat-grid article:nth-child(3) { animation-delay: 120ms; } .stat-grid article:nth-child(4) { animation-delay: 180ms; }
.stat-grid article:hover { transform: translateY(-3px); box-shadow: var(--card-hover-shadow); }
.overview-grid > .panel { animation: card-rise 480ms var(--card-ease) backwards; animation-delay: 240ms; }
.overview-grid > .panel + .panel { animation-delay: 300ms; }
/* A settled list (card-motion.js) no longer replays the entrance when it is redrawn. */
.cards-settled > :is(.customer-card-container,.reservation-list-card) { animation: none; }

/* ── Admin sign-in and settings: the same card language, with glow (screen only in effect: none of this prints). ── */
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes accent-draw { from { clip-path: inset(0 0 100% 0 round 4px); } to { clip-path: inset(0 round 4px); } }
@keyframes sheen-sweep { 0% { opacity: 1; inset-inline-start: -60%; } 100% { opacity: 1; inset-inline-start: 120%; } }
@keyframes pin-pop { from { opacity: 0; transform: translateY(8px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes aura-breathe { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes error-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }

/* Sign-in: a slow blue aura breathes behind the card; the card and its contents arrive in sequence; the six PIN
   boxes pop in one by one; fields and the button glow instead of showing a hard edge. */
html[dir] .admin-auth { overflow: hidden; isolation: isolate; }
.admin-auth::before { content: ""; position: absolute; z-index: -1; inset: 50% auto auto 50%; width: min(760px, 120vw); aspect-ratio: 1; margin: calc(min(760px, 120vw) / -2) 0 0 calc(min(760px, 120vw) / -2);
  border-radius: 50%; background: radial-gradient(closest-side, rgb(var(--glow) / .14), rgb(var(--glow) / .05) 55%, rgb(var(--glow) / 0)); animation: aura-breathe 9s ease-in-out infinite; pointer-events: none; }
:root .admin-auth .auth-panel { animation: card-rise 560ms var(--card-ease) backwards; transition: box-shadow 320ms ease, border-color 260ms ease; }
:root .admin-auth .auth-panel:focus-within { border-color: var(--card-hover-line); box-shadow: 0 0 0 1px rgb(var(--glow) / .1), 0 18px 60px rgb(var(--glow) / .15); }
.admin-auth .auth-brand { animation: panel-in 520ms var(--card-ease) backwards; }
.admin-auth .auth-panel-head > * { animation: panel-in 440ms var(--card-ease) backwards; }
.admin-auth .auth-panel-head > p { animation-delay: 140ms; } .admin-auth .auth-panel-head > h1 { animation-delay: 190ms; } .admin-auth .auth-panel-head > span { animation-delay: 240ms; }
.admin-auth .auth-panel-head h1 { position: relative; padding-inline-start: 16px; }
.admin-auth .auth-panel-head h1::before { content: ""; position: absolute; inset-block: 8px; inset-inline-start: 0; width: 5px; border-radius: 5px; background: var(--blue); animation: accent-draw 620ms var(--card-ease) 420ms backwards; }
.admin-auth .admin-phone-row { animation: panel-in 440ms var(--card-ease) 300ms backwards; }
.admin-auth fieldset legend { animation: panel-in 440ms var(--card-ease) 360ms backwards; }
.admin-auth .admin-pin input { animation: pin-pop 420ms var(--card-ease) backwards; transition: border-color 180ms ease, box-shadow 220ms ease, transform 180ms var(--card-ease); }
.admin-auth .admin-pin input:nth-child(1) { animation-delay: 420ms; } .admin-auth .admin-pin input:nth-child(2) { animation-delay: 470ms; } .admin-auth .admin-pin input:nth-child(3) { animation-delay: 520ms; }
.admin-auth .admin-pin input:nth-child(4) { animation-delay: 570ms; } .admin-auth .admin-pin input:nth-child(5) { animation-delay: 620ms; } .admin-auth .admin-pin input:nth-child(6) { animation-delay: 670ms; }
:root .admin-auth .auth-panel :is(input, select):focus-visible { border-color: var(--blue); box-shadow: 0 0 0 3px rgb(var(--glow) / .15), 0 0 20px rgb(var(--glow) / .25); }
:root .admin-auth .admin-pin input:focus-visible { transform: translateY(-2px); }
:root .admin-auth .auth-submit { position: relative; overflow: hidden; animation: panel-in 440ms var(--card-ease) 740ms backwards; transition: box-shadow 260ms ease, transform 200ms var(--card-ease), background-color .15s ease; }
:root .admin-auth .auth-submit:is(:hover, :focus-visible):not(:disabled) { box-shadow: 0 0 0 4px rgb(var(--glow) / .12), 0 12px 32px rgb(var(--glow) / .35); transform: translateY(-1px); }
.admin-auth .auth-submit::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: -60%; width: 45%; background: linear-gradient(100deg, #fff0, #ffffff66, #fff0); transform: skewX(-18deg); opacity: 0; animation: sheen-sweep 1200ms ease-out 1300ms 1 backwards; pointer-events: none; }
.admin-auth .auth-error:not(:empty) { animation: error-shake 420ms ease-in-out; }
.admin-auth .auth-security { animation: panel-in 520ms var(--card-ease) 860ms backwards; }

/* Customer sign-in dialog: the same language as the admin sign-in. The dialog itself settles in (dialog-in); its
   contents then arrive in order, the six PIN boxes pop in one by one, and focus glows instead of showing a hard edge. */
.signin-dialog[open] { transition: box-shadow 320ms ease; }
.signin-dialog[open]:focus-within { box-shadow: 0 0 0 1px rgb(var(--glow) / .1), 0 24px 90px #0005, 0 0 70px rgb(var(--glow) / .18); }
.signin-dialog[open] .dialog-head h2 { position: relative; padding-inline-start: 16px; }
.signin-dialog[open] .dialog-head h2::before { content: ""; position: absolute; inset-block: 6px; inset-inline-start: 0; width: 5px; border-radius: 5px; background: var(--blue); animation: accent-draw 620ms var(--card-ease) 360ms backwards; }
.signin-dialog[open] :is(.dialog-head, .auth-mode-switch, .signin-intro, .phone-row, .field-hint, .pin-fieldset legend, .show-pin, .signin-submit, .join-link, .auth-footnote) { animation: panel-in 440ms var(--card-ease) backwards; }
.signin-dialog[open] .dialog-head { animation-delay: 80ms; } .signin-dialog[open] .auth-mode-switch { animation-delay: 140ms; } .signin-dialog[open] .signin-intro { animation-delay: 190ms; }
.signin-dialog[open] :is(.phone-row, .field-hint) { animation-delay: 250ms; } .signin-dialog[open] .pin-fieldset legend { animation-delay: 310ms; }
.signin-dialog[open] .pin-inputs input { animation: pin-pop 420ms var(--card-ease) backwards; transition: border-color 180ms ease, box-shadow 220ms ease, transform 180ms var(--card-ease), background-color 180ms ease; }
.signin-dialog[open] .pin-inputs input:nth-child(1) { animation-delay: 360ms; } .signin-dialog[open] .pin-inputs input:nth-child(2) { animation-delay: 410ms; } .signin-dialog[open] .pin-inputs input:nth-child(3) { animation-delay: 460ms; }
.signin-dialog[open] .pin-inputs input:nth-child(4) { animation-delay: 510ms; } .signin-dialog[open] .pin-inputs input:nth-child(5) { animation-delay: 560ms; } .signin-dialog[open] .pin-inputs input:nth-child(6) { animation-delay: 610ms; }
.signin-dialog[open] .show-pin { animation-delay: 660ms; } .signin-dialog[open] .signin-submit { animation-delay: 700ms; } .signin-dialog[open] :is(.join-link, .auth-footnote) { animation-delay: 760ms; }
:root .signin-dialog :is(input:not([type="checkbox"]), select):focus-visible { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgb(var(--glow) / .15), 0 0 20px rgb(var(--glow) / .25); }
:root .signin-dialog .pin-inputs input:focus-visible { transform: translateY(-2px); }
:root .signin-dialog .pin-inputs input.filled { border-color: var(--blue); background: var(--blue-soft); }
/* Switching to "create account" brings its extra fields in gently instead of snapping the form open. */
.signin-dialog .signup-only:not([hidden]) { animation: panel-in 360ms var(--card-ease); }
.signin-dialog .auth-mode-switch button { transition: background-color 240ms ease, color 240ms ease, box-shadow 240ms ease; }
:root .signin-dialog .signin-submit { position: relative; overflow: hidden; transition: box-shadow 260ms ease, transform 200ms var(--card-ease), background-color .15s ease; }
:root .signin-dialog .signin-submit:is(:hover, :focus-visible):not(:disabled) { box-shadow: 0 0 0 4px rgb(var(--glow) / .12), 0 12px 32px rgb(var(--glow) / .35); transform: translateY(-1px); }
.signin-dialog[open] .signin-submit::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: -60%; width: 45%; background: linear-gradient(100deg, #fff0, #ffffff66, #fff0); transform: skewX(-18deg); opacity: 0; animation: sheen-sweep 1200ms ease-out 1250ms 1 backwards; pointer-events: none; }
.signin-dialog .auth-message:not(:empty):not(.success) { animation: error-shake 420ms ease-in-out; }
.signin-dialog .auth-message.success:not(:empty) { animation: price-in 320ms var(--card-ease); }

/* Driver details dialog: the same card language. Field groups and upload tiles are grey cards with white fields;
   the sections arrive in order; focus glows; the confirm button carries the halo and one light sweep. */
.driver-dialog[open] .dialog-head h2 { position: relative; padding-inline-start: 16px; }
.driver-dialog[open] .dialog-head h2::before { content: ""; position: absolute; inset-block: 6px; inset-inline-start: 0; width: 5px; border-radius: 5px; background: var(--blue); animation: accent-draw 620ms var(--card-ease) 360ms backwards; }
.driver-dialog[open] :is(.dialog-head, .driver-intro, #savedDriverPicker, .driver-fields, #checkoutContractFields, #additionalDrivers, .document-uploads, .save-driver-toggle, #confirmReservationButton, .dialog-note) { animation: panel-in 440ms var(--card-ease) backwards; }
.driver-dialog[open] .dialog-head { animation-delay: 80ms; } .driver-dialog[open] .driver-intro { animation-delay: 140ms; } .driver-dialog[open] #savedDriverPicker { animation-delay: 170ms; } .driver-dialog[open] .driver-fields { animation-delay: 200ms; }
.driver-dialog[open] #checkoutContractFields { animation-delay: 270ms; } .driver-dialog[open] #additionalDrivers { animation-delay: 330ms; } .driver-dialog[open] .document-uploads { animation-delay: 390ms; }
.driver-dialog[open] .save-driver-toggle { animation-delay: 430ms; } .driver-dialog[open] #confirmReservationButton { animation-delay: 460ms; } .driver-dialog[open] .dialog-note { animation-delay: 520ms; }
:root .driver-dialog :is(#checkoutContractFields fieldset, #additionalDrivers fieldset, [data-driver-card]) { border: 1px solid transparent; border-radius: 20px; background: var(--card); transition: border-color 220ms ease, box-shadow 260ms ease; }
:root .driver-dialog :is(#checkoutContractFields fieldset, #additionalDrivers fieldset, [data-driver-card]):focus-within { border-color: var(--card-hover-line); box-shadow: var(--card-hover-shadow); }
:root .driver-dialog :is(#checkoutContractFields, #additionalDrivers) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { background: var(--white); border-radius: 12px; }
:root .driver-dialog :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) { transition: border-color 180ms ease, box-shadow 220ms ease; }
:root .driver-dialog :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea):focus-visible { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgb(var(--glow) / .15), 0 0 18px rgb(var(--glow) / .2); }
/* Upload tiles: grey cards that light up when hovered, focused, or holding a chosen file. */
:root .driver-dialog .document-upload { border: 1px solid transparent; border-radius: 20px; background: var(--card); padding: 16px; cursor: pointer; transition: border-color 220ms ease, box-shadow 260ms ease, transform 220ms var(--card-ease); }
:root .driver-dialog .document-upload:is(:hover, :focus-within) { border-color: var(--blue); box-shadow: 0 0 0 3px rgb(var(--glow) / .1), 0 0 24px rgb(var(--glow) / .18); transform: translateY(-2px); }
:root .driver-dialog .document-upload:has(input[type="file"]:valid:required) { border-color: var(--card-hover-line); }
.driver-dialog .document-upload .document-title { position: relative; padding-inline-start: 12px; }
.driver-dialog .document-upload .document-title::before { content: ""; position: absolute; inset-block: 3px; inset-inline-start: 0; width: 3px; border-radius: 3px; background: var(--blue); clip-path: inset(0 0 45% 0 round 3px); transition: clip-path 320ms var(--card-ease); }
.driver-dialog .document-upload:is(:hover, :focus-within) .document-title::before { clip-path: inset(0 round 3px); }
:root .driver-dialog #confirmReservationButton { position: relative; overflow: hidden; transition: box-shadow 260ms ease, transform 200ms var(--card-ease), background-color .15s ease; }
:root .driver-dialog #confirmReservationButton:is(:hover, :focus-visible):not(:disabled) { box-shadow: 0 0 0 4px rgb(var(--glow) / .12), 0 12px 32px rgb(var(--glow) / .35); transform: translateY(-1px); }
.driver-dialog[open] #confirmReservationButton::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: -60%; width: 45%; background: linear-gradient(100deg, #fff0, #ffffff66, #fff0); transform: skewX(-18deg); opacity: 0; animation: sheen-sweep 1200ms ease-out 1100ms 1 backwards; pointer-events: none; }
.driver-dialog .form-message:not(:empty) { animation: error-shake 420ms ease-in-out; }
@media (hover: none) { :root .driver-dialog .document-upload:hover { transform: none; } }

/* Admin views and tab panels fade up when they are shown, so switching sections is never an abrupt swap. */
.admin-main > .view.active, [data-settings-panel]:not([hidden]), #customersView > [role="tabpanel"]:not([hidden]) { animation: panel-in 340ms var(--card-ease) backwards; }
.settings-tabs [role="tab"] { transition: background-color 240ms ease, color 240ms ease, box-shadow 240ms ease; }
.settings-tabs [role="tab"][aria-selected="true"] { box-shadow: 0 6px 18px rgb(var(--glow) / .2); }
/* Desktop: the tabs are equal columns, so one pill slides between them, mirrored for Arabic. The strip counts
   its own tabs (two in Customers, three in Bookings, five in Settings) so the pill is always exactly one column
   wide and can reach every tab; a strip with more than six would need another pair of lines below. Phones keep
   the per-tab highlight above: their tabs have unequal widths and scroll sideways. */
@media (min-width:761px) {
  :root .admin-main .settings-tabs { position: relative; isolation: isolate; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); gap: 6px; --tab-count: 2; --tab-index: 0; }
  .admin-main .settings-tabs:has(> [role="tab"]:nth-child(3):last-child) { --tab-count: 3; }
  .admin-main .settings-tabs:has(> [role="tab"]:nth-child(4):last-child) { --tab-count: 4; }
  .admin-main .settings-tabs:has(> [role="tab"]:nth-child(5):last-child) { --tab-count: 5; }
  .admin-main .settings-tabs:has(> [role="tab"]:nth-child(6):last-child) { --tab-count: 6; }
  .admin-main .settings-tabs:has(> [role="tab"]:nth-child(2)[aria-selected="true"]) { --tab-index: 1; }
  .admin-main .settings-tabs:has(> [role="tab"]:nth-child(3)[aria-selected="true"]) { --tab-index: 2; }
  .admin-main .settings-tabs:has(> [role="tab"]:nth-child(4)[aria-selected="true"]) { --tab-index: 3; }
  .admin-main .settings-tabs:has(> [role="tab"]:nth-child(5)[aria-selected="true"]) { --tab-index: 4; }
  .admin-main .settings-tabs:has(> [role="tab"]:nth-child(6)[aria-selected="true"]) { --tab-index: 5; }
  .admin-main .settings-tabs::before { content: ""; position: absolute; z-index: -1; inset-block: 6px; inset-inline-start: 6px; width: calc((100% - 12px - (var(--tab-count) - 1) * 6px) / var(--tab-count)); border-radius: 12px; background: var(--accent);
    box-shadow: 0 6px 18px rgb(var(--glow) / .25); transition: transform 380ms var(--card-ease); transform: translateX(calc(var(--tab-index) * (100% + 6px))); }
  [dir="rtl"] .admin-main .settings-tabs::before { transform: translateX(calc(var(--tab-index) * (-100% - 6px))); }
  :root .admin-main .settings-tabs [role="tab"] { flex: none; min-width: 0; transition: color 260ms ease, background-color 200ms ease; }
  :root .admin-main .settings-tabs [role="tab"][aria-selected="true"] { background: transparent; box-shadow: none; color: var(--canvas); }
}

/* Settings cards: headings carry the accent; rows arrive in order; fields glow on focus; primary actions carry a halo. */
:is(.settings-card-head h3, .access-administration > h2, .access-administration .panel-head h2) { position: relative; padding-inline-start: 16px; }
:is(.settings-card-head h3, .access-administration > h2, .access-administration .panel-head h2)::before { content: ""; position: absolute; inset-block: 5px; inset-inline-start: 0; width: 4px; border-radius: 4px; background: var(--blue); animation: accent-draw 620ms var(--card-ease) 260ms backwards; }
#settingsView :is(.panel, .promotion-settings-form, .promotion-settings-preview) { transition: border-color 220ms ease, box-shadow 260ms ease; }
#settingsView :is(.panel, .promotion-settings-form, .promotion-settings-preview):is(:hover, :focus-within) { border-color: var(--card-hover-line); box-shadow: var(--card-hover-shadow); }
#settingsView tbody tr { animation: price-in 360ms var(--card-ease) backwards; }
#settingsView tbody tr:nth-child(2) { animation-delay: 40ms; } #settingsView tbody tr:nth-child(3) { animation-delay: 80ms; } #settingsView tbody tr:nth-child(4) { animation-delay: 120ms; }
#settingsView tbody tr:nth-child(5) { animation-delay: 160ms; } #settingsView tbody tr:nth-child(n+6) { animation-delay: 200ms; }
.location-settings-row { animation: card-rise 400ms var(--card-ease) backwards; }
.location-settings-row:nth-child(2) { animation-delay: 50ms; } .location-settings-row:nth-child(3) { animation-delay: 100ms; } .location-settings-row:nth-child(n+4) { animation-delay: 150ms; }
:root #settingsView :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) { transition: border-color 180ms ease, box-shadow 220ms ease; }
:root #settingsView :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea):focus-visible { border-color: var(--blue); box-shadow: 0 0 0 3px rgb(var(--glow) / .15), 0 0 18px rgb(var(--glow) / .2); }
:root .admin-shell .primary-action { transition: box-shadow 260ms ease, transform 200ms var(--card-ease), background-color .15s ease; }
:root .admin-shell .primary-action:is(:hover, :focus-visible):not(:disabled) { box-shadow: 0 0 0 4px rgb(var(--glow) / .12), 0 10px 28px rgb(var(--glow) / .32); transform: translateY(-1px); }
/* Promotion preview: a band of light crosses the image when the tab opens; the upload area glows when hovered. */
.promotion-preview-frame { position: relative; overflow: hidden; border-radius: 14px; }
.promotion-preview-frame img { transition: transform 600ms var(--card-ease); }
.promotion-settings-preview:hover .promotion-preview-frame img { transform: scale(1.03); }
.promotion-preview-frame::after { content: ""; position: absolute; inset-block: -10%; inset-inline-start: -60%; width: 35%; background: linear-gradient(100deg, #fff0, #ffffff8c, #fff0); transform: skewX(-16deg); opacity: 0; animation: sheen-sweep 1500ms ease-out 500ms 1 backwards; pointer-events: none; }
.promotion-upload-control { transition: border-color 220ms ease, box-shadow 260ms ease, background-color 220ms ease; }
.promotion-upload-control:is(:hover, :focus-within) { border-color: var(--blue); box-shadow: 0 0 0 3px rgb(var(--glow) / .1), 0 0 24px rgb(var(--glow) / .18); }

/* Booking: white planner, grey surround and blue primary actions. */
.site-header,.confirmation-header { height: 72px; padding-inline: 24px; background: var(--canvas); border-bottom: 1px solid var(--line-dark); color: var(--on-dark); }
.brand-logo,.confirmation-logo,.auth-logo { background: transparent; border-radius: 0; padding: 0; height: 48px; }
/* The logo link is a 44px tap target even where the logo image is shorter (40px on phones). */
.site-header .brand,.confirmation-header .brand { min-height: 44px; min-width: 44px; }
.header-actions { gap: 12px; }
.site-header .text-button,.site-header .text-button::after { color: var(--on-dark); font-size: 14px; }
/* Header controls are icons only; the grey tile appears on hover and keyboard focus. The 44px target stays. */
.site-header .menu-button { width: 44px; height: 44px; border-radius: 12px; background: transparent; border-color: transparent; padding: 12px; transition: background-color .16s ease, transform .16s ease; }
.site-header .menu-button span { background: var(--on-dark); }
.site-header .language-icon-button,.confirmation-header .language-icon-button,:root .admin-auth .auth-language { color: var(--accent); background: transparent; border-color: transparent; box-shadow: none; transition: background-color .16s ease, transform .16s ease; }
:root :is(.site-header,.confirmation-header) :is(.menu-button,.language-icon-button):is(:hover,:focus-visible),:root .admin-auth .auth-language:is(:hover,:focus-visible) { background: var(--cloud); }
:root :is(.site-header,.confirmation-header) :is(.menu-button,.language-icon-button):active,:root .admin-auth .auth-language:active { transform: scale(.92); }
.mobile-menu { top: 66px; border-radius: 16px; }
.mobile-menu a,.mobile-menu button { font-size: 16px; min-height: 44px; text-align: start; }
.reservation-search-section { background: var(--canvas); padding-block: 12px 16px; }
.reservation-search-shell { background: var(--surface-dark); border: 1px solid var(--line-dark); border-radius: 24px; box-shadow: none; }
.reservation-search-form { background: var(--surface-dark); color: var(--on-dark); padding: 26px; }
.reservation-search-form :is(.reservation-field,.reservation-datetime-group legend) { color: var(--on-dark); }
.reservation-search-form .different-location-toggle { color: var(--muted-dark); }
.reservation-search-form .reservation-input-shell { background: var(--surface-raised); border-color: var(--control-border); color: var(--on-dark); box-shadow: none; }
.reservation-search-form .reservation-input-shell :is(input,select,.fancy-select-trigger) { color: var(--on-dark); background: transparent; font-size: 16px; color-scheme: light; }
/* The trip dates and times read 1px larger than the location (owner, 2026-10-12). The id outranks the phone rules here
   and mobile-enhancements.css's 16px for every field (which loads last), so it holds at every width. */
#tripSearchForm .reservation-datetime-group .reservation-input-shell input { font-size: 17px; }
/* Sign-in: the mobile number and its country code read 2px larger (owner, 2026-10-12); ids, so the phone rules and
   mobile-enhancements.css's 16px for every field cannot undo it. */
#mobileLoginForm #mobileNumber { font-size: 18px; }
#mobileLoginForm #countryCode-trigger { font-size: 15px; }
/* At 360px and below the country column (96px in styles.css) was too narrow for "🇯🇴 +962" even at 13px. */
@media (max-width:360px) { #mobileLoginForm .phone-row { grid-template-columns: 112px minmax(0,1fr); } }
.reservation-search-form select option { color: var(--on-dark); background: var(--surface-dark); }
.reservation-search-form .reservation-input-shell svg { stroke: var(--muted-dark); }
.reservation-search-form .trip-search-error { color: #b42318; }
.reservation-search-form .text-button { color: var(--accent); }
.reservation-promotion { border-color: var(--line-dark); background: var(--surface-raised); }
.reservation-contact { background: var(--surface-dark); color: var(--on-dark); border-color: var(--line-dark); }
.reservation-contact-link { background: #f2f6ff; color: var(--blue); border-color: #d4e0ff; border-radius: 14px; }
.reservation-contact-link.whatsapp { background: #eefaf3; color: #08783e; border-color: #c8e8d6; }
.reservation-contact-link svg { color: var(--accent); }
.reservation-contact-link.whatsapp svg { color: #08783e; }
.show-cars-button { margin-top: 8px; }
.different-location-toggle input:checked + .toggle-track { background: var(--accent); border-color: var(--accent); }
.fleet-section { width: min(var(--app-max-width),calc(100% - 32px)); margin-inline: auto; padding: 22px 22px 30px; border: 0; border-radius: 28px; background: var(--white); min-height: 0; }
.controls-bar { background: transparent; padding-bottom: 18px; }
.filter-control { background: var(--control-fill); border-color: var(--control-border); border-radius: 12px; box-shadow: none; }
.sort-control { background: #1c1c1f; color: #fff; border-radius: 12px; box-shadow: none; }
.sort-control :is(select, .fancy-select-trigger) { color: #fff; }
.sort-control select option { color: var(--ink); background: #fff; }
.car-grid { gap: 16px; }
.car-card { border: 1px solid transparent; background: #efefef; border-radius: 20px; min-height: 0;
  /* Entrance waits until the card scrolls into view (.in-view, set in app.js), then rises; the car drives in after it. */
  animation: car-card-rise 520ms var(--card-ease) var(--card-delay, 0ms) backwards paused;
  transition: transform 260ms var(--card-ease), border-color 220ms ease, box-shadow 260ms ease; }
.car-card.in-view { animation-play-state: running; }
.car-card { cursor: pointer; }
.car-card:hover,.car-card:focus-within { border-color: var(--card-hover-line); box-shadow: var(--card-hover-shadow); transform: translateY(-4px); }
.car-card:active { transform: translateY(-1px) scale(.995); }
/* Selected: a steady blue ring, announced once by a soft pulse. */
.car-card.selected { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue);
  /* the entrance stays first in the list: dropping it would replay the rise when the card is deselected */
  animation: car-card-rise 520ms var(--card-ease) var(--card-delay, 0ms) backwards paused, card-selected 700ms var(--card-ease) 1; }
@keyframes card-selected { 0% { box-shadow: 0 0 0 2px var(--blue), 0 0 0 0 rgb(var(--glow) / .33); } 100% { box-shadow: 0 0 0 2px var(--blue), 0 0 0 18px rgb(var(--glow) / 0); } }
/* Title accent, as on the admin cards: short at rest, full height when the card wakes up. */
.car-card .card-head > div:first-child { position: relative; padding-inline-start: 14px; }
.car-card .card-head > div:first-child::before { content: ""; position: absolute; inset-block: 6px; inset-inline-start: 0; width: 4px; border-radius: 4px; background: var(--blue);
  clip-path: inset(0 0 calc(100% - 24px) 0 round 4px); transition: clip-path 340ms var(--card-ease); }
.car-card:is(:hover,:focus-within,.selected) .card-head > div:first-child::before { clip-path: inset(0 round 4px); }
.card-head h2 { font-family: var(--display); font-size: 26px; line-height: 1.4; }
.card-head p:last-child { display: inline-block; margin-top: 4px; background: #fff; color: #1c2426; font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); max-width: 100%; }
.car-visual { height: 176px; margin: 4px 16px 0; border-radius: 0; background: transparent; }
/* The regenerated catalogue photos have a neutral grey backdrop matching the card.
   Render their original colours: multiplying that grey makes a darker rectangle. */
.car-visual img { filter: none; object-fit: contain; mix-blend-mode: normal; }
/* The bundled photos face left, so "forward" is toward the left in both languages. The car drives into its
   card once, then eases forward on hover while its ground shadow spreads. */
.car-card .car-visual { overflow: visible; }
.car-card .car-visual img { animation: car-arrive 760ms var(--card-ease) calc(var(--card-delay, 0ms) + 140ms) backwards paused; transition: transform 520ms var(--card-ease); }
.car-card.in-view .car-visual img { animation-play-state: running; }
@keyframes car-arrive { from { opacity: 0; transform: translateX(56px) scale(.94); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
.car-card:is(:hover,:focus-within) .car-visual img { transform: translateX(-10px) scale(1.045); }
:root .car-card .car-visual::after { content: ""; display: block; position: absolute; inset: auto 14% 9% 14%; height: 14px; border-radius: 50%; background: radial-gradient(closest-side, #0f213d40, #0f213d00); filter: none;
  opacity: .55; transform: scaleX(.92); transition: opacity 420ms ease, transform 520ms var(--card-ease); pointer-events: none; }
.car-card:is(:hover,:focus-within) .car-visual::after { opacity: .95; transform: translateX(-8px) scaleX(1.08); }
/* A shine catches the body once the car settles in, and again on hover — a beat of light rather than a
   working headlight, since the bundled photos are plain studio shots. */
.car-card .car-shine { position: absolute; inset-block: 20% 44%; inset-inline-start: -55%; width: 28%;
  background: linear-gradient(100deg, #fff0, #ffffffb3, #fff0); transform: skewX(-20deg); opacity: 0; z-index: 1; pointer-events: none; }
.car-card.in-view .car-shine { animation: sheen-sweep 640ms ease-out calc(var(--card-delay, 0ms) + 620ms) 1 backwards; }
.car-card:is(:hover,:focus-within) .car-shine { animation: sheen-sweep 560ms ease-out; }
/* Once the car has driven in and the light has caught it, it settles with a small rev — like the engine just
   turned over — before sitting still. Runs on the visual's own wrapper so it never fights the image's own
   arrive/hover transform. */
@keyframes engine-start { 0%, 100% { transform: translate(0, 0) rotate(0); } 20% { transform: translate(-1.6px, .6px) rotate(-.3deg); } 40% { transform: translate(1.3px, -.5px) rotate(.3deg); } 60% { transform: translate(-1px, .5px) rotate(-.2deg); } 80% { transform: translate(.7px, -.3px) rotate(.15deg); } }
.car-card.in-view .car-visual { animation: engine-start 440ms ease-out calc(var(--card-delay, 0ms) + 900ms) 1; }
.car-card:is(:hover,:focus-within) .car-visual { animation: engine-start 380ms ease-out; }
/* The trip total fades up when its quote arrives. */
.total-rate.price-in { animation: price-in 360ms var(--card-ease); }
@keyframes price-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Select: a chevron slides out of the button along the reading direction. */
.car-card .select-button { display: inline-flex; align-items: center; justify-content: center; gap: 0; transition: gap 260ms var(--card-ease), background-color .15s ease; }
.car-card .select-button::after { content: ""; width: 0; height: 16px; background: currentColor; opacity: 0; transition: width 260ms var(--card-ease), opacity 200ms ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center / 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center / 16px no-repeat; }
[dir="rtl"] .car-card .select-button::after { transform: scaleX(-1); }
.car-card:is(:hover,:focus-within) .select-button { gap: 6px; }
.car-card:is(:hover,:focus-within) .select-button::after { width: 16px; opacity: 1; }
@media (hover: none) { .car-card:hover { transform: none; } .car-card:is(:hover,:focus-within) .car-visual img { transform: none; } }
/* Booking drawer: the chosen car sits in the same grey card, and the drawer's contents arrive in sequence each
   time it opens (the rule only matches while .open, so the sequence replays for every selection). */
.selection-drawer h2 { position: relative; padding-inline-start: 16px; }
.selection-drawer h2::before { content: ""; position: absolute; inset-block: 6px; inset-inline-start: 0; width: 5px; border-radius: 5px; background: var(--blue); clip-path: inset(0 0 100% 0 round 5px); }
.selection-drawer.open h2::before { clip-path: inset(0 round 5px); transition: clip-path 520ms var(--card-ease) 320ms; }
.drawer-car { margin-block: 20px 0; border-radius: 20px; background: var(--card); overflow: hidden; }
.drawer-car-visual { position: relative; padding: 18px 18px 6px; }
:root .selection-drawer .drawer-car img { display: block; width: 100%; height: 190px; margin: 0; border-radius: 0; object-fit: contain; mix-blend-mode: multiply; filter: brightness(1.04); }
.drawer-car-visual::after { content: ""; position: absolute; inset: auto 16% 14px 16%; height: 14px; border-radius: 50%; background: radial-gradient(closest-side, #0f213d40, #0f213d00); pointer-events: none; }
.drawer-car .drawer-rate { margin: 0 18px; padding-block: 14px 16px; border-bottom: 0; }
.selection-drawer.open > :is(.flow-trail,.drawer-kicker,h2,.drawer-car,.continue-button) { animation: card-rise 460ms var(--card-ease) backwards; }
.selection-drawer.open > .flow-trail { animation-delay: 120ms; } .selection-drawer.open > .drawer-kicker { animation-delay: 170ms; }
.selection-drawer.open > h2 { animation-delay: 220ms; } .selection-drawer.open > .drawer-car { animation-delay: 290ms; }
.selection-drawer.open > .continue-button { animation-delay: 380ms; }
.selection-drawer.open .drawer-car img { animation: car-arrive 820ms var(--card-ease) 380ms backwards; }
.selection-drawer.open .drawer-car-visual::after { animation: shadow-settle 820ms var(--card-ease) 380ms backwards; }
@keyframes shadow-settle { from { opacity: 0; transform: translateX(56px) scaleX(.7); } to { opacity: 1; transform: none; } }
/* Review & pay: the same chevron as Select slides out on hover. */
.continue-button { display: inline-flex; align-items: center; justify-content: center; gap: 0; transition: gap 260ms var(--card-ease), background-color .15s ease; }
.continue-button::after { content: ""; width: 0; height: 18px; background: currentColor; opacity: 0; transition: width 260ms var(--card-ease), opacity 200ms ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center / 18px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center / 18px no-repeat; }
[dir="rtl"] .continue-button::after { transform: scaleX(-1); }
.continue-button:is(:hover,:focus-visible):not(:disabled) { gap: 8px; }
.continue-button:is(:hover,:focus-visible):not(:disabled)::after { width: 18px; opacity: 1; }
@media (hover: none) { .continue-button:not(:disabled) { gap: 8px; } .continue-button:not(:disabled)::after { width: 18px; opacity: 1; } }

/* Customer account: the profile strip and each booking are the same grey card; bookings lead with the car. */
.customer-profile-summary { border: 1px solid transparent; border-radius: 20px; background: var(--card); padding: 16px; }
.customer-profile-copy strong { font: 700 18px/1.4 var(--display); }
.customer-profile-copy span { font-size: 13px; }
.account-dialog[open] .customer-profile-summary { animation: card-rise 440ms var(--card-ease) 100ms backwards; }
.account-dialog[open] .reservation-tabs { animation: card-rise 440ms var(--card-ease) 160ms backwards; }
.customer-reservation-list { gap: 12px; margin-top: 12px; }
.customer-reservation-card { grid-template-columns: 150px minmax(0, 1fr); gap: 0 16px; padding: 16px 16px 12px; border: 1px solid transparent; border-radius: 20px; background: var(--card);
  animation: card-rise 440ms var(--card-ease) 220ms backwards; transition: transform 240ms var(--card-ease), border-color 220ms ease, box-shadow 240ms ease; }
.customer-reservation-card:nth-child(2) { animation-delay: 270ms; } .customer-reservation-card:nth-child(3) { animation-delay: 320ms; } .customer-reservation-card:nth-child(n+4) { animation-delay: 370ms; }
.customer-reservation-card:is(:hover,:focus-within) { border-color: var(--card-hover-line); box-shadow: var(--card-hover-shadow); transform: translateY(-3px); }
.customer-reservation-photo { position: relative; display: flex; align-items: center; min-width: 0; }
.customer-reservation-photo img { width: 100%; height: 96px; object-fit: contain; mix-blend-mode: multiply; filter: brightness(1.04);
  animation: car-arrive 760ms var(--card-ease) 380ms backwards; transition: transform 480ms var(--card-ease); }
.customer-reservation-photo::after { content: ""; position: absolute; inset: auto 12% 10px 12%; height: 10px; border-radius: 50%; background: radial-gradient(closest-side, #0f213d38, #0f213d00); pointer-events: none; }
.customer-reservation-card:is(:hover,:focus-within) .customer-reservation-photo img { transform: translateX(-6px) scale(1.04); }
.customer-reservation-main { display: grid; gap: 12px; min-width: 0; }
.customer-reservation-title { position: relative; min-width: 0; padding-inline-start: 14px; }
.customer-reservation-title::before { content: ""; position: absolute; inset-block: 4px; inset-inline-start: 0; width: 4px; border-radius: 4px; background: var(--blue);
  clip-path: inset(0 0 calc(100% - 22px) 0 round 4px); transition: clip-path 320ms var(--card-ease); }
.customer-reservation-card:is(:hover,:focus-within) .customer-reservation-title::before { clip-path: inset(0 round 4px); }
.customer-reservation-vehicle { font: 700 20px/1.35 var(--display); overflow-wrap: anywhere; }
.customer-reservation-code { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
.customer-reservation-code strong { color: var(--muted); font-size: 13px; font-weight: 700; }
.customer-reservation-point { background: var(--white); border-radius: 12px; padding: 10px 12px; }
.customer-reservation-point strong { font-size: 13px; }
.customer-reservation-footer { grid-column: 1 / -1; margin-top: 12px; padding-top: 10px; }
.customer-reservation-total strong { color: var(--blue); font-size: 20px; line-height: 1.3; font-variant-numeric: tabular-nums; }
/* "View booking" is an icon button (action-icons.js); it leans toward the reading direction when the card wakes up. */
.customer-reservation-link { transition: transform 260ms var(--card-ease), background-color .15s ease; }
.customer-reservation-card:is(:hover,:focus-within) .customer-reservation-link { transform: translateX(3px); }
[dir="rtl"] .customer-reservation-card:is(:hover,:focus-within) .customer-reservation-link { transform: translateX(-3px); }
@media (hover: none) { .customer-reservation-card:hover { transform: none; } }
@media (max-width: 560px) { .customer-reservation-card { grid-template-columns: minmax(0, 1fr); } .customer-reservation-photo img { height: 110px; } .customer-reservation-photo { justify-content: center; } }

/* Account tabs: one blue pill slides between "current" and "past" (the buttons themselves stay transparent), the
   count badge pops when its tab wakes up, and the shown panel fades up so its cards rise in again. */
:root .account-dialog .reservation-tabs { position: relative; isolation: isolate; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 6px; border-radius: 18px; background: var(--card); }
.account-dialog .reservation-tabs::before { content: ""; position: absolute; z-index: -1; inset-block: 6px; inset-inline-start: 6px; width: calc((100% - 18px) / 2); border-radius: 12px; background: var(--blue);
  box-shadow: 0 6px 18px rgb(var(--glow) / .25); transition: transform 380ms var(--card-ease), box-shadow 260ms ease; }
[dir="ltr"] .account-dialog .reservation-tabs:has(> button:nth-child(2)[aria-selected="true"])::before { transform: translateX(calc(100% + 6px)); }
[dir="rtl"] .account-dialog .reservation-tabs:has(> button:nth-child(2)[aria-selected="true"])::before { transform: translateX(calc(-100% - 6px)); }
:root .account-dialog .reservation-tabs button { min-height: 44px; border-radius: 12px; background: transparent; box-shadow: none; color: var(--muted-dark); transition: color 260ms ease; }
:root .account-dialog .reservation-tabs button[aria-selected="true"] { background: transparent; color: var(--white); box-shadow: none; }
:root .account-dialog .reservation-tabs button:not([aria-selected="true"]):hover { color: var(--ink); }
.account-dialog .reservation-tabs b { transition: background-color 260ms ease, color 260ms ease, transform 320ms var(--card-ease); }
:root .account-dialog .reservation-tabs button[aria-selected="true"] b { background: #ffffff2e; color: var(--white); animation: badge-pop 420ms var(--card-ease); }
@keyframes badge-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: none; } }
.account-dialog .reservation-tab-panel:not([hidden]) { animation: panel-in 340ms var(--card-ease) backwards; }
.account-dialog .reservation-tab-panel:not([hidden]) .customer-reservation-card { animation-delay: 60ms; }
.account-dialog .reservation-tab-panel:not([hidden]) .customer-reservation-card:nth-child(2) { animation-delay: 110ms; }
.account-dialog .reservation-tab-panel:not([hidden]) .customer-reservation-card:nth-child(3) { animation-delay: 160ms; }
.account-dialog .reservation-tab-panel:not([hidden]) .customer-reservation-card:nth-child(n+4) { animation-delay: 210ms; }
.account-empty-state { border: 1px solid transparent; border-radius: 20px; background: var(--card); color: var(--muted); font-size: 14px; animation: panel-in 380ms var(--card-ease) 80ms backwards; }

/* Dialogs settle in rather than pop; the review card's car drives in and its price lines follow one by one. */
.trip-dialog[open] { animation: dialog-in 320ms var(--card-ease); }
.trip-dialog[open]::backdrop { animation: backdrop-in 260ms ease; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
.review-dialog[open] .review-vehicle { animation: card-rise 460ms var(--card-ease) 120ms backwards; }
.review-dialog[open] .review-vehicle img { animation: car-arrive 760ms var(--card-ease) 260ms backwards; }
.review-vehicle-copy { position: relative; padding-inline-start: 14px; }
.review-vehicle-copy::before { content: ""; position: absolute; inset-block: 4px; inset-inline-start: 0; width: 4px; border-radius: 4px; background: var(--blue); clip-path: inset(0 0 100% 0 round 4px); }
.review-dialog[open] .review-vehicle-copy::before { clip-path: inset(0 round 4px); transition: clip-path 480ms var(--card-ease) 420ms; }
#reviewPricing .pricing-breakdown > div { animation: price-in 380ms var(--card-ease) backwards; }
#reviewPricing .pricing-breakdown > div:nth-child(1) { animation-delay: 260ms; } #reviewPricing .pricing-breakdown > div:nth-child(2) { animation-delay: 300ms; }
#reviewPricing .pricing-breakdown > div:nth-child(3) { animation-delay: 340ms; } #reviewPricing .pricing-breakdown > div:nth-child(4) { animation-delay: 380ms; }
#reviewPricing .pricing-breakdown > div:nth-child(5) { animation-delay: 420ms; } #reviewPricing .pricing-breakdown > div:nth-child(6) { animation-delay: 460ms; }
#reviewPricing .pricing-breakdown > div:nth-child(n+7) { animation-delay: 500ms; }
/* …and the total lands last with a little weight: it overshoots slightly, then settles. */
#reviewPricing .pricing-breakdown > [data-line="total"] { animation: total-land 620ms var(--card-ease) 560ms backwards; transform-origin: center; }
@keyframes total-land { 0% { opacity: 0; transform: translateY(10px) scale(.96); } 60% { opacity: 1; transform: translateY(0) scale(1.025); } 100% { opacity: 1; transform: none; } }

/* The review step's booking summary is the same grey card, photo blended the same way. */
.review-vehicle { background: var(--card); border-color: transparent; border-radius: 20px; padding: 16px; }
.review-vehicle img { background: transparent; border-radius: 0; object-fit: contain; mix-blend-mode: multiply; filter: brightness(1.04); }
.car-features { gap: 8px; }
.feature { color: var(--muted); background: var(--white); font-size: 12px; }
.card-footer { padding: 12px 16px 16px; }
.price-value { font-size: 32px; }
.total-rate,.per-day { color: var(--muted); font-size: 13px; }
.support-section { border: 0; background: transparent; color: var(--on-dark); padding-block: 32px; }
.support-section p { color: var(--accent); }
.support-section span { color: var(--muted-dark); }
.support-actions a { color: var(--on-dark); border-color: var(--line-dark); border-radius: 12px; }
.support-actions a span { color: inherit; }
.site-footer { color: var(--muted-dark); background: transparent; border-color: var(--line-dark); font-size: 13px; }
.site-footer button { color: var(--accent); }
.auth-mode-switch,.reservation-tabs { background: var(--cloud); }
.auth-mode-switch button.active,.reservation-tabs button.active { background: var(--surface-dark); color: var(--on-dark); box-shadow: none; }
.reservation-tabs button.active b { color: var(--canvas); background: var(--accent); }
.time-pill { background: var(--blue-soft); color: var(--blue-dark); }
.progress-list li,.progress-step-button { border-radius: 12px; }

/* Confirmation retains the light document palette. */
.confirmation-main { margin-block: 24px 48px; }
.confirmation-card { padding: 30px; border-radius: 28px; box-shadow: none; }
.confirmation-title h1,html[dir="rtl"] .confirmation-title h1 { font-family: var(--display); font-size: 36px; }
.reference-panel { background: var(--surface-dark); border-color: var(--surface-dark); border-radius: 20px; padding: 24px; }
.reference-panel strong { color: var(--on-dark); font-family: var(--body); line-height: 1.4; }
.reference-panel span { color: var(--accent); }
.reference-panel p { color: var(--muted-dark); font-size: 13px; }
.summary-grid { background: var(--cloud); border-radius: 18px; }
.summary-item { padding: 18px; }
.confirmation-section { margin-top: 26px; padding-top: 24px; }
.confirmation-section h2 { font-family: var(--display); font-size: 22px; }
.trip-columns time { color: var(--blue-dark); background: var(--blue-soft); border-radius: 10px; }
.detail-list div { padding-block: 14px; }
.document-card { border-radius: 20px; }
.document-preview { border-radius: 14px; }
.document-preview-caption { background: var(--blue-soft); color: var(--blue-dark); font-size: 16px; }
.confirmation-loading,.confirmation-error { color: var(--on-dark); }
.confirmation-error p { color: var(--muted-dark); }
.confirmation-error a { color: var(--accent); }
.confirmation-actions { justify-content: flex-end; }

@media (max-width:1100px) and (min-width:761px) {
  .admin-shell { grid-template-columns: 200px minmax(0,1fr); }
  .admin-main { padding-inline: 20px; }
  .loading-bar { margin-inline: -20px; } /* bleeds exactly the padding above (admin.css's -28px would poke 8px past the window) */
  .admin-header h1 { font-size: 28px; }
  .admin-header > div:first-of-type { min-width: 0; }
  .nav-item { padding-inline: 8px; }
}
@media (max-width:760px) {
  .admin-shell { gap: 0; }
  .admin-main { padding-inline: 14px; }
  .admin-header { min-height: 80px; }
  .admin-header h1 { font-size: 26px; }
  .sidebar { background: var(--canvas); }
  .stat-grid { gap: 10px; }
  .stat-grid article { padding: 16px; border-radius: 18px; }
  .stat-grid strong { font-size: 28px; }
  .panel,.loyalty-panel { padding: 18px; border-radius: 20px; }
  .reservation-lookup { padding: 18px; }
  .customer-detail-dialog { border-radius: 0; }
  .customer-detail-head { background: var(--canvas); }
  .site-header,.confirmation-header { height: 64px; padding-inline: 16px; }
  .brand-logo,.confirmation-logo { height: 40px; }
  .header-actions { gap: 6px; }
  .site-header .text-button { max-width: 140px; }
  .reservation-search-section { padding: 8px 12px 18px; }
  .reservation-search-shell { border-radius: 20px; }
  .reservation-search-form { padding: 18px 16px; }
  .reservation-promotion { order: 1; border-bottom: 0; border-top: 1px solid var(--line-dark); }
  .promotion-visual { display: none; }
  .reservation-promotion.has-custom-promotion .promotion-visual:not([hidden]) { display: block; }
  .reservation-contact { padding: 16px; }
  .fleet-section { width: calc(100% - 24px); padding: 16px 12px 24px; border-radius: 22px; }
  .car-grid { gap: 14px; }
  .controls-bar { gap: 10px; }
  .filter-control,.sort-control { min-height: 48px; }
  .support-section { padding-inline: 6px; }
  .confirmation-main { width: calc(100% - 24px); }
  .confirmation-card { padding: 20px 16px; border-radius: 22px; }
  .confirmation-title h1,html[dir="rtl"] .confirmation-title h1 { font-size: 28px; }
  .reference-panel { padding: 18px; }
  .reference-panel strong { font-size: clamp(22px,6vw,32px); overflow-wrap: anywhere; }
  .summary-item { padding: 12px; }
  .confirmation-actions { flex-direction: row; flex-wrap: wrap; }
  .confirmation-actions > a { flex: 1; width: auto; }
}
/* Compact trip dates on phones: date and time share one row per group (pick-up, return), 44px fields, tight gaps.
   The text stays at least 16px so iOS does not zoom on focus (the dates and times are 17px, see #tripSearchForm above); below 360px the paddings give way instead of the type. */
@media (max-width:760px) {
  .reservation-datetime-grid { gap: 10px; margin-top: 10px; }
  .reservation-datetime-group { grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 6px; }
  .reservation-datetime-group legend { margin-bottom: 4px; font-size: 13px; line-height: 1.4; }
  .reservation-search-form .reservation-datetime-group .reservation-input-shell { height: 44px; min-height: 44px; padding-inline: 10px; gap: 6px; border-radius: 12px; }
  .reservation-search-form .reservation-datetime-group .reservation-input-shell input { min-width: 0; width: 100%; padding: 0; font-size: 16px; }
}
@media (max-width:360px) {
  .reservation-datetime-group { grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: 4px; }
  .reservation-search-form .reservation-datetime-group .reservation-input-shell { padding-inline: 6px; gap: 2px; }
}
@media (max-width:380px) {
  .site-header .text-button { max-width: 105px; font-size: 12px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior: auto!important; animation: none!important; transition: none!important; }
}
@media (prefers-contrast:more) {
  :root { --muted: #3f4a4d; --slate: #3f4a4d; --control-border: #657265; --line: #7e897f; --muted-dark: #e0e5e2; }
}
@media print {
  html,body { background: #fff; color: #000; }
  .confirmation-header,.confirmation-card,.reference-panel,.summary-grid,.document-viewer { background: #fff; color: #000; box-shadow: none; border-radius: 0; }
  .confirmation-header { border-color: #aaa; }
  .reference-panel { border: 1px solid #aaa; }
  .reference-panel :is(strong,span,p) { color: #000; }
  .confirmation-main { width: 100%; margin: 0; }
  .confirmation-card { padding: 0; }
  #copyReservationCode { display: none; }
}
/* <small> defaults to 0.83em, which lands under the 12px minimum inside 14px table cells. */
small { font-size: max(12px, .8333em); }