/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/fraunces-italic-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/fraunces-italic-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/fraunces-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/fraunces-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/fraunces-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/fraunces-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/fraunces-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/fraunces-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/fraunces-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/fraunces-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/inter-tight-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/inter-tight-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-tight-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-tight-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/inter-tight-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/inter-tight-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter-tight-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter-tight-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/inter-tight-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/inter-tight-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/jetbrains-mono-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/jetbrains-mono-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrains-mono-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrains-mono-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/jetbrains-mono-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/jetbrains-mono-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* thai — display (display stanzas remain English; Thai serif used for localized body when serif needed) */
@font-face {
  font-family: 'Noto Serif Thai';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/noto-serif-thai-thai.woff2") format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Noto Serif Thai';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/noto-serif-thai-thai.woff2") format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Noto Serif Thai';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/noto-serif-thai-thai.woff2") format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

/* thai — UI (body, nav, forms, labels for /th pages) */
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/noto-sans-thai-thai.woff2") format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/noto-sans-thai-thai.woff2") format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/noto-sans-thai-thai.woff2") format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/noto-sans-thai-thai.woff2") format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/noto-sans-thai-thai.woff2") format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

:root {
  --gold: #c99a3c;
  --gold-deep: #8a6b1e;
  --gold-soft: #e5c478;
  --purple: #2a1845;
  --purple-deep: #150a25;
  --purple-mid: #3d2560;
  --font-display: "Fraunces", "Noto Serif Thai", Georgia, serif;
  --font-ui: "Inter Tight", "Noto Sans Thai", -apple-system, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Noto Sans Thai", ui-monospace, monospace;
}

/* Locale-aware CJK font stacks. Shared kanji/hanzi codepoints need the
   region-specific font first to get correct glyph variants. */
html[lang^="ja"] {
  --font-display: "Fraunces", "Shippori Mincho", "Noto Serif Thai", Georgia, serif;
  --font-ui: "Inter Tight", "Noto Sans JP", "Noto Sans Thai", -apple-system, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Noto Sans JP", "Noto Sans Thai", ui-monospace, monospace;
}
html[lang^="zh"] {
  --font-display: "Fraunces", "ZCOOL XiaoWei", "Noto Serif Thai", Georgia, serif;
  --font-ui: "Inter Tight", "Noto Sans SC", "Noto Sans Thai", -apple-system, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Noto Sans SC", "Noto Sans Thai", ui-monospace, monospace;
}
html[lang^="ko"] {
  --font-display: "Fraunces", "Song Myung", "Noto Serif Thai", Georgia, serif;
  --font-ui: "Inter Tight", "Noto Sans KR", "Noto Sans Thai", -apple-system, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Noto Sans KR", "Noto Sans Thai", ui-monospace, monospace;
}
body[data-mode="dark"] {
  --bg: #140a22;
  --bg-2: #1c1030;
  --bg-3: #25173e;
  --bg-4: #2e1d4a;
  --line: rgba(230,195,120,0.12);
  --line-2: rgba(230,195,120,0.22);
  --fg: #f3ecdc;
  --fg-dim: #b5a38a;
  --fg-mute: #7e6f5a;
  --accent: var(--gold-soft);
  --accent-deep: var(--gold);
  --overlay: rgba(20,10,34,0.78);
}
body[data-mode="light"] {
  --bg: #f7f2ea;
  --bg-2: #efe7d9;
  --bg-3: #e8dcc7;
  --bg-4: #e1d1b5;
  --line: rgba(60,30,90,0.12);
  --line-2: rgba(60,30,90,0.22);
  --fg: #1f102c;
  --fg-dim: #5a4868;
  --fg-mute: #8c7d95;
  --accent: var(--gold-deep);
  --accent-deep: #6a510f;
  --overlay: rgba(247,242,234,0.88);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; }
body { overflow-x: hidden; transition: background .4s ease, color .4s ease; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; }
input, textarea { font-family: inherit; }
::selection { background: var(--accent); color: var(--purple-deep); }
img, svg { display: block; max-width: 100%; }

.display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; line-height: 0.98; }
.display em { font-style: italic; color: var(--accent); }
.eyebrow {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ''; width: 20px; height: 1px; background: var(--accent); }
.mono-lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-mute); }

.wrap { width: 100%; max-width: 440px; margin: 0 auto; padding: 0 22px; }

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 14px 18px; display: flex; align-items: center; justify-content: space-between;
  background: var(--overlay); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
}
.logo { display: flex; align-items: center; gap: 10px; }
.logo-mark {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold-deep));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 18px; font-style: italic;
  color: var(--purple-deep); font-weight: 500;
}
.logo-txt { display: flex; flex-direction: column; line-height: 1; }
.logo-txt > b { font-family: var(--font-display); font-size: 20px; font-weight: 400; letter-spacing: -0.01em; }
.logo-txt > span { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.24em; color: var(--fg-mute); margin-top: 2px; text-transform: uppercase; }

/* Inline logo variant used on /from/*, /transfer/*, /guides/*, /compare/*
   pages — same nav element renders as one row of inline children:
   "SabaiRide" + .dot + .vehicle-tag. Style the auxiliary spans tightly
   and hide the vehicle tag below the mobile breakpoint so the brand
   doesn't wrap onto a second line on small viewports. */
.logo .dot { color: var(--gold-deep, #BA7517); font-family: var(--font-display); font-style: italic; }
.logo .vehicle-tag {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.22em;
  color: var(--fg-mute); text-transform: uppercase; white-space: nowrap;
  margin-left: 4px;
  /* Optical centering — flex `align-items: center` puts the tag's
     geometric center on the cross-axis midline, but a 9px all-caps
     run has its visual centre roughly at the cap-line (no descenders,
     small x-height), which sits higher than the geometric centre of
     the "SabaiRide" mixed-case word. Nudge down a few pixels so the
     tag reads as middle-aligned rather than top-anchored. */
  align-self: center;
  position: relative;
  top: 3px;
  line-height: 1;
}
@media (max-width: 540px) {
  .logo .vehicle-tag { display: none; }
}
.mode-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center;
  color: var(--accent); transition: .2s;
}
.mode-btn:hover { background: var(--bg-3); }

/* Nav actions group — holds LangSwitcher + mode button */
.nav-actions { display: flex; align-items: center; gap: 8px; }

/* ——— Language switcher ——— */
.lang { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 10px 0 10px;
  border: 1px solid var(--line-2); border-radius: 999px;
  color: var(--fg-dim); background: transparent;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: all .2s ease;
  cursor: pointer;
}
.lang-btn:hover { background: var(--bg-3); color: var(--fg); border-color: var(--accent); }
.lang-btn[aria-expanded="true"] { background: var(--bg-3); color: var(--fg); border-color: var(--accent); }
.lang-btn svg { flex-shrink: 0; }
.lang-code {
  display: inline-block; max-width: 72px; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis;
  font-size: 11px; letter-spacing: 0.02em; text-transform: none;
  font-family: var(--font-sans, inherit);
  color: var(--fg);
}

.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 120;
  min-width: 180px;
  list-style: none; padding: 6px; margin: 0;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 14px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.18);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.lang-menu li { margin: 0; }
.lang-opt {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: transparent; border: 0;
  color: var(--fg);
  font-size: 14px; text-align: left;
  cursor: pointer; transition: background .15s ease;
}
.lang-opt:hover { background: var(--bg-3); }
.lang-opt.active { background: var(--bg-3); }
.lang-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--line-2); flex-shrink: 0;
}
.lang-opt.active .lang-dot { background: var(--accent); box-shadow: 0 0 0 3px rgba(212,175,110,0.16); }
.lang-native { flex: 1; font-family: var(--font-sans, inherit); }
.lang-iso {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em;
  color: var(--fg-mute); text-transform: uppercase;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 24px; border-radius: 999px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.04em;
  border: 1px solid var(--line-2); transition: all .25s ease;
  min-height: 48px; width: 100%;
}
.btn svg { width: 14px; height: 14px; }
.btn.primary {
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  color: var(--purple-deep); border-color: transparent;
  font-weight: 600; box-shadow: 0 10px 30px rgba(201,154,60,0.25);
}
body[data-mode="light"] .btn.primary {
  background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #fff;
}
.btn.ghost { background: transparent; color: var(--fg); }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); }

/* Inline button variants (hyphenated names) — used on /transfer/*,
   /from/*, /airport-arrival/*, homepage CTAs. The full-width `.btn`
   above is for hero/booking-form contexts; these inline variants are
   for content-flow CTAs where buttons sit next to other elements.
   Note: `.booking-nav .btn-primary` (line ~2143) and `.booking-nav
   .btn-ghost` override these inside the /book page. */
.btn-primary, .btn-ghost {
  display: inline-block;
  padding: 11px 22px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-align: center;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  color: var(--purple-deep);
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(201,154,60,0.22);
}
.btn-primary:hover  { filter: brightness(1.08); transform: translateY(-1px); }
.btn-primary:active { filter: brightness(0.95); transform: translateY(0); }
body[data-mode="light"] .btn-primary {
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: #fff;
}

.btn-ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--line-2);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.hero {
  position: relative; padding: 90px 0 40px; overflow: hidden;
  min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between;
}
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 100%, color-mix(in oklab, var(--purple) 40%, transparent), transparent 60%);
}
.hero-meta {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; padding: 4px 0 30px;
}
.hero-meta .cell { display: flex; flex-direction: column; gap: 3px; }
.hero-meta .val { font-family: var(--font-display); font-size: 15px; }
.dot-live { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; margin-right: 6px; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.4 } }

.hero-title { position: relative; z-index: 2; font-size: clamp(48px, 13vw, 80px); margin: 10px 0 0; }
.hero-sub { position: relative; z-index: 2; color: var(--fg-dim); font-size: 16px; line-height: 1.55; margin: 22px 0 0; max-width: 380px; }
.hero-actions { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }

.vehicle-card {
  position: relative; z-index: 2; margin-top: 34px;
  border: 1px solid color-mix(in oklab, var(--accent) 28%, transparent);
  border-radius: 24px;
  /* Obsidian black body with a thin warm gold halo — matches "Executive Black" + gold accents. */
  background:
    radial-gradient(ellipse 70% 40% at 50% -10%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 60%),
    linear-gradient(180deg, #0c0618 0%, #060210 100%);
  padding: 0; overflow: hidden;
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,0.6),
    inset 0 1px 0 color-mix(in oklab, var(--accent) 12%, transparent);
}
.vehicle-stage {
  aspect-ratio: 16/10;
  border-radius: inherit;
  background: #000;
  position: relative;
  margin: 0;
  overflow: hidden;
}
/* Bottom gradient overlay so overlaid text stays readable on the photo */
.vehicle-stage::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 50%;
  background: linear-gradient(to top,
    rgba(0,0,0,0.85) 0%,
    rgba(0,0,0,0.55) 35%,
    rgba(0,0,0,0) 100%);
  z-index: 2;
  pointer-events: none;
}
.stage-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--line) 40%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--line) 40%, transparent) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 75%);
  opacity: 0.5;
}
.stage-silhouette {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -58%);
  width: 75%; color: var(--accent);
}
.stage-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}
.stage-readout {
  position: absolute; top: 16px; right: 20px;
  display: flex; justify-content: flex-end; gap: 12px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg-dim);
  z-index: 3;
}
.stage-readout > div { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.stage-readout span:last-child { color: var(--fg); font-size: 11px; letter-spacing: 0.08em; }
.stage-corner { display: none; }
body[data-mode="light"] .vehicle-stage {
  background:
    radial-gradient(ellipse 70% 40% at 50% 90%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 70%),
    linear-gradient(180deg, #eae1d0 0%, #d8cbb2 100%);
}
.vehicle-row {
  position: absolute; left: 24px; right: 24px; bottom: 20px;
  display: flex; justify-content: flex-end; align-items: flex-end;
  z-index: 4;
}
.vehicle-name { font-family: var(--font-display); font-size: 18px; line-height: 1.1; color: #fff; text-align: right; text-shadow: 0 2px 12px rgba(0,0,0,0.6); }
.vehicle-name small { display: block; font-family: var(--font-ui); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-dim); margin-top: 4px; }
.vehicle-badge {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em;
  color: var(--accent); text-transform: uppercase;
  padding: 6px 10px; border: 1px solid var(--accent); border-radius: 999px;
}

/* ─── Hero A2 — responsive: mobile stack with overlays · desktop full-bleed
   Mobile (default): video edge-to-edge 4:5 aspect, no frame; meta-row
   overlays at top of video, "Private Chauffeur · Thailand" eyebrow at
   bottom; display heading + sub + CTA + routes stack below the video.
   Desktop (≥860px, defined in the media query block below): video is
   absolute full-bleed background, meta-row sits at top of hero, copy
   block (eyebrow + display + sub + CTA + routes) overlays at the bottom. */
.hero-a2 {
  justify-content: flex-start;
  /* No top padding on mobile — video extends to the very top of the hero
     (behind the fixed translucent nav) for an edge-to-edge cinematic feel.
     On desktop the @media (min-width: 860px) `.hero` shorthand re-applies
     130px top padding. */
  padding-top: 0;
}
/* The default .hero::before lays a gold/purple radial fade across the
   whole hero. On hero-a2 the video itself is the focal visual, so we drop
   the fade — otherwise the empty band above the mobile video shows the
   gradient as an unwanted "extra fade edge" between the nav and the video. */
.hero-a2::before { display: none; }
.hero-a2 .ambient-bg { display: none; }
.hero-a2 .meta-wrap { display: none; }
.hero-a2 .text-wrap .eyebrow-desktop { display: none; }

.hero-a2 .video-bed {
  position: relative; z-index: 2;
  aspect-ratio: 4 / 5;
  width: 100%;
  overflow: hidden;
  order: 1;
}
.hero-a2 .video-bed .stage-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 1;
}
.hero-a2 .video-bed .stage-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--line) 40%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--line) 40%, transparent) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 75%);
  opacity: 0.3;
  z-index: 2;
  pointer-events: none;
}
/* Top + bottom gradient mask so the overlays stay readable */
.hero-a2 .video-bed::after {
  content: ''; position: absolute; inset: 0; z-index: 3;
  background: linear-gradient(180deg,
    rgba(20,10,34,0.65) 0%,
    rgba(20,10,34,0) 22%,
    rgba(20,10,34,0) 70%,
    rgba(20,10,34,0.85) 100%);
  pointer-events: none;
}

.hero-a2 .video-overlay {
  position: absolute; left: 0; right: 0; z-index: 4;
  padding: 16px 20px;
  pointer-events: none;
}
.hero-a2 .video-overlay--top {
  top: 0;
  /* Clear the fixed nav (~62-76px on mobile) so Dispatch/Status sits below
     the nav, not behind it. env() handles iPhone notch / Dynamic Island. */
  padding-top: calc(env(safe-area-inset-top, 0px) + 78px);
}
.hero-a2 .video-overlay--bottom {
  bottom: 0; padding-bottom: 20px;
  text-align: center;
  /* Subtle fade so the overlay copy reads as ambient text on the video,
     not as competing UI chrome. */
  opacity: 0.4;
}
.hero-a2 .video-overlay .hero-meta {
  padding: 0; color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
.hero-a2 .video-overlay .hero-meta .val { color: #fff; }
.hero-a2 .video-overlay .hero-meta .mono-lbl { color: rgba(255,255,255,0.78); }
.hero-a2 .video-overlay--bottom .hero-title-overlay {
  /* Display H1 inside the bottom overlay — smaller than the full hero
     title, just slightly bigger than the eyebrow line below it. */
  margin: 0 0 8px;
  font-size: clamp(22px, 6.5vw, 32px);
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,0.7);
  letter-spacing: -0.01em;
}
.hero-a2 .video-overlay--bottom .hero-title-overlay em {
  color: var(--accent);
}
.hero-a2 .video-overlay--bottom .eyebrow {
  color: var(--accent);
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
  letter-spacing: 0.18em;
  font-size: 11px;
}
/* Tap-to-play overlay — shown only when iOS / Safari blocked autoplay
   (Low Power Mode, Reduce Motion, engagement heuristics, etc). React
   conditionally renders the button when heroAutoplayBlocked is true.
   Centred over the video, pill-style with the gold accent. */
.hero-a2 .hero-play-overlay {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: 84px; height: 84px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.55);
  background: rgba(20,10,34,0.55);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  transition: transform 0.2s ease, background 0.2s, border-color 0.2s;
  pointer-events: auto;
  animation: heroPlayBreathe 2.4s ease-in-out infinite;
}
.hero-a2 .hero-play-overlay:hover,
.hero-a2 .hero-play-overlay:focus-visible {
  transform: translate(-50%, -50%) scale(1.05);
  background: rgba(20,10,34,0.7);
  border-color: var(--accent);
  outline: none;
}
.hero-a2 .hero-play-overlay svg {
  width: 30px; height: 30px;
  /* Optical centring — the play triangle's visual centre sits left of geometric centre. */
  margin-left: 5px;
}
@keyframes heroPlayBreathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,154,60,0.45); }
  50%      { box-shadow: 0 0 0 14px rgba(201,154,60,0);   }
}

/* Mobile: original H1 in text-wrap is hidden because the overlay one
   replaces it — sub + CTA + routes still render below the video. */
.hero-a2 .text-wrap .hero-title-desktop { display: none; }

.hero-a2 .text-wrap {
  order: 2; flex: 1;
  padding-top: 0;
  display: flex; flex-direction: column; justify-content: flex-start;
}
.hero-a2 .text-wrap .hero-copy { max-width: none; }
/* Tighten the gap between the video and the first visible line in
   text-wrap (.hero-sub on mobile, since the H1 + eyebrow are inside
   the video overlay). The default .hero-sub margin-top is 22px; on
   mobile A2 we want a snugger transition. */
.hero-a2 .text-wrap .hero-sub { margin-top: 14px; }

.routes {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line); margin-top: 30px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.routes .cell {
  background: var(--bg); padding: 18px 14px;
  color: inherit; text-decoration: none; display: block;
  transition: background 180ms ease, color 180ms ease;
}
a.routes__cell:focus-visible,
.routes a.cell:hover { background: var(--bg-2); }
.routes a.cell:hover .v { color: var(--accent); }
.routes .k { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; color: var(--fg-mute); text-transform: uppercase; margin-bottom: 6px; }
.routes .v { font-family: var(--font-display); font-size: 18px; transition: color 180ms ease; }

/* "Where we drive" footer link columns (airports / intercity / hotels / guides)
   Design A — premium card menu */
.routes-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  background: color-mix(in oklab, var(--accent) 4%, transparent);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--fg-dim);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.35;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}
.routes-link:hover {
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  border-color: color-mix(in oklab, var(--accent) 32%, transparent);
  color: var(--fg);
  transform: translateX(2px);
}
.routes-link .rl-arrow {
  color: var(--accent);
  opacity: 0.5;
  font-size: 14px;
  flex-shrink: 0;
  transition: opacity 180ms ease, transform 180ms ease;
}
.routes-link:hover .rl-arrow {
  opacity: 1;
  transform: translateX(2px);
}
/* RTL: flip the arrow + reverse the nudge for Arabic */
[dir="rtl"] .routes-link:hover { transform: translateX(-2px); }
[dir="rtl"] .routes-link .rl-arrow { transform: scaleX(-1); }
[dir="rtl"] .routes-link:hover .rl-arrow { transform: scaleX(-1) translateX(2px); }

.sec { padding: 70px 0; position: relative; }
.sec-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 34px; }
.sec-title { font-size: clamp(38px, 10vw, 56px); margin: 0; }

.fleet-media {
  aspect-ratio: 4/3; border-radius: 20px;
  background:
    radial-gradient(ellipse 60% 40% at 50% 95%, color-mix(in oklab, var(--accent) 20%, transparent), transparent 70%),
    linear-gradient(180deg, var(--bg-3) 0%, var(--bg-4) 100%);
  position: relative; overflow: hidden; border: 1px solid var(--line);
  margin-bottom: 14px;
}
body[data-mode="light"] .fleet-media {
  background:
    radial-gradient(ellipse 60% 40% at 50% 95%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 70%),
    linear-gradient(180deg, #eae1d0 0%, #d8cbb2 100%);
}
.fleet-tabs { display: flex; gap: 6px; margin: 10px 0 22px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.fleet-tabs::-webkit-scrollbar { display: none; }
.fleet-tab {
  padding: 10px 16px; border: 1px solid var(--line-2); border-radius: 999px;
  font-size: 12px; letter-spacing: 0.1em; white-space: nowrap;
  color: var(--fg-dim); flex-shrink: 0;
}
.fleet-tab[aria-selected="true"] { background: var(--accent); color: var(--purple-deep); border-color: var(--accent); font-weight: 600; }
body[data-mode="light"] .fleet-tab[aria-selected="true"] { color: #fff; }

.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.specs .s { background: var(--bg); padding: 18px 16px; }
.specs .k { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; color: var(--fg-mute); text-transform: uppercase; margin-bottom: 8px; }
.specs .v { font-family: var(--font-display); font-size: 22px; line-height: 1; }
.specs .sub { font-size: 11px; color: var(--fg-dim); margin-top: 4px; }

.amenities { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }
.amenity {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2);
}
.amenity .ico {
  width: 38px; height: 38px; border-radius: 10px;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  color: var(--purple-deep); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.amenity .ico svg { width: 20px; height: 20px; }
.amenity .t { font-family: var(--font-display); font-size: 17px; line-height: 1.2; }
.amenity .s { font-size: 12px; color: var(--fg-dim); margin-top: 3px; line-height: 1.5; }

.services { display: flex; flex-direction: column; gap: 12px; }
.svc {
  border: 1px solid var(--line); border-radius: 18px;
  padding: 22px 20px; background: var(--bg-2);
  display: flex; flex-direction: column; gap: 10px;
  color: inherit; text-decoration: none;
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
a.svc:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -20px color-mix(in oklab, var(--accent) 40%, transparent);
}
.svc.featured {
  background: linear-gradient(135deg, var(--bg-2) 0%, var(--bg-3) 100%);
  border-color: var(--accent);
  box-shadow: 0 20px 40px -20px color-mix(in oklab, var(--accent) 30%, transparent);
}
a.svc.featured:hover {
  box-shadow: 0 24px 48px -20px color-mix(in oklab, var(--accent) 45%, transparent);
}
.svc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.svc-code { font-family: var(--font-mono); font-size: 10px; color: var(--fg-mute); letter-spacing: 0.2em; }
.svc-name { font-family: var(--font-display); font-size: 24px; line-height: 1.1; margin-top: 4px; }
.svc-route { color: var(--fg-dim); font-size: 13px; line-height: 1.5; }
.svc-price { text-align: right; flex-shrink: 0; }
.svc-price .n { font-family: var(--font-display); font-style: normal; font-weight: 400; font-size: 28px; line-height: 1; color: var(--accent); }
.svc-price .u { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; color: var(--fg-mute); text-transform: uppercase; margin-top: 4px; }
.svc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.svc-tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; padding: 5px 9px; border-radius: 999px; background: var(--bg-3); color: var(--fg-dim); text-transform: uppercase; }
.svc.featured .svc-tag.feat { background: var(--accent); color: var(--purple-deep); }
body[data-mode="light"] .svc.featured .svc-tag.feat { color: #fff; }

.benefits { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
.benefit { padding: 22px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 50px 1fr; gap: 14px; }
.benefit .n { font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.2em; padding-top: 4px; }
.benefit .t { font-family: var(--font-display); font-size: 22px; line-height: 1.15; margin-bottom: 8px; }
.benefit .d { color: var(--fg-dim); font-size: 14px; line-height: 1.55; }

.quote {
  margin-top: 36px; padding: 30px 24px; border-radius: 20px;
  background: radial-gradient(ellipse 120% 60% at 50% 0%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 70%), var(--bg-2);
  border: 1px solid var(--line); text-align: center;
}
.quote-mark { font-family: var(--font-display); font-style: italic; font-size: 60px; line-height: 0.5; color: var(--accent); margin-bottom: 16px; }
.quote-body { font-family: var(--font-display); font-style: italic; font-size: 20px; line-height: 1.35; }
.quote-cite { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; color: var(--fg-mute); text-transform: uppercase; margin-top: 20px; }

/* ─── Homepage booking CTA (preview → /book) ──────────────────────── */
.book-cta {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 22px;
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.book-cta-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.book-cta-points li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg);
}
.book-cta-mark {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--accent);
}
.book-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
}
.book-cta-begin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.book-cta-rates {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-dim);
  text-align: center;
  padding: 6px 0;
  transition: color .2s;
}
.book-cta-rates:hover { color: var(--accent); }

