/* ============================================================
   P5 CHAUFFEURS — component styles (booking, planner,
   concierge, admin). Loaded after main.css.
   ============================================================ */

/* ── BOOKING WIDGET ────────────────────────────────────── */
.bw { display:flex; flex-direction:column; gap:1.55rem; width:100%; }
/* display classes below would otherwise defeat the hidden attribute */
.bw [hidden] { display:none !important; }
/* Progressive disclosure: date/time + extras arrive once the journey is set */
.bw__later { display:flex; flex-direction:column; gap:1.55rem; }
.bw__later--in { animation:bwIn 0.5s var(--ease-out); }
.bw__extras { display:flex; flex-direction:column; gap:1.4rem; }
.bw__extrasToggle { align-self:flex-start; display:inline-flex; align-items:baseline; gap:0.6rem; font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--on-dark-mid); min-height:36px; padding:0.2rem 0; border-bottom:1px solid transparent; transition:color var(--t) var(--ease); }
.bw__extrasToggle em { font-style:normal; text-transform:none; letter-spacing:0.02em; font-size:0.74rem; color:var(--on-dark-dim); }
.bw__extrasToggle:hover { color:var(--champagne); }
.bw__steps { list-style:none; display:flex; gap:0.5rem; margin:0 0 -0.4rem; }
.bw__step { flex:1; display:flex; align-items:center; gap:0.45rem; font-size:0.6rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--on-dark-dim); padding-bottom:0.6rem; border-bottom:1px solid var(--on-dark-line); transition:color 0.3s var(--ease),border-color 0.3s var(--ease); }
.bw__stepNum { flex:none; width:18px; height:18px; border-radius:50%; display:inline-grid; place-items:center; border:1px solid var(--on-dark-line); font-size:0.6rem; }
.bw__step.on { color:var(--on-dark); border-bottom-color:var(--champagne); }
.bw__step.on .bw__stepNum { border-color:var(--champagne); color:var(--champagne); }
.bw__step.done { color:var(--on-dark-mid); border-bottom-color:var(--champagne); }
.bw__step.done .bw__stepNum { background:var(--champagne); border-color:var(--champagne); color:var(--espresso); }
.bw__modes { display:flex; gap:0.4rem; padding:0.3rem; border:1px solid var(--on-dark-line); border-radius:var(--radius-pill); align-self:flex-start; }
.bw__modeTab { font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--on-dark-dim); padding:0.5rem 1.1rem; min-height:34px; border-radius:var(--radius-pill); transition:color var(--t) var(--ease),background var(--t) var(--ease); }
.bw__modeTab:hover { color:var(--on-dark-mid); }
.bw__modeTab.on { color:var(--espresso); background:var(--champagne); }
/* Vehicle picker. flex:1 with the default min-width:auto means each button
   refuses to shrink below its own longest word plus padding, so four options
   could not fit a 327px phone column and pushed the whole document to 416px —
   the sideways-scroll on /, /book, /pricing, /services and /airports.
   Wrapping keeps every option visible and tappable instead of clipped; the
   0.5rem gap is subtracted so two sit per row without rounding overflow. */
.bw__vehicles { display:flex; gap:0.5rem; flex-wrap:wrap; }
.bw__veh { min-width:0; }
@media (max-width:560px){
  .bw__veh { flex:1 1 calc(50% - 0.25rem); }
}
.bw__veh { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:0.85rem 0.3rem 0.85rem; min-height:56px; color:var(--on-dark-dim); border:1px solid var(--on-dark-line); border-radius:var(--radius-md); background:transparent; transition:color var(--t) var(--ease),border-color var(--t) var(--ease),background var(--t) var(--ease),transform var(--t-fast) var(--ease-out); }
.bw__veh:hover { color:var(--on-dark-mid); border-color:rgba(201,169,110,0.4); transform:translateY(-1px); }
.bw__veh.on { color:var(--on-dark); border-color:var(--champagne); background:rgba(201,169,110,0.09); box-shadow:inset 0 0 0 1px rgba(201,169,110,0.35); }
.bw__vehName { font-size:0.8rem; font-weight:600; letter-spacing:0.01em; }
.bw__vehPax { font-size:0.66rem; opacity:0.9; font-variant-numeric:tabular-nums; }
.bw__field { display:flex; flex-direction:column; gap:0.55rem; flex:1; position:relative; }
.bw__field > span { font-size:0.62rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--on-dark-dim); font-weight:500; }
.bw__field input, .bw__field select, .bw__field textarea { background:transparent; border:none; border-bottom:1px solid var(--on-dark-line); border-radius:0; color:var(--on-dark); font-size:1rem; padding:0.6rem 0 0.65rem; min-height:44px; outline:none; transition:border-color 0.3s var(--ease),box-shadow 0.3s var(--ease); width:100%; -webkit-appearance:none; color-scheme:dark; }
.bw__field input:focus, .bw__field select:focus, .bw__field textarea:focus { border-bottom-color:var(--champagne); box-shadow:0 1px 0 0 var(--champagne); }
.bw__field input:hover, .bw__field textarea:hover { border-bottom-color:var(--on-dark-mid); }
.bw__field input::placeholder, .bw__field textarea::placeholder { color:var(--on-dark-dim); font-weight:300; }
.bw__field input[type="date"]::-webkit-calendar-picker-indicator,
.bw__field input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(0.85); cursor: pointer; }
.bw__field select option, .pf__cc option, .bw__mini option { background: var(--graphite-2); color: var(--on-dark); }
.bw__row { display:flex; gap:2rem; }
@media (max-width:520px){ .bw__row{ flex-direction:column; gap:1.55rem; } }
.bw__chips { display:flex; gap:0.6rem; flex-wrap:wrap; margin-top:-0.35rem; }
.bw__chip { font-size:0.64rem; letter-spacing:0.11em; text-transform:uppercase; color:var(--on-dark-mid); padding:0.55rem 0.95rem; min-height:34px; border:1px solid var(--on-dark-line); border-radius:var(--radius-pill); transition:color var(--t) var(--ease),border-color var(--t) var(--ease),background var(--t) var(--ease); }
.bw__chip:hover { color:var(--espresso); border-color:var(--champagne); background:var(--champagne); }
.bw__submit { margin-top:0.7rem; background:var(--champagne); color:var(--espresso); font-size:0.72rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; padding:1.2rem 2rem; min-height:54px; border-radius:var(--radius-sm); box-shadow:var(--shadow-xs); transition:background var(--t) var(--ease),box-shadow var(--t) var(--ease),transform var(--t-fast) var(--ease-out),opacity var(--t) var(--ease); text-align:center; display:block; }
.bw__submit:hover { background:var(--champagne-soft); transform:translateY(-2px); box-shadow:var(--shadow-gold); }
.bw__submit:active { transform:translateY(0); }
.bw__submit:disabled { opacity:0.55; cursor:default; transform:none; box-shadow:none; }
.bw__sugs { position:absolute; top:100%; left:0; right:0; z-index:40; margin-top:4px; list-style:none; background:var(--graphite-2); border:1px solid var(--on-dark-line); max-height:260px; overflow-y:auto; box-shadow:0 18px 40px rgba(0,0,0,0.45); }
.bw__sug { padding:0.7rem 0.9rem; font-size:0.82rem; color:var(--on-dark-mid); cursor:pointer; }
.bw__sug:hover, .bw__sug.on { background:rgba(241,236,227,0.06); color:var(--on-dark); }

