/* Final Stoppin Liquid Glass composition fixes.
   Loaded after source-sun.css so decorative absolute layers keep their intended
   layout while the optical pseudo-elements remain non-interactive. */

.stoppin-home-stage .stoppin-home-stage__content main button.group[class*="rounded-3xl"] > .absolute {
  position: absolute !important;
  z-index: 0 !important;
}

.stoppin-home-stage .stoppin-home-stage__content main button.group[class*="rounded-3xl"] > :not(.absolute) {
  position: relative;
  z-index: 2;
}

.stoppin-home-stage .stoppin-home-stage__content main article.bg-surface > a.absolute.inset-0 {
  position: absolute !important;
  inset: 0 !important;
  z-index: 10 !important;
  pointer-events: auto !important;
}

.stoppin-home-stage .stoppin-home-stage__content main article.bg-surface {
  min-width: 0;
  max-width: 100%;
}

.stoppin-home-stage .stoppin-home-stage__content main article.bg-surface > :not(a.absolute.inset-0) {
  min-width: 0;
  max-width: 100%;
}

.stoppin-home-stage .stoppin-home-stage__content main article.bg-surface h3,
.stoppin-home-stage .stoppin-home-stage__content main article.bg-surface p {
  min-width: 0;
  overflow-wrap: anywhere;
}

section:has(.lucide-brain-circuit) .no-scrollbar.grid-flow-col {
  grid-auto-columns: minmax(17rem, min(82vw, 21rem)) !important;
  align-items: stretch;
  scroll-snap-type: x proximity;
  overscroll-behavior-inline: contain;
}

section:has(.lucide-brain-circuit) .no-scrollbar.grid-flow-col > div {
  display: flex;
  min-width: 0;
  max-width: 100%;
  flex-direction: column;
  scroll-snap-align: start;
}

section:has(.lucide-brain-circuit) .no-scrollbar.grid-flow-col article.bg-surface {
  min-height: 16rem;
}

section:has(.lucide-brain-circuit) .no-scrollbar.grid-flow-col details,
section:has(.lucide-brain-circuit) .no-scrollbar.grid-flow-col button {
  min-width: 0;
  max-width: 100%;
}

section:has(.lucide-brain-circuit) .no-scrollbar.grid-flow-col div.grid.grid-cols-2 > button {
  padding-inline: 0.5rem;
  line-height: 1.2;
  white-space: normal;
}

label.flex:has(> select.field-control) {
  display: grid !important;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: start !important;
  gap: 0.75rem !important;
  min-width: 0;
  max-width: 100%;
}

label.flex:has(> select.field-control) > * {
  min-width: 0;
  max-width: 100%;
}

label.flex:has(> select.field-control) > select.field-control {
  grid-column: 1 / -1;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

label.flex:has(> select.field-control) > span {
  overflow-wrap: anywhere;
}

@media (min-width: 1024px) {
  label.flex:has(> select.field-control) {
    grid-template-columns: 2.5rem minmax(12rem, 1fr) minmax(12rem, 40%);
    align-items: center !important;
  }

  label.flex:has(> select.field-control) > select.field-control {
    grid-column: auto;
  }
}

@media (max-width: 420px) {
  section:has(.lucide-brain-circuit) .no-scrollbar.grid-flow-col {
    grid-auto-columns: minmax(16rem, 88vw) !important;
  }
}

.stoppin-home-stage .stoppin-home-stage__content main .glass,
.stoppin-home-stage .stoppin-home-stage__content main .bg-surface,
.stoppin-home-stage .stoppin-home-stage__content main [class*="bg-surface/"],
.stoppin-home-stage .stoppin-home-stage__content main > div > details,
.stoppin-home-stage .stoppin-home-stage__content main > div > #discovery-results,
.stoppin-home-stage .stoppin-home-stage__content main button.group[class*="rounded-3xl"] {
  outline: 1px solid color-mix(in srgb, var(--liquid-glass-specular) 18%, transparent);
  outline-offset: -2px;
  background-blend-mode: screen, normal;
}

.stoppin-home-stage .stoppin-home-stage__content main button.group[class*="rounded-3xl"]:hover {
  box-shadow:
    0 22px 56px var(--liquid-glass-shadow),
    inset 0 1px 0 color-mix(in srgb, var(--liquid-glass-specular) 88%, transparent),
    inset 1px 0 0 var(--liquid-glass-edge-soft),
    inset 0 -1px 0 rgb(0 0 0 / 0.12) !important;
  backdrop-filter: blur(22px) saturate(180%) contrast(108%) brightness(1.045) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%) contrast(108%) brightness(1.045) !important;
}

