/* ============================================================================
   Prime Rentals Bonaire — PRIME UI
   Luxury interface kit: black glass, metallic gold, electric-blue accent.
   ----------------------------------------------------------------------------
   This file styles the CHROME only (panel, gold, glow, states, motion).
   The glyphs live in js/prime-icons.js and are pure geometry — that separation
   is what keeps 44 icons looking like one family: they cannot drift, because
   none of them carries its own colour.

   Two components:
     .pui-tile   square icon tile   — the grid in the brand sheet
     .pui-btn    horizontal button  — icon + label (+ optional chevron)

   Five states, on both:
     default · :hover · :active (press) · [disabled] · [data-loading]

   Depends on the palette in style.css (--primary, --bg) but degrades to its
   own values if loaded standalone.
   ========================================================================== */

:root {
  /* ---- Metallic gold ramp. Four stops, because two never reads as metal:
         a bright catch-light, the body colour, and a shadow the eye reads as
         a bevel. --pui-gold-3 is the site's existing --primary, so the kit
         sits inside the brand instead of beside it. ---------------------- */
  --pui-gold-1: #f6e6bd;
  --pui-gold-2: #e0c489;
  --pui-gold-3: #c9a86a;
  --pui-gold-4: #967b46;

  /* ---- Electric blue. Only ever an ACCENT: the rim light, the glow, the
         focus ring. It never becomes the icon itself — the moment blue and
         gold compete, the luxury reading collapses into "gamer RGB". ----- */
  --pui-blue: #3d8dff;
  --pui-blue-soft: rgba(61, 141, 255, 0.75);
  --pui-blue-faint: rgba(61, 141, 255, 0.16);
  /* The crisp line where the panel meets its own light. This is the detail that
     makes the tile read as a lit object rather than a dark rectangle, so it is
     present at REST — not only on hover. */
  --pui-blue-rim: rgba(61, 141, 255, 0.5);

  /* ---- Glass ------------------------------------------------------------ */
  --pui-glass-1: rgba(28, 33, 43, 0.92);
  --pui-glass-2: rgba(12, 15, 21, 0.96);
  --pui-edge: rgba(255, 255, 255, 0.10);
  --pui-edge-gold: rgba(201, 168, 106, 0.34);

  --pui-radius: 20px;
  --pui-radius-sm: 16px;

  /* The blue is LED under-lighting, not a wash. A crisp hairline on the bottom
     edge plus a shallow halo just above it — tight enough that the panel still
     reads as black glass. Spreading it further turns the tile into a blue
     button and the gold stops looking like metal. */
  --pui-shadow: inset 0 -1px 0 var(--pui-blue-rim),
                inset 0 -7px 9px -8px rgba(61, 141, 255, 0.5),
                0 16px 34px -18px rgba(0, 0, 0, 0.9),
                0 2px 6px -2px rgba(0, 0, 0, 0.7);
  --pui-shadow-hover: inset 0 -1px 0 rgba(61, 141, 255, 0.9),
                      inset 0 -10px 12px -9px rgba(61, 141, 255, 0.62),
                      0 26px 52px -20px rgba(0, 0, 0, 0.95),
                      0 0 0 1px var(--pui-edge-gold),
                      0 14px 40px -16px rgba(61, 141, 255, 0.55);

  --pui-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --pui-ease-press: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================
   1. SHARED SURFACE
   Both components are the same object at different aspect ratios, so the
   glass, the bevel and the glow are defined once.
   ========================================================================== */

.pui-tile,
.pui-btn {
  position: relative;
  isolation: isolate;              /* keeps ::before/::after off the page */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--pui-edge);
  border-radius: var(--pui-radius);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255, 255, 255, 0.07), transparent 58%),
    linear-gradient(168deg, var(--pui-glass-1), var(--pui-glass-2));
  box-shadow: var(--pui-shadow);
  color: var(--pui-gold-2);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.32s var(--pui-ease),
    box-shadow 0.32s var(--pui-ease),
    border-color 0.32s var(--pui-ease),
    background-color 0.32s var(--pui-ease);
}

/* The top bevel: a 1px inner highlight along the upper edge only. This single
   line is what makes a flat rectangle read as a physical piece of glass. */