/* Phone country code — reuses the .bw__sugs dropdown language above so the
   selector reads as part of the same form, not a bolted-on widget. */
.bw__tel { display:flex; align-items:flex-end; gap:0.6rem; position:relative; }
.bw__telBtn { display:flex; align-items:center; gap:0.35rem; flex:0 0 auto; background:transparent; border:none; border-bottom:1px solid var(--on-dark-line); color:var(--on-dark); font-size:1rem; padding:0.6rem 0 0.65rem; min-height:44px; cursor:pointer; transition:border-color 0.3s var(--ease),box-shadow 0.3s var(--ease); }
.bw__telBtn:hover { border-bottom-color:var(--on-dark-mid); }
.bw__telBtn[aria-expanded="true"] { border-bottom-color:var(--champagne); box-shadow:0 1px 0 0 var(--champagne); }
.bw__telBtn:focus-visible { outline:2px solid var(--champagne); outline-offset:2px; border-radius:2px; }
.bw__telFlag { font-size:1.05rem; line-height:1; }
.bw__telCaret { font-size:0.6rem; color:var(--on-dark-dim); }
.bw__telNum { flex:1 1 auto; min-width:0; }
.bw__telPop { position:absolute; top:100%; left:0; z-index:45; margin-top:4px; width:min(310px,100%); background:var(--graphite-2); border:1px solid var(--on-dark-line); box-shadow:0 18px 40px rgba(0,0,0,0.45); }
.bw__telPop[hidden] { display:none; }
.bw__telSearch { width:100%; background:transparent; border:none; border-bottom:1px solid var(--on-dark-line); color:var(--on-dark); font-size:0.9rem; padding:0.65rem 0.9rem; min-height:44px; outline:none; }
.bw__telSearch::placeholder { color:var(--on-dark-dim); font-weight:300; }
.bw__telList { list-style:none; margin:0; padding:0; max-height:240px; overflow-y:auto; }
.bw__telList li { padding:0.6rem 0.9rem; font-size:0.84rem; color:var(--on-dark-mid); cursor:pointer; display:flex; align-items:center; gap:0.45rem; }
.bw__telList li em { margin-left:auto; font-style:normal; color:var(--on-dark-dim); font-variant-numeric:tabular-nums; }
.bw__telList li:hover, .bw__telList li.on { background:rgba(241,236,227,0.06); color:var(--on-dark); }
.bw__telList li[aria-selected="true"] { color:var(--champagne); }
.bw__telNone { cursor:default; color:var(--on-dark-dim); }
@media (max-width:520px){ .bw__telPop { width:100%; } }

/* Server-rendered phone field (contact, callback, admin manual entry) —
   native select so these script-free forms need no controller. */
.pf { display:flex; align-items:flex-end; gap:0.6rem; width:100%; }
.pf__cc { flex:0 1 8.5rem; min-width:0; text-overflow:ellipsis; background:transparent; border:none; border-bottom:1px solid var(--on-dark-line); border-radius:0; color:var(--on-dark); color-scheme:dark; padding:0.6rem 0 0.65rem; min-height:44px; font-size:0.95rem; }
.pf__num { flex:1 1 auto; min-width:0; }
@media (max-width:520px){ .pf { flex-direction:column; align-items:stretch; gap:0.5rem; } .pf__cc { flex:1 1 auto; } }
.bw__addons { display:flex; flex-wrap:wrap; gap:0.25rem 1.4rem; padding-top:0.2rem; }
.bw__addon { display:inline-flex; align-items:center; gap:0.55rem; font-size:0.82rem; color:var(--on-dark-mid); cursor:pointer; padding-block:0.45rem; min-height:40px; }
.bw__addon:hover { color:var(--on-dark); }
.bw__addon input { width:17px; height:17px; accent-color:var(--champagne); }
.bw__mini { background:transparent; border:1px solid var(--on-dark-line); color:var(--on-dark); padding:0.35rem 0.6rem; min-height:32px; color-scheme:dark; cursor:pointer; }
.bw__save { font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--champagne); }
.bw__err { color:#e0a3a3; font-size:0.8rem; margin:0.2rem 0; }
.bw__result { border-top:1px solid var(--on-dark-line); padding-top:1.4rem; display:flex; flex-direction:column; gap:1rem; }
.bw__resultHead { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.bw__resultHead > span:first-child { font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--on-dark-dim); }
.bw__total { font-family:var(--serif); font-size:2.2rem; color:var(--champagne); line-height:1; }
.bw__lines { list-style:none; display:flex; flex-direction:column; gap:0.5rem; }
.bw__lines li { display:flex; justify-content:space-between; gap:1rem; font-size:0.82rem; color:var(--on-dark-mid); }
.bw__lines li em { font-style:normal; color:var(--on-dark-dim); font-size:0.72rem; }
.bw__note { font-size:0.72rem; color:var(--on-dark-dim); }
.bw__confidence { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:0.4rem 1.2rem; margin:-0.2rem 0 0.2rem; }
.bw__confidence li { position:relative; padding-left:1.15rem; font-size:0.76rem; line-height:1.35; color:var(--on-dark-mid); }
.bw__confidence li::before { content:'\2713'; position:absolute; left:0; top:0; color:var(--champagne); }
@media (max-width:520px){ .bw__confidence{ grid-template-columns:1fr; } }
.bw__success { padding:2rem; border:1px solid rgba(201,169,110,0.3); text-align:left; position:relative; }
.bw__tick { display:block; font-size:1.6rem; color:var(--champagne); margin-bottom:0.6rem; }
.bw__success strong { font-family:var(--serif); font-size:1.4rem; font-weight:400; display:block; margin-bottom:0.5rem; }
.bw__success p { font-size:0.85rem; color:var(--on-dark-mid); }
.bw__success a { color:var(--champagne); }
.bw__or { margin-top:0.3rem; padding-top:1.7rem; border-top:1px solid var(--on-dark-line); display:flex; align-items:baseline; gap:1.2rem; flex-wrap:wrap; }
.bw__orLabel { font-size:0.6rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--on-dark-dim); }
.bw__orNum { font-family:var(--serif); font-size:1.5rem; color:var(--on-dark); }
.bw__orNum:hover { color:var(--champagne); }
.bw__orNote { font-size:0.7rem; color:var(--on-dark-dim); }
.bw__link { align-self:flex-start; margin-top:-0.9rem; font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--on-dark-mid); border-bottom:1px solid transparent; }
.bw__link:hover { color:var(--champagne); border-bottom-color:var(--champagne); }
.bw__flightOk { font-size:0.76rem; line-height:1.4; color:var(--champagne); margin-top:-0.4rem; }

