/* AirportTransfers.ai — UI primitives
   This file is the design-system home for new primitives (loaded on every page by build.mjs headTags,
   together with ui.js). Keep ONE definition per primitive here; pages use the classes, they do not copy
   the rules into their own <style>. Tokens only (tokens.css); the one literal is the house gold edge
   gradient of the dropdown panel, copied from index.dc.html so both read the same.

   dd = the house pickers. ui.js turns every <select> and input[type=date] (except [data-native]) into a
   .dd-trigger (in place of the control) + a .dd-panel in a body portal (a listbox, or the .dd-cal calendar),
   anchored to the trigger at every width (no bottom sheet). input[list] keeps its input and gets an
   anchored .dd-panel of suggestions.

   cell = the house field (the home booking cell): label inside a 68px ink cell. Checkout, agencies and
   corporate use it; the home form draws the same look inline and opts into the focus ring with .cell-focus. */

/* ---------- dd: the native control (select, date input), kept in the DOM and the form but out of sight ---------- */
[data-dd-native] {
  position: absolute !important; width: 1px !important; height: 1px !important;
  min-width: 0 !important; min-height: 0 !important; max-width: 1px !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
  white-space: nowrap !important; opacity: 0 !important; pointer-events: none !important;
}

/* ---------- dd: trigger ----------
   It takes the select's own inline style and class, so it sits in the select's place at its size and
   type. Those inline styles often start with all:unset, so the structural rules here are !important. */
.dd-trigger {
  all: unset;
  box-sizing: border-box;
  font: inherit; color: inherit;
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  gap: 8px !important; cursor: pointer !important; min-width: 0 !important;
  -webkit-tap-highlight-color: transparent;
}
/* A trigger inside a .cell takes the cell's focus ring (--dd-ring: none there). */
.dd-trigger:focus-visible { outline: var(--dd-ring, 2px solid var(--gold-300)) !important; outline-offset: 2px !important; }
.cell .dd-trigger { --dd-ring: none; }
.dd-trigger[data-empty] .dd-trigger__text { color: var(--text-low); }
.dd-trigger__text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.dd-trigger__chev {
  flex: none; display: block; width: 14px; height: 14px; color: var(--gold-400);
  transition: transform 600ms var(--ease-glide);
}
.dd-trigger[aria-expanded="true"] .dd-trigger__chev { transform: rotate(180deg); }

/* ---------- dd: portal, panel, list ---------- */
.dd-portal { position: fixed; inset: 0; z-index: 300; pointer-events: none; }
.dd-panel {
  position: fixed; box-sizing: border-box; pointer-events: auto;
  display: flex; flex-direction: column; min-height: 0;
  padding: 6px; border-radius: var(--radius-m);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--ink-700), var(--ink-700)) padding-box,
    radial-gradient(60% 40% at 50% 0%, rgba(248,230,166,.9) 0%, rgba(231,198,92,.4) 40%, rgba(231,198,92,0) 80%) border-box,
    linear-gradient(180deg, rgba(200,160,50,.45), rgba(200,160,50,.12)) border-box;
  box-shadow: 0 22px 44px rgba(0,0,0,.62);
  font-family: var(--font-ui);
}
.dd-list {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 1px; outline: none;
  scrollbar-width: thin; scrollbar-color: var(--ink-500) transparent;
}
.dd-list::-webkit-scrollbar { width: 4px; }
.dd-list::-webkit-scrollbar-thumb { background: var(--ink-500); border-radius: 2px; }