.contacts { display: flex; flex-direction: column; gap: 10px; }
.contact { display: grid; grid-template-columns: 42px 1fr auto; gap: 14px; align-items: center; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-2); transition: .2s; }
.contact:active { transform: scale(0.98); }
.contact .ico { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color: var(--purple-deep); display: flex; align-items: center; justify-content: center; }
.contact .ico svg { width: 20px; height: 20px; }
.contact .lbl { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; color: var(--fg-mute); text-transform: uppercase; margin-bottom: 4px; }
.contact .val { font-family: var(--font-display); font-size: 18px; line-height: 1; }
.contact .arrow { color: var(--fg-mute); }

/* The footer sits flush against the content-above (contact tiles, terms
   body, rates table) because it's nested inside each page's last .sec.
   margin-top pushes the hairline border away from that content so it
   breathes — at 0 offset the line read "stuck" against the cards. */
.footer { margin-top: 80px; padding: 60px 0 40px; text-align: center; border-top: 1px solid var(--line); }
.footer-brand { font-family: var(--font-display); font-size: clamp(70px, 22vw, 110px); line-height: 0.9; letter-spacing: -0.03em; }
.footer-brand span { color: var(--accent); }
.footer-meta { margin-top: 26px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; color: var(--fg-mute); text-transform: uppercase; }

@media (min-width: 860px) {
  .wrap { max-width: 1200px; padding: 0 48px; }
  .hero { padding: 130px 0 60px; }
  .hero-title { font-size: clamp(64px, 8vw, 110px); }
  .hero-actions { flex-direction: row; gap: 14px; }
  .hero-actions .btn { width: auto; min-width: 200px; }
  .routes { grid-template-columns: repeat(4, 1fr); }
  .vehicle-card { margin-top: 48px; padding: 0; }
  .vehicle-stage { aspect-ratio: 21/8; margin: 0; }
  .vehicle-row { left: 28px; right: 28px; bottom: 24px; }

  /* Hero A2 — desktop overrides: video becomes absolute full-bleed,
     meta-row sits at top, copy block (eyebrow + display + sub + CTA + routes)
     overlays at the bottom of the hero. */
  .hero-a2 { justify-content: space-between; }
  .hero-a2 .video-overlay { display: none; }
  .hero-a2 .meta-wrap { display: block; position: relative; z-index: 5; padding-top: 4px; }
  .hero-a2 .text-wrap .eyebrow-desktop { display: block; }
  .hero-a2 .text-wrap .hero-title-desktop { display: block; }
  .hero-a2 .video-bed {
    position: absolute; inset: 0; z-index: 0;
    aspect-ratio: auto;
    order: 0;
  }
  .hero-a2 .video-bed::after {
    background:
      linear-gradient(180deg, rgba(20,10,34,0.55) 0%, rgba(20,10,34,0.2) 25%, rgba(20,10,34,0.2) 55%, rgba(20,10,34,0.92) 100%),
      linear-gradient(90deg, rgba(20,10,34,0.6) 0%, rgba(20,10,34,0.15) 60%, transparent 100%);
  }
  .hero-a2 .text-wrap {
    position: relative; z-index: 5;
    order: 0;
    flex: 0 1 auto;
    margin-top: auto;
    padding-top: 0;
    justify-content: flex-end;
  }
  .hero-a2 .text-wrap .hero-copy { max-width: 640px; }

  .sec { padding: 110px 0; }
  .sec-title { font-size: clamp(52px, 6vw, 84px); }
  .sec-head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 40px; }
  .sec-head > div:first-child { flex: 1; }
  .sec-head > p { max-width: 380px; color: var(--fg-dim); font-size: 14px; line-height: 1.6; margin: 0; }
  .specs { grid-template-columns: repeat(6, 1fr); }
  .amenities { display: grid; grid-template-columns: repeat(3, 1fr); }
  .services { display: grid; grid-template-columns: 1fr 1fr; }
  .services .svc.span2 { grid-column: 1 / -1; }
  .benefit { grid-template-columns: 80px 1.5fr 2fr; padding: 34px 0; }
  .benefit .t { font-size: 28px; }
  .book-cta { padding: 40px 44px; display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; }
  .book-cta-actions { flex-direction: row; gap: 20px; align-items: center; justify-self: end; }
  .contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .nav { padding: 18px 48px; }
  .nav-links { display: flex; gap: 32px; }
  .nav-links a { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-dim); }
}
@media (max-width: 859px) {
  .nav-links { display: none; }
  /* Shrink switcher on narrow screens: globe only, keep dropdown full-width */
  .lang-btn { padding: 0 8px; }
  .lang-code { max-width: 48px; font-size: 10px; }
}

.tweaks {
  position: fixed; right: 16px; bottom: 16px; left: 16px; z-index: 9999;
  background: var(--overlay); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--line-2); border-radius: 18px; padding: 18px;
  color: var(--fg); display: none; max-width: 420px; margin-left: auto;
}
.tweaks[data-open="true"] { display: block; }
.tweaks h4 { margin: 0 0 14px; font-family: var(--font-display); font-size: 20px; font-weight: 400; }
.tweaks label { display: block; margin-bottom: 12px; }
.tweaks label > span { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; color: var(--fg-mute); margin-bottom: 6px; text-transform: uppercase; }
.tweaks .opts { display: grid; gap: 6px; grid-template-columns: 1fr 1fr; }
.tweaks .opt { border: 1px solid var(--line-2); background: transparent; color: var(--fg-dim); font-size: 12px; padding: 10px; border-radius: 10px; }
.tweaks .opt[aria-pressed="true"] { background: var(--accent); color: var(--purple-deep); border-color: var(--accent); font-weight: 600; }
body[data-mode="light"] .tweaks .opt[aria-pressed="true"] { color: #fff; }
.tweaks .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tweaks input[type="number"] { width: 100%; background: var(--bg); border: 1px solid var(--line-2); color: var(--fg); padding: 10px; border-radius: 10px; font-family: var(--font-mono); font-size: 12px; }

/* Terms — compact summary on main page */
.terms-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.terms-card { border: 1px solid var(--line); border-radius: 18px; padding: 22px 20px; background: var(--bg-2); display: flex; flex-direction: column; gap: 10px; }
.terms-card .tc-code { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--fg-mute); text-transform: uppercase; }
.terms-card .tc-title { font-family: var(--font-display); font-size: 22px; line-height: 1.15; margin: 0; }
.terms-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.terms-card ul li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; color: var(--fg-dim); font-size: 13px; line-height: 1.5; }
.terms-card ul li .m { color: var(--accent); font-family: var(--font-mono); font-size: 12px; line-height: 1.4; }
.terms-card.negative ul li .m { color: var(--fg-mute); }
.terms-card .tc-dl { display: flex; flex-direction: column; gap: 8px; }
.terms-card .tc-dl .r { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.terms-card .tc-dl .r:last-child { border-bottom: 0; }
.terms-card .tc-dl dt { color: var(--fg-mute); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; }
.terms-card .tc-dl dd { margin: 0; color: var(--fg); font-family: var(--font-display); font-size: 15px; text-align: right; min-width: 0; }
.terms-cta { margin-top: 18px; display: flex; justify-content: flex-end; }
.terms-cta a { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--accent); text-transform: uppercase; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: 999px; transition: .2s; }
.terms-cta a:hover { background: color-mix(in oklab, var(--accent) 10%, transparent); }
.terms-note { margin-top: 10px; font-size: 11px; color: var(--fg-mute); line-height: 1.6; }