/* ── JOURNEY MAP ───────────────────────────────────────── */
.jmap { width:100%; height:280px; border:1px solid var(--on-dark-line); background:#14100d; overflow:hidden; z-index:0; }
.jmap .leaflet-container { background:#14100d; font-family:inherit; }
.jmap .leaflet-control-attribution { background:rgba(20,16,13,0.7); color:var(--on-dark-dim); font-size:10px; }

/* ── PLANNER RESULT ────────────────────────────────────── */
.pl__result { display:flex; flex-direction:column; gap:2rem; }
.pl__summary { border:1px solid var(--on-dark-line); background:rgba(201,169,110,0.035); padding:1.6rem 1.5rem; }
.pl__route { display:flex; align-items:center; gap:0.9rem; padding-bottom:1.2rem; margin-bottom:1.2rem; border-bottom:1px solid var(--on-dark-line); }
.pl__routeCol { flex:1; min-width:0; }
.pl__routeLabel { font-size:0.58rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--on-dark-dim); display:block; margin-bottom:0.35rem; }
.pl__routePlace { font-family:var(--serif); font-size:1.05rem; }
.pl__routeArrow { color:var(--champagne); font-size:1.1rem; }
.pl__metrics { display:flex; flex-wrap:wrap; gap:1.4rem 2rem; }
.pl__metric { display:flex; flex-direction:column; gap:0.25rem; }
.pl__metricVal { font-family:var(--serif); font-size:1.35rem; line-height:1; }
.pl__metricVal em { font-style:normal; color:var(--champagne); }
.pl__metricKey { font-size:0.58rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--on-dark-dim); }
.pl__notes { margin-top:1.3rem; display:flex; flex-direction:column; gap:0.75rem; }
.pl__note { display:flex; gap:0.7rem; font-size:0.82rem; line-height:1.5; color:var(--on-dark-mid); }
.pl__noteIcon { flex:none; color:var(--champagne); }
.pl__note strong { color:var(--on-dark); font-weight:500; }
.pl__cards { display:grid; grid-template-columns:repeat(2,1fr); gap:0.9rem; margin-top:0.9rem; }
@media (max-width:560px){ .pl__cards{ grid-template-columns:1fr; } }
.pl__card { border:1px solid var(--on-dark-line); padding:1.1rem 1.15rem 1.25rem; display:flex; flex-direction:column; gap:0.7rem; transition:border-color 0.3s var(--ease),transform 0.2s var(--ease); }
.pl__card:hover { border-color:rgba(201,169,110,0.55); transform:translateY(-3px); }
.pl__cardTop { display:flex; align-items:baseline; justify-content:space-between; gap:0.8rem; }
.pl__cardName { font-family:var(--serif); font-size:1.3rem; }
.pl__cardPrice { font-family:var(--serif); font-size:1.55rem; color:var(--champagne); }
.pl__cardSpecs { display:flex; gap:1rem; font-size:0.7rem; color:var(--on-dark-mid); }
.pl__cardSpecs b { color:var(--on-dark); font-weight:500; }
.pl__cardUse { font-size:0.8rem; line-height:1.45; color:var(--on-dark-dim); flex:1; }
.pl__cardBtn { margin-top:0.4rem; background:transparent; color:var(--on-dark); border:1px solid var(--on-dark-line); font-size:0.62rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; padding:0.85rem 1rem; min-height:44px; transition:background 0.3s var(--ease),border-color 0.3s var(--ease),color 0.3s var(--ease); }
.pl__card:hover .pl__cardBtn, .pl__cardBtn:hover { background:var(--champagne); border-color:var(--champagne); color:var(--espresso); }
.pl__actions { display:flex; flex-wrap:wrap; gap:0.6rem; padding-top:1.4rem; border-top:1px solid var(--on-dark-line); }

