/* RideArrivo UI: one small design layer for every page.
   Navy + amber, polished liquid glass. Light by default; dark is a choice.
   Loaded after the older page styles, so it also re-colours them through the
   variables they already use (--ink, --primary, --cream, ...). */

:root {
  color-scheme: light;
  --ra-bg: #f4f6fa;
  --ra-bg-2: #eaeff7;
  --ra-ink: #0a1b33;
  --ra-muted: #56657c;
  --ra-navy: #0b2545;
  --ra-navy-2: #14407a;
  --ra-navy-deep: #06142a;
  --ra-amber: #f5a300;
  --ra-amber-2: #ffc24d;
  --ra-amber-ink: #7a4800;
  --ra-glass: rgba(255, 255, 255, .62);
  --ra-glass-strong: rgba(255, 255, 255, .8);
  --ra-line: rgba(10, 27, 51, .1);
  --ra-line-strong: rgba(10, 27, 51, .18);
  --ra-shadow: 0 18px 50px rgba(8, 24, 48, .12);
  --ra-shadow-sm: 0 8px 24px rgba(8, 24, 48, .08);
  --ra-shine: inset 0 1px 0 rgba(255, 255, 255, .85);
  --ra-focus: 0 0 0 3px rgba(245, 163, 0, .45);
  --ra-ease: cubic-bezier(.2, .8, .2, 1);

  /* Older pages read these. Same names, new colours. */
  --ink: #0a1b33;
  --ink-soft: #14294a;
  --title: #06142a;
  --amber: #f5a300;
  --amber-text: #7a4800;
  --primary: #14407a;
  --primary-tint: #e6eef9;
  --cream: #f4f6fa;
  --card-border: rgba(10, 27, 51, .1);
  --text-muted: #56657c;
  --glass-bg: rgba(255, 255, 255, .62);
  --glass-border: rgba(255, 255, 255, .7);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ra-bg: #050c18;
  --ra-bg-2: #08162b;
  --ra-ink: #eef3fb;
  --ra-muted: #9db0c9;
  --ra-glass: rgba(16, 36, 66, .5);
  --ra-glass-strong: rgba(10, 26, 50, .78);
  --ra-line: rgba(255, 255, 255, .1);
  --ra-line-strong: rgba(255, 255, 255, .2);
  --ra-shadow: 0 22px 60px rgba(0, 0, 0, .5);
  --ra-shadow-sm: 0 10px 28px rgba(0, 0, 0, .4);
  --ra-shine: inset 0 1px 0 rgba(255, 255, 255, .12);
  --ra-focus: 0 0 0 3px rgba(255, 194, 77, .5);

  --ink: #eef3fb;
  --ink-soft: #c5d3e8;
  --title: #ffffff;
  --amber-text: #ffc24d;
  --primary: #7fb0f5;
  --primary-tint: rgba(127, 176, 245, .14);
  --cream: #050c18;
  --card-border: rgba(255, 255, 255, .1);
  --text-muted: #9db0c9;
  --glass-bg: rgba(16, 36, 66, .5);
  --glass-border: rgba(255, 255, 255, .12);
}

html { background: var(--ra-bg); scroll-padding-top: 96px; }
body {
  background: var(--ra-bg);
  color: var(--ra-ink);
  overflow-x: clip;
}
/* Soft navy and amber light behind everything, so glass has something to bend. */
body::before {
  background:
    radial-gradient(640px circle at 10% 6%, rgba(20, 64, 122, .13), transparent 62%),
    radial-gradient(720px circle at 94% 14%, rgba(245, 163, 0, .1), transparent 62%),
    radial-gradient(680px circle at 20% 90%, rgba(20, 64, 122, .08), transparent 62%) !important;
}
html[data-theme="dark"] body::before {
  background:
    radial-gradient(700px circle at 8% 4%, rgba(30, 90, 170, .3), transparent 62%),
    radial-gradient(720px circle at 96% 12%, rgba(245, 163, 0, .13), transparent 62%),
    radial-gradient(700px circle at 18% 92%, rgba(20, 64, 122, .25), transparent 62%) !important;
}

:where(a, button, input, select, textarea, summary):focus-visible { outline: 0; box-shadow: var(--ra-focus); }