/* ---------- dd: option row ---------- */
.dd-opt {
  box-sizing: border-box; flex: none; display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 7px 11px; border-radius: 5px; cursor: pointer;
  background: transparent; transition: background-color var(--dur) var(--ease);
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.dd-opt:hover, .dd-opt[data-active] { background: var(--ink-600); }
.dd-opt__mark {
  flex: none; width: 6px; height: 6px; transform: rotate(45deg); background: var(--ink-500);
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.dd-opt[aria-selected="true"] .dd-opt__mark { background: var(--gold-400); box-shadow: 0 0 8px rgba(231,198,92,.6); }
.dd-opt__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.dd-opt__label { font-family: var(--font-ui); font-size: var(--data); line-height: var(--data-lh); color: var(--text-mid); }
.dd-opt[aria-selected="true"] .dd-opt__label { color: var(--gold-400); }
.dd-opt__sub { font-size: var(--data-s); line-height: var(--data-s-lh); color: var(--text-low); }
.dd-opt[aria-disabled="true"] { cursor: default; }
.dd-opt[aria-disabled="true"]:hover { background: transparent; }
.dd-opt[aria-disabled="true"] .dd-opt__label, .dd-opt[aria-disabled="true"] .dd-opt__sub { color: var(--ink-500); }

/* ---------- dd: calendar (input[type=date]) — the index calendar recipe ---------- */
.dd-panel--cal { overflow-y: auto; overscroll-behavior: contain; }
.dd-cal { display: flex; flex-direction: column; }
.dd-cal__quick { display: flex; gap: var(--sp-1); padding: 2px 2px 6px; }
.dd-chip {
  all: unset; box-sizing: border-box; cursor: pointer; flex: 1; min-height: 36px;
  display: flex; align-items: center; justify-content: center; border-radius: 5px;
  font-family: var(--font-op); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-mid); background: transparent; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.dd-chip:hover { background: var(--ink-600); }
.dd-chip[aria-pressed=true] { color: var(--gold-400); background: rgba(231,198,92,.1); }
.dd-chip:disabled { cursor: default; color: var(--ink-500); background: transparent; }
.dd-chip:focus-visible { outline: 2px solid var(--gold-300); outline-offset: -2px; }
.dd-cal__body { padding: 0 var(--sp-1) var(--sp-1); display: flex; flex-direction: column; gap: 10px; }
.dd-cal__head { display: flex; justify-content: space-between; align-items: center; height: 36px; }
.dd-cal__month { font-family: var(--font-display); font-size: 17px; color: var(--text-hi); }
/* 36px to the eye (a visible square), 40px to the finger. */
.dd-cal__nav {
  all: unset; box-sizing: border-box; position: relative; flex: none; width: 40px; height: 40px; margin: -2px;
  display: grid; place-items: center; cursor: pointer; color: var(--text-mid); transition: color var(--dur) var(--ease);
}
.dd-cal__nav::before { content: ''; position: absolute; inset: 2px; border-radius: 5px; background: var(--ink-600); transition: background-color var(--dur) var(--ease); }
.dd-cal__nav svg { position: relative; display: block; }
.dd-cal__nav:hover { color: var(--gold-400); }
.dd-cal__nav:hover::before { background: var(--ink-500); }
.dd-cal__nav:disabled { cursor: default; color: var(--ink-500); }
.dd-cal__nav:disabled::before { background: transparent; }
.dd-cal__nav:focus-visible::before { outline: 2px solid var(--gold-300); }
.dd-cal__week {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center;
  font-family: var(--font-op); font-size: 10px; letter-spacing: .1em; color: var(--text-low);
}
.dd-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dd-day {
  all: unset; box-sizing: border-box; height: 34px; display: grid; place-items: center; cursor: pointer;
  border-radius: 5px; border: 1px solid transparent; background: transparent;
  font-family: var(--font-op); font-size: var(--caption); font-variant-numeric: tabular-nums; color: var(--text-mid);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.dd-day--pad { cursor: default; }
.dd-day:not(.dd-day--pad):not(:disabled):hover { border-color: var(--gold-500); }
.dd-day[aria-current=date] { border-color: var(--gold-700); color: var(--gold-400); }
.dd-day[aria-pressed=true] { background: var(--gold-400); border-color: var(--gold-400); color: var(--ink-900); }
.dd-day:disabled { cursor: default; color: var(--ink-500); }
.dd-day:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 1px; }

/* ---------- cell: the house field (D10) ----------
   <div class="cell"><label class="cell__label" for="x">Email</label><input class="cell__control" id="x"></div>
   Selects and date inputs work the same way (ui.js puts its trigger in the control's place and it takes
   .cell__control from the select). A message sits after the cell: <span class="cell-msg">. Error state:
   [data-invalid] on the cell or on a wrapper around it, or aria-invalid="true" on the control.
   .cell--joined = cells sharing one row with 1px seams (agencies, corporate): no own edge or corners; the
   row gets .cell-row (ui.js rounds its outer corners, so the row need not clip the focus glow). */
.cell {
  position: relative; box-sizing: border-box; min-width: 0; min-height: var(--field-h);
  display: flex; flex-direction: column; justify-content: center; gap: var(--sp-1);
  padding: 10px 14px; background: var(--ink-600);
  border: var(--border) solid var(--line-strong); border-radius: var(--field-radius);
  cursor: text;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cell:hover { border-color: var(--gold-700); }
.cell:has(.dd-trigger), .cell:has(select) { cursor: pointer; }
.cell--joined { min-height: var(--field-h-joined); background: var(--ink-700); border-color: transparent; border-radius: 0; padding: 10px 18px; }
.cell--joined:hover { border-color: transparent; box-shadow: inset 0 0 0 1px var(--gold-700); }
.cell__label {
  display: block; font-family: var(--font-op); font-size: var(--field-label); line-height: 1.3;
  letter-spacing: var(--field-label-ls); text-transform: uppercase; color: var(--text-low); cursor: inherit;
}
/* Required field (D18): a gold star after the label. Hidden from screen readers; the control carries aria-required. */
.cell__label[data-req]::after { content: '*'; content: '*' / ''; margin-left: 4px; color: var(--gold-400); }
.cell__control {
  all: unset; box-sizing: border-box; display: block; width: 100%; min-width: 0;
  font-family: var(--font-ui); font-size: var(--body); line-height: 1.4; color: var(--text-hi);
}
.cell__control::placeholder { color: var(--text-low); opacity: 1; }
textarea.cell__control { white-space: pre-wrap; overflow-wrap: break-word; resize: vertical; min-height: 2.8em; }
/* Autofill keeps the cell's own fill and ink. */
.cell__control:-webkit-autofill, .cell__control:-webkit-autofill:hover, .cell__control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-hi); caret-color: var(--text-hi); transition: background-color 600000s 0s, color 600000s 0s;
}
.cell-msg { display: block; margin-top: 6px; font-size: var(--caption); line-height: 1.45; color: var(--text-low); }

/* Focus (D11): gold border + 3px soft glow, on the cell, for every field (and while its panel is open). The home booking form opts its own
   inline cells in with .cell-focus (bordered) or .cell-focus--joined (seamed row). The focused cell is raised
   so a neighbour never paints over its glow (not while a home popover is mounted: that owns the z order). */
.cell:focus-within, .cell:has([aria-expanded="true"]), .cell-focus:focus-within { border-color: var(--gold-500) !important; box-shadow: var(--field-ring) !important; }
.cell--joined:focus-within, .cell--joined:has([aria-expanded="true"]), .cell-focus--joined:focus-within { border-color: transparent !important; box-shadow: inset 0 0 0 1px var(--gold-500), var(--field-ring) !important; }
.cell:focus-within, .cell:has([aria-expanded="true"]) { z-index: 2; }
.cell-focus--joined:focus-within:not(:has([data-drop])) { z-index: 20 !important; }
.cell-focus, .cell-focus--joined { transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease) !important; } /* over the inline border-only transition */