/* ── CONCIERGE ─────────────────────────────────────────── */
.cg { display:flex; flex-direction:column; gap:3rem; padding:7rem 0 5rem; }
.cg__eyebrow { font-size:0.66rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--champagne); margin-bottom:1.1rem; }
.cg__title { font-family:var(--serif); font-weight:400; line-height:1.02; font-size:clamp(2.4rem,6vw,4.4rem); }
.cg__title em { font-style:italic; color:var(--champagne); }
.cg__lead { margin-top:1.4rem; font-size:1.02rem; line-height:1.6; color:var(--on-dark-mid); max-width:46ch; }
.cg__refRow { display:flex; align-items:center; gap:0.8rem; margin-top:2rem; flex-wrap:wrap; }
.cg__refLabel { font-size:0.6rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--on-dark-dim); }
.cg__ref { font-family:var(--serif); font-size:1.25rem; letter-spacing:0.05em; }
.cg__pulse { width:8px; height:8px; border-radius:50%; margin-left:0.4rem; background:var(--champagne); }
.cg__liveLabel { font-size:0.6rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--on-dark-mid); }
.cg__grid { display:grid; grid-template-columns:1.4fr 1fr; gap:3.5rem; align-items:start; }
@media (max-width:860px){ .cg__grid{ grid-template-columns:1fr; gap:2.5rem; } }
.cg__stages { list-style:none; display:flex; flex-direction:column; }
.cg__stage { position:relative; display:flex; gap:1.2rem; padding-bottom:1.9rem; }
.cg__stage::before { content:''; position:absolute; left:15px; top:32px; bottom:-4px; width:1px; background:var(--on-dark-line); }
.cg__stage:last-child { padding-bottom:0; }
.cg__stage:last-child::before { display:none; }
.cg__stage.done::before { background:var(--champagne); }
.cg__node { flex:none; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--on-dark-line); font-size:0.72rem; color:var(--on-dark-dim); background:var(--espresso); }
.cg__stage.done .cg__node { border-color:var(--champagne); background:var(--champagne); color:var(--espresso); }
.cg__stage.active .cg__node { border-color:var(--champagne); color:var(--champagne); box-shadow:0 0 0 4px rgba(201,169,110,0.12); }
.cg__stageBody { display:flex; flex-direction:column; gap:0.35rem; padding-top:0.35rem; }
.cg__stageTitle { font-size:0.95rem; color:var(--on-dark-dim); }
.cg__stage.done .cg__stageTitle { color:var(--on-dark-mid); }
.cg__stage.active .cg__stageTitle { color:var(--on-dark); font-weight:500; font-size:1.06rem; }
.cg__stageDetail { font-size:0.84rem; line-height:1.55; color:var(--on-dark-mid); max-width:44ch; }
.cg__inlineLink { align-self:flex-start; margin-top:0.25rem; font-size:0.78rem; color:var(--champagne); border-bottom:1px solid var(--champagne); }
.cg__flightStatus { align-self:flex-start; font-size:0.8rem; color:var(--champagne); }
.cg__card { border:1px solid var(--on-dark-line); padding:2rem; display:flex; flex-direction:column; gap:1.8rem; background:rgba(201,169,110,0.02); }
.cg__driver { display:flex; flex-direction:column; gap:0.9rem; padding-bottom:1.6rem; border-bottom:1px solid var(--on-dark-line); }
.cg__driverEyebrow { font-size:0.58rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--champagne); }
.cg__driverMain { display:flex; align-items:center; gap:0.9rem; }
.cg__driverPhoto { width:52px; height:52px; border-radius:50%; object-fit:cover; border:1px solid var(--on-dark-line); }
.cg__driverName { display:block; font-size:1rem; }
.cg__driverVeh { display:block; font-size:0.82rem; color:var(--on-dark-mid); margin-top:0.15rem; }
.cg__vehPhoto { width:100%; border:1px solid var(--on-dark-line); object-fit:cover; max-height:150px; }
.cg__routeCard { display:flex; flex-direction:column; }
.cg__routeRow { display:flex; gap:0.9rem; align-items:flex-start; }
.cg__routeRow > div { display:flex; flex-direction:column; gap:0.15rem; }
.cg__routeDot { flex:none; width:12px; height:12px; border-radius:50%; margin-top:4px; border:2px solid var(--champagne); }
.cg__routeDot.drop { background:var(--champagne); }
.cg__routeLine { width:2px; height:22px; margin-left:5px; background:var(--on-dark-line); }
.cg__routeLabel { font-size:0.58rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--on-dark-dim); }
.cg__routePlace { font-size:0.94rem; line-height:1.35; }
.cg__meta { display:flex; flex-direction:column; }
.cg__meta > div { display:flex; justify-content:space-between; gap:1rem; padding:0.7rem 0; border-bottom:1px solid var(--on-dark-line); }
.cg__meta > div:last-child { border-bottom:none; }
.cg__meta dt { font-size:0.72rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--on-dark-dim); }
.cg__meta dd { font-size:0.9rem; text-align:right; }
.cg__fare { font-family:var(--serif); font-size:1.15rem; color:var(--champagne); }
.cg__trust { list-style:none; display:flex; flex-direction:column; gap:0.55rem; }
.cg__trust li { position:relative; padding-left:1.4rem; font-size:0.82rem; color:var(--on-dark-mid); }
.cg__trust li::before { content:'\2713'; position:absolute; left:0; color:var(--champagne); }
.cg__actions { display:flex; gap:0.8rem; flex-wrap:wrap; }
.cg__btnPrimary { background:var(--champagne); color:var(--espresso); font-size:0.7rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; padding:0.95rem 1.5rem; min-height:48px; display:inline-flex; align-items:center; justify-content:center; }
.cg__btnGhost { border:1px solid var(--on-dark-line); color:var(--on-dark-mid); font-size:0.7rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; padding:0.95rem 1.5rem; min-height:48px; display:inline-flex; align-items:center; justify-content:center; }
.cg__btnGhost:hover { border-color:var(--champagne); color:var(--on-dark); }

