/* ══════════════════════════════════════════════════════════════════════════
   MIUUM shared dropdown  (source: _chrome/dropdown.css, copied to /dropdown.css)

   One rounded picker for the whole site. dropdown.js upgrades every native
   <select> that is not opted out into a button + listbox; the native select
   stays in the DOM, still named, still required, still the control that
   submits and validates. With JavaScript off nothing here applies and the
   native select shows as it always did.

   Everything is painted from the site theme tokens (style.css :root and
   html[data-theme="dark"]), routed through one small set of --mm-sel-*
   variables so a page with its own palette (the three portals) can re-point
   the component at its own colours without touching this file. No hardcoded
   cream, ink, white or #fff surfaces: that is exactly the bug this replaces.

   Surfaces handled:
     - a light section or a white card  -> tokens as defined below
     - dark mode                        -> the same tokens, flipped in style.css
     - a dark band inside a light page  -> the .on-dark block near the bottom,
       which is where the old vehicles control turned white-on-white
   ══════════════════════════════════════════════════════════════════════════ */

.mm-sel {
  position: relative;
  /* Surfaces */
  --mm-sel-face: var(--cream);          /* the closed trigger                */
  --mm-sel-face-on: var(--gold-glow);   /* the trigger once something is set */
  --mm-sel-pane: var(--card);           /* the open list                     */
  --mm-sel-row: var(--gold-glow);       /* hovered / active row              */
  /* Text */
  --mm-sel-text: var(--text);
  --mm-sel-muted: var(--text-muted);
  --mm-sel-accent: var(--gold);
  /* Lines and depth */
  --mm-sel-line: var(--line);
  --mm-sel-ring: var(--gold-light);
  --mm-sel-shadow: 0 22px 52px -16px rgba(28, 25, 23, 0.30), 0 2px 8px rgba(28, 25, 23, 0.07);
  /* Shape */
  --mm-sel-radius: 999px;
  --mm-sel-pane-radius: 18px;
  --mm-sel-ease: var(--easing, cubic-bezier(0.32, 0.72, 0, 1));
}
html[data-theme="dark"] .mm-sel {
  --mm-sel-shadow: 0 24px 56px -14px rgba(0, 0, 0, 0.72), 0 2px 10px rgba(0, 0, 0, 0.45);
}

/* The native control keeps its box so the browser can still anchor a
   validation bubble to it and report it as the invalid field; it is only
   painted out and taken out of the tab order. Never display:none. */
.mm-sel > select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
}

