/* =============================================================
   Jiminy — Disneyland Discover Subpage Styles
   /css/discover-disneyland.css

   Page-scoped styles for discover-disneyland.html only.
   Selectors scoped to .disneyland-discover-page / .dl-* / card
   subclasses so editing this file cannot accidentally affect
   any other page. Load LAST, after variables.css, shared.css,
   and discover.css, only on discover-disneyland.html.

   Uses existing Jiminy design tokens from variables.css:
   --navy, --gold, --cream, --card, --line, --ink, --muted
============================================================= */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.disneyland-discover-page {
  padding-bottom: calc(88px + env(safe-area-inset-bottom));
}

/* ── BACK LINK ────────────────────────────────────────────── */
.dl-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  color: var(--navy);
  text-decoration: none;
  font-size: 15px;
  padding: 8px 4px;
  margin-bottom: 18px;
  min-height: 44px;
  border-radius: 10px;
}
.dl-back-link:hover,
.dl-back-link:focus-visible {
  color: var(--gold);
}
.dl-back-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ── DESTINATION INTRO ────────────────────────────────────── */
.destination-intro {
  border-radius: 26px;
  margin-bottom: 22px;
  box-shadow: 0 14px 40px rgba(7,31,65,.22);
  position: relative;
  overflow: hidden;
  background: var(--navy);
}
.destination-intro__photo {
  width: 100%;
  height: 210px;
  background-image: url('/images/disneyland-station.jpeg');
  background-size: cover;
  background-position: center 40%;
  background-color: var(--soft, #f4f7fb);
}
.destination-intro__content {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 22px 24px;
}
.destination-intro__icon {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: rgba(244,184,37,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  position: relative;
  overflow: hidden;
}
.destination-intro__icon svg {
  width: 40px;
  height: 40px;
}
.destination-intro__icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.destination-intro__text {
  flex: 1;
  min-width: 0;
}
.destination-intro__title {
  font-family: Georgia, serif;
  color: #fff;
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: 1;
  margin: 0 0 10px;
  letter-spacing: -.02em;
}
.destination-intro__title span {
  color: var(--gold);
  font-size: .55em;
}
.destination-intro__subtitle {
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: 15px;
  line-height: 1.5;
  max-width: 46ch;
}

@media (min-width: 560px) {
  .destination-intro__photo {
    height: 280px;
  }
}
@media (min-width: 920px) {
  .destination-intro__photo {
    height: 340px;
  }
}



/* ── DESTINATION WEATHER STATUS ────────────────────────────── */
.destination-weather {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.24);
  color: #fff;
  font-size: 15px;
  line-height: 1.25;
}
.destination-weather__location,
.destination-weather__forecast {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.destination-weather__pin {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  fill: var(--gold);
  stroke: var(--gold);
  stroke-width: 1.5;
}
.destination-weather__pin circle {
  fill: var(--navy);
  stroke: none;
}
.destination-weather__divider {
  width: 1px;
  height: 25px;
  background: rgba(255,255,255,.32);
}
.destination-weather__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  color: var(--gold);
  font-size: 27px;
  line-height: 1;
}
.destination-weather__icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.destination-weather__temperatures {
  font-weight: 700;
  letter-spacing: .01em;
}
.destination-weather.is-loading .destination-weather__temperatures {
  opacity: .68;
}
.destination-weather.is-unavailable .destination-weather__forecast {
  color: rgba(255,255,255,.72);
}

@media (max-width: 559px) {
  .destination-intro__content {
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
  }
  .destination-intro__icon {
    width: 76px;
    height: 76px;
  }
  .destination-weather {
    display: grid;
    grid-template-columns: max-content 1px max-content;
    align-items: center;
    justify-content: start;
    column-gap: 9px;
    row-gap: 7px;
    font-size: 13.5px;
  }
  .destination-weather__divider {
    display: block;
    height: 22px;
  }
  .destination-weather__location,
  .destination-weather__forecast {
    gap: 7px;
  }
  .destination-weather__icon {
    min-width: 23px;
    font-size: 24px;
  }
  .destination-weather__icon svg {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 389px) {
  .destination-weather {
    column-gap: 6px;
    font-size: 12px;
  }
  .destination-weather__location,
  .destination-weather__forecast {
    gap: 5px;
  }
  .destination-weather__pin {
    width: 17px;
    height: 17px;
  }
  .destination-weather__icon {
    min-width: 21px;
    font-size: 22px;
  }
  .destination-weather__icon svg {
    width: 22px;
    height: 22px;
  }
}

/* ── DASHBOARD GRID ───────────────────────────────────────── */
.discover-dashboard {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 760px) {
  .discover-dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: dense;
    align-items: start;
  }
  .discover-card--full {
    grid-column: 1 / -1;
  }
}

/* ── SHARED CARD SHELL ────────────────────────────────────── */
.disneyland-discover-page .discover-card {
  background: var(--card);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(7,31,65,.14);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  max-width: 100%;
}
.discover-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--navy);
  padding: 16px 18px;
}
.discover-card__title-group {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.discover-card__title-group h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.discover-card__icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(244,184,37,.14);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
}
.discover-card__icon svg {
  width: 16px;
  height: 16px;
}
.discover-card__open {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  min-width: 44px;
  min-height: 44px;
  margin: -6px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--gold);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.discover-card__open:hover {
  background: rgba(244,184,37,.16);
}
.discover-card__open:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.discover-card__body {
  padding: 16px 18px 18px;
  flex: 1;
  min-width: 0;
}

/* Park-name marquee banner — sits between the card header and body,
   always reflecting whichever park Ride Times & Closures currently
   shows. Uses the same double-layer clip-path gold-border technique
   as .ride-marquee-card (a plain border would get sliced off at the
   notches by clip-path — see that component's own comments). */
.ride-times-park-banner {
  position: relative;
  margin: 16px 18px 0;
  padding: 3px;
  background: var(--gold);
  border-radius: 6px;
  clip-path: polygon(
    14px 0, calc(100% - 14px) 0, 100% 14px,
    100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%,
    0 calc(100% - 14px), 0 14px
  );
}
.ride-times-park-banner::after {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: 0;
  background: #fbf1dc;
  clip-path: polygon(
    11px 0, calc(100% - 11px) 0, 100% 11px,
    100% calc(100% - 11px), calc(100% - 11px) 100%, 11px 100%,
    0 calc(100% - 11px), 0 11px
  );
}
.ride-times-park-banner__name {
  position: relative;
  z-index: 1;
  display: block;
  padding: 9px 16px;
  text-align: center;
  font-family: Georgia, serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--navy);
  letter-spacing: .01em;
}
@media (max-width: 480px) {
  .ride-times-park-banner__name {
    font-size: 15px;
    padding: 8px 12px;
  }
}