/* Error: alert edge + message. */
.cell[data-invalid], [data-invalid] > .cell, .cell:has([aria-invalid="true"]) { border-color: var(--alert-500) !important; }
.cell--joined[data-invalid], [data-invalid] > .cell--joined, .cell--joined:has([aria-invalid="true"]) { border-color: transparent !important; box-shadow: inset 0 0 0 1px var(--alert-500) !important; }
[data-invalid] .cell-msg, .cell-msg[data-invalid] { color: var(--alert-500); }

/* Joined row: the row keeps its gold edge and 1px seams; ui.js sets --cr-* on the children at the row's corners. */
.cell-row > * { border-radius: var(--cr-tl, 0) var(--cr-tr, 0) var(--cr-br, 0) var(--cr-bl, 0); }
.cell-row > .btn { border-radius: var(--cr-tl, 0) var(--cr-tr, 0) var(--cr-br, 0) var(--cr-bl, 0) !important; }

/* ---------- dd: motion — enter soft ease-out, exit glide; mounted until the exit ends ---------- */
@keyframes dd-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes dd-lift { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-6px); } }
.dd-panel[data-drop="in"] { animation: dd-drop var(--fluid-in) var(--ease-fluid) both; }
.dd-panel[data-drop="out"] { animation: dd-lift var(--fluid-out) var(--ease-exit) both; pointer-events: none; }
/* Opened upward (no room below): the panel drifts from the trigger side, i.e. up from below. */
@keyframes dd-drop-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes dd-lift-up { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(6px); } }
.dd-panel[data-side="top"][data-drop="in"] { animation-name: dd-drop-up; }
.dd-panel[data-side="top"][data-drop="out"] { animation-name: dd-lift-up; }
@media (prefers-reduced-motion: reduce) {
  .dd-panel[data-drop] { animation: none !important; }
  .dd-trigger__chev, .dd-opt, .dd-opt__mark, .dd-chip, .dd-cal__nav, .dd-cal__nav::before, .dd-day, .cell { transition: none; }
  .cell-focus, .cell-focus--joined { transition: none !important; }
}