/* ── Trigger ─────────────────────────────────────────────────────────── */
.mm-sel-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 12px 18px;
  background: var(--mm-sel-face);
  border: 1px solid var(--mm-sel-line);
  border-radius: var(--mm-sel-radius);
  color: var(--mm-sel-text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background 0.28s var(--mm-sel-ease), border-color 0.28s var(--mm-sel-ease), box-shadow 0.28s var(--mm-sel-ease);
}
.mm-sel-btn:hover { border-color: var(--mm-sel-ring); }
.mm-sel-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
/* Picked: a tonal fill, the way the partner portal's picker reads. */
.mm-sel.is-set > .mm-sel-btn { background: var(--mm-sel-face-on); }
/* Open or focused: the hairline turns gold. */
.mm-sel.is-open > .mm-sel-btn,
.mm-sel-btn:focus-visible {
  border-color: var(--mm-sel-ring);
  box-shadow: 0 0 0 3px var(--mm-sel-row);
}
.mm-sel-btn:focus-visible {
  outline: 2px solid var(--focus-ring, currentColor);
  outline-offset: 2px;
}
.mm-sel-val {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mm-sel-val.is-ph { color: var(--mm-sel-muted); font-weight: 400; }
.mm-sel-chev {
  flex: none;
  color: var(--mm-sel-accent);
  transition: transform 0.36s var(--mm-sel-ease);
}
.mm-sel.is-open > .mm-sel-btn .mm-sel-chev { transform: rotate(180deg); }

/* ── Pane ────────────────────────────────────────────────────────────── */
/* While a control is open, dropdown.js switches off the settled identity
   transforms above it so the pane is not trapped in a .reveal card's stacking
   context. translateY(0) and none paint the same, so nothing moves.
   The transition has to go with it: .reveal animates transform over 0.9s with
   a delay of up to 0.6s, so without this the card stays a stacking context for
   most of a second after the list opens, which is the whole bug again. */
.mm-sel-flat {
  transform: none !important;
  transition: none !important;
}

.mm-sel-pane {
  position: absolute;
  /* Above the site's fixed chrome, the way a native list is: nav island 900,
     burger 901, mobile menu 890, cookie banner 880, chat window 950. Below the
     skip link at 1000, which must stay reachable, and below the cookie
     preferences dialog. */
  z-index: 960;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  min-width: 200px;
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 7px;
  background: var(--mm-sel-pane);
  border: 1px solid var(--mm-sel-line);
  border-radius: var(--mm-sel-pane-radius);
  box-shadow: var(--mm-sel-shadow);
  opacity: 0;
  transform: translateY(-6px) scale(0.97);
  transform-origin: top center;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.24s var(--mm-sel-ease), transform 0.24s var(--mm-sel-ease), visibility 0s linear 0.24s;
}
.mm-sel.is-open > .mm-sel-pane {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.24s var(--mm-sel-ease), transform 0.24s var(--mm-sel-ease);
}
/* No room below: the list flips above the trigger (dropdown.js sets .is-up). */
.mm-sel.is-up > .mm-sel-pane {
  top: auto;
  bottom: calc(100% + 8px);
  transform-origin: bottom center;
  transform: translateY(6px) scale(0.97);
}
.mm-sel.is-up.is-open > .mm-sel-pane { transform: none; }
.mm-sel-pane::-webkit-scrollbar { width: 10px; }
.mm-sel-pane::-webkit-scrollbar-thumb { background: var(--mm-sel-line); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }

/* ── Options ─────────────────────────────────────────────────────────── */
.mm-sel-pane .mm-sel-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 10px 14px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--mm-sel-text);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s var(--mm-sel-ease), color 0.18s var(--mm-sel-ease);
}
.mm-sel-pane .mm-sel-opt:hover,
.mm-sel-pane .mm-sel-opt.is-active { background: var(--mm-sel-row); }
.mm-sel-pane .mm-sel-opt[aria-selected="true"] { color: var(--mm-sel-accent); font-weight: 600; }
.mm-sel-pane .mm-sel-opt[aria-disabled="true"] {
  color: var(--mm-sel-muted);
  opacity: 0.55;
  cursor: not-allowed;
  background: transparent;
}
.mm-sel-opt-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mm-sel-opt-end {
  display: flex;
  flex: none;
  align-items: center;
  gap: 9px;
}
/* A note explains an option instead of hiding it (the partner portal prints
   "Wrong class" rather than dropping the vehicle from the list). */
.mm-sel-note {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mm-sel-muted);
}
.mm-sel-tick { color: var(--mm-sel-accent); }
.mm-sel-opt[aria-selected="true"] .mm-sel-tick { opacity: 1; }
.mm-sel-empty {
  margin: 0;
  padding: 14px;
  color: var(--mm-sel-muted);
  font-size: 13.5px;
}

/* ── Group heading (the multi-select checklist) ──────────────────────── */
.mm-sel-grp {
  margin: 10px 0 2px;
  padding: 0 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mm-sel-muted);
}
.mm-sel-pane > .mm-sel-grp:first-child { margin-top: 2px; }

/* ── Multi-select checklist ──────────────────────────────────────────── */
/* Same trigger, same pane, same rows. The difference is that the rows are
   real <label> + <input type="checkbox">, so what submits is unchanged. */