@media (prefers-reduced-transparency: reduce) {
  .stoppin-home-stage .stoppin-home-stage__content main .glass,
  .stoppin-home-stage .stoppin-home-stage__content main .bg-surface,
  .stoppin-home-stage .stoppin-home-stage__content main [class*="bg-surface/"],
  .stoppin-home-stage .stoppin-home-stage__content main > div > details,
  .stoppin-home-stage .stoppin-home-stage__content main > div > #discovery-results,
  .stoppin-home-stage .stoppin-home-stage__content main button.group[class*="rounded-3xl"] {
    background: rgb(8 14 25 / 0.88) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* --------------------------------------------------------------------------
   Liquid Glass v2 — chromatic refraction and Lighthouse-friendly compositing.
   -------------------------------------------------------------------------- */
:root {
  --font-sans: "SF Pro Text", "Segoe UI", system-ui, -apple-system, sans-serif;
}

.stoppin-home-stage {
  --glass-v2-edge: rgb(255 255 255 / 0.38);
  --glass-v2-edge-hot: rgb(255 255 255 / 0.74);
  --glass-v2-shadow: rgb(4 6 16 / 0.42);
  --glass-v2-fill: rgb(17 20 37 / 0.25);
  --glass-v2-accent: 255 121 0;
}

.stoppin-home-stage .glass,
.stoppin-home-stage .bg-surface,
.stoppin-home-stage button[class*="rounded-3xl"][class*="border"],
.stoppin-home-stage details.glass,
.stoppin-home-stage .stoppin-hero__spotlight,
.stoppin-home-stage .stoppin-live-counter {
  isolation: isolate;
  border-color: var(--glass-v2-edge) !important;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 0.13), transparent 27%),
    linear-gradient(315deg, rgb(var(--glass-v2-accent) / 0.13), transparent 48%),
    color-mix(in srgb, var(--glass-v2-fill) 78%, transparent) !important;
  box-shadow:
    inset 0 1px 0 var(--glass-v2-edge-hot),
    inset 1px 0 0 rgb(255 255 255 / 0.15),
    inset 0 -1px 0 rgb(var(--glass-v2-accent) / 0.22),
    0 18px 54px var(--glass-v2-shadow),
    0 0 32px rgb(var(--glass-v2-accent) / 0.08) !important;
  backdrop-filter: blur(25px) saturate(185%) contrast(1.04) !important;
  -webkit-backdrop-filter: blur(25px) saturate(185%) contrast(1.04) !important;
}

.stoppin-home-stage .glass::before,
.stoppin-home-stage .bg-surface::before,
.stoppin-home-stage button[class*="rounded-3xl"][class*="border"]::before,
.stoppin-home-stage .stoppin-hero__spotlight::before,
.stoppin-home-stage .stoppin-live-counter::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(115% 78% at 12% -5%, rgb(255 255 255 / 0.31), transparent 36%),
    radial-gradient(74% 46% at 98% 8%, rgb(var(--glass-v2-accent) / 0.25), transparent 58%),
    linear-gradient(105deg, transparent 18%, rgb(255 255 255 / 0.11) 43%, transparent 60%);
  mix-blend-mode: screen;
  opacity: 0.84;
}

.stoppin-home-stage .glass::after,
.stoppin-home-stage .bg-surface::after,
.stoppin-home-stage button[class*="rounded-3xl"][class*="border"]::after,
.stoppin-home-stage .stoppin-hero__spotlight::after,
.stoppin-home-stage .stoppin-live-counter::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    repeating-linear-gradient(118deg, transparent 0 17px, rgb(255 255 255 / 0.018) 18px 19px),
    radial-gradient(circle at 18% 12%, rgb(255 255 255 / 0.11) 0 1px, transparent 1.6px);
  background-size: auto, 13px 13px;
  opacity: 0.38;
  -webkit-mask-image: linear-gradient(#000, rgb(0 0 0 / 0.35) 40%, transparent 86%);
  mask-image: linear-gradient(#000, rgb(0 0 0 / 0.35) 40%, transparent 86%);
}

.stoppin-home-stage [data-phase="day"] ~ .stoppin-home-stage__content {
  --glass-v2-fill: rgb(25 52 76 / 0.22);
  --glass-v2-shadow: rgb(12 35 58 / 0.3);
}
.stoppin-home-stage [data-phase="golden"] ~ .stoppin-home-stage__content,
.stoppin-home-stage [data-phase="civil"] ~ .stoppin-home-stage__content,
.stoppin-home-stage [data-phase="nautical"] ~ .stoppin-home-stage__content {
  --glass-v2-fill: rgb(53 30 54 / 0.24);
  --glass-v2-shadow: rgb(58 20 42 / 0.36);
}
.stoppin-home-stage [data-phase="night"] ~ .stoppin-home-stage__content,
.stoppin-home-stage [data-phase="astronomical"] ~ .stoppin-home-stage__content {
  --glass-v2-fill: rgb(10 17 43 / 0.28);
  --glass-v2-shadow: rgb(1 5 22 / 0.52);
}

.stoppin-home-stage section[aria-labelledby="vibe-title"] button:nth-child(6n + 1) { --glass-v2-accent: 207 87 255; }
.stoppin-home-stage section[aria-labelledby="vibe-title"] button:nth-child(6n + 2) { --glass-v2-accent: 77 230 220; }
.stoppin-home-stage section[aria-labelledby="vibe-title"] button:nth-child(6n + 3) { --glass-v2-accent: 255 114 37; }
.stoppin-home-stage section[aria-labelledby="vibe-title"] button:nth-child(6n + 4) { --glass-v2-accent: 255 75 162; }
.stoppin-home-stage section[aria-labelledby="vibe-title"] button:nth-child(6n + 5) { --glass-v2-accent: 93 144 255; }
.stoppin-home-stage section[aria-labelledby="vibe-title"] button:nth-child(6n) { --glass-v2-accent: 194 83 245; }

.stoppin-home-stage section[aria-labelledby="vibe-title"] button > div.absolute {
  opacity: 0.58 !important;
  filter: saturate(1.15);
}

.stoppin-home-stage .glass:hover,
.stoppin-home-stage button[class*="rounded-3xl"][class*="border"]:hover {
  border-color: rgb(255 255 255 / 0.58) !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.82),
    inset 0 -1px 0 rgb(var(--glass-v2-accent) / 0.35),
    0 22px 64px rgb(3 5 18 / 0.48),
    0 0 38px rgb(var(--glass-v2-accent) / 0.16) !important;
}