/* Terms — full page at /terms */
.doc-page { padding: 120px 0 80px; }
.doc-page .wrap { max-width: 760px; }
.doc-page .back-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--fg-dim); text-transform: uppercase; margin-bottom: 30px; }
.doc-page .back-link:hover { color: var(--accent); }
.doc-page h1.display { font-size: clamp(46px, 10vw, 76px); margin: 0 0 10px; line-height: 1.02; letter-spacing: -0.02em; }
.doc-page .lead { color: var(--fg-dim); font-size: 15px; line-height: 1.7; margin: 0 0 12px; max-width: 620px; }
.doc-page .effective { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--fg-mute); text-transform: uppercase; margin-bottom: 40px; }
.doc-page section.t { padding: 26px 0; border-top: 1px solid var(--line); }
.doc-page section.t:first-of-type { border-top: 1px solid var(--line-2); }
.doc-page h2.t-h { font-family: var(--font-display); font-size: 26px; line-height: 1.15; margin: 0 0 14px; font-weight: 400; }
.doc-page h2.t-h .n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--accent); margin-right: 14px; vertical-align: middle; }
.doc-page p, .doc-page li { color: var(--fg-dim); font-size: 14px; line-height: 1.75; }
.doc-page p { margin: 0 0 12px; }
.doc-page ul.t-list { list-style: none; padding: 0; margin: 10px 0 16px; display: flex; flex-direction: column; gap: 8px; }
.doc-page ul.t-list li { padding-left: 22px; position: relative; }
.doc-page ul.t-list li::before { content: '·'; position: absolute; left: 8px; top: 0; color: var(--accent); font-weight: 700; }
.doc-page .t-dl { display: flex; flex-direction: column; gap: 0; margin: 16px 0; border-top: 1px solid var(--line); }
.doc-page .t-dl .r { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.doc-page .t-dl dt { color: var(--fg-mute); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
.doc-page .t-dl dd { margin: 0; color: var(--fg); font-size: 14px; }
.doc-page .t-footer { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--fg-mute); font-size: 12px; line-height: 1.7; }
.doc-page .t-footer a { color: var(--accent); }

@media (min-width: 860px) {
  .terms-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .doc-page { padding: 160px 0 120px; }
  /* H1 max trimmed from 108px → 84px after hotel page titles
     became sentence-length ("Your private chauffeur from … to either
     Bangkok airport"). The old clamp was tuned for short H1s
     ("Terms", "FAQ") and made long ones occupy half the viewport. */
  .doc-page h1.display { font-size: clamp(56px, 6vw, 84px); }
}

/* Mobile correction — must come AFTER the base `.doc-page { padding: 120px 0 80px }`
   rule above (cascade order with same specificity), so this override
   actually wins. The fixed nav is ~64px tall on phones; default 120px
   leaves ~55px of empty space before the breadcrumb. Tighten to ~84px. */
@media (max-width: 540px) {
  .doc-page { padding-top: 84px; }
}

/* ────────────────────────────────────────────────────────────
   Thai display typography overrides
   Thai script stacks multiple diacritics above and below the
   baseline (vowel signs, tone marks), so tight Latin line-heights
   and oversized display type cause glyph collisions. These rules
   loosen line-height and scale display sizes down on /th.
   ──────────────────────────────────────────────────────────── */
/* Thai keeps Latin font-sizes by default — only line-height is relaxed
   to prevent vowel + tone-mark collisions on stacked display lines.
   Reduce sizes per-element below as needed. */
html[lang^="th"] .display { line-height: 1.2; letter-spacing: -0.005em; }
html[lang^="th"] .footer-brand { letter-spacing: 0; line-height: 1.15; }

/* Thai: shrink section headings and /terms + /rates H1 only.
   Hero title and footer brand keep their Latin sizes. */
html[lang^="th"] .sec-title { font-size: clamp(28px, 7vw, 42px); line-height: 1.25; }
html[lang^="th"] .doc-page h1.display { font-size: clamp(34px, 7vw, 56px); line-height: 1.22; }

@media (min-width: 900px) {
  html[lang^="th"] .sec-title { font-size: clamp(38px, 4.5vw, 62px); }
}
@media (min-width: 860px) {
  html[lang^="th"] .doc-page h1.display { font-size: clamp(54px, 6vw, 80px); line-height: 1.2; }
}


/* ════════════════════════════════════════════════════════════════════
   /book — Booking flow
   ════════════════════════════════════════════════════════════════════ */

.booking-page {
  min-height: 100vh;
  padding: 72px 0 120px;
  color: var(--fg);
}
.booking-wrap { max-width: 840px; padding: 0 24px; }

.booking-head { margin-bottom: 28px; }
.booking-head .eyebrow { margin-bottom: 12px; }
.booking-head .display { margin: 0 0 14px; font-size: clamp(40px, 5.5vw, 72px); line-height: 1.05; }
.booking-head .lead { color: var(--fg-dim); font-size: 15px; max-width: 560px; margin: 0; }

/* Stepper — horizontal rail of 6 steps */
.booking-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 32px 0 28px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  overflow-x: auto;
}
.bs-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 0;
  white-space: nowrap;
  position: relative;
  color: var(--fg-mute);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* Buttons reset so `<button>` variants look identical to `<div>` ones. */
  background: transparent;
  border: 0;
  font-family: inherit;
}
/* Completed step becomes a tap-target — subtle underline hover + full
   pointer-cursor so the user knows they can jump back from any step. */
.bs-step.bs-clickable {
  cursor: pointer;
  transition: opacity 140ms ease;
}
.bs-step.bs-clickable:hover { opacity: 1; }
.bs-step.bs-clickable:hover .bs-label { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.bs-step.bs-clickable:hover .bs-num { opacity: 0.7; }
.bs-step.bs-clickable:focus-visible {
  outline: none;
}
.bs-step.bs-clickable:focus-visible .bs-num {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 35%, transparent);
}
.bs-step + .bs-step { padding-left: 14px; border-left: 1px solid var(--line); }
.bs-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
/* Active step = gold pill, matches brand accent + the rest of the flow's
   interactive selection states (service tile, wheel picker, date inputs). */
.bs-active { color: var(--accent); }
.bs-active .bs-num {
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  color: var(--purple-deep);
  border-color: var(--accent);
  font-weight: 600;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
}
/* Completed steps — same gold fill as active, but dimmed so the current
   step still reads as the primary beacon. */
.bs-done { color: var(--fg-dim); }
.bs-done .bs-num {
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  color: var(--purple-deep);
  border-color: var(--accent);
  opacity: 0.5;
}

.booking-body { margin-bottom: 28px; }

.step-panel { padding: 8px 0; }
.step-eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 10px;
}
.step-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1.15;
  margin: 0 0 10px;
}
.step-sub { color: var(--fg-dim); max-width: 620px; margin: 0 0 24px; font-size: 14px; line-height: 1.55; }

/* ─── Step 1: service tiles ───────────────────────────────────────── */
.svc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 680px) {
  .svc-grid { grid-template-columns: 1fr 1fr; }
}
.svc-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  text-align: left;
  padding: 18px 18px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  color: var(--fg);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
  font-family: inherit;
}
.svc-tile:hover { border-color: var(--line-2); background: rgba(255,255,255,0.04); }
.svc-tile.is-selected {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 8%, rgba(255,255,255,0.02));
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 40%, transparent);
}
/* Deep-link pulse — plays once after `?route=&variant=` URL pre-selects a
   tile. Drives customer attention to the pre-selected tile after auto-scroll,
   so they immediately see "this is what's pre-selected" without confusion.
   Honors prefers-reduced-motion. */