.pui-tile::before,
.pui-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    170deg,
    rgba(255, 255, 255, 0.30),
    rgba(255, 255, 255, 0.04) 32%,
    transparent 62%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

/* The blue floor glow, mirroring the reference sheet: a soft pool of light
   under the icon rather than an outline around it. Sits at 0 until hover. */
.pui-tile::after,
.pui-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 54%;
  height: 12%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--pui-blue-soft), transparent 72%);
  filter: blur(6px);
  opacity: 0.85;
  pointer-events: none;
  transition: opacity 0.32s var(--pui-ease), transform 0.32s var(--pui-ease);
  z-index: 0;
}

/* ---- Hover: rise, warm, glow ------------------------------------------- */
@media (hover: hover) {
  .pui-tile:hover:not([disabled]):not([data-loading]),
  .pui-btn:hover:not([disabled]):not([data-loading]) {
    transform: translateY(-2px);
    border-color: var(--pui-edge-gold);
    box-shadow: var(--pui-shadow-hover);
  }
  .pui-tile:hover:not([disabled]):not([data-loading])::after,
  .pui-btn:hover:not([disabled]):not([data-loading])::after {
    opacity: 0.85;
    transform: translateX(-50%) scaleX(1.12);
  }
}

/* ---- Press: settle into the surface. Faster than the hover, because a
       press must feel mechanical, not floaty. ---------------------------- */
.pui-tile:active:not([disabled]):not([data-loading]),
.pui-btn:active:not([disabled]):not([data-loading]) {
  transform: translateY(1px) scale(0.978);
  /* Pressed, the light compresses rather than disappears: the rim stays, the
     wash tightens. Losing the blue here would read as the tile switching off. */
  box-shadow: inset 0 -1px 0 rgba(61, 141, 255, 0.7),
              inset 0 -10px 14px -10px rgba(61, 141, 255, 0.5),
              inset 0 2px 10px rgba(0, 0, 0, 0.55),
              0 6px 16px -10px rgba(0, 0, 0, 0.9);
  transition-duration: 0.09s;
  transition-timing-function: var(--pui-ease-press);
}
.pui-tile:active:not([disabled]):not([data-loading])::after,
.pui-btn:active:not([disabled]):not([data-loading])::after {
  opacity: 1;
  transform: translateX(-50%) scaleX(0.9);
}

/* ---- Keyboard focus. Deliberately louder than hover: the electric blue ring
       is the one place the accent colour is allowed to shout. ------------- */
.pui-tile:focus-visible,
.pui-btn:focus-visible {
  outline: none;
  border-color: var(--pui-blue);
  box-shadow: 0 0 0 3px var(--pui-blue-faint),
              0 0 0 1px var(--pui-blue),
              0 20px 44px -20px rgba(0, 0, 0, 0.9);
}

/* ---- Disabled: the metal goes cold. Gold desaturates towards pewter, the
       glow dies entirely, nothing moves. --------------------------------- */
.pui-tile[disabled],
.pui-btn[disabled] {
  cursor: not-allowed;
  color: rgba(207, 211, 216, 0.34);
  border-color: rgba(255, 255, 255, 0.05);
  background: linear-gradient(168deg, rgba(20, 23, 29, 0.75), rgba(10, 12, 16, 0.85));
  box-shadow: none;
  transform: none;
}
.pui-tile[disabled]::after,
.pui-btn[disabled]::after { opacity: 0; }
.pui-tile[disabled]::before,
.pui-btn[disabled]::before { opacity: 0.4; }
.pui-tile[disabled] .pui-glyph,
.pui-btn[disabled] .pui-glyph {
  stroke: rgba(207, 211, 216, 0.34);
  filter: none;
}
.pui-tile[disabled] .pui-glyph [fill],
.pui-btn[disabled] .pui-glyph [fill] { fill: rgba(207, 211, 216, 0.34); }

/* ---- Loading: the glyph fades back and a blue arc sweeps the rim. The
       button keeps its exact size so the layout never jumps. ------------- */
.pui-tile[data-loading],
.pui-btn[data-loading] {
  cursor: progress;
  pointer-events: none;
}
.pui-tile[data-loading] .pui-glyph,
.pui-btn[data-loading] .pui-glyph,
.pui-tile[data-loading] .pui-label,
.pui-btn[data-loading] .pui-label,
.pui-btn[data-loading] .pui-chevron {
  opacity: 0.22;
  filter: none;
  transition: opacity 0.2s var(--pui-ease);
}
.pui-tile[data-loading] .pui-spinner,
.pui-btn[data-loading] .pui-spinner { display: block; }