.dl-sample-note {
  margin: 10px 0 0;
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}
.dl-local-time {
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.dl-text-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: var(--soft, #f4f7fb);
  border: 1px solid var(--line);
  color: var(--navy);
  font-weight: 800;
  font-size: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  cursor: pointer;
  min-height: 44px;
  margin-top: 4px;
}
.dl-text-action:hover {
  background: var(--line);
}
.dl-text-action:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.ride-times-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--navy);
  font-weight: 800;
  font-size: 13px;
  padding: 10px 14px;
  cursor: pointer;
  min-height: 40px;
  margin-top: 2px;
  border-radius: 10px;
}
.ride-times-toggle[hidden] {
  display: none;
}
.ride-times-toggle:hover {
  background: var(--soft, #f4f7fb);
}
.ride-times-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.ride-times-toggle__chevron {
  display: inline-block;
  transform: rotate(90deg);
  transition: transform .18s ease;
}
.ride-times-toggle__chevron.is-expanded {
  transform: rotate(-90deg);
}
@media (prefers-reduced-motion: reduce) {
  .ride-times-toggle__chevron {
    transition: none;
  }
}

.dl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 800;
  font-size: 14px;
  border-radius: 12px;
  padding: 12px 18px;
  min-height: 44px;
  cursor: pointer;
  text-decoration: none;
  border: 1.5px solid transparent;
}
.dl-btn--primary {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.dl-btn--primary:hover {
  background: var(--navy2, #04172f);
}
.dl-btn--outline {
  background: var(--card);
  color: var(--navy);
  border-color: var(--line);
}
.dl-btn--outline:hover {
  background: var(--soft, #f4f7fb);
}
.dl-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ── RIDE TIMES & CLOSURES ────────────────────────────────── */

.ride-times-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.ride-times-filter-group {
  position: relative;
}
.ride-times-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--soft, #f4f7fb);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 800;
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.ride-times-pill:hover {
  background: #eaf0f9;
}
.ride-times-pill[aria-expanded="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.ride-times-pill:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.ride-times-pill__value {
  font-weight: 900;
}
.ride-times-pill__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--navy);
  font-size: 10px;
  font-weight: 900;
}
.ride-times-pill__count[hidden] {
  display: none;
}

.ride-times-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: auto;
  z-index: 30;
  min-width: 200px;
  max-width: min(280px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(7, 31, 65, .18);
  padding: 6px;
}
.ride-times-popover[hidden] {
  display: none;
}
/* Right-align the second (Filter by Land) popover only once the
   toolbar pills sit side-by-side on one row (see .ride-times-toolbar
   flex-wrap) — below that width they stack, each pill starts near
   the card's left edge, and right-aligning would push the popover
   off the left side of the viewport (confirmed bug on mobile). */
@media (min-width: 640px) {
  .ride-times-filter-group:last-child .ride-times-popover {
    left: auto;
    right: 0;
  }
}

.ride-times-popover__option {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}
.ride-times-popover__option:hover {
  background: var(--soft, #f4f7fb);
}
.ride-times-popover__option.is-active {
  color: var(--navy);
  font-weight: 900;
  background: rgba(244, 184, 37, .12);
}
.ride-times-popover--lands {
  min-width: 220px;
  max-width: min(280px, calc(100vw - 32px));
}
.ride-times-popover__lands {
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ride-times-popover__land {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}
.ride-times-popover__land:hover {
  background: var(--soft, #f4f7fb);
}
.ride-times-popover__land input {
  accent-color: var(--navy);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.ride-times-popover__actions {
  border-top: 1px solid var(--line);
  margin-top: 4px;
  padding-top: 6px;
}
.ride-times-popover__clear {
  width: 100%;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  cursor: pointer;
  text-align: center;
}
.ride-times-popover__clear:hover {
  background: var(--soft, #f4f7fb);
  color: var(--navy);
}

/* Internal scroll once the list is expanded, so revealing every ride
   no longer pushes the rest of the page down — the card grows to a
   fixed max-height and scrolls its own contents instead. Collapsed
   view (PREVIEW_COUNT rows) never needs this, it's already short. */
.ride-time-list.is-scrollable {
  max-height: 560px;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
}

.ride-time-empty--filtered {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 8px;
}
.ride-time-empty__clear {
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 800;
  color: var(--navy);
  cursor: pointer;
}
.ride-time-empty__clear:hover {
  background: var(--soft, #f4f7fb);
}

/* ── RIDE MARQUEE CARDS (Ride Times & Closures) ─────────────────
   Shared component system for individual attraction rows. Added
   identically to both discover-disneyland.css and
   discover-walt-disney-world.css (each Discover page is a
   self-contained, page-scoped stylesheet by project convention).

   The renderer in js/discover-disneyland.js (and the WDW
   equivalent) applies these classes ALONGSIDE the original
   .ride-time-row* classes below — nothing about the underlying
   sort/filter/toggle/scroll/closures logic changed, only the
   generated markup gained extra class names so this visual layer
   could be added without touching any behavior. .ride-time-list,
   .ride-time-row--skeleton, .is-scrollable, .ride-time-empty*, and
   .ride-time-retry remain the functional hooks JS already uses;
   .ride-wait--low/moderate/high/very-high remain the EXISTING
   4-tier wait classification (0–20 / 21–40 / 41–60 / 61+) — this
   redesign re-skins those same classes rather than introducing a
   new scale. */

.ride-time-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ride-marquee-card {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 5px;
  border-radius: 6px;
  /* Gold "border" layer: clip-path cuts a rectangular border off at
     every notch, so a real border can't follow the shape. Instead
     this element IS the gold fill, clipped to the full notched
     outline; ::after sits 2px inset with the actual cream fill,
     clipped to the same notch shape at the smaller size — the
     resulting sliver of gold between the two traces every corner
     correctly, including the diagonal cuts. */
  background: var(--gold);
  box-shadow: 0 3px 10px rgba(7,31,65,.10);
  clip-path: polygon(
    14px 0, calc(100% - 14px) 0, 100% 14px,
    100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%,
    0 calc(100% - 14px), 0 14px
  );
}
.ride-marquee-card::after {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: 0;
  background: #fbf1dc;
  clip-path: polygon(
    12px 0, calc(100% - 12px) 0, 100% 12px,
    100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%,
    0 calc(100% - 12px), 0 12px
  );
}
.ride-marquee-card__details,
.ride-marquee-card__status {
  position: relative;
  z-index: 1;
}
/* Subtle alternating cream shades — understated, not high-contrast */
.ride-marquee-card:nth-child(even)::after {
  background: #f4e3c3;
}

.ride-marquee-card__details {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 10px 6px 10px 14px;
  overflow: hidden;
}
.ride-marquee-card__name {
  margin: 0;
  font-weight: 800;
  font-size: 15.5px;
  line-height: 1.28;
  color: var(--navy);
  overflow-wrap: break-word;
  word-break: break-word;
}
.ride-marquee-card__location {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.3;
  color: #5c6c88; /* softer navy-gray, distinct from body --muted */
  overflow-wrap: break-word;
}

.ride-marquee-card__status {
  flex-shrink: 0;
  align-self: center;
  width: 92px;
  min-height: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 4px;
  border-radius: 4px;
  /* Same gold-outline technique as .ride-marquee-card above. */
  background: var(--gold);
  clip-path: polygon(
    9px 0, calc(100% - 9px) 0, 100% 9px,
    100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%,
    0 calc(100% - 9px), 0 9px
  );
}
.ride-marquee-card__status::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: 0;
  background: var(--navy);
  clip-path: polygon(
    7px 0, calc(100% - 7px) 0, 100% 7px,
    100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%,
    0 calc(100% - 7px), 0 7px
  );
}
.ride-marquee-card__value,
.ride-marquee-card__label {
  position: relative;
  z-index: 1;
}
.ride-marquee-card__value {
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  color: var(--gold);
  white-space: nowrap;
}
.ride-marquee-card__label {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fbf1dc;
  text-align: center;
  line-height: 1.25;
}

/* Wait-level accents — reuses the existing ride-wait--* classes the
   renderer already assigns; this only changes their color/emphasis
   inside the new marquee panel. Status is never conveyed by color
   alone — the MIN WAIT / CLOSED / DOWN label text always says so too. */
.ride-wait--low .ride-marquee-card__value { color: var(--gold); }
.ride-wait--moderate .ride-marquee-card__value { color: #e0a72e; }
.ride-wait--high .ride-marquee-card__value { color: #c97b2e; }
.ride-wait--very-high .ride-marquee-card__value { color: #b5651d; }

/* Non-numeric status variants (OPEN / DOWN / REFURB / CLOSED) —
   modifier classes added by the renderer alongside the existing
   .ride-time-row__wait--status class. Reduced emphasis rather than
   red/traffic-light coloring, matching Jiminy's palette. */
.ride-marquee-card__status.is-closed::before {
  background: #2c3f5c;
}
.ride-marquee-card__status.is-closed .ride-marquee-card__label {
  color: #cbd4e3;
}
.ride-marquee-card__status.is-down::before {
  background: #1c2f4d;
}
.ride-marquee-card__status.is-down .ride-marquee-card__label {
  color: #ffd9a8;
}
.ride-marquee-card__status.is-temporarily-closed .ride-marquee-card__label {
  color: #e8d9b0;
}
.ride-marquee-card__status.is-unavailable::before {
  background: #33445e;
}
.ride-marquee-card__status.is-unavailable .ride-marquee-card__label {
  color: #d7deeb;
}
.ride-marquee-card__status .ride-marquee-card__label--status {
  font-size: 11.5px;
  letter-spacing: .03em;
}

@media (max-width: 480px) {
  .ride-marquee-card__details {
    padding: 8px 4px 8px 12px;
  }
  .ride-marquee-card__name {
    font-size: 14px;
  }
  .ride-marquee-card__location {
    font-size: 11.5px;
  }
  .ride-marquee-card__status {
    width: 78px;
    min-height: 56px;
  }
  .ride-marquee-card__value {
    font-size: 21px;
  }
  .ride-marquee-card__label {
    font-size: 8.5px;
  }
}

/* Loading skeleton rows — kept as their original simple shimmer
   bars, just reshaped to sit inside the new card outline so the
   loading state doesn't look broken next to live marquee cards. */
.ride-time-row--skeleton {
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 2px solid var(--line);
  border-radius: 6px;
  background: #fbf1dc;
}
.ride-time-row--skeleton .ride-time-row__info {
  flex: 1 1 auto;
  min-width: 0;
}
.ride-time-row--skeleton .ride-time-row__wait {
  flex-shrink: 0;
  width: 92px;
  height: 46px;
  border-radius: 4px;
  background: var(--line);
}

/* Loading skeleton rows */
.ride-skeleton-line {
  display: block;
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--line) 0%, var(--soft, #f4f7fb) 50%, var(--line) 100%);
  background-size: 200% 100%;
  animation: rideSkeletonShimmer 1.4s ease-in-out infinite;
}
.ride-skeleton-line--name { width: 70%; margin-bottom: 8px; }
.ride-skeleton-line--land { width: 45%; height: 8px; }
@keyframes rideSkeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ride-skeleton-line { animation: none; }
}

/* Empty / error state inside the ride list */
.ride-time-empty {
  list-style: none;
  padding: 18px 4px;
  text-align: center;
}
.ride-time-empty__text {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
}
.ride-time-retry {
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  min-height: 40px;
}
.ride-time-retry:hover { background: var(--navy2, #04172f); }
.ride-time-retry:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.closures-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: #fdeceb;
  border: 1px solid #f3c8c5;
  color: #8a2f2c;
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 12px;
  cursor: pointer;
  text-align: left;
  min-height: 44px;
}
.closures-strip__icon {
  flex-shrink: 0;
}
.closures-strip__label {
  flex-shrink: 0;
  font-weight: 900;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.closures-strip__detail {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.closures-strip__chevron {
  flex-shrink: 0;
  transition: transform .15s ease;
}
.closures-strip.is-expanded .closures-strip__chevron {
  transform: rotate(90deg);
}
.closures-strip:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Sort + Filter by Land side-by-side on mobile. Grid (not flex-wrap)
   guarantees they stay on one row and share the available width
   instead of overflowing — Sort gets the flexible 1fr track since
   its label is the longer of the two, Filter sizes to its content. */
@media (max-width: 480px) {
  .ride-times-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
  }
  .ride-times-filter-group {
    min-width: 0;
  }
  .ride-times-pill {
    width: 100%;
    justify-content: center;
    padding: 8px 10px;
    font-size: 11.5px;
    white-space: normal; /* wrap within the pill rather than overflow, if ever needed */
  }
  /* Filter by Land is now always the right-hand grid column at this
     width (not stacked below Sort), so its popover must anchor from
     the right edge too, or it overflows off the right side of the
     viewport — the original left:0 default assumed a stacked mobile
     layout that no longer applies once these sit side-by-side. */
  .ride-times-filter-group:last-child .ride-times-popover {
    left: auto;
    right: 0;
  }
}

/* Closures panel — expandable list of Closed/Refurb attractions,
   toggled by #rideTimesClosuresStrip. Reuses the same
   .ride-marquee-card* classes as the primary list via a --compact
   modifier below, rather than a separate card design. */
.ride-closures-panel {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ride-closures-panel[hidden] {
  display: none;
}
.ride-closures-panel__empty {
  padding: 10px 4px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}
.ride-marquee-card--compact {
  min-height: 0;
}
.ride-marquee-card--compact .ride-marquee-card__details {
  padding: 8px 6px 8px 12px;
}
.ride-marquee-card--compact .ride-marquee-card__name {
  font-size: 14px;
}
.ride-marquee-card--compact .ride-marquee-card__location {
  font-size: 11.5px;
}
.ride-marquee-card--compact .ride-marquee-card__status {
  width: 76px;
  min-height: 46px;
  padding: 6px 4px;
}
.ride-marquee-card--compact .ride-marquee-card__label--status {
  font-size: 10.5px;
}

/* ── RIDE ADVISOR (Phase D1A) ──────────────────────────────────
   Scoped entirely to #rideAdvisor / .ride-advisor-option*. Reuses
   .discover-card / .discover-card__body / .dl-btn from the shared
   card shell above — no new card chrome invented here. */

.ride-advisor__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ride-advisor__eyebrow {
  margin: 0;
  font-weight: 800;
  color: var(--navy);
  font-size: 15px;
}
.ride-advisor__intro {
  margin: 4px 0 14px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.ride-advisor__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
.ride-advisor__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 220px;
  min-width: 0;
}
.ride-advisor__field label {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--navy);
}
.ride-advisor__field select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}
.ride-advisor__field select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.ride-advisor__field select:disabled {
  opacity: .6;
  cursor: not-allowed;
}
.ride-advisor__ask {
  flex: 0 0 auto;
}
.ride-advisor__ask:disabled {
  opacity: .65;
  cursor: not-allowed;
}
@media (max-width: 480px) {
  .ride-advisor__controls {
    flex-direction: column;
    align-items: stretch;
  }
  .ride-advisor__field,
  .ride-advisor__ask {
    flex: 1 1 auto;
    width: 100%;
  }
}

/* STATUS — loading / sign-in-required. Shared aria-live region;
   content written by renderRideAdvisor(). */
.ride-advisor__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 2px 4px;
}
.ride-advisor__status[hidden] { display: none; }
.ride-advisor__status-text {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}
.ride-advisor__spinner {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2.5px solid rgba(7,31,65,.14);
  border-top-color: var(--navy);
  animation: rideAdvisorSpin .7s linear infinite;
}
@keyframes rideAdvisorSpin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ride-advisor__spinner {
    animation: none;
    border-top-color: rgba(7,31,65,.4);
  }
}

/* CONVERSATION — success + zero-option state */
.ride-advisor__conversation {
  padding-top: 4px;
}
.ride-advisor__conversation[hidden] { display: none; }

/* PARK-STATE BANNER — PARK_CLOSED / PARK_OPENING_SOON /
   PARK_CLOSING_SOON. A calm, non-error presentation: navy/cream
   base with a small gold-accented icon roundel, matching
   .discover-card__icon rather than inventing new chrome. Modifier
   classes only change the accent tint — layout is shared. */
.ride-advisor__park-state {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 10px 0 16px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--cream, #fbf7ee);
  border: 1px solid var(--line);
}
.ride-advisor__park-state[hidden] { display: none; }
.ride-advisor__park-state-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  background: rgba(7,31,65,.08);
  color: var(--navy);
}
.ride-advisor__park-state-copy {
  min-width: 0;
}
.ride-advisor__park-state-label {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy);
}
.ride-advisor__park-state-detail {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
}
.ride-advisor__park-state-detail[hidden] { display: none; }

/* Closed — restrained nighttime treatment, no glow, no red. */
.ride-advisor__park-state--closed .ride-advisor__park-state-icon {
  background: rgba(7,31,65,.12);
  color: var(--navy);
}
.ride-advisor__park-state--closed .ride-advisor__park-state-label {
  color: var(--navy);
}

/* Opening soon — subtle gold accent. */
.ride-advisor__park-state--opening {
  background: rgba(244,184,37,.1);
  border-color: rgba(244,184,37,.4);
}
.ride-advisor__park-state--opening .ride-advisor__park-state-icon {
  background: rgba(244,184,37,.22);
  color: #9a6c00;
}
.ride-advisor__park-state--opening .ride-advisor__park-state-label {
  color: #9a6c00;
}

/* Closing soon — same warm amber/gold family, distinct from an
   error/alert red, per project convention elsewhere on this page. */
.ride-advisor__park-state--closing {
  background: rgba(244,184,37,.1);
  border-color: rgba(244,184,37,.4);
}
.ride-advisor__park-state--closing .ride-advisor__park-state-icon {
  background: rgba(244,184,37,.22);
  color: #9a6c00;
}
.ride-advisor__park-state--closing .ride-advisor__park-state-label {
  color: #9a6c00;
}

.ride-advisor__message {
  margin: 10px 0 14px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}
.ride-advisor__message[hidden] { display: none; }
.ride-advisor__options {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.ride-advisor__options[hidden] { display: none; }
@media (min-width: 640px) {
  .ride-advisor__options {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

.ride-advisor-option {
  position: relative;
  background: var(--soft, #f4f7fb);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  min-width: 0;
}
.ride-advisor-option--primary {
  background: var(--card);
  border-color: var(--gold);
  box-shadow: 0 8px 22px rgba(244,184,37,.18);
}
.ride-advisor-option__badge {
  position: absolute;
  top: 12px;
  right: 14px;
  color: var(--gold);
  font-size: 15px;
}
.ride-advisor-option__label {
  margin: 0 0 4px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gold);
}
.ride-advisor-option__title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.3;
  overflow-wrap: break-word;
}
.ride-advisor-option__meta {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.ride-advisor-option__reason {
  margin: 0 0 6px;
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.5;
}
.ride-advisor-option__context {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  /* Dead as of D1B: guest_context moved into the collapsible
     "Why this?" explanation panel below instead of always
     rendering inline. Left in place, harmless, per this
     project's existing convention of not deleting now-unused
     rules mid-refactor. */
}

/* D1B — recommendation card actions (Head There / Add to Plan /
   Why this?) and the collapsible explanation panel. */
.ride-advisor-option__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.ride-advisor-option__explanation-toggle {
  background: none;
  border: none;
  padding: 10px 4px;
  min-height: 44px;
  font-size: 13px;
  font-weight: 800;
  color: var(--navy);
  text-decoration: underline;
  cursor: pointer;
}
.ride-advisor-option__explanation-toggle:disabled {
  opacity: .6;
  cursor: not-allowed;
}
.ride-advisor-option__explanation {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(7,31,65,.05);
}
.ride-advisor-option__explanation[hidden] { display: none; }
.ride-advisor-option__explanation-text {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
}
.ride-advisor-option__explanation-meta {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}
@media (max-width: 480px) {
  .ride-advisor-option__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .ride-advisor-option__primary-action,
  .ride-advisor-option__secondary-action {
    width: 100%;
  }
}

/* D1B — shared Plan selector / "no Plans" note, one instance for
   the whole card list, never per-option. */
.ride-advisor__plan-control {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0 14px;
}
.ride-advisor__plan-control[hidden] { display: none; }
.ride-advisor__plan-control label {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--navy);
}
.ride-advisor__plan-control select {
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}
.ride-advisor__plan-control select:disabled {
  opacity: .6;
  cursor: not-allowed;
}
.ride-advisor__plan-note {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--muted);
}
.ride-advisor__plan-note[hidden] { display: none; }

/* D1B — shared, session-level "Not right now" decline action.
   Deliberately subdued relative to Head There/Add to Plan. */
.ride-advisor__decline {
  display: inline-block;
  margin: 2px 0 16px;
  padding: 10px 4px;
  min-height: 44px;
  background: none;
  border: none;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
  text-align: left;
}
.ride-advisor__decline[hidden] { display: none; }
.ride-advisor__decline:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* D1B — "Saving your choice…" / "Adding this to your Plan…" /
   "Got it…" banner while a final response is in flight. Cards
   stay visible underneath (see renderRideAdvisorConversation). */
.ride-advisor__submitting {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 14px;
}
.ride-advisor__submitting[hidden] { display: none; }
.ride-advisor__submitting span:last-child {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted);
}

/* D1B — inline, non-fatal choice failure. Distinct from the
   top-level .ride-advisor__error (which fully replaces the
   conversation) — this sits *within* the still-visible cards. */
.ride-advisor__choice-error {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(178,58,58,.08);
  color: #7a2b2b;
  font-size: 13.5px;
  font-weight: 700;
}
.ride-advisor__choice-error[hidden] { display: none; }

/* D1B.1A — "I couldn't refresh… these are still my latest
   suggestions." Calm and muted, unlike .ride-advisor__choice-error —
   a refresh failure that still has good data to show isn't an
   alarming event, so no red tint here. */
.ride-advisor__refresh-notice {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
}
.ride-advisor__refresh-notice[hidden] { display: none; }

/* D1B — completed-session confirmation (Head There / Add to Plan /
   Not right now all land here). */
.ride-advisor__success {
  padding: 6px 0 4px;
}
.ride-advisor__success[hidden] { display: none; }
.ride-advisor__success-title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 800;
  color: var(--navy);
}
.ride-advisor__success-message {
  margin: 0;
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.55;
}

/* .dl-btn sets display:inline-flex, which (being an author rule)
   otherwise beats the UA [hidden]{display:none} default at equal
   specificity — this small override guarantees hidden buttons in
   the shared actions row (e.g. View Plan) actually disappear. */
.ride-advisor__actions [hidden] { display: none; }

.ride-advisor__question {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 800;
  color: var(--navy);
}
.ride-advisor__question[hidden] { display: none; }
.ride-advisor__commitment {
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--muted);
  font-style: italic;
}
.ride-advisor__commitment[hidden] { display: none; }
.ride-advisor__actions {
  display: flex;
}

/* ERROR */
.ride-advisor__error {
  padding-top: 14px;
}
.ride-advisor__error[hidden] { display: none; }
.ride-advisor__error p {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

/* ── FOODIE GUIDES ────────────────────────────────────────── */
.foodie-feature {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
}
.foodie-feature__image {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16/10;
  background: var(--soft, #f4f7fb);
}
.foodie-feature__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dl-img-fallback img { display: none; }
.dl-img-fallback {
  background: linear-gradient(135deg, rgba(244,184,37,.18), rgba(244,184,37,.05));
}
.foodie-feature__text h3 {
  font-family: Georgia, serif;
  color: var(--navy);
  font-size: 20px;
  margin: 0 0 6px;
  line-height: 1.15;
}
.foodie-feature__text p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
@media (min-width: 560px) {
  .foodie-feature {
    flex-direction: row;
    align-items: stretch;
  }
  .foodie-feature__image {
    flex: 0 0 44%;
    aspect-ratio: auto;
  }
  .foodie-feature__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.foodie-shortcuts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px;
}
.foodie-shortcut {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--soft, #f4f7fb);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 6px;
  cursor: pointer;
  min-height: 44px;
  text-align: center;
}
.foodie-shortcut:hover {
  background: var(--line);
}
.foodie-shortcut:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.foodie-shortcut__icon {
  font-size: 20px;
}
.foodie-shortcut__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

/* ── FOODIE GUIDE — V1 discovery experience ──────────────────
   .foodie-feature / .foodie-shortcuts above are the legacy /
   still-shared rules (shortcuts are reused as-is for the new
   quick category grid). Everything below is new for the V1
   Foodie Guide redesign — hero, carousels, seasonal spotlight,
   hidden gems, Food Advisor promo, and coming-soon grid. */

.foodie-hero {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
}
.foodie-hero__image {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--soft, #f4f7fb);
}
.foodie-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.foodie-hero__text h3 {
  font-family: Georgia, serif;
  color: var(--navy);
  font-size: 22px;
  margin: 0 0 6px;
  line-height: 1.15;
}
.foodie-hero__text p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
@media (min-width: 560px) {
  .foodie-hero {
    flex-direction: row;
    align-items: stretch;
  }
  .foodie-hero__image {
    flex: 0 0 46%;
    aspect-ratio: auto;
  }
  .foodie-hero__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.foodie-shortcuts {
  margin-top: 18px;
}

.foodie-section {
  margin-top: 26px;
}
.foodie-section__head {
  margin-bottom: 12px;
}
.foodie-section__head h3 {
  font-family: Georgia, serif;
  color: var(--navy);
  font-size: 18px;
  margin: 0 0 4px;
  line-height: 1.2;
}
.foodie-section__head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

/* Shared horizontal-scroll carousel shell (mirrors .hotels-track) */
.foodie-carousel {
  list-style: none;
  margin: 0;
  padding: 2px 2px 6px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(168px, 46%);
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 760px) {
  .foodie-carousel {
    grid-auto-columns: minmax(190px, 23%);
  }
}

.foodie-food-card {
  scroll-snap-align: start;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card);
  display: flex;
  flex-direction: column;
}
.foodie-food-card__image {
  aspect-ratio: 4/3;
  background: var(--soft, #f4f7fb);
}
.foodie-food-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.foodie-food-card__body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.foodie-food-card__name {
  margin: 0;
  font-weight: 800;
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.3;
}
.foodie-food-card__meta {
  margin: 0;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
}
.foodie-food-card__stats {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
  font-size: 11.5px;
  color: var(--muted);
}
.foodie-food-card__stats strong {
  color: var(--ink);
}
.foodie-food-card__rating {
  color: var(--gold);
}
.foodie-food-card__add {
  margin-top: auto;
  appearance: none;
  border: 1.5px solid var(--navy);
  background: var(--card);
  color: var(--navy);
  font-weight: 800;
  font-size: 12px;
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
  min-height: 38px;
}
.foodie-food-card__add:hover {
  background: var(--soft, #f4f7fb);
}
.foodie-food-card__add:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Seasonal Spotlight — marquee card with limited-time badge */
.foodie-seasonal {
  margin-top: 26px;
  background: var(--soft, #f4f7fb);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 16px 4px;
}
.foodie-seasonal .foodie-section__head {
  padding: 0 2px;
}
.foodie-seasonal .foodie-carousel {
  background: transparent;
}
.foodie-seasonal-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(244,184,37,.16);
  color: #8a6100;
  font-size: 10.5px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 999px;
  margin-bottom: 6px;
  align-self: flex-start;
}

/* Hidden Gems — compact discovery cards */
.foodie-gems {
  list-style: none;
  margin: 0;
  padding: 2px 2px 6px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 60%);
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 760px) {
  .foodie-gems {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    overflow-x: visible;
  }
}
.foodie-gem-card {
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  min-height: 44px;
  width: 100%;
}
.foodie-gem-card:hover {
  background: var(--soft, #f4f7fb);
}
.foodie-gem-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.foodie-gem-card__icon {
  flex-shrink: 0;
  font-size: 18px;
}
.foodie-gem-card__label {
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.35;
}

/* Food Advisor premium promo — Explorer Pass conversion card */
.foodie-advisor {
  margin-top: 26px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy2, #04172f) 100%);
  border-radius: 18px;
  padding: 22px 20px;
  color: #fff;
}
.foodie-advisor__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gold);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.foodie-advisor__text {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
}
.foodie-advisor__list {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.foodie-advisor__list li {
  font-size: 13px;
  color: rgba(255,255,255,.82);
  line-height: 1.4;
  padding-left: 16px;
  position: relative;
}
.foodie-advisor__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}
@media (min-width: 560px) {
  .foodie-advisor__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
.foodie-advisor__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.foodie-advisor__cta {
  appearance: none;
  border: none;
  background: var(--gold);
  color: var(--navy);
  font-weight: 800;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 999px;
  cursor: pointer;
  min-height: 44px;
}
.foodie-advisor__cta:hover {
  filter: brightness(1.05);
}
.foodie-advisor__cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.foodie-advisor__subtitle {
  font-size: 12.5px;
  color: rgba(255,255,255,.72);
}

/* Coming Soon */
.foodie-coming-soon {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.foodie-coming-soon h3 {
  font-family: Georgia, serif;
  color: var(--navy);
  font-size: 17px;
  margin: 0 0 12px;
}
.foodie-coming-soon__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.foodie-coming-soon__card {
  display: block;
  background: var(--soft, #f4f7fb);
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 14px 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  line-height: 1.35;
}

/* ── FROM THE COMMUNITY ───────────────────────────────────── */
.community-grid {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 480px) {
  .community-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.community-media-tile {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--soft, #f4f7fb);
  display: block;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 100%;
}
.community-media-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.community-media-tile__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(7,31,65,.68);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.community-media-tile__likes {
  position: absolute;
  left: 6px;
  bottom: 6px;
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(7,31,65,.68);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 999px;
}
.community-media-tile:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ── PARK HOURS ────────────────────────────────────────────── */
.park-hours-list {
  margin: 0 0 4px;
}
.park-hours-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.park-hours-row:last-child {
  border-bottom: none;
}
.park-hours-row dt {
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
}
.park-hours-row dd {
  margin: 0;
  font-weight: 800;
  font-size: 13px;
  color: #317a4d;
  white-space: nowrap;
}
.park-hours-card .dl-btn--outline {
  width: 100%;
  margin-top: 12px;
}
.park-hours-row--skeleton { pointer-events: none; }
.park-hours-skeleton-line {
  display: inline-block;
  width: 120px;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--line) 0%, var(--soft, #f4f7fb) 50%, var(--line) 100%);
  background-size: 200% 100%;
  animation: rideSkeletonShimmer 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .park-hours-skeleton-line { animation: none; }
}
.park-hours-row dd.park-hours-time--closed {
  color: var(--muted);
}
.park-hours-row dd.park-hours-time--unavailable {
  color: var(--muted);
  font-weight: 700;
  font-style: italic;
}
.dl-sample-note--error {
  color: #b3441f;
}

/* ── FULL CALENDAR MODAL ──────────────────────────────────── */
.park-calendar-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(7, 31, 65, .52);
  backdrop-filter: blur(4px);
}
.park-calendar-modal.is-open {
  display: flex;
}
.park-calendar-dialog {
  width: min(560px, 100%);
  max-height: 86vh;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 22px;
  box-shadow: 0 24px 70px rgba(7, 31, 65, .28);
}
.park-calendar-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.park-calendar-dialog__head h3 {
  margin: 0;
  font-weight: 900;
  color: var(--navy);
  font-size: 20px;
}
.park-calendar-dialog__close {
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
}
.park-calendar-dialog__close:hover { color: var(--navy); }
.park-calendar-dialog__close:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.park-calendar-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.park-calendar-tab {
  flex: 1;
  background: var(--soft, #f4f7fb);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 10px;
  font-weight: 800;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  text-align: center;
}
.park-calendar-tab.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.park-calendar-days {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 56vh;
  overflow: auto;
}
.park-calendar-day {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--line);
}
.park-calendar-day:last-child { border-bottom: none; }
.park-calendar-day__hours-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.park-calendar-day__date {
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
}
.park-calendar-day__hours {
  margin: 0;
  font-weight: 800;
  font-size: 13px;
  color: #317a4d;
  white-space: nowrap;
  text-align: right;
}
.park-calendar-day__hours--closed {
  color: var(--muted);
}
.park-calendar-day__badges {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold, #b8860b);
  text-align: right;
}
.park-calendar-empty,
.park-calendar-error {
  padding: 24px 4px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
@media (prefers-reduced-motion: reduce) {
  .park-calendar-modal { transition: none; }
}

/* ── NEWS & INFORMATION ───────────────────────────────────── */
.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.news-row {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.news-row:last-child {
  border-bottom: none;
}
.news-row__thumb {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--soft, #f4f7fb);
}
.news-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.news-row__body {
  flex: 1;
  min-width: 0;
}
.news-row__badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 4px;
}
.news-row__badge--new {
  background: #1d5fcd;
  color: #fff;
}
.news-row__badge--update {
  background: #b6403d;
  color: #fff;
}
.news-row__title {
  margin: 0 0 3px;
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
}
.news-row__excerpt {
  margin: 0 0 4px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
}
.news-row__date {
  font-size: 11px;
  color: var(--muted);
}

/* ── TICKETS ───────────────────────────────────────────────── */
.tickets-feature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
}
.tickets-feature__icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tickets-feature__icon svg {
  width: 30px;
  height: 30px;
}
.tickets-feature__text h3 {
  font-family: Georgia, serif;
  color: var(--navy);
  font-size: 19px;
  margin: 0 0 6px;
  line-height: 1.2;
}
.tickets-feature__text p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.tickets-feature__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* ── GOOD NEIGHBOR HOTELS ─────────────────────────────────── */
.hotels-track {
  list-style: none;
  margin: 0 0 16px;
  padding: 2px 2px 6px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(160px, 72%);
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 760px) {
  .hotels-track {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, 1fr);
    overflow-x: visible;
  }
}
.hotel-preview-card {
  scroll-snap-align: start;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card);
  display: block;
  text-decoration: none;
  color: inherit;
}
.hotel-preview-card__image {
  aspect-ratio: 4/3;
  background: var(--soft, #f4f7fb);
}
.hotel-preview-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hotel-preview-card__body {
  padding: 10px 12px 12px;
}
.hotel-preview-card__name {
  margin: 0 0 3px;
  font-weight: 800;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.3;
}
.hotel-preview-card__distance {
  margin: 0;
  font-size: 11.5px;
  color: var(--muted);
}
.hotel-preview-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.hotels-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--soft, #f4f7fb);
  border-radius: 14px;
  padding: 14px 16px;
}
.hotels-cta p {
  margin: 0;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.4;
}

/* ── PARK SELECTOR ─────────────────────────────────────────── */
.dl-park-selector {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 16px;
  margin-bottom: 4px;
  scrollbar-width: thin;
}
.dl-park-selector__button {
  flex: 0 0 auto;
  appearance: none;
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--navy);
  font-weight: 800;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  min-height: 44px;
  white-space: nowrap;
}
.dl-park-selector__button:hover {
  border-color: var(--gold);
}
.dl-park-selector__button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.dl-park-selector__button.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.dl-park-selector__button.is-active:hover {
  border-color: var(--gold);
}
.park-hours-row--selected dt {
  color: var(--navy);
}
.park-hours-row--selected {
  background: rgba(244,184,37,.08);
  margin: 0 -18px;
  padding: 11px 18px;
  border-radius: 10px;
  border-bottom: 1px solid transparent;
}

/* ── REDUCED MOTION ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .discover-card,
  .community-media-tile,
  .hotel-preview-card,
  .foodie-shortcut,
  .dl-park-selector__button {
    transition: none;
    scroll-behavior: auto;
  }
}

/* ── ADVENTURE CLOCK ──────────────────────────────────────────
   Cream/navy/gold ceremonial countdown card. Uses the same design
   tokens as the rest of the page (--navy, --gold, --cream, --ink,
   --muted, --shadow) rather than introducing new colors. */

.adventure-clock {
  position: relative;
  margin-top: 6px;
  padding: 24px 20px 26px;
  border-radius: 26px;
  background: var(--cream);
  border: 2px solid var(--navy);
  outline: 1px solid rgba(244, 184, 37, .55);
  outline-offset: -6px;
  box-shadow: var(--shadow);
  text-align: center;
  overflow: hidden;
}

/* Decorative sparkles — hidden from assistive tech via aria-hidden on
   the wrapper in markup; purely visual. */
.adventure-clock__sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease;
}
.adventure-clock.is-rope-drop-transition .adventure-clock__sparkles,
.adventure-clock.is-showing-welcome .adventure-clock__sparkles {
  opacity: 1;
}
.adventure-clock__sparkle {
  position: absolute;
  color: var(--gold);
  font-size: 14px;
  opacity: 0;
  animation: adventureSparkleFloat 3.2s ease-in-out infinite;
}
.adventure-clock__sparkle--1 { top: 18%; left: 10%; font-size: 12px; animation-delay: 0s; }
.adventure-clock__sparkle--2 { top: 60%; left: 6%; font-size: 16px; animation-delay: .5s; }
.adventure-clock__sparkle--3 { top: 30%; right: 9%; font-size: 18px; animation-delay: 1s; }
.adventure-clock__sparkle--4 { top: 70%; right: 12%; font-size: 12px; animation-delay: 1.5s; }
.adventure-clock__sparkle--5 { top: 12%; left: 42%; font-size: 11px; animation-delay: .8s; }
.adventure-clock__sparkle--6 { top: 78%; left: 55%; font-size: 13px; animation-delay: 2s; }
@keyframes adventureSparkleFloat {
  0%   { opacity: 0; transform: translateY(6px) scale(.7); }
  30%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-10px) scale(1); }
}

.adventure-clock__content {
  position: relative;
  z-index: 1;
}

.adventure-clock__eyebrow {
  margin: 4px 0 2px;
  font-size: clamp(11px, 3vw, 13px);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: .8;
}

.adventure-clock__event {
  margin: 2px 0 10px;
  font-size: clamp(26px, 8vw, 44px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--navy);
}

.adventure-clock__divider {
  width: min(220px, 70%);
  height: 10px;
  margin: 0 auto 18px;
  background:
    radial-gradient(circle, var(--gold) 0 3px, transparent 4px) center / 10px 10px no-repeat,
    linear-gradient(to right, transparent, var(--gold) 15%, var(--gold) 85%, transparent);
  background-size: 10px 10px, 100% 1px;
  background-position: center, center;
  background-repeat: no-repeat;
}

.adventure-clock__countdown {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(6px, 2vw, 14px);
  flex-wrap: wrap;
  margin: 0 auto 10px;
}
.adventure-clock__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: clamp(58px, 20vw, 84px);
  padding: 10px 6px 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(7, 31, 65, .06);
}
.adventure-clock__num {
  font-size: clamp(28px, 9vw, 40px);
  font-weight: 900;
  line-height: 1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.adventure-clock__unit small {
  font-size: clamp(9px, 2.6vw, 11px);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
}
.adventure-clock__separator {
  align-self: center;
  font-size: clamp(20px, 6vw, 30px);
  font-weight: 900;
  color: var(--gold);
  padding-bottom: 14px;
}

.adventure-clock__status {
  margin: 6px 0 0;
  font-size: clamp(11px, 3vw, 13px);
  font-style: italic;
  color: var(--muted);
}

.adventure-clock__message {
  /* Positioned to overlay the same area the eyebrow/event/divider/
     countdown/status occupy (they stay in normal flow, just faded to
     opacity:0 during is-showing-welcome — see STATE VISIBILITY below)
     rather than stacking below them. This is what keeps the container
     the exact same height at all times and puts the welcome text
     exactly where the countdown numbers were, instead of leaving
     empty reserved space above it. */
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 480px;
  margin: 0 auto;
  padding: 6px 24px;
  font-size: clamp(15px, 4.4vw, 19px);
  line-height: 1.5;
  color: var(--navy);
  font-style: italic;
}
.adventure-clock.is-showing-welcome .adventure-clock__message {
  display: flex;
}
.adventure-clock__message strong {
  display: block;
  margin-top: 8px;
  font-size: clamp(12px, 3.2vw, 14px);
  font-style: normal;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--gold);
}

/* ── STATE VISIBILITY ─────────────────────────────────────────
   Default (is-counting / is-park-close): countdown visible, message
   hidden. Welcome state: countdown hidden, message visible. */
.adventure-clock .adventure-clock__message[hidden] { display: none; }

.adventure-clock.is-showing-welcome .adventure-clock__countdown,
.adventure-clock.is-showing-welcome .adventure-clock__eyebrow,
.adventure-clock.is-showing-welcome .adventure-clock__event,
.adventure-clock.is-showing-welcome .adventure-clock__divider,
.adventure-clock.is-showing-welcome .adventure-clock__status {
  opacity: 0;
  transform: scale(.92);
  transition: opacity .7s ease, transform .7s ease;
  pointer-events: none;
}
.adventure-clock.is-showing-welcome .adventure-clock__message {
  animation: adventureWelcomeIn 1s ease .4s both;
}
@keyframes adventureWelcomeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Countdown numbers briefly pulse-scale right as a transition begins,
   before the welcome text takes over (rope-drop transition only). */
.adventure-clock.is-rope-drop-transition .adventure-clock__countdown {
  animation: adventureCountdownFade 1.6s ease forwards;
}
@keyframes adventureCountdownFade {
  0%   { opacity: 1; transform: scale(1); }
  40%  { opacity: .7; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(.9); }
}

/* Nighttime transition when Park Close hits zero */
.adventure-clock.is-park-close-transition {
  animation: adventureNightfall 2.6s ease forwards;
}
@keyframes adventureNightfall {
  0%   { background: var(--cream); }
  50%  { background: #16264a; }
  100% { background: var(--cream); }
}
.adventure-clock__night-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}
.adventure-clock.is-park-close-transition .adventure-clock__night-stars {
  opacity: 1;
  transition: opacity .8s ease;
}

/* Loading / unavailable states — quiet, no animated chrome */
.adventure-clock.is-loading .adventure-clock__sparkles,
.adventure-clock.is-unavailable .adventure-clock__sparkles {
  display: none;
}
.adventure-clock.is-loading .adventure-clock__num,
.adventure-clock.is-unavailable .adventure-clock__num {
  color: var(--muted);
}
.adventure-clock.is-unavailable .adventure-clock__eyebrow,
.adventure-clock.is-unavailable .adventure-clock__divider,
.adventure-clock.is-unavailable .adventure-clock__countdown {
  display: none;
}
.adventure-clock.is-loading .adventure-clock__divider {
  opacity: .35;
}

/* ── REDUCED MOTION — replace sparkle/scale/pulse with simple fades */
@media (prefers-reduced-motion: reduce) {
  .adventure-clock__sparkle,
  .adventure-clock__countdown,
  .adventure-clock__message,
  .adventure-clock.is-park-close-transition {
    animation: none !important;
  }
  .adventure-clock.is-showing-welcome .adventure-clock__countdown,
  .adventure-clock.is-showing-welcome .adventure-clock__eyebrow,
  .adventure-clock.is-showing-welcome .adventure-clock__event,
  .adventure-clock.is-showing-welcome .adventure-clock__divider,
  .adventure-clock.is-showing-welcome .adventure-clock__status,
  .adventure-clock.is-rope-drop-transition .adventure-clock__countdown {
    transition: opacity .4s ease;
    transform: none;
  }
  .adventure-clock__message {
    transition: opacity .4s ease;
  }
}

/* ── MOBILE (~320px and up) ───────────────────────────────────
   clamp() above already handles most fluid sizing; this tightens
   spacing further at the smallest widths so nothing overflows. */
@media (max-width: 420px) {
  .adventure-clock {
    padding: 30px 12px 20px;
  }
  .adventure-clock__countdown {
    gap: 6px;
  }
  .adventure-clock__unit {
    min-width: 62px;
    padding: 8px 4px 6px;
  }
  .adventure-clock__separator {
    padding-bottom: 12px;
  }
}



/* ── ADVENTURE INTELLIGENCE ────────────────────────────────────
   One unified summary sub-container inside the Adventure Clock,
   below the countdown. Cream/navy/gold, matching the rest of the
   card. Hidden during the Rope Drop welcome overlay (same fade
   treatment as the rest of the countdown content) so it never
   competes with that full-width message. */
.adventure-intelligence {
  width: 100%;
  max-width: 420px;
  margin: 18px auto 0;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(7,31,65,.12);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(7,31,65,.08);
  overflow: hidden;
}
.adventure-intelligence__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: none;
  text-align: left;
  font: inherit;
  color: inherit;
}
button.adventure-intelligence__row--upgrade {
  cursor: pointer;
  align-items: center;
}
button.adventure-intelligence__row--upgrade:hover {
  background: rgba(244,184,37,.1);
}
button.adventure-intelligence__row--upgrade:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}
.adventure-intelligence__row-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(244,184,37,.14);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin-top: 1px;
}
.adventure-intelligence__row-content {
  flex: 1;
  min-width: 0;
}
.adventure-intelligence__row-title {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--navy);
}
.adventure-intelligence__row-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink);
}
.adventure-intelligence__row-support {
  margin: 3px 0 0;
  font-size: 10.5px;
  font-style: italic;
  color: var(--muted);
}
.adventure-intelligence__row-support[hidden] {
  display: none;
}
.adventure-intelligence__divider {
  height: 1px;
  background: rgba(7,31,65,.1);
  margin: 0 14px;
}
.adventure-intelligence__row--upgrade .adventure-intelligence__row-title {
  color: var(--navy);
  font-size: 13.5px;
}
.adventure-intelligence__row--upgrade .adventure-intelligence__row-text {
  font-size: 12px;
  color: var(--muted);
}
.adventure-intelligence__chevron {
  flex-shrink: 0;
  color: var(--gold);
  font-size: 18px;
  align-self: center;
}

