/* Stoppin UI polish — shared visual contract.
   Loaded after user-settings-runtime.css so these rules can resolve final
   contrast, overlap and responsive composition without changing business UI. */

.stoppin-app-shell {
  min-width: 0;
  overflow-x: clip;
}

.stoppin-app-shell main,
.stoppin-app-shell main > * {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Shared chrome: the header/footer are deliberately nocturnal even when the
   user's content theme is light. Explicit colours prevent inherited theme
   tokens from producing dark text on these fixed dark surfaces.
   -------------------------------------------------------------------------- */

.stoppin-app-shell > div > header,
.stoppin-app-shell header.sticky {
  border-bottom-color: rgb(255 255 255 / 0.1) !important;
  background:
    linear-gradient(180deg, rgb(7 9 12 / 0.97), rgb(5 7 10 / 0.92)) !important;
  box-shadow:
    0 12px 34px rgb(0 0 0 / 0.22),
    inset 0 -1px 0 rgb(255 121 0 / 0.035);
  color: #f8fbff;
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}

.stoppin-app-shell footer {
  color-scheme: dark;
  --background: #050607;
  --foreground: #f7f7f5;
  --muted-foreground: #a8b0ba;
  --border: rgb(255 255 255 / 0.1);
  --color-background: #050607;
  --color-foreground: #f7f7f5;
  --color-muted-foreground: #a8b0ba;
  --color-border: rgb(255 255 255 / 0.1);
  color: #f7f7f5;
  background:
    radial-gradient(circle at 12% 0%, rgb(255 121 0 / 0.04), transparent 28%),
    linear-gradient(180deg, #060709, #030405) !important;
}

.stoppin-app-shell footer h2,
.stoppin-app-shell footer a {
  color: #f7f7f5;
}

.stoppin-app-shell footer .text-muted-foreground,
.stoppin-app-shell footer p.text-muted-foreground,
.stoppin-app-shell footer nav a {
  color: #a8b0ba !important;
}

.stoppin-app-shell footer nav a:hover,
.stoppin-app-shell footer a:hover {
  color: #fff !important;
}

/* Keep generic cards/controls coherent with the selected user theme. */
html[data-theme="light"] .stoppin-app-shell:not(.stoppin-home-stage) .glass {
  border-color: rgb(17 21 26 / 0.12) !important;
  background: rgb(255 255 255 / 0.84) !important;
  color: #11151a;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.92),
    0 18px 48px rgb(43 58 72 / 0.09);
  backdrop-filter: blur(20px) saturate(118%);
  -webkit-backdrop-filter: blur(20px) saturate(118%);
}

html[data-theme="dark"] .stoppin-app-shell:not(.stoppin-home-stage) .glass {
  border-color: rgb(255 255 255 / 0.11) !important;
  background: rgb(9 12 16 / 0.82) !important;
  color: #f7f7f5;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.055),
    0 18px 48px rgb(0 0 0 / 0.26);
}

html[data-theme="light"] .stoppin-app-shell:not(.stoppin-home-stage) .glass .text-muted-foreground {
  color: #59636f !important;
}

html[data-theme="dark"] .stoppin-app-shell:not(.stoppin-home-stage) .glass .text-muted-foreground {
  color: #a5abb3 !important;
}

.stoppin-app-shell :is(input, textarea, select) {
  max-width: 100%;
}

html[data-theme="light"] .stoppin-app-shell:not(.stoppin-home-stage) :is(input, textarea, select) {
  caret-color: #e96800;
}

html[data-theme="light"] .stoppin-app-shell:not(.stoppin-home-stage) :is(input, textarea)::placeholder {
  color: rgb(61 72 83 / 0.64);
  opacity: 1;
}

html[data-theme="dark"] .stoppin-app-shell:not(.stoppin-home-stage) :is(input, textarea)::placeholder {
  color: rgb(224 231 239 / 0.48);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Home world stage — one continuous lower scene rather than a card inside the
   hero. The event photograph fades through the dotted map and the realtime
   counter is physically centred in the lower composition.
   -------------------------------------------------------------------------- */

.stoppin-home-stage .stoppin-hero--live-showcase .stoppin-hero__world-visual {
  isolation: isolate;
  overflow: hidden;
  border: 0 !important;
  background:
    linear-gradient(
      180deg,
      rgb(5 8 13 / 0) 0%,
      rgb(5 8 13 / 0.08) 16%,
      rgb(5 8 13 / 0.34) 42%,
      rgb(4 7 12 / 0.76) 76%,
      rgb(4 7 12 / 0.94) 100%
    ) !important;
  box-shadow: none !important;
}

.stoppin-home-stage .stoppin-hero--live-showcase .stoppin-hero__world-visual::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 18% 78%, rgb(255 105 0 / 0.12), transparent 45%),
    radial-gradient(ellipse at 82% 64%, rgb(72 128 255 / 0.075), transparent 48%),
    linear-gradient(180deg, transparent 0 18%, rgb(5 8 13 / 0.15) 42%, rgb(5 8 13 / 0.55) 100%);
  filter: none;
  content: "";
}

.stoppin-home-stage .stoppin-hero--live-showcase .stoppin-hero__world-map-shell {
  z-index: 1;
  display: grid;
  place-items: center;
  opacity: 0.9;
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgb(0 0 0 / 0.12) 11%,
    rgb(0 0 0 / 0.6) 27%,
    #000 45%,
    #000 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgb(0 0 0 / 0.12) 11%,
    rgb(0 0 0 / 0.6) 27%,
    #000 45%,
    #000 100%
  );
}