/* ── ADMIN ─────────────────────────────────────────────── */
.adm { max-width:1100px; margin:0 auto; padding:7rem 1.5rem 5rem; }
.adm__eyebrow { font-size:0.62rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--champagne); margin-bottom:0.6rem; }
.adm__head { display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:2.5rem; }
.adm__title { font-family:var(--serif); font-weight:400; font-size:clamp(2rem,4vw,3rem); }
.adm__actions { display:flex; gap:0.6rem; flex-wrap:wrap; align-items:center; }
.adm input { background:transparent; border:1px solid var(--on-dark-line); color:var(--on-dark); padding:0.7rem 0.85rem; min-height:44px; font-size:0.9rem; color-scheme:dark; border-radius:2px; }
.adm input:focus { border-color:var(--champagne); }
.adm input:focus-visible { outline:2px solid var(--champagne); outline-offset:2px; }
.adm__btnPrimary { background:var(--champagne); color:var(--espresso); border:1px solid var(--champagne); font-size:0.68rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; padding:0.7rem 1.1rem; min-height:44px; }
.adm__btnGhost { background:transparent; border:1px solid var(--on-dark-line); color:var(--on-dark-mid); font-size:0.68rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; padding:0.7rem 1.1rem; min-height:44px; }
.adm__btnGhost:hover { border-color:var(--champagne); color:var(--on-dark); }
.adm__err { color:#e0a3a3; font-size:0.82rem; }
.adm__section { margin-bottom:2.5rem; }
.adm__sectionTitle { font-size:0.7rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--on-dark-dim); margin-bottom:1rem; }
.adm__count { color:var(--champagne); margin-left:0.3rem; }
.adm__job { border:1px solid var(--on-dark-line); background:rgba(201,169,110,0.02); margin-bottom:0.7rem; }
.adm__jobHead { width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.2rem; text-align:left; cursor:pointer; }
.adm__jobRoute { font-size:0.98rem; }
.adm__arrow { color:var(--champagne); }
.adm__jobSub { font-size:0.78rem; color:var(--on-dark-mid); display:block; margin-top:0.3rem; }
.adm__tag { flex:none; font-size:0.6rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:600; padding:0.4rem 0.7rem; border-radius:999px; border:1px solid var(--champagne); color:var(--champagne); }
.adm__body { padding:0 1.2rem 1.3rem; display:flex; flex-direction:column; gap:1.2rem; border-top:1px solid var(--on-dark-line); padding-top:1.1rem; }
.adm__quick { display:flex; flex-wrap:wrap; gap:0.5rem; align-items:center; }
.adm__ref { font-family:var(--serif); font-size:1rem; color:var(--champagne); margin-right:0.4rem; }
.adm__chip { font-size:0.64rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--on-dark-mid); padding:0.45rem 0.75rem; border:1px solid var(--on-dark-line); }
.adm__chip:hover { border-color:var(--champagne); color:var(--on-dark); }
.adm__facts { display:flex; flex-wrap:wrap; gap:0.4rem 1rem; font-size:0.8rem; color:var(--on-dark-mid); }
.adm__stageRow { display:flex; flex-wrap:wrap; gap:0.4rem; }
.adm__stageBtn { font-size:0.66rem; color:var(--on-dark-mid); padding:0.5rem 0.7rem; min-height:38px; border:1px solid var(--on-dark-line); background:transparent; }
.adm__stageBtn:hover { border-color:var(--champagne); color:var(--on-dark); }
.adm__stageBtn.done { background:var(--champagne); border-color:var(--champagne); color:var(--espresso); }
.adm__assign { display:flex; flex-direction:column; gap:0.8rem; }
.adm__assignTitle { font-size:0.62rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--on-dark-dim); }
.adm__grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0.6rem; }
@media (max-width:620px){ .adm__grid2{ grid-template-columns:1fr; } .adm__head{ align-items:flex-start; } }
.adm__upload { display:flex; flex-direction:column; gap:0.5rem; }
.adm__uploadBtn { display:inline-flex; align-items:center; justify-content:center; font-size:0.62rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--on-dark-mid); padding:0.55rem 0.8rem; min-height:40px; border:1px dashed var(--on-dark-line); cursor:pointer; }
.adm__uploadBtn:hover { border-color:var(--champagne); color:var(--on-dark); }
.adm__thumb { width:100%; max-height:120px; object-fit:cover; border:1px solid var(--on-dark-line); }
.adm__login { min-height:70svh; display:grid; place-items:center; padding:2rem; }
.adm__loginForm { display:flex; flex-direction:column; gap:1rem; width:100%; max-width:340px; }
.adm__loginTitle { font-family:var(--serif); font-weight:400; font-size:2rem; margin-bottom:0.4rem; }

/* ── MINI BOOKING (compact booking bar) ────────────────── */
.mb { background:var(--espresso); border:1px solid var(--on-dark-line); padding:1.6rem; }
.mb__head { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom:1.2rem; }
.mb__title { font-family:var(--serif); font-size:1.4rem; color:var(--on-dark); }
.mb__note { font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--on-dark-dim); }
.mb__grid { display:grid; grid-template-columns:1.4fr 1.4fr 1fr 0.8fr auto; gap:0.9rem; align-items:end; }
@media (max-width:820px){ .mb__grid { grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .mb__grid { grid-template-columns:1fr; } }
.mb__field { display:flex; flex-direction:column; gap:0.4rem; }
.mb__field span { font-size:0.58rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--on-dark-dim); }
.mb__field input { background:transparent; border:none; border-bottom:1px solid var(--on-dark-line); color:var(--on-dark); font-size:1rem; padding:0.55rem 0; min-height:44px; color-scheme:dark; outline:none; }
.mb__field input:focus { border-bottom-color:var(--champagne); }
.mb__go { background:var(--champagne); color:var(--espresso); font-size:0.68rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; padding:0.9rem 1.3rem; min-height:48px; white-space:nowrap; transition:background 0.3s var(--ease); }
.mb__go:hover { background:var(--champagne-soft); }

/* ── VEHICLE COMPARE (modal dialog) ────────────────────── */
/* 19px tall, which is under the 24px floor for a control that opens the
   vehicle comparison. Inline-flex plus a min-height lifts the target without
   moving the underline off the text; the negative margin compensates so the
   booking form's spacing is unchanged. */
.bw__compareLink { align-self:flex-start; margin-top:-0.7rem; display:inline-flex; align-items:flex-end; min-height:32px; font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--on-dark-mid); border-bottom:1px solid transparent; }
.bw__compareLink:hover { color:var(--champagne); border-bottom-color:var(--champagne); }
.vc__overlay { position:fixed; inset:0; z-index:200; background:rgba(10,8,6,0.72); backdrop-filter:blur(4px); display:grid; place-items:center; padding:1.5rem; animation:vcFade 0.25s var(--ease); }
@keyframes vcFade { from { opacity:0; } to { opacity:1; } }
.vc__dialog { width:100%; max-width:960px; max-height:90svh; overflow-y:auto; background:var(--graphite); border:1px solid var(--on-dark-line); padding:2rem; }
.vc__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; }
.vc__title { font-family:var(--serif); font-weight:400; font-size:1.8rem; }
.vc__close { width:40px; height:40px; font-size:1.6rem; color:var(--on-dark-mid); }
.vc__close:hover { color:var(--on-dark); }
.vc__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0.9rem; }
@media (max-width:760px){ .vc__grid { grid-template-columns:1fr 1fr; } }
@media (max-width:440px){ .vc__grid { grid-template-columns:1fr; } }
.vc__card { position:relative; border:1px solid var(--on-dark-line); padding:1.3rem 1.1rem; display:flex; flex-direction:column; gap:0.6rem; }
.vc__card.on { border-color:var(--champagne); }
.vc__tag { position:absolute; top:0; right:0; font-size:0.54rem; letter-spacing:0.14em; text-transform:uppercase; font-weight:600; color:var(--espresso); background:var(--champagne); padding:0.3rem 0.55rem; }
.vc__cardTop { display:flex; align-items:baseline; justify-content:space-between; gap:0.6rem; }
.vc__name { font-family:var(--serif); font-size:1.3rem; }
.vc__price { font-family:var(--serif); font-size:1.4rem; color:var(--champagne); }
.vc__example { font-size:0.78rem; color:var(--on-dark-dim); }
.vc__best { font-size:0.82rem; color:var(--on-dark-mid); }
.vc__feats { list-style:none; display:flex; flex-direction:column; gap:0.35rem; font-size:0.8rem; color:var(--on-dark-mid); }
.vc__feats li { position:relative; padding-left:1.1rem; }
.vc__feats li::before { content:'✓'; position:absolute; left:0; color:var(--champagne); font-size:0.75rem; }
.vc__feats li:first-child { color:var(--on-dark); } .vc__feats li:first-child::before { content:''; }
.vc__pick { margin-top:0.5rem; background:transparent; border:1px solid var(--on-dark-line); color:var(--on-dark); font-size:0.62rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; padding:0.75rem; min-height:44px; transition:background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease); }
.vc__pick:hover { background:var(--champagne); border-color:var(--champagne); color:var(--espresso); }
.vc__note { margin-top:1.4rem; font-size:0.78rem; color:var(--on-dark-dim); }