/* ------------------------------------------------------------------ */
/* Buttons: amber, polished. Used by the older pages too.              */
/* ------------------------------------------------------------------ */
.btn-primary, .ra-btn {
  background: linear-gradient(180deg, var(--ra-amber-2), var(--ra-amber)) !important;
  color: #1a1204 !important;
  border: 1px solid rgba(255, 255, 255, .45) !important;
  box-shadow: 0 8px 22px rgba(245, 163, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .6) !important;
  font-weight: 700;
}
.btn-primary:hover, .ra-btn:hover { filter: brightness(1.04); transform: translateY(-1px); }
.btn-primary:active, .ra-btn:active { transform: translateY(0) scale(.985); }
.ra-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px; border-radius: 999px; text-decoration: none; cursor: pointer;
  transition: transform .18s var(--ra-ease), filter .18s;
}
.ra-btn--glass {
  background: var(--ra-glass) !important;
  color: var(--ra-ink) !important;
  border: 1px solid var(--ra-line-strong) !important;
  box-shadow: var(--ra-shine) !important;
  backdrop-filter: blur(16px);
}

/* ------------------------------------------------------------------ */
/* The pill                                                             */
/* ------------------------------------------------------------------ */
.ra-pill-spacer { height: 88px; }

.ra-pill {
  position: fixed; inset: 14px 0 auto 0; z-index: 9000;
  display: flex; justify-content: center; padding: 0 14px;
  pointer-events: none;
  font-family: Inter, system-ui, sans-serif;
}
.ra-pill__bar {
  pointer-events: auto; position: relative;
  display: flex; align-items: center; gap: 8px;
  width: min(1080px, 100%); height: 60px; padding: 8px 9px 8px 10px;
  border-radius: 999px;
  background: var(--ra-glass-strong);
  -webkit-backdrop-filter: blur(24px) saturate(1.7); backdrop-filter: blur(24px) saturate(1.7);
  border: 1px solid var(--ra-line);
  box-shadow: var(--ra-shadow), var(--ra-shine);
  transition: width .45s var(--ra-ease), height .35s var(--ra-ease), box-shadow .35s;
}
/* A thin amber glint along the top edge: the "polished" look. */
.ra-pill__bar::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 194, 77, .0) 0%, rgba(255, 194, 77, .35) 18%, rgba(255, 194, 77, 0) 38%);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px;
}
.ra-pill.is-condensed .ra-pill__bar { width: min(900px, 100%); height: 54px; }