@media (max-width: 420px) {
  .adventure-intelligence__row {
    padding: 10px 12px;
    gap: 10px;
  }
  .adventure-intelligence__row-text {
    font-size: 12.5px;
  }
}

.adventure-clock.is-showing-welcome .adventure-intelligence {
  opacity: 0;
  transform: scale(.92);
  transition: opacity .7s ease, transform .7s ease;
  pointer-events: none;
}

/* ── JIMINY UPDATES ────────────────────────────────────────── */
.jiminy-updates-card__header {
  align-items: flex-start;
}
.jiminy-updates-card__title-group {
  align-items: flex-start;
}
.jiminy-updates-card__title-group h2 {
  white-space: normal;
}
.jiminy-updates-card__subtitle {
  margin: 4px 0 0;
  color: rgba(255,255,255,.72);
  font-size: 12px;
  line-height: 1.35;
}
.jiminy-updates-card__body {
  padding: 18px;
}
.jiminy-updates-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.jiminy-updates-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 5px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.jiminy-updates-filter {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--navy);
  padding: 8px 13px;
  min-height: 40px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.jiminy-updates-filter:hover {
  border-color: var(--gold);
}
.jiminy-updates-filter.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.jiminy-updates-filter:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.jiminy-updates-status {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
}
.jiminy-featured-update {
  margin-bottom: 16px;
}
.jiminy-featured-update__card {
  display: block;
  overflow: hidden;
  border: 1px solid rgba(244,184,37,.5);
  border-radius: 20px;
  background: linear-gradient(145deg, #fffdf6, var(--cream));
  box-shadow: 0 12px 28px rgba(7,31,65,.1);
}
.jiminy-featured-update__content {
  padding: 20px;
}
.jiminy-featured-update__content h3 {
  margin: 8px 0 9px;
  color: var(--navy);
  font-family: Georgia, serif;
  font-size: clamp(21px, 4vw, 29px);
  line-height: 1.15;
}
.jiminy-featured-update__summary {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.jiminy-update__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
  font-size: 10.5px;
}
.jiminy-update-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(7,31,65,.08);
  color: var(--navy);
  padding: 4px 8px;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.jiminy-update-badge--official {
  background: var(--navy);
  color: #fff;
}
.jiminy-take {
  margin: 0 0 16px;
  border-left: 3px solid var(--gold);
  border-radius: 0 12px 12px 0;
  background: rgba(244,184,37,.1);
  padding: 12px 14px;
}
.jiminy-take__label {
  display: block;
  margin-bottom: 4px;
  color: var(--navy);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.jiminy-take p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}
.jiminy-updates-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.jiminy-update-card {
  min-width: 0;
}
.jiminy-update-card__link {
  display: block;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  color: inherit;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.jiminy-update-card__link:hover {
  transform: translateY(-2px);
  border-color: rgba(244,184,37,.7);
  box-shadow: 0 10px 22px rgba(7,31,65,.1);
}
.jiminy-update-card__link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.jiminy-update-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px;
}
.jiminy-update-card__title {
  display: block;
  margin: 7px 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.3;
}
.jiminy-update-card__take {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.jiminy-update-card__take b {
  color: var(--navy);
}
.jiminy-update-card__action {
  margin-top: auto;
  padding-top: 10px;
  color: var(--navy);
  font-size: 11px;
  font-weight: 900;
}
.jiminy-updates-empty {
  grid-column: 1 / -1;
  padding: 24px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  background: var(--soft, #f4f7fb);
  color: var(--muted);
  text-align: center;
}
.jiminy-updates-empty p {
  margin: 0 0 12px;
  font-size: 13px;
}
.jiminy-updates-empty--compact p {
  margin-bottom: 0;
}
.jiminy-update-skeleton {
  min-height: 170px;
  border-radius: 16px;
  background: linear-gradient(90deg, var(--line), var(--soft, #f4f7fb), var(--line));
  background-size: 200% 100%;
  animation: rideSkeletonShimmer 1.4s ease-in-out infinite;
}
.jiminy-update-skeleton--featured {
  min-height: 310px;
  border-radius: 20px;
}
@media (min-width: 700px) {
  .jiminy-updates-toolbar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .jiminy-updates-status {
    flex: 0 0 auto;
    text-align: right;
  }
  .jiminy-updates-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1080px) {
  .jiminy-updates-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 420px) {
  .jiminy-updates-card__body {
    padding: 14px;
  }
  .jiminy-update-card__body {
    padding: 12px;
  }
  .jiminy-update-card__take {
    -webkit-line-clamp: 2;
  }
}
@media (prefers-reduced-motion: reduce) {
  .jiminy-update-card__link,
  .jiminy-update-skeleton {
    transition: none;
    animation: none;
  }
}

/* ── EXPLORER PASS BANNER ─────────────────────────────────────
     Sits above the hero inside .home-v456-shell, so it inherits the
     shell's grid gap/width and stays aligned with the hero without
     any extra width-matching CSS. The whole banner is a single link
     (no separate CTA buttons) — content on the left, a chevron on
     the right, sparkle decoration in the top-right corner. */

  #page-discover-disneyland .explorer-pass-banner {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin-bottom: 18px;
    padding: 16px 22px;
    border-radius: 28px;
    border: 1px solid var(--gold);
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy2) 100%);
    box-shadow: 0 12px 28px rgba(7,31,65,.22);
    color: var(--cream);
    text-decoration: none;
    transition: box-shadow .15s ease, filter .15s ease;
  }
  #page-discover-disneyland .explorer-pass-banner:hover {
    filter: brightness(1.05);
    box-shadow: 0 14px 32px rgba(7,31,65,.3);
  }
  #page-discover-disneyland .explorer-pass-banner:active {
    filter: brightness(.97);
  }
  #page-discover-disneyland .explorer-pass-banner:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
  }

  /* Decorative sparkle cluster only — positioned near the top-right
     corner, not tied to any flex item, so it never affects content
     layout. */
  #page-discover-disneyland .explorer-pass-banner__visual {
    position: absolute;
    top: 14px;
    right: 24px;
    width: auto;
    height: auto;
  }
  #page-discover-disneyland .explorer-pass-banner__sparkle {
    position: absolute;
    color: var(--gold);
    font-size: 10px;
    opacity: .85;
  }
  #page-discover-disneyland .explorer-pass-banner__sparkle--1 { top: -4px; right: 0; font-size: 14px; }
  #page-discover-disneyland .explorer-pass-banner__sparkle--2 { top: 12px; right: 20px; font-size: 9px; }
  #page-discover-disneyland .explorer-pass-banner__sparkle--3 { top: 4px; right: -14px; font-size: 8px; }
  @media (prefers-reduced-motion: no-preference) {
    #page-discover-disneyland .explorer-pass-banner__sparkle {
      animation: explorerPassSparkle 3.2s ease-in-out infinite;
    }
    #page-discover-disneyland .explorer-pass-banner__sparkle--2 { animation-delay: .6s; }
    #page-discover-disneyland .explorer-pass-banner__sparkle--3 { animation-delay: 1.2s; }
  }
  @keyframes explorerPassSparkle {
    0%, 100% { opacity: .5; transform: scale(.85); }
    50% { opacity: 1; transform: scale(1.1); }
  }

  /* Color modifiers — Ride Advisor (purple) and Food Advisor
     (green) banners reuse the exact same banner structure/sizing as
     the Explorer Pass banner, just re-tinted to match
     .purchase-product--ride / .purchase-product--food in the shared
     purchase dialog. */
  #page-discover-disneyland .explorer-pass-banner--ride {
    background: linear-gradient(150deg, #4a2f78 0%, #2c1a4d 100%);
    border-color: #b79ce8;
  }
  #page-discover-disneyland .explorer-pass-banner--ride .explorer-pass-banner__eyebrow,
  #page-discover-disneyland .explorer-pass-banner--ride .explorer-pass-banner__sparkle {
    color: #d8c6ff;
  }
  #page-discover-disneyland .explorer-pass-banner--food {
    background: linear-gradient(150deg, #1f4a34 0%, #12301f 100%);
    border-color: #8fd6ab;
  }
  #page-discover-disneyland .explorer-pass-banner--food .explorer-pass-banner__eyebrow,
  #page-discover-disneyland .explorer-pass-banner--food .explorer-pass-banner__sparkle {
    color: #bdeecb;
  }

  #page-discover-disneyland .explorer-pass-banner__content {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
  }
  #page-discover-disneyland .explorer-pass-banner__eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 4px;
  }

  #page-discover-disneyland .explorer-pass-banner__content p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.4;
    color: rgba(251,247,238,.78);
    max-width: 46ch;
  }

  @media (max-width: 640px) {
    #page-discover-disneyland .explorer-pass-banner {
      align-items: center;
      gap: 8px;
      padding: 12px 14px;
      border-radius: 18px;
    }
    #page-discover-disneyland .explorer-pass-banner__visual {
      top: 10px;
      right: 12px;
    }
    #page-discover-disneyland .explorer-pass-banner__sparkle--1 { top: 0; right: 2px; font-size: 12px; }
    #page-discover-disneyland .explorer-pass-banner__sparkle--2 { top: 14px; right: 20px; font-size: 8px; }
    #page-discover-disneyland .explorer-pass-banner__sparkle--3 { top: 6px; right: -2px; font-size: 7px; }
    #page-discover-disneyland .explorer-pass-banner__eyebrow {
      font-size: 10px;
      margin-bottom: 2px;
      padding-right: 40px; /* clears the sparkle cluster */
    }
    #page-discover-disneyland .explorer-pass-banner__content p {
      font-size: 11.5px;
      padding-right: 40px;
      line-height: 1.35;
    }
  }


  