.pui-spinner {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.09);
  border-top-color: var(--pui-blue);
  border-right-color: var(--pui-gold-2);
  animation: pui-spin 0.72s linear infinite;
  z-index: 3;
}
@keyframes pui-spin { to { transform: rotate(360deg); } }

/* ============================================================================
   2. THE GLYPH
   Every icon is stroke-only geometry with no colour of its own. The gradient
   below is the ONLY place gold is defined, so all 44 icons shift together if
   the brand ever changes. The `url() <colour>` form carries its own fallback:
   if the <defs> block is missing, the stroke lands on flat gold instead of
   disappearing.
   ========================================================================== */

.pui-glyph {
  position: relative;
  z-index: 1;
  display: block;
  width: 28px;
  height: 28px;
  fill: none;
  stroke: url(#pui-gold-grad) var(--pui-gold-2);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Gold in front, blue behind it. The blue never touches the glyph's colour —
     it only lights the air around it, which is what keeps the metal reading as
     metal instead of turning teal. */
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.55))
          drop-shadow(0 0 6px rgba(201, 168, 106, 0.3))
          drop-shadow(0 2px 12px rgba(61, 141, 255, 0.4));
  transition: filter 0.32s var(--pui-ease), transform 0.32s var(--pui-ease);
}

/* Solid accents inside a glyph (a pupil, a spark) are filled with the same
   gradient. A presentation attribute loses to a CSS rule, so the agents'
   fill="currentColor" is overridden here without touching the markup. */
.pui-glyph [fill] {
  fill: url(#pui-gold-grad) var(--pui-gold-2);
  stroke: none;
}

@media (hover: hover) {
  .pui-tile:hover:not([disabled]):not([data-loading]) .pui-glyph,
  .pui-btn:hover:not([disabled]):not([data-loading]) .pui-glyph {
    transform: translateY(-1px);
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.55))
            drop-shadow(0 0 10px rgba(224, 196, 137, 0.55))
            drop-shadow(0 0 18px rgba(61, 141, 255, 0.35));
  }
}
.pui-tile:active:not([disabled]) .pui-glyph,
.pui-btn:active:not([disabled]) .pui-glyph {
  transform: translateY(0) scale(0.94);
  transition-duration: 0.09s;
}

/* ============================================================================
   3. TILE — the square icon button from the brand sheet
   ========================================================================== */

.pui-tile {
  flex-direction: column;
  gap: 0;
  width: 88px;
  height: 88px;
  padding: 0;
}
.pui-tile .pui-glyph { width: 34px; height: 34px; }

/* The caption sits OUTSIDE the tile, exactly as in the reference sheet: the
   glass square stays a pure object and the label belongs to the page. */
.pui-tile-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 116px;
  text-align: center;
}
.pui-tile-caption {
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--pui-gold-3);
  line-height: 1.35;
}
.pui-tile-wrap:has(.pui-tile[disabled]) .pui-tile-caption {
  color: rgba(207, 211, 216, 0.32);
}

/* ============================================================================
   4. BUTTON — icon + label, the "BOOK YOUR VEHICLE >" form
   ========================================================================== */

.pui-btn {
  gap: 14px;
  min-height: 60px;
  padding: 0 26px;
  border-radius: var(--pui-radius);
}
.pui-btn .pui-glyph { width: 26px; height: 26px; flex: none; }

.pui-label {
  position: relative;
  z-index: 1;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--pui-gold-1);
  text-align: left;
  transition: color 0.32s var(--pui-ease);
}
.pui-btn[disabled] .pui-label { color: rgba(207, 211, 216, 0.34); }

.pui-chevron {
  position: relative;
  z-index: 1;
  flex: none;
  width: 18px;
  height: 18px;
  margin-left: auto;
  padding-left: 10px;
  fill: none;
  stroke: var(--pui-blue);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  box-sizing: content-box;
  transition: transform 0.32s var(--pui-ease), stroke 0.32s var(--pui-ease);
}
@media (hover: hover) {
  .pui-btn:hover:not([disabled]):not([data-loading]) .pui-chevron {
    transform: translateX(3px);
  }
}
.pui-btn[disabled] .pui-chevron { stroke: rgba(207, 211, 216, 0.28); }