.ra-pill__brand { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; text-decoration: none; border-radius: 999px; }
.ra-pill__logo {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(145deg, #12315a, var(--ra-navy-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 4px 12px rgba(6, 20, 42, .3);
}
.ra-pill__logo img { width: 26px; height: 26px; border-radius: 7px; display: block; }
.ra-pill__word { height: 18px; width: auto; display: block; }
.ra-pill__word.wm-on-dark { display: none; }
html[data-theme="dark"] .ra-pill__word.wm-on-light { display: none; }
html[data-theme="dark"] .ra-pill__word.wm-on-dark { display: block; }

.ra-pill__nav { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
.ra-pill__nav a {
  padding: 9px 15px; border-radius: 999px; font-size: 14px; font-weight: 600;
  color: var(--ra-muted); text-decoration: none; transition: background .18s, color .18s;
}
.ra-pill__nav a:hover { background: rgba(245, 163, 0, .14); color: var(--ra-ink); }
.ra-pill__nav a.is-active { background: var(--ra-navy); color: #fff; }

.ra-pill__tools { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.ra-pill__nav + .ra-pill__tools { margin-inline-start: 0; }

.ra-pill .theme-toggle,
.ra-pill__langbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; min-width: 40px; padding: 0 10px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 0; color: var(--ra-ink); font: 600 13px Inter, system-ui, sans-serif;
}
.ra-pill .theme-toggle:hover, .ra-pill__langbtn:hover { background: rgba(245, 163, 0, .14); }
.ra-pill .theme-toggle svg { width: 19px; height: 19px; }
.ra-pill .theme-toggle .icon-moon { display: none; }
html[data-theme="dark"] .ra-pill .theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .ra-pill .theme-toggle .icon-moon { display: block; }
.ra-pill .theme-toggle .theme-toggle-text { display: none; }
.ra-pill .ra-pill__row .theme-toggle { width: 100%; justify-content: flex-start; height: 48px; padding: 0 14px; }
.ra-pill .ra-pill__row .theme-toggle .theme-toggle-text { display: inline; }

.ra-pill__lang { position: relative; }
.ra-pill__langmenu {
  position: absolute; top: calc(100% + 12px); inset-inline-end: 0; min-width: 170px; margin: 0; padding: 6px; list-style: none;
  border-radius: 20px; background: var(--ra-glass-strong); border: 1px solid var(--ra-line);
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: var(--ra-shadow), var(--ra-shine);
}
.ra-pill__langmenu[hidden] { display: none; }
.ra-lang-opt {
  display: block; width: 100%; text-align: start; padding: 10px 14px; border: 0; border-radius: 14px; cursor: pointer;
  background: transparent; color: var(--ra-ink); font: 500 14px Inter, system-ui, sans-serif;
}
.ra-lang-opt:hover, .ra-lang-opt.active { background: rgba(245, 163, 0, .16); }

.ra-pill__account {
  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px; border-radius: 999px;
  color: var(--ra-ink); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.ra-pill__account:hover { background: rgba(245, 163, 0, .14); }
.ra-pill__account svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.ra-pill__book {
  display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 20px; border-radius: 999px;
  background: linear-gradient(180deg, var(--ra-amber-2), var(--ra-amber)); color: #1a1204;
  font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, .5);
  box-shadow: 0 6px 18px rgba(245, 163, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .65);
  transition: transform .18s var(--ra-ease), filter .18s;
}
.ra-pill__book:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* The little circle on the side: which page am I on? */
.ra-pill__here {
  display: inline-flex; align-items: center; flex: 0 0 auto; height: 42px; padding: 0; border-radius: 999px; overflow: hidden;
  background: linear-gradient(145deg, #12315a, var(--ra-navy-deep)); color: #fff; text-decoration: none; cursor: pointer;
  border: 1px solid rgba(255, 194, 77, .55);
  box-shadow: 0 0 0 3px rgba(245, 163, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: box-shadow .3s;
}
.ra-pill__here:hover { box-shadow: 0 0 0 4px rgba(245, 163, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .2); }
.ra-pill__here-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; color: var(--ra-amber-2); }
.ra-pill__here-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ra-pill__here-label {
  max-width: 0; opacity: 0; white-space: nowrap; font-size: 13px; font-weight: 700; letter-spacing: .01em;
  transition: max-width .45s var(--ra-ease), opacity .3s, padding .45s var(--ra-ease);
}
.ra-pill__here.is-peek .ra-pill__here-label,
.ra-pill__here:focus-visible .ra-pill__here-label { max-width: 150px; opacity: 1; padding-inline: 0 14px; }

.ra-pill__menu {
  display: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--ra-line); cursor: pointer;
  background: var(--ra-glass); position: relative; padding: 0;
}
.ra-pill__menu span {
  position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: var(--ra-ink);
  transition: transform .3s var(--ra-ease), top .3s var(--ra-ease);
}
.ra-pill__menu span:first-child { top: 16px; }
.ra-pill__menu span:last-child { top: 24px; }
.ra-pill.is-open .ra-pill__menu span:first-child { top: 20px; transform: rotate(45deg); }
.ra-pill.is-open .ra-pill__menu span:last-child { top: 20px; transform: rotate(-45deg); }

/* The menu sheet that drops from the pill on phones and tablets. */
.ra-pill__sheet {
  pointer-events: auto; position: absolute; top: calc(100% + 10px); left: 14px; right: 14px; margin-inline: auto; width: min(560px, calc(100% - 28px));
  display: grid; gap: 4px; padding: 10px; border-radius: 30px;
  background: var(--ra-glass-strong);
  -webkit-backdrop-filter: blur(28px) saturate(1.7); backdrop-filter: blur(28px) saturate(1.7);
  border: 1px solid var(--ra-line); box-shadow: var(--ra-shadow), var(--ra-shine);
  transform-origin: top center; animation: raDrop .32s var(--ra-ease);
}
.ra-pill__sheet[hidden] { display: none; }
.ra-pill__sheet a.ra-pill__item {
  display: flex; align-items: center; min-height: 50px; padding: 0 18px; border-radius: 18px;
  color: var(--ra-ink); font-size: 16px; font-weight: 600; text-decoration: none;
}
.ra-pill__sheet a.ra-pill__item:hover { background: rgba(245, 163, 0, .14); }
.ra-pill__sheet .ra-pill__item--cta {
  justify-content: center; background: linear-gradient(180deg, var(--ra-amber-2), var(--ra-amber)); color: #1a1204; margin-top: 4px;
}
.ra-pill__langrow { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 6px 4px; }
.ra-pill__langrow .ra-lang-opt { width: auto; padding: 8px 12px; border: 1px solid var(--ra-line); border-radius: 999px; font-size: 13px; }
@keyframes raDrop { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } }

.ra-menu-backdrop { position: fixed; inset: 0; z-index: 8990; background: rgba(4, 12, 24, .32); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.ra-menu-backdrop[hidden] { display: none; }
html.ra-menu-open { overflow: hidden; }

@media (max-width: 899px) {
  .ra-pill { inset: max(10px, env(safe-area-inset-top)) 0 auto 0; padding: 0 10px; }
  .ra-pill__bar { height: 56px; padding: 7px 7px 7px 8px; gap: 6px; }
  .ra-pill.is-condensed .ra-pill__bar { width: min(420px, 100%); height: 52px; }
  .ra-pill__nav, .ra-pill__tools .theme-toggle, .ra-pill__lang, .ra-pill__account { display: none; }
  .ra-pill__tools { margin-inline-start: auto; gap: 6px; }
  .ra-pill__menu { display: block; }
  .ra-pill__book { height: 40px; padding: 0 16px; }
  .ra-pill-spacer { height: 78px; }
}
/* The logo and the RideArrivo wordmark never leave the pill. On the smallest
   phones the Book button steps aside (it is the last row of the sheet). */
@media (max-width: 440px) {
  .ra-pill__book { display: none; }
}
/* Desktop, scrolled: the pill tucks into a compact island (logo, name, page
   circle, menu). Click it and it opens up. At the top of the page it is the
   full pill with the links in view. */
@media (min-width: 900px) {
  .ra-pill.is-condensed .ra-pill__nav,
  .ra-pill.is-condensed .ra-pill__tools .theme-toggle,
  .ra-pill.is-condensed .ra-pill__lang,
  .ra-pill.is-condensed .ra-pill__account,
  .ra-pill.is-condensed .ra-pill__book { display: none; }
  .ra-pill.is-condensed .ra-pill__menu { display: block; }
  .ra-pill.is-condensed .ra-pill__bar { width: min(460px, 100%); }
  .ra-pill:not(.is-condensed) .ra-pill__sheet,
  .ra-pill:not(.is-condensed) ~ .ra-menu-backdrop { display: none !important; }
}
/* The whole island is a button: a click anywhere on it opens it. */
@media (max-width: 899px) { .ra-pill__bar { cursor: pointer; } }
.ra-pill.is-condensed .ra-pill__bar { cursor: pointer; }
.ra-pill.is-open .ra-pill__bar { width: min(560px, 100%); }

@media (prefers-reduced-motion: reduce) {
  .ra-pill *, .ra-pill__sheet { animation: none !important; transition: none !important; }
  .ra-pill__here:focus-visible .ra-pill__here-label { max-width: 150px; }
}
@media (prefers-reduced-transparency: reduce) {
  .ra-pill__bar, .ra-pill__sheet, .ra-pill__langmenu { background: var(--ra-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Island layout: brand on the left, page circle and menu on the right. */
.ra-pill.is-condensed .ra-pill__brand, .ra-pill.is-open .ra-pill__brand { margin-inline-end: auto; }
@media (max-width: 899px) { .ra-pill__brand { margin-inline-end: auto; } }

/* The service switcher inside the sheet, and the "Soon" tag. */
.ra-pill__tiers { display: grid; gap: 2px; padding: 8px 4px 6px; border-top: 1px solid var(--ra-line); border-bottom: 1px solid var(--ra-line); margin: 4px 0; }
.ra-pill__tiers-title { margin: 0; padding: 4px 14px 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ra-muted); }
.ra-pill__tier { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border-radius: 14px; color: var(--ra-ink); font-size: 15px; font-weight: 600; text-decoration: none; }
.ra-pill__tier:hover { background: rgba(245, 163, 0, .14); }
.ra-pill__tier.is-current { background: var(--ra-navy); color: #fff; }
.ra-tag { margin-inline: 8px 8px; padding: 2px 8px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .02em; background: rgba(245, 163, 0, .2); color: var(--ra-amber-ink); vertical-align: middle; }
html[data-theme="dark"] .ra-tag { color: var(--ra-amber-2); }
.rh-opt.is-primary .ra-tag { background: rgba(10, 27, 51, .14); color: #1a1204; }
/* Tall menus scroll inside the sheet instead of running off short phones. */
.ra-pill__sheet { max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain; }
html[data-theme="dark"] .ra-pill__tier.is-current { background: rgba(245, 163, 0, .18); color: var(--ra-amber-2); box-shadow: inset 0 0 0 1px rgba(255, 194, 77, .5); }