/* =============================================================
   JIMINY PURCHASE DIALOG
   Explorer Pass / Ride Advisor / Food Advisor — one-time,
   fixed-duration digital access products. Opened from the existing
   #explorerPassBannerTrigger anchor (js/purchase-dialog.js).
   Scoped entirely under .purchase-dialog* / .purchase-product* /
   .purchase-option* so it cannot affect any other component.
============================================================= */

.purchase-dialog {
  border: none;
  padding: 0;
  background: transparent;
  max-width: min(880px, calc(100vw - 24px));
  width: 100%;
  max-height: calc(100vh - 32px);
  border-radius: 26px;
  overflow: visible;
  color: var(--ink);
}
.purchase-dialog::backdrop {
  background: rgba(4, 13, 28, .62);
}
@media (prefers-reduced-motion: no-preference) {
  .purchase-dialog {
    animation: purchaseDialogIn .22s ease both;
  }
  .purchase-dialog::backdrop {
    animation: purchaseBackdropIn .22s ease both;
  }
}
@keyframes purchaseDialogIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes purchaseBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.purchase-dialog__surface {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 32px);
  background: var(--cream);
  border: 1px solid var(--navy);
  border-radius: 26px;
  box-shadow: 0 30px 70px rgba(4,13,28,.4);
  overflow: hidden;
}