/* ---- Primary variant: the one gold-filled button per screen. Used for the
       single most important action (book, pay) and never twice in a row. -- */
.pui-btn.is-primary {
  border-color: rgba(246, 230, 189, 0.5);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 46%),
    linear-gradient(168deg, var(--pui-gold-2), var(--pui-gold-4));
  box-shadow: 0 18px 38px -18px rgba(201, 168, 106, 0.6),
              0 2px 6px -2px rgba(0, 0, 0, 0.6);
}
.pui-btn.is-primary .pui-label { color: #17130a; }
.pui-btn.is-primary .pui-glyph {
  stroke: #17130a;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.35));
}
.pui-btn.is-primary .pui-glyph [fill] { fill: #17130a; }
.pui-btn.is-primary .pui-chevron { stroke: #17130a; }
.pui-btn.is-primary::after {
  background: radial-gradient(ellipse at center, rgba(255, 236, 190, 0.75), transparent 70%);
}

/* ---- A wide button fills its row and pushes the chevron to the far edge -- */
.pui-btn.is-block { display: flex; width: 100%; }

/* ---- Compact size for toolbars ----------------------------------------- */
.pui-btn.is-sm {
  min-height: 46px;
  padding: 0 18px;
  gap: 10px;
  border-radius: var(--pui-radius-sm);
}
.pui-btn.is-sm .pui-glyph { width: 20px; height: 20px; }
.pui-btn.is-sm .pui-label { font-size: 0.74rem; letter-spacing: 0.1em; }

/* Icon-only button keeps a square footprint so toolbars stay on a grid. */
.pui-btn.is-icon-only { padding: 0; width: 52px; min-height: 52px; }
.pui-btn.is-icon-only .pui-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ============================================================================
   5. BRIDGE — the site's existing .btn markup, in the new language

   The public pages carry ~70 buttons written as `.btn .btn-primary` /
   `.btn .btn-outline`, wired to click handlers, to data-i18n, and to layout
   rules that select on `.btn` (car-actions, booking actions, the cookie bar).
   Renaming those classes would mean touching every page and re-testing every
   handler for a purely visual change.

   So the surface is replaced, not the markup. These rules restyle the existing
   classes with the same tokens, the same glass and the same blue under-light as
   .pui-btn — layout, spacing, flex behaviour and every JS hook stay exactly as
   they were. Load order matters: prime-ui.css must come AFTER style.css.
   ========================================================================== */

.btn {
  position: relative;
  isolation: isolate;
  border-radius: 18px;                 /* was a 999px pill */
}
/* Small buttons carry less tracking: at 0.85rem the 0.12em used on the hero
   makes a two-word label read as wide and heavy inside a car card. */
.btn-sm {
  border-radius: 14px;
  font-size: 0.79rem;
  letter-spacing: 0.07em;
}

/* Small caps on every button, not only the upgraded ones — otherwise the page
   shows two different button typographies side by side depending on whether a
   button happened to earn an icon. */
.btn {
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Opt-out for labels that must stay readable as written: an e-mail address, a
   phone number, a licence plate. Uppercasing those hurts comprehension. */
.btn[data-pui-nocaps] {
  text-transform: none;
  letter-spacing: 0.02em;
}

/* The label written by PrimeUI.upgrade(). Inherits its colour so the gold and
   the glass variants each keep their own, with no extra override needed. */
.btn .pui-label {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.btn .pui-glyph { width: 18px; height: 18px; }
.btn-sm .pui-glyph { width: 16px; height: 16px; }

/* ---- Glass variant ----------------------------------------------------- */
.btn-outline {
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255, 255, 255, 0.07), transparent 58%),
    linear-gradient(168deg, var(--pui-glass-1), var(--pui-glass-2));
  border-color: var(--pui-edge);
  color: var(--pui-gold-1);
  box-shadow: var(--pui-shadow);
}
.btn-outline::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.03) 34%, transparent 62%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}
.btn-outline::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 46%;
  height: 16%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--pui-blue-soft), transparent 72%);
  filter: blur(6px);
  opacity: 0.8;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.3s var(--pui-ease), transform 0.3s var(--pui-ease);
}
.btn-outline > * { position: relative; z-index: 1; }