.stoppin-home-stage .bg-surface > :not([class*="absolute"]):not([class*="fixed"]):not([class*="sticky"]),
.stoppin-home-stage .glass > :not([class*="absolute"]):not([class*="fixed"]):not([class*="sticky"]),
.stoppin-home-stage button[class*="rounded-3xl"] > * {
  position: relative;
  z-index: 1;
}

.home-time-range-dock {
  position: relative;
  z-index: 35;
  width: min(1440px, calc(100% - 4rem));
  margin: 0.85rem auto 0.15rem;
  padding: 0.5rem;
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: 1.35rem;
  background:
    linear-gradient(140deg, rgb(255 255 255 / 0.12), transparent 32%),
    rgb(13 18 39 / 0.24);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.65),
    0 14px 38px rgb(3 5 18 / 0.3),
    0 0 28px rgb(119 95 255 / 0.08);
  backdrop-filter: blur(24px) saturate(185%);
  -webkit-backdrop-filter: blur(24px) saturate(185%);
}
.home-time-range-dock__inner { display:flex; align-items:center; gap:.6rem; min-width:0; }
.home-time-range-dock__label { display:flex; flex:0 0 auto; align-items:center; gap:.45rem; padding:0 .7rem; color:rgb(255 255 255 / .72); font-size:.72rem; font-weight:800; }
.home-time-range-dock__label svg { width:1rem; height:1rem; color:#ff8a0b; }
.home-time-range-dock__rail { display:flex; min-width:0; flex:1; gap:.4rem; overflow-x:auto; padding:.15rem; scroll-snap-type:x proximity; }
.home-time-range-dock__rail a { position:relative; min-width:7.7rem; flex:1 0 auto; scroll-snap-align:start; padding:.58rem .75rem; border:1px solid rgb(255 255 255 / .15); border-radius:.95rem; color:rgb(255 255 255 / .78); background:rgb(255 255 255 / .035); box-shadow:inset 0 1px 0 rgb(255 255 255 / .12); transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease; }
.home-time-range-dock__rail a::before { content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; background:linear-gradient(120deg,rgb(255 255 255 / .11),transparent 38%); }
.home-time-range-dock__rail a strong,.home-time-range-dock__rail a small { position:relative; z-index:1; display:block; }
.home-time-range-dock__rail a strong { font-size:.72rem; font-weight:850; }
.home-time-range-dock__rail a small { margin-top:.1rem; font-size:.56rem; color:rgb(255 255 255 / .47); }
.home-time-range-dock__rail a:hover { transform:translateY(-1px); border-color:rgb(255 255 255 / .34); background:rgb(255 255 255 / .07); }
.home-time-range-dock__rail a.is-active { border-color:rgb(255 145 39 / .7); color:#fff; background:linear-gradient(135deg,rgb(255 121 0 / .36),rgb(163 76 255 / .14)); box-shadow:inset 0 1px 0 rgb(255 255 255 / .58),0 0 20px rgb(255 121 0 / .14); }

.stoppin-hero__image--lcp-poster { z-index: 0; }
.stoppin-hero__image--event-swipe { z-index: 1; }

@keyframes stoppin-counter-live-pulse {
  50% {
    opacity: 0.32;
    transform: scale(0.72);
  }
}

@media (max-width: 1023px) { .home-time-range-dock { width:calc(100% - 2rem); } .home-time-range-dock__label { display:none; } }
@media (max-width: 767px) {
  .stoppin-home-stage .glass,
  .stoppin-home-stage .bg-surface,
  .stoppin-home-stage button[class*="rounded-3xl"][class*="border"] {
    backdrop-filter: blur(18px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .stoppin-home-stage .glass,
  .stoppin-home-stage .bg-surface,
  .stoppin-home-stage button[class*="rounded-3xl"][class*="border"] {
    background: color-mix(in srgb, var(--color-surface) 94%, black) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}