.svc-tile.is-pulsing {
  animation: svc-pulse 1.6s ease-out 2;
}
@keyframes svc-pulse {
  0%   { box-shadow: 0 0 0 0   color-mix(in oklab, var(--accent) 60%, transparent); }
  55%  { box-shadow: 0 0 0 18px color-mix(in oklab, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 1px  color-mix(in oklab, var(--accent) 40%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .svc-tile.is-pulsing { animation: none; }
}
.svc-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.svc-name { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.svc-sub { color: var(--fg-mute); font-size: 12px; line-height: 1.45; }

/* ─── Step 1: service tile price (matches homepage .svc-price .n/.u) ── */
.svc-tile .svc-price {
  margin-top: 10px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.svc-tile .svc-price .n {
  display: block;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  color: var(--accent);
}
.svc-tile .svc-price .u {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--fg-mute);
  text-transform: uppercase;
}
.svc-tick {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  color: var(--purple-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}

/* ─── Step 2+: form fields ────────────────────────────────────────── */
.field-stack { display: flex; flex-direction: column; gap: 14px; max-width: 520px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.field-input {
  width: 100%;
  /* 16px avoids the iOS Safari auto-zoom on focus; don't drop below. */
  padding: 14px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--fg);
  font: inherit;
  font-size: 16px;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
/* Native date/time pickers render a little differently; these normalize
   the vertical rhythm so the field looks identical to a text input when
   empty, and keeps the caret indicator visible in dark mode. */
.field-input[type="date"],
.field-input[type="time"],
.field-input[type="datetime-local"] {
  min-height: 52px;
  font-variant-numeric: tabular-nums;
  color-scheme: dark;
}
.field-input[type="date"]::-webkit-calendar-picker-indicator,
.field-input[type="time"]::-webkit-calendar-picker-indicator,
.field-input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(0.55) sepia(1) saturate(5) hue-rotate(5deg);
  cursor: pointer;
  opacity: 0.8;
}
.field-input[type="date"]::-webkit-calendar-picker-indicator:hover,
.field-input[type="time"]::-webkit-calendar-picker-indicator:hover,
.field-input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}
.field-input:hover { border-color: var(--line-2); }
.field-input:focus {
  outline: none;
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 4%, rgba(255,255,255,0.04));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
}
.field-input::placeholder { color: var(--fg-mute); }
.field-hint { color: var(--fg-mute); font-size: 12px; margin: 12px 0 0; }

/* ─── Step 2 pickup: trigger field → bottom-sheet wheel picker ───────
   Field looks like a regular input but opens a modal drawer on tap.
   The drawer contains the 3-wheel picker + a Confirm button, matching
   the Grab / Bolt / Airbnb pattern. */

.pickup-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--fg);
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color 140ms ease, background 140ms ease;
}
.pickup-trigger:hover { border-color: var(--line-2); }
.pickup-trigger:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
}
.pickup-trigger-inner { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pickup-trigger-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.pickup-trigger-value {
  font-size: 16px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pickup-trigger-value--empty { color: var(--fg-mute); }
.pickup-trigger-value--warn  { color: #ff9a9a; }
.pickup-trigger-chev {
  font-size: 22px;
  color: var(--fg-mute);
  flex-shrink: 0;
  margin-left: 10px;
}

/* ─── Address picker sub-line on the trigger ─────────────────────── */
.pickup-trigger-sub {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--fg-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── Address drawer — widens the sheet for the map view + list  ── */
.sheet-address { max-height: calc(100vh - 40px); overflow-y: auto; }

/* Search bar */
.addr-search {
  position: relative;
  margin: 6px 0 10px;
}
.addr-search-ico {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--fg-mute);
  pointer-events: none;
}
.addr-search-input {
  width: 100%;
  padding: 12px 36px 12px 38px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--fg);
  font: inherit;
  font-size: 16px;
  box-sizing: border-box;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.addr-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
}
.addr-search-clear {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  border: 0;
  background: transparent;
  color: var(--fg-mute);
  font-size: 18px;
  cursor: pointer;
  border-radius: 50%;
}
.addr-search-clear:hover { background: rgba(255,255,255,0.05); color: var(--fg); }

/* Section headings inside the drawer */
.addr-sec-h {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin: 12px 2px 8px;
}

/* Rows (common structure used for predictions, recent, map, gps) */
.addr-row {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 8px;
  background: transparent;
  border: 0;
  border-bottom: 0.5px solid rgba(255,255,255,0.05);
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 120ms ease;
}
.addr-row:last-child { border-bottom: 0; }
.addr-row:hover { background: rgba(255,223,154,0.04); }
.addr-row-ico {
  width: 22px; height: 22px;
  flex-shrink: 0;
  color: color-mix(in oklab, var(--accent) 60%, transparent);
  display: flex; align-items: center; justify-content: center;
}
.addr-row:hover .addr-row-ico { color: var(--accent); }
.addr-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.addr-row-name {
  font-size: 14px;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.addr-row-addr {
  font-size: 11px;
  color: var(--fg-mute);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.addr-row-chev { color: var(--fg-mute); font-size: 18px; flex-shrink: 0; }

/* "Pick on map" row — gold emphasis, separated from the list above. */
.addr-row-map {
  border-top: 0.5px solid var(--line);
  margin-top: 4px;
  padding-top: 13px;
}
.addr-row-map .addr-row-ico,
.addr-row-map .addr-row-name { color: var(--accent); }
.addr-row-map .addr-row-name { font-weight: 500; }

/* Autocomplete prediction row — match the result's main text in gold. */
.addr-row-result .addr-row-name { color: var(--fg); }

/* Free-text commit row — when user typed something we can't find. */
.addr-row-text-commit {
  border-top: 0.5px dashed rgba(255,255,255,0.08);
  margin-top: 4px;
  color: var(--fg-dim);
}
.addr-row-text-commit .addr-row-ico {
  color: var(--fg-mute);
  font-family: var(--font-mono);
  font-size: 14px;
}

/* Status / info lines */
.addr-status {
  padding: 12px 8px;
  font-size: 12px;
  color: var(--fg-mute);
  margin: 0;
}
.addr-status--err { color: #ff9f9f; }

/* Chips for popular hotels */
.addr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 2px 4px;
}
.addr-chip {
  padding: 8px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.addr-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 6%, transparent);
}

/* GPS row (Use current location) — blue-dot Google convention */
.addr-gps-row {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 8px;
  background: transparent;
  border: 0;
  border-bottom: 0.5px solid rgba(255,255,255,0.08);
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 120ms ease;
}
.addr-gps-row:hover { background: rgba(74,144,255,0.06); }
.addr-gps-row .addr-row-name { color: #7fb4ff; font-weight: 500; }
.addr-gps-row .addr-row-addr { color: rgba(127,180,255,0.55); }
.addr-gps-ico {
  position: relative;
  width: 22px; height: 22px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.addr-gps-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #4a90ff;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(74,144,255,0.4), 0 0 10px 2px rgba(74,144,255,0.35);
  z-index: 2;
}
.addr-gps-pulse {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(74,144,255,0.25);
  animation: addr-gps-pulse 1.6s ease-out infinite;
}
@keyframes addr-gps-pulse {
  0%   { transform: translate(-50%,-50%) scale(0.6); opacity: 0.8; }
  100% { transform: translate(-50%,-50%) scale(1.9); opacity: 0; }
}
.addr-gps-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  padding: 3px 8px;
  border: 0.5px solid rgba(127,180,255,0.35);
  border-radius: 999px;
  color: rgba(127,180,255,0.7);
  flex-shrink: 0;
}
.addr-gps-cta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7fb4ff;
  padding: 3px 10px;
  border: 0.5px solid rgba(127,180,255,0.5);
  border-radius: 999px;
  flex-shrink: 0;
}
.addr-gps-resolved {
  background: rgba(74,144,255,0.06);
  border-radius: 10px;
  border-bottom: 0;
  padding: 14px 12px;
}
.addr-gps-resolving {
  cursor: wait;
  pointer-events: none;
}
.addr-gps-err {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 8px 0;
  padding: 12px 14px;
  background: rgba(255,130,130,0.08);
  border: 1px solid rgba(255,130,130,0.3);
  border-radius: 10px;
}
.addr-gps-err-ico { flex-shrink: 0; color: #ff9f9f; margin-top: 1px; }
.addr-gps-err p {
  margin: 0;
  font-size: 12px;
  color: #ffc2c2;
  line-height: 1.5;
}

/* Map pick view */
.sheet-back {
  width: 28px; height: 28px;
  border: 0;
  background: transparent;
  color: var(--fg-dim);
  cursor: pointer;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background 120ms ease;
}
.sheet-back:hover { background: rgba(255,255,255,0.05); color: var(--fg); }
.addr-map-wrap {
  position: relative;
  height: 300px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.addr-map { width: 100%; height: 100%; }
.addr-map-pin {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -100%);
  color: var(--accent);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
  pointer-events: none;
  z-index: 3;
}
.addr-map-preview {
  margin-top: 10px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.addr-map-preview-cap {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 3px;
}
.addr-map-preview-name {
  font-size: 15px;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.addr-map-preview-addr {
  font-size: 12px;
  color: var(--fg-dim);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sheet-confirm:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
}

/* Read-only card shown when the pickup is an airport implied by the
   service + direction — user can't / doesn't need to type it. Paired
   with an optional meeting-note textarea below. */
.pickup-static {
  padding: 14px 16px;
  background: color-mix(in oklab, var(--accent) 6%, rgba(255,255,255,0.02));
  border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent);
  border-radius: 12px;
}
.pickup-static-main {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--accent);
  line-height: 1.2;
}
.pickup-static-sub {
  margin-top: 6px;
  font-size: 12px;
  color: var(--fg-dim);
  line-height: 1.5;
}

/* Step 3 trip-route preview. A click-through wrapper renders a Google
   Static Maps image (200px tall) underneath the pickup + destination
   fields. Mirrors the email-side static map so the preview the customer
   sees on Step 3 visually matches what they'll receive in the receipt. */
.trip-map-field { gap: 8px; }
.trip-map {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  height: 200px;
  text-decoration: none;
  color: inherit;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
a.trip-map:hover {
  border-color: color-mix(in oklab, var(--accent) 60%, transparent);
  box-shadow: 0 8px 20px -10px color-mix(in oklab, var(--accent) 35%, transparent);
}
a.trip-map:active { transform: translateY(1px); }
.trip-map:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.trip-map-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Static Maps returns @2x via scale=2, so the bitmap is ~1200×400. */
}
/* Distance + duration pill — bottom-right of the map when route data
   has resolved. Translucent dark surface so it reads on light AND dark
   map tiles equally well. */
.trip-map-stamp {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(20, 10, 34, 0.78);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: none;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
/* Single-pin state: nudge the user to add the other end. Centred so it
   can't be confused with a "this is the destination" caption. */
.trip-map-hint {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(20, 10, 34, 0.78);
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: none;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
/* Sub-line beneath the map — quiet hint, not a label. */
.trip-map-cap {
  font-size: 12px;
  color: var(--fg-mute);
  line-height: 1.4;
  padding: 0 2px;
}

/* Bottom-sheet drawer overlay. Fixed full-screen backdrop + a sliding
   card anchored to the bottom. Body scroll lock prevents the page from
   moving behind the sheet on iOS. */
.sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0);
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  animation: sheet-fade-in 220ms ease forwards;
}
@keyframes sheet-fade-in {
  to { background: rgba(0,0,0,0.6); }
}
.sheet {
  background: var(--bg);
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  padding: 8px 20px 24px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -12px 40px rgba(0,0,0,0.55);
  animation: sheet-slide-up 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
  border: 1px solid var(--line);
  border-bottom: 0;
}
@keyframes sheet-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.sheet-handle {
  width: 40px; height: 4px;
  background: var(--line-2);
  border-radius: 2px;
  margin: 0 auto 14px;
}
.sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.sheet-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  margin: 0;
}
.sheet-close {
  width: 36px; height: 36px;
  border: 0;
  background: transparent;
  color: var(--fg-dim);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: background 120ms ease, color 120ms ease;
}
.sheet-close:hover {
  background: rgba(255,255,255,0.04);
  color: var(--fg);
}
.sheet-draft {
  margin: 8px 0 2px;
  text-align: center;
  font-size: 13px;
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}
.sheet-confirm {
  width: 100%;
  margin-top: 14px;
  padding: 14px;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  color: var(--purple-deep);
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: filter 140ms ease;
}
.sheet-confirm:hover { filter: brightness(1.08); }
.sheet-confirm:active { filter: brightness(0.95); }

/* Text-link "Clear" — only shown for optional fields that have a value. */
.sheet-clear {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  background: transparent;
  border: 0;
  color: var(--fg-mute);
  font: inherit;
  font-size: 13px;
  text-align: center;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 4px;
  transition: color 120ms ease;
}
.sheet-clear:hover { color: var(--fg-dim); }

/* ─── 3-wheel picker (inside the sheet) ─────────────────────────────
   Date · hour · minute columns, each scroll-snapped vertically. The
   middle row is the active selection; surrounding rows fade with
   distance. */

.pickup-summary {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.pickup-summary--empty { color: var(--fg-mute); }
.pickup-summary--warning {
  color: var(--red, #ff9a9a);
}

.wheel-picker {
  position: relative;
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr;
  gap: 6px;
  height: 240px;
  margin-top: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 6px;
  background: rgba(255,255,255,0.02);
}
/* Middle-row highlight bar. Sits behind the columns so the active item
   appears wrapped in a gold pill. */
.wheel-bar {
  position: absolute;
  left: 6px;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  height: 40px;
  border-radius: 10px;
  background: color-mix(in oklab, var(--accent) 12%, rgba(255,255,255,0.04));
  border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  pointer-events: none;
  z-index: 0;
}
.wheel {
  position: relative;
  height: 100%;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  z-index: 1;
  /* Fade top + bottom so rows appear to curve into the distance. */
  mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
}
.wheel::-webkit-scrollbar { display: none; }
.wheel:focus { outline: none; }
.wheel:focus-visible {
  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--accent) 50%, transparent);
  border-radius: 8px;
}
.wheel-pad {
  height: 100px;           /* (240 - 40) / 2 */
  scroll-snap-align: none;
}
.wheel-item {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  scroll-snap-align: center;
  color: var(--fg-mute);
  transition: color 140ms ease, font-weight 140ms ease;
  -webkit-tap-highlight-color: transparent;
}
.wheel-item[data-near="0"] {
  color: var(--accent);
  font-weight: 500;
}
.wheel-item[data-near="1"] {
  color: var(--fg-dim);
}
/* Date column uses slightly smaller text to fit "Mon 26 Apr" etc. */
.wheel-col-date .wheel-item {
  font-family: inherit;
  font-size: 15px;
}

/* ─── Step 5: review ──────────────────────────────────────────────── */
.review-dl {
  margin: 0;
  border-top: 1px solid var(--line);
}
.review-dl .r {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.review-dl dt { color: var(--fg-mute); font-size: 13px; letter-spacing: 0.02em; }
.review-dl dd { color: var(--fg); margin: 0; font-size: 14px; text-align: right; }

/* ─── nav buttons ─────────────────────────────────────────────────── */
.booking-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
/* Mobile: pin the Back / Continue bar to the bottom of the viewport so the
   primary CTA is always one tap away — no scrolling past long forms. */
@media (max-width: 859px) {
  .booking-nav {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin-left: -24px;
    margin-right: -24px;
    padding: 14px 24px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in oklab, var(--bg) 92%, transparent);
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px -12px rgba(0,0,0,0.45);
  }
  /* Spacer below the last step content so the sticky bar doesn't visually
     cover the final control or hint line when the form is short. */
  .booking-body { margin-bottom: 12px; }
}
.booking-nav .btn-ghost {
  padding: 12px 18px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--fg-dim);
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.booking-nav .btn-ghost:hover { border-color: var(--line-2); color: var(--fg); }
.booking-nav .btn-primary {
  padding: 12px 22px;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  color: var(--purple-deep);
  border: 1px solid var(--accent);
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  margin-left: auto;
  transition: filter 140ms ease, opacity 120ms ease;
}
.booking-nav .btn-primary:hover  { filter: brightness(1.08); }
.booking-nav .btn-primary:active { filter: brightness(0.95); }
.booking-nav .btn-primary:disabled { opacity: 0.35; cursor: not-allowed; filter: none; }

/* ─── Segmented controls (direction pickers) ──────────────────────── */
.seg-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.seg-btn {
  flex: 1 1 180px;
  padding: 14px 16px;
  min-height: 52px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--fg-dim);
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.seg-btn:hover { border-color: var(--line-2); color: var(--fg); }
.seg-btn.is-selected {
  border-color: var(--accent);
  color: var(--fg);
  background: color-mix(in oklab, var(--accent) 8%, rgba(255,255,255,0.02));
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 40%, transparent);
}
/* Icon + label layout for DirectionPicker options. */
.seg-btn { display: inline-flex; align-items: center; gap: 12px; }
.seg-btn-ico {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-mute);
  transition: color 140ms ease;
}
.seg-btn.is-selected .seg-btn-ico { color: var(--accent); }
.seg-btn-text { flex: 1; line-height: 1.2; }