/* ── CONFETTI (booking-confirmed burst) ────────────────── */
.cf__burst { position:absolute; top:2.6rem; left:2.4rem; width:0; height:0; pointer-events:none; z-index:2; }
.cf__shard { position:absolute; top:0; left:0; width:6px; height:6px; border-radius:1px; opacity:0; animation:cfFly 1s cubic-bezier(0.15,0.6,0.3,1) forwards; }
.cf__gold { background:var(--champagne); } .cf__cream { background:var(--on-dark); }
@keyframes cfFly { 0% { opacity:0; transform:translate(0,0) rotate(0) scale(0.4); } 15% { opacity:1; } 100% { opacity:0; transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(1); } }
@media (prefers-reduced-motion:reduce){ .cf__burst { display:none; } }

/* ── ADMIN CMS (sidebar layout + tables + forms) ───────── */
.acms { display:flex; min-height:100vh; }
.acms__side { flex:none; width:230px; background:var(--graphite); border-right:1px solid var(--on-dark-line); padding:1.4rem 0; position:sticky; top:0; height:100vh; overflow-y:auto; }
.acms__brand { display:block; font-family:var(--serif); font-size:1.3rem; padding:0 1.4rem 1rem; }
.acms__brand span { color:var(--champagne); }
.acms__group { padding:0.6rem 0; }
.acms__groupLabel { display:block; font-size:0.56rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--on-dark-dim); padding:0 1.4rem 0.4rem; }
.acms__link { display:block; padding:0.5rem 1.4rem; font-size:0.85rem; color:var(--on-dark-mid); border-left:2px solid transparent; }
.acms__link:hover { color:var(--on-dark); background:rgba(201,169,110,0.05); }
.acms__link.on { color:var(--champagne); border-left-color:var(--champagne); background:rgba(201,169,110,0.07); }
.acms__main { flex:1; min-width:0; padding:2.2rem 2.4rem 4rem; }
@media (max-width:760px){ .acms{ flex-direction:column; } .acms__side{ width:100%; height:auto; position:static; display:flex; flex-wrap:wrap; gap:.2rem; } .acms__group{ padding:.3rem .6rem; } }
.acms__head { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.8rem; }
.acms__title { font-family:var(--serif); font-weight:400; font-size:2rem; }
.acms__flash { background:rgba(201,169,110,0.1); border:1px solid var(--on-dark-line); padding:0.8rem 1rem; margin-bottom:1.4rem; color:var(--champagne); font-size:0.9rem; }
.acms__table { width:100%; border-collapse:collapse; font-size:0.88rem; }
.acms__table th { text-align:left; font-size:0.6rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--on-dark-dim); padding:0.6rem 0.8rem; border-bottom:1px solid var(--on-dark-line); }
.acms__table td { padding:0.7rem 0.8rem; border-bottom:1px solid var(--on-dark-line); color:var(--on-dark-mid); vertical-align:top; }
.acms__table tr:hover td { background:rgba(201,169,110,0.03); }
.acms__btn { display:inline-flex; align-items:center; justify-content:center; font-size:0.66rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; padding:0.55rem 1rem; min-height:38px; background:var(--champagne); color:var(--espresso); border:1px solid var(--champagne); }
.acms__btn:hover { background:var(--champagne-soft); }
.acms__btn--ghost { background:transparent; color:var(--on-dark-mid); border-color:var(--on-dark-line); }
.acms__btn--ghost:hover { border-color:var(--champagne); color:var(--on-dark); }
.acms__btn--danger { background:transparent; color:#e0a3a3; border-color:rgba(224,163,163,0.4); }
.acms__form { max-width:620px; display:flex; flex-direction:column; gap:1.1rem; }
.acms__field { display:flex; flex-direction:column; gap:0.4rem; }
.acms__field label { font-size:0.62rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--on-dark-dim); }
.acms__field input[type=text], .acms__field input[type=number], .acms__field input[type=email], .acms__field textarea, .acms__field select {
  background:transparent; border:1px solid var(--on-dark-line); color:var(--on-dark); padding:0.7rem 0.85rem; font-size:0.95rem; color-scheme:dark; border-radius:2px; width:100%; }
.acms__field input:focus, .acms__field textarea:focus, .acms__field select:focus { border-color:var(--champagne); }
.acms__field textarea { min-height:140px; resize:vertical; font-family:inherit; }

/* ── ADMIN CHROME OVERHAUL ─────────────────────────────────
   Layered on top of the base rules above rather than replacing them, so all 22
   admin pages pick this up without touching their markup. Sticky page header,
   sticky table headers, a sidebar that survives a phone, and AA focus states. */
.acms__side {
  width:245px; padding:1.2rem 0 2rem;
  background:linear-gradient(180deg, #221a15 0%, var(--graphite) 38%);
  scrollbar-width:thin;
}
.acms__brand { padding:0 1.3rem 1.1rem; letter-spacing:.01em; border-bottom:1px solid var(--on-dark-line); margin-bottom:.4rem; }
.acms__group + .acms__group { border-top:1px solid rgba(241,236,227,.05); }
.acms__groupLabel { padding:.7rem 1.3rem .35rem; font-size:.55rem; color:rgba(241,236,227,.36); }
.acms__link { padding:.48rem 1.3rem; line-height:1.35; transition:color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease); }
.acms__link.on { font-weight:500; }
.acms__link:focus-visible, .acms__brand:focus-visible { outline:2px solid var(--champagne); outline-offset:-2px; }