.mm-sel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 6px 8px 14px;
  border-bottom: 1px solid var(--mm-sel-line);
  margin-bottom: 4px;
}
.mm-sel-count {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mm-sel-muted);
}
.mm-sel-clear {
  min-height: 34px;
  padding: 7px 14px;
  border: 1px solid var(--mm-sel-line);
  border-radius: 999px;
  background: transparent;
  color: var(--mm-sel-accent);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s var(--mm-sel-ease), border-color 0.2s var(--mm-sel-ease);
}
.mm-sel-clear:hover:not([disabled]) { background: var(--mm-sel-row); border-color: var(--mm-sel-ring); }
.mm-sel-clear[disabled] { opacity: 0.4; cursor: default; color: var(--mm-sel-muted); }
/* A checklist row is <label><input type=checkbox> Model name</label>: the model
   name is an anonymous flex item, so the row packs from the left instead of
   spreading the way a single-select row does. */
.mm-sel-pane label.mm-sel-opt { justify-content: flex-start; gap: 12px; font-weight: 400; }
.mm-sel-pane label.mm-sel-opt input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--mm-sel-accent);
  cursor: pointer;
}
/* .is-on is set by dropdown.js so the checked row reads gold without :has(). */
.mm-sel-pane label.mm-sel-opt.is-on,
.mm-sel-pane label.mm-sel-opt:has(input:checked) { color: var(--mm-sel-accent); font-weight: 600; }
.mm-sel-pane label.mm-sel-opt:focus-within {
  background: var(--mm-sel-row);
  outline: 2px solid var(--focus-ring, currentColor);
  outline-offset: -2px;
}

/* ── Visually hidden live region (one per page, appended to <body>) ───── */
.mm-sel-live {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Dark bands inside a light page ──────────────────────────────────── */
/* .on-dark and the named dark bands keep near-black backgrounds in both
   themes, so the component paints itself on translucent white there instead
   of on --cream / --card. This is the case the old vehicles control got
   wrong: a cream button and a #fff panel on a dark card, text at 1.03:1. */
.on-dark .mm-sel,
.page-hero .mm-sel,
.cta-band .mm-sel,
.lg-hero .mm-sel,
footer .mm-sel,
.mm-menu .mm-sel,
.booking-modal-box .mm-sel {
  --mm-sel-face: rgba(255, 255, 255, 0.07);
  --mm-sel-face-on: rgba(196, 164, 90, 0.16);
  --mm-sel-pane: #15140F;
  --mm-sel-row: rgba(196, 164, 90, 0.16);
  --mm-sel-text: var(--white);
  --mm-sel-muted: rgba(255, 255, 255, 0.64);
  --mm-sel-line: rgba(255, 255, 255, 0.17);
  --mm-sel-shadow: 0 24px 56px -14px rgba(0, 0, 0, 0.72), 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* ── Phones and touch ────────────────────────────────────────────────── */
/* 760px, not 640px: travel-agents and agency-wholesale put their own fields on
   16px from 760px down, and a 15px trigger beside a 16px input is the kind of
   half-step that reads as a mistake. */
@media (max-width: 760px) {
  .mm-sel-btn { font-size: 16px; padding: 13px 18px; }
}
@media (max-width: 640px) {
  .mm-sel-pane { max-height: 52vh; }
  .mm-sel-pane .mm-sel-opt { font-size: 16px; padding: 11px 14px; }
}
@media (pointer: coarse) {
  .mm-sel-btn { min-height: 48px; font-size: 16px; }
  /* A row is read at arm's length on a phone: 16px here too, not 14.5px. */
  .mm-sel-pane .mm-sel-opt { min-height: 46px; font-size: 16px; }
  .mm-sel-clear { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .mm-sel-btn,
  .mm-sel-chev,
  .mm-sel-pane,
  .mm-sel-pane .mm-sel-opt { transition: none !important; }
  .mm-sel-pane { transform: none !important; }
}