/* ─── Stepper (+/−) — replaces <input type=number> for small integers ─ */
.stepper {
  display: flex;
  align-items: stretch;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  overflow: hidden;
  min-height: 52px;
}
.stepper-btn {
  width: 52px;
  background: transparent;
  border: 0;
  color: var(--accent);
  font-size: 22px;
  font-weight: 500;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
  -webkit-tap-highlight-color: transparent;
}
.stepper-btn:hover:not(:disabled) {
  background: color-mix(in oklab, var(--accent) 10%, transparent);
}
.stepper-btn:active:not(:disabled) {
  background: color-mix(in oklab, var(--accent) 18%, transparent);
}
.stepper-btn:disabled {
  color: var(--fg-mute);
  cursor: not-allowed;
  opacity: 0.4;
}
.stepper-val {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  user-select: none;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
/* Smaller stepper variant used inside LuggageRow (fits compact rows). */
.stepper.stepper-sm {
  min-height: 36px;
  width: auto;
  flex-shrink: 0;
  border-radius: 8px;
}
.stepper-sm .stepper-btn { width: 36px; font-size: 18px; }
.stepper-sm .stepper-val { flex: 0 0 32px; font-size: 15px; }

/* ─── Luggage picker (Step 3) ────────────────────────────────────── */
.lug-picker { display: flex; flex-direction: column; gap: 0; }
.lug-list { display: flex; flex-direction: column; gap: 6px; }
.lug-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.lug-row.is-picked {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 6%, rgba(255,255,255,0.02));
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent);
}
.lug-ico {
  width: 32px; height: 44px;
  flex-shrink: 0;
  color: color-mix(in oklab, var(--accent) 70%, transparent);
  display: flex; align-items: flex-end;
}
.lug-row.is-picked .lug-ico { color: var(--accent); }
.lug-info { flex: 1; min-width: 0; }
.lug-name {
  font-size: 13px;
  color: var(--fg);
  font-weight: 500;
  line-height: 1.25;
}
.lug-dim {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-mute);
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* ─── Capacity meter ─────────────────────────────────────────────── */
.cap-bar {
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  margin-top: 14px;
}
.cap-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 240ms ease, background 240ms ease;
}
.cap-bar-fill.cap-ok {
  background: linear-gradient(90deg, #9cd89c, #78c87a);
}
.cap-bar-fill.cap-warn {
  background: linear-gradient(90deg, #ffc97a, #f5a85e);
}
.cap-bar-fill.cap-over {
  background: linear-gradient(90deg, #ff9f9f, #e76b6b);
}
/* Tiny over-cap tick past 100% — signals the bar is clamped but real load is higher. */
.cap-bar-over {
  position: absolute;
  right: -2px;
  top: -3px;
  width: 2px;
  height: 12px;
  background: #e76b6b;
  border-radius: 1px;
  animation: cap-over-pulse 1.4s ease-in-out infinite;
}
@keyframes cap-over-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
.cap-status {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.4;
}
.cap-status.cap-ok   { color: #9cd89c; }
.cap-status.cap-warn { color: #ffc97a; }
.cap-status.cap-over { color: #ff9f9f; }

/* ─── Over-capacity callout (shown when ratio > 1) ───────────────── */
.cap-callout {
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(255,130,130,0.08);
  border: 1px solid rgba(255,130,130,0.35);
  border-radius: 10px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.cap-callout-ico {
  flex-shrink: 0;
  color: #ff9f9f;
  margin-top: 1px;
}
.cap-callout-body { flex: 1; min-width: 0; }
.cap-callout-title {
  font-size: 13px;
  color: #ffc2c2;
  font-weight: 500;
  margin-bottom: 4px;
}
.cap-callout-body p {
  margin: 0 0 8px;
  font-size: 12px;
  color: rgba(255,194,194,0.85);
  line-height: 1.5;
}
.cap-callout-link {
  font-size: 12px;
  color: #ff9f9f;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cap-callout-link:hover { color: #ffc2c2; }

/* ─── Review section "Edit" mini-link (Step 5) ───────────────────── */
.review-dl dt {
  display: flex;
  align-items: center;
  gap: 10px;
}
.review-edit {
  background: transparent;
  border: 0;
  color: var(--fg-mute);
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 2px 4px;
  transition: color 140ms ease;
}
.review-edit:hover { color: var(--accent); }
.review-note .review-edit { margin-left: 10px; }

/* ─── Step 5 trust block (shown above submit button) ─────────────── */
.trust-block {
  margin-top: 24px;
  padding: 16px 18px;
  border: 1px solid color-mix(in oklab, var(--accent) 20%, var(--line));
  border-radius: 14px;
  background: color-mix(in oklab, var(--accent) 4%, rgba(255,255,255,0.02));
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.trust-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.02em;
  font-weight: 500;
}
.trust-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.trust-chip {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  background: rgba(255,255,255,0.02);
}
.trust-block .field-hint {
  margin: 0;
  color: var(--fg-dim);
  font-size: 12px;
  line-height: 1.5;
}

/* ─── Submit loading overlay (Step 5 → draft + checkout round-trip) ── */
/* Loading overlay — fixed to the viewport (not the step panel) so the
   "Holding your slot…" card always sits dead centre regardless of how
   far the user has scrolled inside Step 5's longer reviews. Body scroll
   stays locked while submitting (`document.body.style.overflow='hidden'`
   could be added later; for now the fixed overlay alone solves the
   "I scrolled past the message" complaint). */
.submit-loading {
  position: fixed;
  inset: 0;
  background: color-mix(in oklab, var(--bg) 85%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: submit-fade-in 200ms ease forwards;
}
@keyframes submit-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.submit-loading-card {
  max-width: 320px;
  padding: 24px;
  background: var(--bg-2);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--line));
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.submit-loading-spinner {
  width: 36px; height: 36px;
  border: 3px solid color-mix(in oklab, var(--accent) 25%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: submit-spin 800ms linear infinite;
}
@keyframes submit-spin {
  to { transform: rotate(360deg); }
}
.submit-loading-title {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--accent);
}
.submit-loading-sub {
  font-size: 13px;
  color: var(--fg-dim);
  line-height: 1.5;
}
/* Step 5 needs to be positioning context so the overlay anchors to it. */
.step-panel { position: relative; }

/* ─── Step 6 pay-bridge (pre-Stripe redirect screen) ─────────────── */
.pay-bridge {
  margin-top: 24px;
  padding: 28px 22px;
  border: 1px solid color-mix(in oklab, var(--accent) 25%, var(--line));
  border-radius: 16px;
  background: color-mix(in oklab, var(--accent) 4%, rgba(255,255,255,0.02));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.pay-bridge-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.pay-bridge-cta {
  width: 100%;
  max-width: 300px;
  text-align: center;
  text-decoration: none;
}
.pay-bridge-spinner {
  width: 32px; height: 32px;
  border: 2px solid color-mix(in oklab, var(--accent) 25%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: submit-spin 900ms linear infinite;
}
.pay-bridge-hint {
  margin: 0;
  font-size: 12px;
  color: var(--fg-mute);
  text-align: center;
  line-height: 1.5;
}

/* ─── Two-column field row (pax + luggage) ────────────────────────── */
.field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 520px) {
  .field-row { grid-template-columns: 1fr 1fr; }
}

/* ─── Notify checkboxes (Step 4) ──────────────────────────────────── */
.notify-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 4px;
}
.check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--fg);
  cursor: pointer;
  user-select: none;
}
.check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--gold-soft);
  cursor: pointer;
}
/* Toggle-style row: larger tap target, full-width, used for "booking
   for someone else" so it looks like an expandable section header. */
.check.check-switch {
  padding: 14px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 14px;
  gap: 12px;
  min-height: 52px;
  width: 100%;
  box-sizing: border-box;
}
.check.check-switch:hover { border-color: var(--line-2); }
.check.check-switch input[type="checkbox"]:checked ~ span { color: var(--accent); }

/* Expanded guest sub-block — visually nested under the switch above. */
.guest-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  border-left: 2px solid color-mix(in oklab, var(--accent) 40%, transparent);
  margin-left: 4px;
  background: color-mix(in oklab, var(--accent) 3%, transparent);
  border-radius: 0 10px 10px 0;
}
.guest-block .field-hint { margin: 0; }

/* ─── Phone field — country button + local number ─────────────────── */
.phone-field {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  transition: border-color 140ms ease, box-shadow 140ms ease;
  min-height: 52px;
  overflow: hidden;
}
.phone-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
}
.phone-country-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  color: var(--accent);
  font: inherit;
  font-family: var(--font-mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  flex-shrink: 0;
  min-width: 88px;
  transition: background 140ms ease;
}
.phone-country-btn:hover { background: color-mix(in oklab, var(--accent) 6%, transparent); }
.phone-country-btn:focus-visible { outline: none; background: color-mix(in oklab, var(--accent) 10%, transparent); }
.phone-country-dial {
  font-weight: 500;
}
.phone-country-chev {
  font-size: 10px;
  opacity: 0.7;
}
.phone-local {
  flex: 1;
  min-width: 0;
  padding: 14px 14px;
  background: transparent;
  border: 0;
  color: var(--fg);
  font: inherit;
  font-size: 16px; /* 16px = no iOS auto-zoom */
  outline: none;
  font-variant-numeric: tabular-nums;
}
.phone-local::placeholder { color: var(--fg-mute); }

/* ─── Country picker bottom sheet ─────────────────────────────────── */
.sheet-country { max-height: calc(100vh - 40px); overflow-y: auto; }
.country-search {
  position: relative;
  margin: 6px 0 10px;
}
.country-search-ico {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--fg-mute);
  pointer-events: none;
}
.country-search-input {
  width: 100%;
  padding: 12px 14px 12px 38px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--fg);
  font: inherit;
  font-size: 16px;
  box-sizing: border-box;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.country-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
}
.country-list {
  display: flex;
  flex-direction: column;
  margin: 0 -4px;
}
.country-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 8px;
  background: transparent;
  border: 0;
  border-bottom: 0.5px solid rgba(255,255,255,0.04);
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 120ms ease;
}
.country-row:last-child { border-bottom: 0; }
.country-row:hover { background: rgba(255,223,154,0.04); }
.country-row.is-selected {
  background: color-mix(in oklab, var(--accent) 8%, transparent);
}
.country-row.is-selected .country-row-name { color: var(--accent); }
.country-row.is-selected .country-row-dial { color: var(--accent); font-weight: 500; }
.country-row-name {
  font-size: 14px;
  color: var(--fg);
}
.country-row-dial {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-mute);
  font-variant-numeric: tabular-nums;
}

/* ─── Contact-method radio group (Step 4) ─────────────────────────── */
.cm-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cm-opt {
  text-align: left;
  padding: 13px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--fg-dim);
  font: inherit;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.cm-opt:hover { border-color: var(--line-2); color: var(--fg); }
.cm-opt.is-selected {
  border-color: var(--accent);
  color: var(--fg);
  background: color-mix(in oklab, var(--accent) 8%, rgba(255,255,255,0.02));
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 40%, transparent);
}
.cm-opt-title {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
  margin-bottom: 3px;
}
.cm-opt.is-selected .cm-opt-title { color: var(--accent); }
.cm-opt-sub {
  display: block;
  font-size: 12px;
  color: var(--fg-mute);
  line-height: 1.5;
}

/* ─── Review list tweaks ──────────────────────────────────────────── */
.review-dl .dd-meta { color: var(--fg-mute); font-size: 12px; }
.review-note {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-left: 2px solid var(--gold-soft);
  background: rgba(230,195,120,0.04);
  color: var(--fg-dim);
  font-size: 13px;
  line-height: 1.5;
}

/* ─── Payment mode toggle (Step 5) ────────────────────────────────── */
.pay-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 24px 0;
}
@media (min-width: 520px) {
  .pay-group { grid-template-columns: 1fr 1fr; }
}
.pay-opt {
  text-align: left;
  padding: 14px 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--fg);
  font: inherit;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.pay-opt:hover { border-color: var(--line-2); }