.purchase-dialog__header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  background: var(--navy);
  border-bottom: 1px solid rgba(244,184,37,.35);
}
.purchase-dialog__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: Georgia, serif;
  font-size: 18px;
  color: #fff;
}
.purchase-dialog__brand-icon {
  color: var(--gold);
  font-size: 15px;
}
.purchase-dialog__close {
  appearance: none;
  border: 1px solid rgba(244,184,37,.4);
  background: rgba(244,184,37,.08);
  color: var(--gold);
  width: 36px;
  height: 36px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.purchase-dialog__close:hover {
  background: rgba(244,184,37,.18);
}
.purchase-dialog__close:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.purchase-dialog__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px 20px 8px;
}
.purchase-dialog__title {
  margin: 0 0 6px;
  font-family: Georgia, serif;
  font-size: clamp(22px, 3vw, 28px);
  color: var(--navy);
}
.purchase-dialog__description {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.5;
  max-width: 60ch;
}

.purchase-destination {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  margin: 0 0 16px;
  background: var(--soft, #f4f7fb);
}
.purchase-destination__label {
  padding: 0;
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.4;
}
.purchase-destination__toggle {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.purchase-destination__option {
  position: relative;
  flex: 1 1 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--navy);
  font-weight: 800;
  font-size: 13.5px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.purchase-destination__option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.purchase-destination__option:has(input:checked) {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}
.purchase-destination__option:hover {
  border-color: var(--navy);
}
.purchase-destination__option input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.purchase-destination__note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}

.purchase-dialog__status {
  min-height: 20px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
}
.purchase-dialog__status--error {
  color: #a13a2f;
}
.purchase-dialog__status:empty {
  margin-bottom: 0;
}

.purchase-products {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.purchase-product {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 22px 20px;
  color: #fff;
}
.purchase-product--explorer {
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy2) 100%);
  border: 1px solid var(--gold);
}
.purchase-product--ride {
  background: linear-gradient(150deg, #4a2f78 0%, #2c1a4d 100%);
  border: 1px solid #b79ce8;
}
.purchase-product--food {
  background: linear-gradient(150deg, #1f4a34 0%, #12301f 100%);
  border: 1px solid #8fd6ab;
}

.purchase-product__decoration {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 72px;
  height: 72px;
  opacity: .9;
  pointer-events: none;
}
.purchase-product--explorer .purchase-product__decoration { color: var(--gold); }
.purchase-product--ride .purchase-product__decoration { color: #d8c6ff; }
.purchase-product--food .purchase-product__decoration { color: #bdeecb; }
.purchase-product__decoration img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.purchase-product__spark {
  position: absolute;
  font-size: 9px;
  opacity: .85;
}
.purchase-product__spark--1 { top: -2px; right: -6px; }
.purchase-product__spark--2 { bottom: 4px; left: -8px; font-size: 7px; }
@media (prefers-reduced-motion: no-preference) {
  .purchase-product__spark {
    animation: purchaseSparkle 3s ease-in-out infinite;
  }
  .purchase-product__spark--2 { animation-delay: .5s; }
}
@keyframes purchaseSparkle {
  0%, 100% { opacity: .5; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1.1); }
}

.purchase-product__badge {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--navy);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.purchase-product__eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.purchase-product--explorer .purchase-product__eyebrow { color: var(--gold); }
.purchase-product--ride .purchase-product__eyebrow { color: #d8c6ff; }
.purchase-product--food .purchase-product__eyebrow { color: #bdeecb; }

.purchase-product__title {
  margin: 0 0 6px;
  font-family: Georgia, serif;
  font-size: clamp(22px, 3vw, 28px);
  color: #fff;
  max-width: 80%;
}
.purchase-product__includes {
  margin: 0 0 10px;
  font-weight: 800;
  font-size: 14px;
  color: #fff;
}
.purchase-product__description {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255,255,255,.82);
  max-width: 46ch;
}

.purchase-product__pricing {
  border: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.purchase-option {
  position: relative;
  flex: 1 1 200px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1.5px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.06);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.purchase-option:hover {
  background: rgba(255,255,255,.12);
}
.purchase-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.purchase-option__check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.5);
  position: relative;
}
.purchase-option__check::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .12s ease, transform .12s ease;
}
.purchase-option input:checked ~ .purchase-option__check {
  border-color: var(--gold);
}
.purchase-option input:checked ~ .purchase-option__check::after {
  opacity: 1;
  transform: scale(1);
}
.purchase-option:has(input:checked) {
  border-color: var(--gold);
  background: rgba(244,184,37,.14);
}
.purchase-option input:focus-visible ~ .purchase-option__check {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.purchase-option__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.purchase-option__duration {
  font-weight: 900;
  font-size: 13.5px;
  color: #fff;
}
.purchase-option__access {
  font-size: 11px;
  color: rgba(255,255,255,.7);
}
.purchase-option__price {
  flex-shrink: 0;
  font-weight: 900;
  font-size: 14px;
  color: var(--gold);
  white-space: nowrap;
}

.purchase-product__value {
  margin: 0 0 14px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--gold);
}

.purchase-product__button {
  appearance: none;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 14.5px;
  cursor: pointer;
  transition: filter .15s ease, opacity .15s ease;
}
.purchase-product--explorer .purchase-product__button {
  background: var(--gold);
  color: var(--navy);
}
.purchase-product--ride .purchase-product__button {
  background: #c9b3f5;
  color: #2c1a4d;
}
.purchase-product--food .purchase-product__button {
  background: #a9e8bf;
  color: #12301f;
}
.purchase-product__button:hover {
  filter: brightness(1.06);
}
.purchase-product__button:active {
  filter: brightness(.96);
}
.purchase-product__button:disabled {
  opacity: .7;
  cursor: not-allowed;
}
.purchase-product__button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.purchase-dialog__footer {
  flex-shrink: 0;
  padding: 10px 20px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: var(--cream);
}
.purchase-dialog__restore {
  appearance: none;
  border: none;
  background: none;
  padding: 4px 0;
  margin-bottom: 3px;
  color: var(--navy);
  font-weight: 800;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
  min-height: 32px;
}
.purchase-dialog__restore:disabled {
  opacity: .6;
  cursor: not-allowed;
}
.purchase-dialog__restore:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}
.purchase-dialog__disclaimer {
  margin: 0;
  font-size: 10px;
  line-height: 1.4;
  color: var(--muted);
}

@media (min-width: 760px) {
  .purchase-products {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }
  .purchase-product {
    display: flex;
    flex-direction: column;
  }
  .purchase-product__button {
    margin-top: auto;
  }
  .purchase-product__pricing {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .purchase-dialog {
    position: fixed;
    top: calc(66px + env(safe-area-inset-top, 0px));
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    right: 12px;
    margin: 0;
    max-width: none;
    width: auto;
    max-height: none;
    height: auto;
  }
  .purchase-dialog__surface {
    max-height: 100%;
    height: 100%;
  }
  .purchase-dialog__body {
    padding: 16px 14px 4px;
  }
  .purchase-product {
    padding: 18px 16px;
  }
  .purchase-product__decoration {
    width: 52px;
    height: 52px;
  }
  .purchase-product__decoration img {
    width: 52px;
    height: 52px;
  }
  .purchase-option {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .purchase-dialog,
  .purchase-dialog::backdrop,
  .purchase-product__spark {
    animation: none;
  }
}


/* ── HEY JIMINY WEATHER ENTRY + DIALOG ───────────────────── */
.destination-weather__jiminy {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-left: 2px;
  padding: 0;
  border: 1px solid rgba(212,175,55,.75);
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  cursor: pointer;
  transition: background .18s ease, transform .18s ease, border-color .18s ease;
}
.destination-weather__jiminy:hover:not(:disabled),
.destination-weather__jiminy:focus-visible:not(:disabled) {
  background: rgba(212,175,55,.18);
  border-color: var(--gold);
  transform: translateY(-1px);
}
.destination-weather__jiminy:disabled { opacity: .45; cursor: default; }
.destination-weather__jiminy img { width: 22px; height: 22px; object-fit: contain; }
.destination-weather__jiminy-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--navy);
  border-radius: 50%;
  background: var(--gold);
}
.weather-jiminy-dialog {
  width: min(540px, calc(100% - 28px));
  max-height: min(760px, calc(100dvh - 34px));
  padding: 0;
  border: 0;
  border-radius: 28px;
  background: transparent;
  color: var(--navy);
  overflow: visible;
}
.weather-jiminy-dialog::backdrop { background: rgba(4,18,40,.62); backdrop-filter: blur(3px); }
.weather-jiminy-dialog__surface {
  overflow: auto;
  max-height: min(760px, calc(100dvh - 34px));
  padding: 22px;
  border: 1px solid rgba(212,175,55,.38);
  border-radius: 28px;
  background: #fffdf8;
  box-shadow: 0 28px 90px rgba(4,18,40,.30);
}
.weather-jiminy-dialog__header,
.weather-jiminy-dialog__identity { display: flex; align-items: center; }
.weather-jiminy-dialog__header { justify-content: space-between; gap: 14px; }
.weather-jiminy-dialog__identity { gap: 12px; }
.weather-jiminy-dialog__umbrella {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: var(--navy);
}
.weather-jiminy-dialog__umbrella img { width: 30px; height: 30px; object-fit: contain; }
.weather-jiminy-dialog__eyebrow { display: block; margin-bottom: 2px; color: #8a6c12; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.weather-jiminy-dialog h2 { margin: 0; color: var(--navy); font-size: 22px; line-height: 1.1; }
.weather-jiminy-dialog__close {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #edf2f8;
  color: var(--navy);
  cursor: pointer;
  font-size: 25px;
  line-height: 1;
}
.weather-jiminy-dialog__speech {
  position: relative;
  margin: 20px 0 16px;
  padding: 16px 17px;
  border: 1px solid #ead8a2;
  border-radius: 18px;
  background: linear-gradient(135deg,#fff8df,#f7fbff);
  color: #253651;
  line-height: 1.5;
}
.weather-jiminy-dialog__speech::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 25px;
  width: 16px;
  height: 16px;
  border-top: 1px solid #ead8a2;
  border-left: 1px solid #ead8a2;
  background: #fff8df;
  transform: rotate(45deg);
}
.weather-jiminy-details { margin: 0; border-top: 1px solid #e3e8ef; }
.weather-jiminy-details > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 16px; padding: 11px 2px; border-bottom: 1px solid #e3e8ef; }
.weather-jiminy-details dt { color: #65738a; }
.weather-jiminy-details dd { margin: 0; color: var(--navy); font-weight: 800; text-align: right; }
.weather-jiminy-signals { display: grid; gap: 10px; margin-top: 16px; }
.weather-jiminy-signal { padding: 13px 14px; border-left: 4px solid var(--gold); border-radius: 12px; background: #f4f7fb; }
.weather-jiminy-signal--warning,
.weather-jiminy-signal--critical { background: #fff5e8; }
.weather-jiminy-signal h3 { margin: 0 0 3px; color: var(--navy); font-size: 15px; }
.weather-jiminy-signal p { margin: 0; color: #4e5e75; font-size: 14px; line-height: 1.4; }
.weather-jiminy-dialog__source { margin: 15px 0 0; color: #7d8797; font-size: 11px; text-align: center; }
@media (max-width: 559px) {
  .destination-weather { grid-template-columns: max-content 1px minmax(0,max-content); }
  .destination-weather__forecast { gap: 5px; }
  .destination-weather__jiminy { width: 30px; height: 30px; margin-left: 0; }
  .destination-weather__jiminy img { width: 19px; height: 19px; }
  .weather-jiminy-dialog { width: 100%; max-width: none; max-height: calc(100dvh - 18px); margin: auto 0 0; border-radius: 26px 26px 0 0; }
  .weather-jiminy-dialog__surface { max-height: calc(100dvh - 18px); border-radius: 26px 26px 0 0; padding: 20px 18px calc(24px + env(safe-area-inset-bottom)); }
}
@media (max-width: 389px) {
  .destination-weather__jiminy { width: 27px; height: 27px; }
  .destination-weather__jiminy img { width: 17px; height: 17px; }
}