/* Page header sticks so the title and actions stay reachable down a long table. */
.acms__main { padding-top:0; }
.acms__head {
  position:sticky; top:0; z-index:30; margin:0 -2.4rem 1.6rem; padding:1.5rem 2.4rem 1.1rem;
  background:rgba(24,19,15,.93); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--on-dark-line);
}
.acms__title { font-size:1.75rem; line-height:1.15; }

.acms__flash { border-left:2px solid var(--champagne); border-radius:2px; line-height:1.5; }

/* Tables: sticky head, zebra banding, and a horizontal scroll on small screens
   so a wide operations table never pushes the page sideways. */
.acms__table th {
  position:sticky; top:4.6rem; z-index:20;
  background:rgba(24,19,15,.96); backdrop-filter:blur(6px);
}
.acms__table tbody tr:nth-child(even) td { background:rgba(241,236,227,.018); }
.acms__table tbody tr:hover td { background:rgba(201,169,110,.055); }
.acms__table td { vertical-align:middle; }
.acms__table code { font-size:.78em; color:var(--on-dark-dim); }

/* Lining, fixed-width figures so fares, dates and refs line up down the column.
   These tables are scanned for the odd row that looks wrong, and proportional
   digits break that scan: £142.50 and £46.20 don't share a decimal position.
   The booking widget and KPI values already did this; the operations tables,
   which is where the comparing actually happens, did not. */
.acms__table td,
.acms__table th { font-variant-numeric:tabular-nums lining-nums; }

/* Opt-in for genuinely numeric columns. Right-alignment is what makes a
   column of money comparable at a glance; it is wrong for text, so it is a
   class rather than a blanket rule on every cell. */
.acms__table .num { text-align:right; white-space:nowrap; }
.acms__table th.num { text-align:right; }