.pay-opt.is-selected {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 8%, rgba(255,255,255,0.02));
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 40%, transparent);
}
.pay-top {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pay-badge {
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--gold-soft);
  color: var(--purple-deep);
  font-weight: 600;
}
.pay-sub { color: var(--fg-mute); font-size: 12px; line-height: 1.4; }

/* ─── Price quote table ───────────────────────────────────────────── */
.quote-dl {
  margin: 0 0 20px;
  padding: 16px 0 6px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.q-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 6px 0;
  font-size: 14px;
}
.q-row dt { color: var(--fg-dim); margin: 0; }
.q-row dd { color: var(--fg); margin: 0; font-variant-numeric: tabular-nums; }
.q-row.q-discount dd { color: var(--gold-soft); }
.q-row.q-total {
  padding: 10px 0 8px;
  margin-top: 4px;
  border-top: 1px dashed var(--line);
  font-size: 16px;
}
.q-row.q-total dt { color: var(--fg); }
.q-row.q-deposit dt,
.q-row.q-deposit dd { font-weight: 500; }
.q-row.q-balance { color: var(--fg-mute); font-size: 13px; }
.q-row.q-balance dt,
.q-row.q-balance dd { color: inherit; }

/* ─── Submit error banner + recovery actions ──────────────────────── */
.submit-error {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid #c06060;
  background: rgba(192, 96, 96, 0.12);
  color: #f6c2c2;
  border-radius: 12px;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.submit-error-msg { line-height: 1.5; }
.submit-error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.submit-error-btn {
  padding: 8px 14px;
  background: transparent;
  border: 1px solid #f6c2c2;
  color: #f6c2c2;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.submit-error-btn:hover {
  background: rgba(246, 194, 194, 0.12);
}
.submit-error-link {
  margin-left: auto;
  color: #f6c2c2;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.submit-error-link:hover { color: #fff; }

/* ─── Step 6 (done) ───────────────────────────────────────────────── */
.step-done { text-align: left; }
.done-card {
  margin: 20px 0 24px;
  padding: 20px 24px;
  border: 1px solid var(--gold-soft);
  background: rgba(230,195,120,0.06);
  border-radius: 14px;
}
.done-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 6px;
}
.done-ref {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 40px);
  color: var(--gold-soft);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.done-cal-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  margin: 0 0 24px;
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--accent) 45%, var(--line));
  color: var(--accent);
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.done-cal-btn:hover {
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  border-color: var(--accent);
}

/* ─── Live tracking CTA on the Done screen ───────────────────────── */
.done-track {
  margin: 0 0 20px;
}
.done-track-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  color: var(--purple-deep);
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: filter 140ms ease;
}
.done-track-cta:hover { filter: brightness(1.08); }
.done-track-cta:active { filter: brightness(0.95); }
.done-track-sub {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--fg-mute);
  line-height: 1.5;
  max-width: 440px;
}

/* ─── /track page — status timeline ──────────────────────────────── */
.track-hero {
  margin: 24px 0 28px;
  padding: 22px 24px;
  border-radius: 14px;
  background: color-mix(in oklab, var(--accent) 6%, rgba(255,255,255,0.02));
  border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent);
}
.track-hero-cap {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.track-hero-val {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--fg);
  line-height: 1.2;
}
.track-hero-sub {
  margin-top: 10px;
  font-size: 13px;
  color: var(--fg-dim);
}
.track-hero-sub strong { color: var(--fg); }

/* Vertical timeline — step dot + label + body. */
.track-timeline {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  position: relative;
}
.track-timeline::before {
  content: "";
  position: absolute;
  left: 11px; top: 6px; bottom: 6px;
  width: 1px;
  background: var(--line);
}
.track-step {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  position: relative;
}
.track-step-dot {
  flex-shrink: 0;
  width: 22px; height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--bg);
  position: relative;
  z-index: 1;
  transition: all 240ms ease;
}
.track-step--done .track-step-dot {
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  border-color: var(--accent);
  opacity: 0.6;
}
.track-step--active .track-step-dot {
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  border-color: var(--accent);
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--accent) 18%, transparent);
}
.track-step-body {
  flex: 1;
  min-width: 0;
}
.track-step-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-mute);
  margin-bottom: 2px;
}
.track-step--done .track-step-label { color: var(--fg-dim); }
.track-step--active .track-step-label { color: var(--accent); }
.track-step-sub {
  font-size: 12px;
  color: var(--fg-mute);
  line-height: 1.5;
}

/* Generic info / alert cards on the track page. */
.track-card {
  margin: 20px 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
}
.track-card--pending {
  display: flex;
  align-items: center;
  gap: 14px;
}
.track-card--err {
  border-color: rgba(255,130,130,0.35);
  background: rgba(255,130,130,0.06);
}
.track-card-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--fg);
  margin-bottom: 6px;
}
.track-card--err .track-card-title { color: #ffc2c2; }
.track-card p {
  margin: 0;
  font-size: 13px;
  color: var(--fg-dim);
  line-height: 1.6;
}
.track-card--err p { color: rgba(255,194,194,0.85); }

/* Driver + vehicle photo cards on /track — appear once a chauffeur is
   assigned. Premium trust signal: customer sees who's picking them up. */
.track-fleet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 18px 0;
}
.track-fleet-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.track-fleet-img {
  width: 100%;
  display: block;
  object-fit: cover;
  background: rgba(255,255,255,0.04);
}
.track-fleet-img--portrait { aspect-ratio: 1 / 1; }
.track-fleet-img--landscape { aspect-ratio: 16 / 9; }
.track-fleet-caption {
  padding: 10px 14px 14px;
}
.track-fleet-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 4px;
}
.track-fleet-value {
  font-size: 14px;
  color: var(--fg);
}
.track-fleet-plate {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-dim);
}

@media (max-width: 540px) {
  .track-fleet { grid-template-columns: 1fr; }
}

.track-card--info {
  border-color: rgba(201,154,60,0.30);
  background: rgba(201,154,60,0.05);
}
.track-card-actions { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; }
.track-card-line { font-size: 14px; color: var(--fg); }

/* Self-serve cancel — refund preview + confirm flow */
.track-cancel-card { border-color: rgba(255,255,255,0.10); }
.track-cancel-summary {
  list-style: none;
  margin: 14px 0;
  padding: 12px 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.track-cancel-summary li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  color: var(--fg);
}
.track-cancel-summary li.muted { color: var(--fg-dim); font-size: 12px; }
.track-cancel-summary li.total {
  border-top: 1px solid var(--line);
  padding-top: 8px;
  margin-top: 4px;
  font-size: 14px;
}
.track-cancel-confirm { margin-top: 14px; }
.track-cancel-reason {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 12px 0;
}
.track-cancel-reason span {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.track-cancel-reason input {
  height: 38px;
  padding: 0 12px;
  background: rgba(0,0,0,0.20);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--fg);
  font: inherit;
  outline: none;
}
.track-cancel-reason input:focus { border-color: var(--accent); }
.track-cancel-error { margin-top: 12px; }
.btn-danger {
  border-color: rgba(255,130,130,0.45) !important;
  color: #ff9a9a !important;
}
.btn-danger:hover {
  background: rgba(255,130,130,0.10) !important;
}
.track-link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.track-link:hover { color: var(--fg); }

.track-poll {
  text-align: center;
  font-size: 11px;
  color: var(--fg-mute);
  margin: -8px 0 20px;
  font-family: var(--font-mono);
}
.done-next {
  margin: 0 0 24px;
  padding-left: 20px;
  color: var(--fg-dim);
  font-size: 14px;
  line-height: 1.6;
}
.done-next li { margin-bottom: 6px; }
.done-next strong { color: var(--fg); }

/* Pending state — booking confirmed at Stripe but webhook hasn't promoted
   the doc yet. Spinner sits inside the reference card so it's obvious the
   page is doing work. */
.done-card--pending {
  position: relative;
  padding-right: 64px;
}
.done-spinner {
  position: absolute;
  top: 50%;
  right: 24px;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border-radius: 50%;
  border: 2px solid var(--gold-soft);
  border-top-color: transparent;
  animation: done-spin 0.9s linear infinite;
}
@keyframes done-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .done-spinner { animation: none; opacity: 0.6; }
}

/* ─── Step 6: Stripe Embedded Checkout container ─────────────────── */
/* Stripe injects a sandboxed <iframe> with its own styling. We give it
   a gold-accented frame that matches the rest of the booking panels. */
.stripe-embed {
  margin: 18px 0 20px;
  padding: 4px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(212,175,112,0.06), rgba(212,175,112,0.01));
  min-height: 520px;
}
.stripe-embed > div,
.stripe-embed iframe {
  width: 100% !important;
  border-radius: 10px;
  background: transparent;
}

/* ═══════════════════════════════════════════════════════════════════
   FloatingContact — bottom-right chat bubble
   ───────────────────────────────────────────────────────────────────
   z-index sits BELOW .submit-loading (200) and .sheet-overlay (100)
   so the backdrop covers the bubble while a modal/drawer is open —
   keeps the user focused on the foreground task.
   ═════════════════════════════════════════════════════════════════ */
.floating-contact {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 80;
  font-family: var(--font-ui);
}

/* Round chat-bubble FAB. Solid gold gradient lifts it off the dark
   hero AND the cream booking card without needing a backdrop blur. */