.stoppin-home-stage .stoppin-hero--live-showcase .stoppin-hero__world-map {
  display: block;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter:
    drop-shadow(0 0 8px rgb(255 105 0 / 0.22))
    drop-shadow(0 0 30px rgb(64 122 255 / 0.065));
}

.stoppin-home-stage .stoppin-hero--live-showcase .stoppin-live-counter {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  z-index: 4;
  margin: 0 !important;
  transform: translate(-50%, -50%);
}

.stoppin-home-stage .stoppin-live-counter__title,
.stoppin-home-stage .stoppin-live-counter__digits,
.stoppin-home-stage .stoppin-live-counter__live {
  justify-content: center !important;
  text-align: center !important;
}

@media (max-width: 767px) {
  .stoppin-home-stage .stoppin-hero--live-showcase .stoppin-hero__content {
    padding-bottom: 19.75rem;
  }

  .stoppin-home-stage .stoppin-hero--live-showcase .stoppin-hero__world-visual {
    inset: auto 0 0 !important;
    width: 100%;
    height: 20rem !important;
    border-radius: 0 0 1.7rem 1.7rem !important;
  }

  .stoppin-home-stage .stoppin-hero--live-showcase .stoppin-hero__world-map-shell {
    inset: -12% -34% -8% !important;
  }

  .stoppin-home-stage .stoppin-hero--live-showcase .stoppin-hero__world-map {
    width: 162% !important;
    min-height: 100%;
  }

  .stoppin-home-stage .stoppin-hero--live-showcase .stoppin-live-counter {
    width: min(78%, 18.5rem) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .stoppin-home-stage .stoppin-hero--live-showcase .stoppin-hero__content {
    padding-bottom: 17rem;
  }

  .stoppin-home-stage .stoppin-hero--live-showcase .stoppin-hero__world-visual {
    inset: auto 0 0 !important;
    width: 100%;
    height: 17.5rem !important;
    border-radius: 0 0 1.3rem 1.3rem !important;
  }

  .stoppin-home-stage .stoppin-hero--live-showcase .stoppin-hero__world-map-shell {
    inset: -24% -18% -10% !important;
  }

  .stoppin-home-stage .stoppin-hero--live-showcase .stoppin-hero__world-map {
    width: 138% !important;
  }

  .stoppin-home-stage .stoppin-hero--live-showcase .stoppin-live-counter {
    width: min(66%, 30rem) !important;
  }
}

@media (min-width: 1024px) {
  .stoppin-home-stage .stoppin-hero--live-showcase {
    min-height: 51rem;
  }

  .stoppin-home-stage .stoppin-hero--live-showcase .stoppin-hero__content {
    min-height: 51rem;
    padding-bottom: 16.75rem;
  }

  .stoppin-home-stage .stoppin-hero--live-showcase .stoppin-hero__world-visual {
    inset: auto 0 0 !important;
    width: 100%;
    height: 17rem !important;
    border-radius: 0 0 1.15rem 1.15rem !important;
  }

  .stoppin-home-stage .stoppin-hero--live-showcase .stoppin-hero__world-map-shell {
    inset: -34% -6% -18% !important;
  }

  .stoppin-home-stage .stoppin-hero--live-showcase .stoppin-hero__world-map {
    width: min(122%, 88rem) !important;
  }

  .stoppin-home-stage .stoppin-hero--live-showcase .stoppin-live-counter {
    width: min(50%, 38rem) !important;
  }
}

/* --------------------------------------------------------------------------
   Map experience — the map is a nocturnal canvas regardless of the account
   theme. The old light toolbar/controls were visually disconnected from it.
   -------------------------------------------------------------------------- */

.stoppin-app-shell .map-overlay-panel {
  color-scheme: dark;
  --background: #070a0f;
  --foreground: #f8fbff;
  --surface: #0b1119;
  --surface-2: #111a25;
  --muted: #111a25;
  --muted-foreground: #aab4c0;
  --accent: #152131;
  --accent-foreground: #f8fbff;
  --border: rgb(255 255 255 / 0.13);
  --input: rgb(255 255 255 / 0.16);
  --color-background: #070a0f;
  --color-foreground: #f8fbff;
  --color-surface: #0b1119;
  --color-surface-2: #111a25;
  --color-muted: #111a25;
  --color-muted-foreground: #aab4c0;
  --color-accent: #152131;
  --color-accent-foreground: #f8fbff;
  --color-border: rgb(255 255 255 / 0.13);
  --color-input: rgb(255 255 255 / 0.16);
  border-color: rgb(255 255 255 / 0.14) !important;
  background:
    radial-gradient(circle at 0 0, rgb(255 121 0 / 0.055), transparent 30%),
    linear-gradient(145deg, rgb(6 10 16 / 0.96), rgb(8 12 18 / 0.92)) !important;
  color: #f8fbff !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.07),
    0 24px 70px rgb(0 0 0 / 0.46);
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
}

.stoppin-app-shell .map-overlay-panel .text-muted-foreground {
  color: #aab4c0 !important;
}

.stoppin-app-shell .map-overlay-panel :is(input, select, textarea) {
  border-color: rgb(255 255 255 / 0.14) !important;
  background: rgb(5 8 13 / 0.72) !important;
  color: #fff !important;
}

.stoppin-app-shell .map-overlay-panel :is(input, textarea)::placeholder {
  color: rgb(234 241 248 / 0.5) !important;
}

@media (max-width: 767px) {
  .mobile-discovery-shell {
    --mobile-global-nav-height: calc(5.15rem + env(safe-area-inset-bottom, 0px));
    --background: #05080d;
    --foreground: #f8fbff;
    --surface: #0a1018;
    --surface-2: #111a25;
    --muted: #111a25;
    --muted-foreground: #aab4c0;
    --accent: #152131;
    --accent-foreground: #f8fbff;
    --border: rgb(255 255 255 / 0.13);
    --input: rgb(255 255 255 / 0.16);
    --primary: #ff7900;
    --primary-foreground: #050607;
    --color-background: #05080d;
    --color-foreground: #f8fbff;
    --color-surface: #0a1018;
    --color-surface-2: #111a25;
    --color-muted: #111a25;
    --color-muted-foreground: #aab4c0;
    --color-accent: #152131;
    --color-accent-foreground: #f8fbff;
    --color-border: rgb(255 255 255 / 0.13);
    --color-input: rgb(255 255 255 / 0.16);
    --color-primary: #ff7900;
    --color-primary-foreground: #050607;
    background: #05080d !important;
    color: #f8fbff;
  }

  .mobile-discovery-toolbar {
    gap: 0.55rem;
    border-bottom-color: rgb(255 255 255 / 0.11) !important;
    background:
      radial-gradient(circle at 0 40%, rgb(255 121 0 / 0.06), transparent 31%),
      linear-gradient(180deg, rgb(5 8 13 / 0.94), rgb(5 8 13 / 0.82)) !important;
    box-shadow:
      inset 0 -1px 0 rgb(255 255 255 / 0.035),
      0 12px 30px rgb(0 0 0 / 0.18);
  }

  .mobile-discovery-search :is(input, [role="combobox"]) {
    min-height: 44px;
    border: 1px solid rgb(255 255 255 / 0.14) !important;
    border-radius: 1rem !important;
    background: rgb(7 11 17 / 0.78) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.045);
  }

  .mobile-discovery-search input::placeholder {
    color: rgb(237 243 250 / 0.52) !important;
  }

  .mobile-discovery-filter-trigger {
    border-color: rgb(255 255 255 / 0.14) !important;
    background: rgb(9 13 19 / 0.78) !important;
    color: #f8fbff !important;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05);
  }

  .mobile-discovery-switcher {
    gap: 0.35rem;
    border-top-color: rgb(255 255 255 / 0.1) !important;
    background: rgb(5 8 13 / 0.92) !important;
    padding: 0.4rem 0.65rem 0.48rem;
    box-shadow:
      0 -14px 34px rgb(0 0 0 / 0.23),
      inset 0 1px 0 rgb(255 255 255 / 0.045);
  }

  .mobile-discovery-switcher button {
    border: 1px solid transparent;
    color: #9da8b4 !important;
  }

  .mobile-discovery-switcher button[aria-pressed="true"] {
    border-color: rgb(255 121 0 / 0.22);
    background:
      linear-gradient(180deg, rgb(255 121 0 / 0.1), rgb(255 121 0 / 0.035)) !important;
    color: #ff9a22 !important;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.045);
  }

  .mobile-discovery-result-count {
    background: rgb(255 255 255 / 0.075) !important;
    color: #f8fbff !important;
  }

  .mobile-discovery-selection,
  .mobile-discovery-list-view {
    border-color: rgb(255 255 255 / 0.1) !important;
    background: #070a0f !important;
    color: #f8fbff;
  }

  .mobile-discovery-filter-modal {
    background: #070a0f !important;
    color: #f8fbff;
  }

  .mobile-discovery-filter-modal > header,
  .mobile-discovery-filter-modal > footer {
    border-color: rgb(255 255 255 / 0.11) !important;
    background: rgb(7 10 15 / 0.96) !important;
  }

  .mobile-discovery-map .maplibregl-ctrl-group {
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 0.14);
    border-radius: 0.85rem;
    background: rgb(5 8 13 / 0.88) !important;
    box-shadow: 0 10px 28px rgb(0 0 0 / 0.34);
  }

  .mobile-discovery-map .maplibregl-ctrl-group button {
    border-color: rgb(255 255 255 / 0.09) !important;
    background: transparent !important;
  }

  .mobile-discovery-map .maplibregl-ctrl-group .maplibregl-ctrl-icon {
    filter: invert(1) opacity(0.78);
  }

  .mobile-discovery-map .maplibregl-ctrl-attrib {
    border-radius: 0.5rem 0 0 0;
    background: rgb(5 8 13 / 0.72) !important;
    color: rgb(239 244 250 / 0.58) !important;
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
  }

  .mobile-discovery-map .maplibregl-ctrl-attrib a {
    color: rgb(239 244 250 / 0.72) !important;
  }
}

/* Floating assistant: keep it above the global mobile dock and away from the
   iOS home indicator instead of letting it overlap navigation/content. */
@media (max-width: 767px) {
  body .btn-glow.fixed.bottom-24.right-4 {
    right: 0.8rem !important;
    bottom: calc(5.65rem + env(safe-area-inset-bottom, 0px)) !important;
    width: 3rem;
    height: 3rem;
    border: 1px solid rgb(255 255 255 / 0.13);
    box-shadow:
      0 14px 34px rgb(0 0 0 / 0.32),
      0 0 24px rgb(255 121 0 / 0.12) !important;
  }
}

/* Small viewport hygiene: prevent long translated labels and fixed controls
   from forcing horizontal overflow. */
@media (max-width: 479px) {
  .stoppin-app-shell :is(button, a, label, summary) {
    min-width: 0;
  }

  .stoppin-app-shell :is(h1, h2, h3, p, span) {
    overflow-wrap: anywhere;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .mobile-discovery-toolbar,
  .mobile-discovery-switcher,
  .stoppin-app-shell .map-overlay-panel {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}