@media (hover: hover) {
  .btn-outline:hover {
    background:
      radial-gradient(120% 100% at 50% 0%, rgba(255, 255, 255, 0.1), transparent 58%),
      linear-gradient(168deg, var(--pui-glass-1), var(--pui-glass-2));
    border-color: var(--pui-edge-gold);
    color: var(--pui-gold-1);
    box-shadow: var(--pui-shadow-hover);
    transform: translateY(-2px);
  }
  .btn-outline:hover::after { opacity: 1; transform: translateX(-50%) scaleX(1.15); }
}
.btn-outline:active {
  transform: translateY(1px) scale(0.985);
  box-shadow: inset 0 -1px 0 rgba(61, 141, 255, 0.7),
              inset 0 2px 10px rgba(0, 0, 0, 0.55),
              0 6px 16px -10px rgba(0, 0, 0, 0.9);
  transition-duration: 0.09s;
}

/* ---- Electric variant — the card-level action -------------------------- *
   Same glass body and same size as .btn-outline, so a card's two buttons sit
   at equal weight; the electric blue is what marks which one commits you.
   Gold stays reserved for the single hero call to action, which is what keeps
   it meaning something.                                                      */
.btn-electric {
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(61, 141, 255, 0.14), transparent 60%),
    linear-gradient(168deg, var(--pui-glass-1), var(--pui-glass-2));
  border-color: rgba(61, 141, 255, 0.42);
  color: #cfe2ff;
  box-shadow: inset 0 -1px 0 rgba(61, 141, 255, 0.75),
              inset 0 -8px 11px -8px rgba(61, 141, 255, 0.6),
              0 14px 30px -18px rgba(0, 0, 0, 0.9);
}
.btn-electric::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.26), rgba(61, 141, 255, 0.12) 40%, transparent 66%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}
.btn-electric::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 52%;
  height: 18%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(61, 141, 255, 0.9), transparent 72%);
  filter: blur(6px);
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.3s var(--pui-ease), transform 0.3s var(--pui-ease);
}
.btn-electric > * { position: relative; z-index: 1; }
.btn-electric .pui-glyph {
  stroke: #9cc4ff;
  filter: drop-shadow(0 0 6px rgba(61, 141, 255, 0.6));
}
.btn-electric .pui-glyph [fill] { fill: #9cc4ff; }
@media (hover: hover) {
  .btn-electric:hover {
    border-color: var(--pui-blue);
    color: #eaf2ff;
    transform: translateY(-2px);
    box-shadow: inset 0 -1px 0 rgba(61, 141, 255, 0.95),
                inset 0 -12px 14px -9px rgba(61, 141, 255, 0.7),
                0 22px 44px -20px rgba(0, 0, 0, 0.95),
                0 14px 38px -16px rgba(61, 141, 255, 0.6);
  }
  .btn-electric:hover::after { opacity: 1; transform: translateX(-50%) scaleX(1.15); }
}
.btn-electric:active {
  transform: translateY(1px) scale(0.985);
  box-shadow: inset 0 -1px 0 rgba(61, 141, 255, 0.8),
              inset 0 2px 10px rgba(0, 0, 0, 0.55);
  transition-duration: 0.09s;
}

/* ---- Gold variant — the one call to action per screen ------------------- */
.btn-primary {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 46%),
    linear-gradient(168deg, var(--pui-gold-2), var(--pui-gold-4));
  color: #17130a;
  border-color: rgba(246, 230, 189, 0.5);
  box-shadow: 0 18px 38px -18px rgba(201, 168, 106, 0.6),
              0 2px 6px -2px rgba(0, 0, 0, 0.6);
}
.btn-primary .pui-glyph {
  stroke: #17130a;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.35));
}
.btn-primary .pui-glyph [fill] { fill: #17130a; }
@media (hover: hover) {
  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 26px 50px -20px rgba(201, 168, 106, 0.62),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }
}
.btn-primary:active { transform: translateY(1px) scale(0.985); transition-duration: 0.09s; }