/* Status chips shared with the dispatch board. */
.acms__pill { display:inline-block; padding:.2rem .5rem; border-radius:var(--radius-pill); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; border:1px solid currentColor; white-space:nowrap; }
.acms__pill--ok { color:#7fc79f; }
.acms__pill--warn { color:#d8b168; }
.acms__pill--bad { color:#e0876f; }
.acms__pill--mute { color:var(--on-dark-dim); }

.acms__btn { border-radius:2px; transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease); }
.acms__btn:focus-visible { outline:2px solid var(--champagne); outline-offset:2px; }
.acms__form { max-width:720px; }
.acms__field input:focus-visible, .acms__field textarea:focus-visible, .acms__field select:focus-visible {
  outline:2px solid var(--champagne); outline-offset:1px; border-color:var(--champagne);
}
.acms__actions { display:flex; gap:.7rem; align-items:center; flex-wrap:wrap; }

@media (max-width:760px){
  .acms__side {
    height:auto; position:static; width:100%; padding:.9rem 0;
    display:block; overflow-x:auto; white-space:nowrap;
    background:#221a15; border-right:none; border-bottom:1px solid var(--on-dark-line);
  }
  .acms__brand { border-bottom:none; margin:0; padding:0 1rem .7rem; }
  .acms__group { display:inline-block; padding:.2rem .5rem; vertical-align:top; border:none !important; }
  .acms__groupLabel { padding:0 .8rem .25rem; }
  .acms__link { display:inline-block; padding:.4rem .8rem; border-left:none; border-bottom:2px solid transparent; }
  .acms__link.on { border-left-color:transparent; border-bottom-color:var(--champagne); }
  .acms__main { padding:0 1.1rem 3rem; }
  .acms__head { margin:0 -1.1rem 1.2rem; padding:1rem 1.1rem .9rem; }
  .acms__title { font-size:1.4rem; }
  .acms__table { display:block; overflow-x:auto; white-space:nowrap; }
  .acms__table th { position:static; }
  .acms__table td { max-width:none; }
}
.acms__actions { display:flex; gap:0.7rem; align-items:center; }
.acms__badge { display:inline-block; font-size:0.6rem; padding:0.2rem 0.5rem; border:1px solid var(--on-dark-line); border-radius:999px; color:var(--on-dark-dim); }
.acms__badge.on { color:var(--champagne); border-color:var(--champagne); }
.acms__stat { display:inline-block; margin-right:2rem; }
.acms__stat b { font-family:var(--serif); font-size:2rem; color:var(--champagne); display:block; }
.acms__stat span { font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--on-dark-dim); }

/* ── LUXURY REFINEMENTS (design-system pass) ───────────── */
/* Quote result eases in when priced */
.bw__result { animation:bwIn 0.5s var(--ease-out); }
@keyframes bwIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
/* Form outcome messages arrive gently, never pop */
[data-error]:not([hidden]), [data-success]:not([hidden]) { animation:bwIn 0.45s var(--ease-out); }
.bw__total { font-variant-numeric:tabular-nums; }
.bw__err { color:#e6a9a9; font-size:0.82rem; margin:0.2rem 0; padding-left:1.3rem; position:relative; }
.bw__err::before { content:'!'; position:absolute; left:0; top:0; width:1rem; height:1rem; border:1px solid currentColor; border-radius:50%; display:inline-grid; place-items:center; font-size:0.62rem; }

/* FAQ accordions — subtle, consistent everywhere (details/summary) */
details > summary { transition:color var(--t) var(--ease); }
details > summary:hover { color:var(--champagne); }
details[open] > summary { color:var(--champagne); }
details > summary::-webkit-details-marker { display:none; }

/* Cards that carry an image — premium crop + slow zoom on hover */
.card2 img, .pl__card img, .cardImg img { display:block; width:100%; height:100%; object-fit:cover; transition:transform 0.9s var(--ease-out); }
.card2:hover img { transform:scale(1.04); }

/* Section eyebrow accent — a short gold hairline before the label reads as couture */
.head .eyebrow::before { content:''; display:inline-block; width:1.6rem; height:1px; background:var(--champagne); vertical-align:middle; margin-right:0.7rem; opacity:0.8; }

/* Mega-menu links — gentle indent on hover */
.mega__link { transition:color var(--t) var(--ease), padding-left var(--t) var(--ease); }
.mega__link:hover { padding-left:0.35rem; }

/* Refined focus ring for form controls — visible outline for keyboard focus,
   kept off for mouse/touch clicks via :focus-visible (WCAG 2.4.7 / 2.4.11). */
.bw__field input:focus-visible, .mb__field input:focus-visible, .acms__field input:focus-visible {
  outline:2px solid var(--champagne); outline-offset:2px; border-radius:2px;
}

/* ── MOBILE POLISH ─────────────────────────────────────── */
@media (max-width:640px){
  .bw { gap:1.35rem; }
  .bw__submit, .cg__btnPrimary, .cg__btnGhost { width:100%; }
  .cg__actions { flex-direction:column; }
  .mb__go { width:100%; }
  .stat b { font-size:1.9rem; }
  .footer__bar { flex-direction:column; gap:0.8rem; }
}


/* ---- Journey payment panel (journey.php) ---- */
.cg__pay {
  margin:1.4rem 0 0; padding:1.2rem 1.3rem;
  border:1px solid var(--on-dark-line); border-left:3px solid var(--champagne);
  background:linear-gradient(160deg, rgba(201,169,110,0.09), rgba(201,169,110,0.02));
}
.cg__pay--done { border-left-color:#7dc98f; }
.cg__payLabel {
  margin:0 0 0.3rem; font-size:0.62rem; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--on-dark-dim);
}
.cg__payAmount {
  margin:0 0 0.6rem; font-family:var(--serif); font-size:2.1rem; line-height:1;
  color:var(--on-dark); font-variant-numeric:tabular-nums;
}
.cg__payBtn {
  display:inline-block; margin:0.5rem 0 0.7rem; padding:0.85rem 1.6rem;
  background:var(--champagne); color:#1a1512; font-size:0.72rem; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase; transition:background .18s ease;
}
.cg__payBtn:hover { background:#d8bb85; }
.cg__payNote { margin:0; font-size:0.72rem; color:var(--on-dark-dim); line-height:1.6; }
@media (max-width:560px) {
  .cg__payBtn { display:block; text-align:center; }
  .cg__payAmount { font-size:1.7rem; }
}

/* ── Floating WhatsApp button ────────────────────────────────────────────
   Was styled entirely inline on #25d366, so it had no hover, no pressed
   state and no focus ring, and the stock green was the one element on the
   page ignoring the espresso/champagne palette.
   The glyph is what people recognise, not the green fill, so the mark stays
   white and legible while the surface joins the rest of the site. */
.wa-fab {
  position:fixed; right:1.1rem; bottom:5.2rem; z-index:60;
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--graphite-2,#2a251f);
  border:1px solid rgba(201,169,110,0.38);
  box-shadow:0 4px 16px rgba(0,0,0,.42);
  transition:background .18s var(--ease), border-color .18s var(--ease),
             transform .18s var(--ease), box-shadow .18s var(--ease);
}
.wa-fab svg { fill:var(--on-dark); transition:fill .18s var(--ease); }
.wa-fab:hover {
  background:var(--champagne);
  border-color:var(--champagne);
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(0,0,0,.5);
}
.wa-fab:hover svg { fill:var(--espresso); }
.wa-fab:active { transform:translateY(0) scale(.96); }
.wa-fab:focus-visible { outline:2px solid var(--champagne); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){
  .wa-fab, .wa-fab svg { transition:none; }
  .wa-fab:hover, .wa-fab:active { transform:none; }
}

/* ── Driver document expiry warnings ─────────────────────────────────────
   Was defined only in admin-v2.css, which head.php loads for /admin paths
   only — so on /driver these rendered as unstyled plain text. Compliance
   warnings about licence and insurance expiry must not be invisible.
   Defined here because components.css loads site-wide.
   Severity is now encoded in form, not just wording: already-expired reads
   red, still-valid reads amber. */
.p5-driver-doc-warn {
  display:flex; align-items:baseline; gap:0.5rem;
  padding:0.7rem 0.85rem; margin-bottom:0.4rem;
  border:1px solid rgba(216,177,104,0.34);
  border-radius:var(--radius,6px);
  background:rgba(216,177,104,0.09);
  color:#d8b168;
  font-size:0.78rem; line-height:1.45;
}
/* ── Customer portal: booking search + status filters ────────────────────
   These were inline styles: the four chips repeated one declaration block
   each, and the active state was pushed through three inline properties
   from JS. Active state now lives on aria-pressed, so assistive tech can
   announce which filter is on — the inline-style version could not.
   The search input carried inline `outline:0`, which outranks any
   stylesheet :focus-visible rule and left it with no focus ring at all. */
.filter-search {
  width:100%; max-width:420px;
  padding:0.65rem 1rem;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--on-dark-line);
  border-radius:var(--radius,4px);
  color:var(--on-dark);
  font-family:inherit; font-size:0.9rem;
  transition:border-color 0.15s var(--ease);
}
.filter-search::placeholder { color:var(--on-dark-dim); }
.filter-search:focus-visible {
  outline:2px solid var(--champagne); outline-offset:2px;
  border-color:var(--champagne);
}

.filter-chips { display:flex; flex-wrap:wrap; gap:0.4rem; margin-top:0.75rem; }
.filter-chip {
  padding:0.3rem 0.8rem;
  background:transparent;
  border:1px solid var(--on-dark-line);
  border-radius:var(--radius,4px);
  color:var(--on-dark-mid);
  font-family:inherit; font-size:0.8rem;
  cursor:pointer;
  transition:background 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.filter-chip:hover { color:var(--on-dark); border-color:var(--on-dark-mid); }
.filter-chip[aria-pressed="true"] {
  background:rgba(201,169,110,0.15);
  border-color:var(--champagne);
  color:var(--champagne);
}

.p5-driver-doc-warn--expired {
  border-color:rgba(224,163,163,0.42);
  background:rgba(224,163,163,0.10);
  color:#e0a3a3;
  font-weight:500;
}


/* ── Driver portal: push-offer card ────────────────────────────────────────────────
   A job offered to this driver, awaiting accept/decline (see lib/dispatch.php).
   Deliberately louder than a job-list row — it's time-boxed and needs to be
   noticed before it expires and cascades to the next driver. */
.p5-driver-offer {
  padding:1rem 1.1rem;
  border:1px solid var(--champagne);
  border-radius:var(--radius,8px);
  background:rgba(201,169,110,0.08);
}
.p5-driver-offer .eyebrow { color:var(--champagne); }