.fc-fab {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  color: #150a25;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    0 8px 24px -8px rgba(0, 0, 0, 0.4),
    0 2px 4px -1px rgba(0, 0, 0, 0.2);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.fc-fab:hover {
  transform: translateY(-1px);
  box-shadow:
    0 14px 32px -10px rgba(0, 0, 0, 0.45),
    0 4px 8px -2px rgba(0, 0, 0, 0.25);
}
.fc-fab:active { transform: translateY(0); }
.fc-fab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Expanded panel. Width 280px keeps each channel row comfortably wide
   without dominating mobile (which is ~375px viewport). Anchored to
   the same bottom-right point as the FAB so the visual swap is in-place. */
.fc-panel {
  width: 280px;
  max-width: calc(100vw - 32px);
  background: var(--bg-2);
  color: var(--fg);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  box-shadow:
    0 18px 40px -12px rgba(0, 0, 0, 0.55),
    0 6px 12px -4px rgba(0, 0, 0, 0.3);
  padding: 14px;
  animation: fc-pop-in 180ms ease-out;
}
@keyframes fc-pop-in {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.fc-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
}
.fc-head-text { flex: 1; min-width: 0; }
.fc-title {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--fg);
  line-height: 1.2;
}
.fc-sub {
  font-size: 11px;
  color: var(--fg-mute);
  margin-top: 3px;
  letter-spacing: 0.01em;
}
.fc-close {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.fc-close:hover {
  background: var(--bg-3);
  color: var(--fg);
  border-color: var(--line-2);
}

.fc-channels {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Each channel row — left dot, label + handle, trailing arrow. The
   dot color is what carries channel identity (green=WhatsApp, lime=
   LINE, gold=Call). Background + border are the same neutral so the
   row isn't a wall of brand colors. */
.fc-ch {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--fg);
  text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.fc-ch:hover {
  background: var(--bg-3);
  border-color: var(--line-2);
}
.fc-ch:active { transform: translateY(1px); }
.fc-ch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.fc-ch-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.fc-ch-wa   .fc-ch-dot { background: #25D366; box-shadow: 0 0 0 3px rgba(37,211,102,0.18); }
.fc-ch-line .fc-ch-dot { background: #06C755; box-shadow: 0 0 0 3px rgba(6,199,85,0.18); }
.fc-ch-call .fc-ch-dot { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent); }
.fc-ch-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.fc-ch-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  line-height: 1.2;
}
.fc-ch-handle {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-mute);
  margin-top: 2px;
  letter-spacing: 0.01em;
}

/* Mobile tweaks — push the bubble a touch further from the edge so
   it's easier to tap with one hand, and shrink the panel padding. */
@media (max-width: 480px) {
  .floating-contact { right: 12px; bottom: 12px; }
  .fc-fab { width: 48px; height: 48px; }
  .fc-panel { width: calc(100vw - 24px); padding: 12px; }
}

/* ════════════════════════════════════════════════════════════════════
   Arabic — RTL layout overrides
   ════════════════════════════════════════════════════════════════════
   Arabic content uses right-to-left text direction. Anchor-rooting
   the rules to `html[lang^="ar"]` keeps the override scoped — other
   locales unaffected. We use logical properties (margin-inline-*,
   text-align: start) wherever practical, which auto-flip under
   `direction: rtl`. The few rules below cover places that still
   hardcode left/right physical properties.

   Font stack: Noto Sans Arabic preserves cleanly across all weights
   (300-700) and matches Inter Tight's neutral character. The display
   font (Fraunces) doesn't have full Arabic glyphs, so display
   headings fall back to Noto Sans Arabic too — slightly less
   editorial feel but reads correctly. */

html[lang^="ar"] {
  direction: rtl;
  text-align: right;
}
html[lang^="ar"] body {
  font-family: "Noto Sans Arabic", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, sans-serif;
}
html[lang^="ar"] .display,
html[lang^="ar"] h1.display,
html[lang^="ar"] h2.display,
html[lang^="ar"] .sec-title,
html[lang^="ar"] .footer-brand {
  font-family: "Noto Sans Arabic", "Fraunces", Georgia, serif;
  font-weight: 600;
  letter-spacing: 0;
  /* Arabic doesn't benefit from negative letter-spacing the way Latin
     display fonts do; reset it. */
}
html[lang^="ar"] .logo {
  /* Logo wordmark "SabaiRide" stays Latin — keep its native font and
     the dot accent. Don't apply Arabic font here. */
  font-family: "Fraunces", Georgia, serif;
}
html[lang^="ar"] .nav .logo .vehicle-tag {
  /* Tag is Latin too. */
  font-family: "Inter Tight", -apple-system, sans-serif;
}
html[lang^="ar"] .eyebrow,
html[lang^="ar"] .t-h .n,
html[lang^="ar"] .effective {
  /* Mono accents (eyebrow / section number / "effective" date stamp)
     stay Latin and LTR — they're typographic accents, not prose. */
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
}

/* Quick-jump nav arrows — flip the ↓ glyph for RTL reading flow.
   Using transform keeps the glyph centred in its rendered box. */
html[lang^="ar"] .booking-head a[href^="#"] {
  /* Anchor links inside the booking-head (quick-jump nav) — leave
     the arrow as-is; ↓ reads "down" in any direction. */
}

/* Track timeline — the dot column should flip to the right side. */
html[lang^="ar"] .track-step {
  direction: rtl;
}

/* Schedule example tables in airport guides — keep timestamps left
   aligned in their column even in RTL flow (timestamps are Latin
   numerals, easier to scan when grouped LTR). */
html[lang^="ar"] td[style*="font-family: var(--mono"] {
  direction: ltr;
  text-align: right;
  unicode-bidi: isolate;
}

/* Stats strip on /transfer/* and /from/* pages — number values
   (~40 min, ฿3,000) stay LTR for readability. */
html[lang^="ar"] .t .display,
html[lang^="ar"] [style*="font-weight: 600"][style*="font-size: 18"] {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Cross-link card on /from/* hotel pages pointing to the airport-pickup
   photo guide. Hover lifts the gold border + bg tint; thumbnail nudges
   in subtly to read as actionable. Inline styles handle the resting
   appearance — see PHOTO_GUIDE_CARD in src/hotels.jsx. */
.photo-guide-card {
  transition: background 0.15s ease, border-color 0.15s ease;
}
.photo-guide-card:hover {
  background: rgba(201,154,60,0.11) !important;
  border-color: rgba(201,154,60,0.55) !important;
}
.photo-guide-card img {
  transition: transform 0.2s ease;
}
.photo-guide-card:hover img {
  transform: scale(1.03);
}

/* "Your vehicle" section on /from/* hotel pages — video left, spec
   list right on wide screens; stacks vertically below 720px.
   Grid ratio is video-heavy (2fr : 1fr) so the seat clip is the
   visual focal point on desktop, with specs as a compact sidebar. */
.vehicle-preview {
  display: grid;
  grid-template-columns: 2fr minmax(220px, 1fr);
  gap: 28px;
  align-items: start;
}
/* When .hotel-area-list lives inside the narrow vehicle-preview
   sidebar, the default 140px-label / body layout has no room for
   the body text. Stack label-on-top, body-below so each spec item
   uses the full sidebar width. */
.vehicle-preview .hotel-area-list li {
  grid-template-columns: 1fr;
  gap: 4px;
}
.vehicle-preview .hotel-area-list .hotel-area-label {
  font-size: 10px;
}
@media (max-width: 720px) {
  .vehicle-preview {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  /* On mobile the sidebar becomes full-width again — restore the
     wider label / body grid that the rest of the page uses. */
  .vehicle-preview .hotel-area-list li {
    grid-template-columns: 140px 1fr;
    gap: 22px;
  }
  .vehicle-preview .hotel-area-list .hotel-area-label {
    font-size: 11px;
  }
}

/* "Around the hotel" section list — used on /from/* pages where the
   nearbyArea content is structured as {lead, items[]} (currently only
   Waldorf). Two-column scannable layout: mono uppercase label on the
   left (On foot / 5 min by car / In-hotel), value on the right. On
   narrow screens labels stack above values for legibility. */
.hotel-area-list {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.hotel-area-list li {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 22px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.hotel-area-list li:last-child { border-bottom: 0; }
.hotel-area-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.85;
}
.hotel-area-body {
  font-size: 14.5px;
  line-height: 1.55;
}
@media (max-width: 600px) {
  .hotel-area-list li {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px 0;
  }
}

/* ─── /pay payment-link landing page ────────────────────────────────
   Admin-created quote landing — customer arrives from a WhatsApp link
   /pay?ref=…&t=…, sees a read-only summary card + Pay button.
   No analytics, no marketing chrome; focused on conversion. */
.pay-main {
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  padding: 24px 16px 80px;
}
.pay-wrap {
  max-width: 560px;
  margin: 32px auto 0;
}
.pay-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 8px;
}
.pay-greeting {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.25;
  font-weight: 400;
  margin: 0 0 24px;
  letter-spacing: -0.01em;
}
.pay-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 18px 8px;
  margin-bottom: 20px;
}
.pay-card--error {
  text-align: center;
  padding: 32px 24px;
}
.pay-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  margin: 0 0 12px;
}
.pay-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-mute);
  margin: 0 0 20px;
}
.pay-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid color-mix(in oklab, var(--line) 50%, transparent);
  font-size: 14px;
}
.pay-row:first-child { padding-top: 4px; }
.pay-row-label {
  color: var(--fg-mute);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-top: 2px;
}
.pay-row-value {
  color: var(--fg);
  font-weight: 500;
}
.pay-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0 10px;
  margin-top: 6px;
}
.pay-total-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.pay-total-value {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}
.pay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px 18px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--purple-deep);
  transition: opacity 120ms ease, transform 60ms ease;
  font-family: inherit;
  text-decoration: none;
}
.pay-btn:hover { opacity: 0.9; }
.pay-btn:active { transform: scale(0.99); }
.pay-btn:disabled, .pay-btn.is-loading {
  opacity: 0.7;
  cursor: not-allowed;
}
.pay-btn--primary {
  margin-bottom: 16px;
}
.pay-btn--ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--line);
}
.pay-btn--ghost:hover { border-color: var(--line-2); opacity: 1; }
.pay-error-banner {
  padding: 12px 14px;
  border-radius: 10px;
  background: color-mix(in oklab, #ff6b6b 14%, transparent);
  border: 1px solid color-mix(in oklab, #ff6b6b 30%, transparent);
  color: #ff9d9d;
  font-size: 13px;
  margin-bottom: 16px;
}
.pay-fine-print {
  text-align: center;
  font-size: 12px;
  color: var(--fg-mute);
  line-height: 1.6;
  padding: 12px 8px 0;
}
.pay-fine-print code {
  font-family: var(--font-mono);
  font-size: 10px;
  background: rgba(255,255,255,0.05);
  padding: 1px 6px;
  border-radius: 4px;
}
.pay-loading {
  text-align: center;
  padding: 80px 20px;
  color: var(--fg-mute);
}
.pay-spinner {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 2px solid color-mix(in oklab, var(--accent) 30%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: pay-spin 0.8s linear infinite;
  margin-bottom: 16px;
}
@keyframes pay-spin {
  to { transform: rotate(360deg); }
}
@media (max-width: 520px) {
  .pay-greeting { font-size: 22px; }
  .pay-row { grid-template-columns: 90px 1fr; gap: 10px; font-size: 13px; }
  .pay-total-value { font-size: 26px; }
}

/* ─── /track trip-details card rows ─────────────────────────────────
   Shown to the customer after booking confirmation. Reuses .track-card
   chrome; the dl/dt/dd grid keeps labels right-aligned with values for
   quick scanning ("when am I being picked up?" → eye lands on the row). */
.track-trip-dl {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 8px 0 12px;
}
.track-trip-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  align-items: baseline;
}
.track-trip-row dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-mute);
  font-weight: 500;
  margin: 0;
}
.track-trip-row dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg);
}
.track-trip-row dd strong {
  font-weight: 600;
}
.track-trip-sub {
  display: block;
  font-size: 12px;
  color: var(--fg-mute);
  margin-top: 2px;
}
.track-trip-tz {
  font-size: 11px;
  color: var(--fg-mute);
  margin-left: 4px;
}
.track-trip-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
}
.track-trip-foot {
  font-size: 12px;
  color: var(--fg-mute);
  margin: 14px 0 0;
  border-top: 1px solid color-mix(in oklab, var(--line) 60%, transparent);
  padding-top: 10px;
}
@media (max-width: 520px) {
  .track-trip-row { grid-template-columns: 88px 1fr; gap: 10px; font-size: 13px; }
}

/* ─── /track booking history audit log ──────────────────────────────
   Chronological audit trail of changes admin/system made to the booking.
   Newest first; each row has icon + sentence + relative time. */
.track-history {
  list-style: none;
  margin: 8px 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.track-history-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: start;
}
.track-history-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 25%, transparent);
}
.track-history-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  color: var(--fg);
  line-height: 1.5;
}
.track-history-line {
  font-weight: 500;
}
.track-history-meta {
  font-size: 12px;
  color: var(--fg-mute);
}
.track-history-reason {
  font-style: italic;
}
@media (max-width: 520px) {
  .track-history-item { grid-template-columns: 24px 1fr; gap: 10px; }
  .track-history-icon { width: 24px; height: 24px; font-size: 12px; }
  .track-history-body { font-size: 13px; }
}

.track-history-toggle {
  appearance: none;
  background: none;
  border: 1px solid color-mix(in oklab, var(--line) 80%, transparent);
  color: var(--fg);
  font: inherit;
  font-size: 12px;
  margin-top: 12px;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.track-history-toggle:hover {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 8%, transparent);
}