/* A disabled site button goes cold the same way a .pui-btn does. */
.btn[disabled], .btn[aria-disabled="true"] {
  cursor: not-allowed;
  color: rgba(207, 211, 216, 0.34);
  background: linear-gradient(168deg, rgba(20, 23, 29, 0.75), rgba(10, 12, 16, 0.85));
  border-color: rgba(255, 255, 255, 0.05);
  box-shadow: none;
  transform: none;
}
.btn[disabled]::after, .btn[aria-disabled="true"]::after { opacity: 0; }
.btn[disabled] .pui-glyph, .btn[aria-disabled="true"] .pui-glyph {
  stroke: rgba(207, 211, 216, 0.34);
  filter: none;
}

/* ============================================================================
   6. MOTION PREFERENCES
   Everything above is decoration. Someone who asked their system for less
   motion gets the same interface with none of it — including the spinner,
   which becomes a steady pulse rather than a rotation.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .pui-tile,
  .pui-btn,
  .btn,
  .pui-glyph,
  .pui-chevron,
  .pui-tile::after,
  .pui-btn::after,
  .btn-outline::after {
    transition-duration: 0.01ms !important;
  }
  .pui-tile:hover, .pui-btn:hover, .btn:hover,
  .pui-tile:active, .pui-btn:active, .btn:active { transform: none !important; }
  .pui-spinner {
    animation: pui-pulse 1.4s ease-in-out infinite;
    border-top-color: var(--pui-blue);
  }
  @keyframes pui-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
}

/* ---- Forced-colours (Windows high contrast): drop the glass entirely and
       let the OS palette through, or the whole kit becomes invisible. ---- */
@media (forced-colors: active) {
  .pui-tile, .pui-btn { border: 1px solid ButtonBorder; background: ButtonFace; }
  .pui-label { color: ButtonText; }
  .pui-glyph { stroke: ButtonText; filter: none; }
  .pui-tile::after, .pui-btn::after { display: none; }
}

/* ============================================================================
   8. PAGER — sideways movement between the four main pages
   Paired with js/pr-pager.js. Phones and tablets only: on a desktop the top
   navigation is already visible and a bottom bar would just take space.
   ========================================================================== */

.pr-pager { display: none; }

@media (max-width: 860px) {
  .pr-pager {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;                     /* under the cookie bar (1000) */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(10, 13, 18, 0.86), rgba(6, 8, 11, 0.97));
    border-top: 1px solid var(--pui-edge);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
                0 -14px 30px -18px rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .pr-pager-tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 9px 4px 7px;
    border-radius: 14px;
    text-decoration: none;
    color: rgba(242, 243, 245, 0.5);
    transition: color 0.25s var(--pui-ease), background-color 0.25s var(--pui-ease);
    -webkit-tap-highlight-color: transparent;
  }
  .pr-pager-tab .pui-glyph {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    filter: none;
  }
  .pr-pager-tab .pui-glyph [fill] { fill: currentColor; }
  .pr-pager-label {
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
  }

  /* The active tab is the one place the blue names a location rather than
     decorating one: gold glyph, blue light under it. */
  .pr-pager-tab.is-active {
    color: var(--pui-gold-2);
    background: linear-gradient(180deg, rgba(61, 141, 255, 0.1), transparent 70%);
  }
  .pr-pager-tab.is-active .pui-glyph {
    stroke: url(#pui-gold-grad) var(--pui-gold-2);
    filter: drop-shadow(0 2px 8px rgba(61, 141, 255, 0.5));
  }
  .pr-pager-tab.is-active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 26px;
    height: 2px;
    transform: translateX(-50%);
    border-radius: 2px;
    background: var(--pui-blue);
    box-shadow: 0 0 10px rgba(61, 141, 255, 0.9);
  }
  .pr-pager-tab:active { background: rgba(255, 255, 255, 0.05); }

  /* Room for the bar, so the footer is never trapped under it. */
  body.has-pr-pager { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  .wa-float.is-lifted { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .pr-cookie { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }

  /* The page slides out in the direction of travel, so the gesture and the
     motion agree. The incoming page is a normal load — deliberately, because
     faking a two-panel transition across documents costs more than it buys. */
  body.pr-leave-left,
  body.pr-leave-right {
    transition: transform 0.17s ease-in, opacity 0.17s ease-in;
  }
  body.pr-leave-left { transform: translateX(-4%); opacity: 0.35; }
  body.pr-leave-right { transform: translateX(4%); opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  body.pr-leave-left, body.pr-leave-right {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}