/* =============================================================
   Jiminy — Home Park Pass experience (HOME-PARK-PASS-PURCHASE-001)
   Hero, purchase dialog, upgrade sheet and pass-status cards.
   Every selector is prefixed .park-pass-; nothing here targets the
   legacy .purchase-* dialog or any shared Home class.
============================================================= */

.park-pass-mount[hidden] { display: none !important; }
.park-pass-mount { margin: 0 0 14px; }
/* Locked Ride/Food placeholders yield to the hero while it is shown. */
#page-home .home-companion__advisors[data-park-pass-hidden] { display: none !important; }
/* Park Selector entries the pass does not cover (set by applyParkFilter); [hidden] alone loses to the selector's own display rules. */
#parkDayDialog .park-day-dialog-option[hidden],
#parkDayDialog .park-day-dialog-group[hidden] { display: none !important; }
body.park-pass-modal-open { overflow: hidden; }

/* ── Promotional hero ───────────────────────────────────────── */
/* Celestial navy art, drawn at no more than about 1.15x its native 864px
   width: the image never stretches on wide screens, a CSS navy gradient
   fills whatever it does not reach. */
#page-home .park-pass-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: start;
  padding: 22px 20px 20px;
  border: 1px solid rgba(91, 190, 255, .76);
  border-radius: var(--jiminy-glass-surface-radius, 30px);
  color: #fff;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(33, 112, 214, .34) 0%, rgba(7, 31, 82, 0) 60%),
    linear-gradient(135deg, #030d27 0%, #06204f 55%, #0b2f6a 100%);
  box-shadow: inset 0 0 0 1px rgba(190, 232, 255, .19), inset 0 0 0 3px rgba(22, 96, 190, .17), inset 0 0 38px rgba(62, 146, 225, .12);
}
#page-home .park-pass-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("/assets/images/hey-jiminy-celestial-wrapper.webp") center 62% / min(100%, 993px) auto no-repeat;
  opacity: .95;
}
#page-home .park-pass-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(3, 13, 39, .78) 0%, rgba(3, 13, 39, .46) 46%, rgba(3, 13, 39, 0) 100%),
    radial-gradient(60% 80% at 92% 18%, rgba(244, 197, 66, .22), rgba(244, 197, 66, 0) 70%);
  pointer-events: none;
}
.park-pass-hero__copy { grid-column: 1; grid-row: 1; min-width: 0; }
.park-pass-hero__kicker { margin: 0 0 8px; color: #f2c14e; font-weight: 900; letter-spacing: .16em; font-size: 14px; }
.park-pass-hero__title { margin: 0 0 10px; font-family: Georgia, "Times New Roman", serif; font-weight: 900; font-size: clamp(30px, 5.4vw, 46px); line-height: 1.04; color: #fff; }
.park-pass-hero__support { grid-column: 1; grid-row: 2; max-width: 430px; margin: 0; color: #c9d7f2; font-size: clamp(15px, 2.6vw, 18px); line-height: 1.4; font-weight: 600; }
.park-pass-hero__ticket {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: end;
  width: clamp(118px, 24vw, 230px);
  height: auto;
  margin: -10px -6px -26px 0;
  position: relative;
  z-index: 1;
  pointer-events: none;
}
.park-pass-hero__cta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  position: relative;
  min-height: 56px;
  margin-top: 10px;
  padding: 0 22px;
  border: 1px solid rgba(255, 233, 163, .85);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffe08a 0%, #f2c14e 55%, #e0a92f 100%);
  color: #071a40;
  font: inherit;
  font-size: 19px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.park-pass-hero__chevron { position: absolute; right: 22px; font-size: 28px; line-height: 1; }
.park-pass-hero__cta:hover { filter: brightness(1.05); }
.park-pass-hero__cta:focus-visible,
.park-pass-buy:focus-visible,
.park-pass-action:focus-visible,
.park-pass-dialog__close:focus-visible,
.park-pass-choice:focus-within { outline: 3px solid #65c9ff; outline-offset: 3px; }
@media (max-width: 620px) {
  #page-home .park-pass-hero { padding: 18px 16px 16px; border-radius: 24px; }
  .park-pass-hero__title { font-size: clamp(27px, 8vw, 34px); }
  .park-pass-hero__support { grid-column: 1 / -1; max-width: none; }
  .park-pass-hero__ticket { grid-row: 1; width: clamp(96px, 28vw, 130px); margin: -4px -2px 0 0; }
  .park-pass-hero__cta { min-height: 52px; font-size: 18px; }
}

/* ── Pass status cards ─────────────────────────────────────── */
#page-home .park-pass-status {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(91, 190, 255, .6);
  border-radius: var(--jiminy-glass-surface-radius, 30px);
  color: #eef7ff;
  background: linear-gradient(145deg, rgba(2, 18, 48, .98), rgba(4, 37, 79, .95));
}
.park-pass-pass { display: grid; gap: 8px; padding: 14px; border: 1px solid rgba(126, 190, 235, .3); border-radius: 20px; background: rgba(3, 31, 68, .6); }
.park-pass-pass > header { display: flex; align-items: center; gap: 10px; }
.park-pass-pass > header > div { display: grid; flex: 1; min-width: 0; }
.park-pass-pass strong { font-weight: 900; }
.park-pass-pass small { color: #9fb8dc; }
.park-pass-pass__state { padding: 4px 10px; border-radius: 999px; background: rgba(244, 197, 66, .16); border: 1px solid rgba(244, 197, 66, .5); color: #ffe9a3; font-size: 12px; font-weight: 900; white-space: nowrap; }
.park-pass-pass--expired .park-pass-pass__state,
.park-pass-pass--exhausted .park-pass-pass__state,
.park-pass-pass--revoked .park-pass-pass__state,
.park-pass-pass--reversed .park-pass-pass__state { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .25); color: #c9d7f2; }
.park-pass-pass__detail { margin: 0; color: #c9d7f2; line-height: 1.4; }
.park-pass-pass__note { margin: 0; color: #ffd0d0; }
.park-pass-pass__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.park-pass-action {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(126, 190, 235, .6);
  border-radius: 14px;
  background: rgba(7, 40, 90, .8);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.park-pass-action--primary { background: linear-gradient(180deg, #ffe08a, #f2c14e 60%, #e0a92f); border-color: rgba(255, 233, 163, .85); color: #071a40; }
.park-pass-action--link { justify-self: start; background: transparent; border-color: transparent; color: #8fd0ff; text-decoration: underline; }
.park-pass-action:disabled { opacity: .55; cursor: default; }

/* ── Dialogs ───────────────────────────────────────────────── */
.park-pass-dialog {
  width: min(600px, calc(100vw - 24px));
  max-height: min(88dvh, 900px);
  margin: auto;
  padding: 22px 22px 20px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(91, 190, 255, .76);
  border-radius: 30px;
  color: #eef7ff;
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(33, 112, 214, .35), rgba(7, 31, 82, 0) 65%),
    linear-gradient(145deg, rgba(2, 18, 48, .99), rgba(4, 37, 79, .97));
  box-shadow: 0 30px 90px rgba(0, 0, 0, .66), 0 0 34px rgba(0, 153, 255, .24), inset 0 1px rgba(255, 255, 255, .16);
}
.park-pass-dialog::backdrop { background: rgba(0, 8, 27, .76); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.park-pass-dialog__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.park-pass-dialog__badge { display: grid; place-items: center; flex: 0 0 auto; width: 60px; height: 60px; border-radius: 50%; border: 1.5px solid rgba(91, 190, 255, .7); background: rgba(3, 31, 68, .8); }
.park-pass-dialog__heading { flex: 1; min-width: 0; }
.park-pass-dialog__heading h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(28px, 6vw, 38px); color: #fff; line-height: 1.05; }
.park-pass-dialog__heading h2 span { color: #f2c14e; font-size: .7em; }
.park-pass-dialog__heading p { margin: 4px 0 0; color: #c9d7f2; font-size: 15px; }
.park-pass-dialog__close { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(91, 190, 255, .7); background: rgba(3, 31, 68, .8); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.park-pass-fieldset { margin: 0 0 12px; padding: 0; border: 0; min-width: 0; }
.park-pass-fieldset legend { padding: 0; margin-bottom: 8px; color: #9fb8dc; font-size: 13px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.park-pass-choices { display: grid; gap: 10px; }
.park-pass-choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 12px 16px;
  border: 1px solid rgba(126, 190, 235, .45);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(10, 48, 108, .55), rgba(4, 27, 66, .65));
  cursor: pointer;
}
.park-pass-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.park-pass-choice__mark { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(126, 190, 235, .8); }
.park-pass-choice.is-selected { border-color: #f2c14e; box-shadow: 0 0 0 1px rgba(242, 193, 78, .65), 0 0 22px rgba(242, 193, 78, .18); }
.park-pass-choice.is-selected .park-pass-choice__mark { border-color: #f2c14e; background: radial-gradient(circle, #f2c14e 0 45%, transparent 48%); }
.park-pass-choice.is-unavailable { opacity: .45; cursor: not-allowed; }
.park-pass-choice__body { display: grid; flex: 1; min-width: 0; }
.park-pass-choice__body strong { font-family: Georgia, "Times New Roman", serif; font-size: 22px; color: #fff; }
.park-pass-choice__body small { color: #9fb8dc; font-size: 14px; }
.park-pass-choice__price { color: #f2c14e; font-size: 24px; font-weight: 900; }
.park-pass-selected { margin: 0 0 12px; padding: 14px 16px; border: 1px solid rgba(242, 193, 78, .5); border-radius: 18px; background: rgba(242, 193, 78, .08); }
.park-pass-selected p { margin: 6px 0 0; color: #dbe6fa; line-height: 1.4; }
.park-pass-selected__total { display: flex; justify-content: space-between; align-items: baseline; font-weight: 800; }
.park-pass-selected__total b { color: #f2c14e; font-size: 26px; }
.park-pass-selected__tax { color: #9fb8dc !important; font-size: 13px; }
.park-pass-dialog__status { min-height: 22px; margin: 0 0 8px; color: #c9d7f2; font-size: 14px; }
.park-pass-dialog__status[data-kind="error"] { color: #ffd0d0; }
.park-pass-buy {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 58px; margin: 0 0 14px;
  border: 1px solid rgba(255, 233, 163, .85); border-radius: 999px;
  background: linear-gradient(180deg, #ffe08a 0%, #f2c14e 55%, #e0a92f 100%);
  color: #071a40; font: inherit; font-size: 20px; font-weight: 900; cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.park-pass-buy:disabled { opacity: .5; cursor: not-allowed; filter: saturate(.6); }
.park-pass-panel { padding: 16px; border: 1px solid rgba(126, 190, 235, .4); border-radius: 20px; background: rgba(3, 31, 68, .55); }
.park-pass-panel__title { margin: 0 0 8px; font-family: Georgia, "Times New Roman", serif; font-size: 20px; color: #fff; }
.park-pass-panel__lead { margin: 0 0 8px; color: #dbe6fa; line-height: 1.45; }
.park-pass-panel__list { margin: 0 0 10px; padding-left: 20px; color: #c9d7f2; line-height: 1.5; }
.park-pass-panel__footer { margin: 0; color: #9fb8dc; font-size: 13px; line-height: 1.45; }
.park-pass-upgrade { display: grid; gap: 8px; margin: 0 0 12px; }
.park-pass-upgrade > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid rgba(126, 190, 235, .3); border-radius: 14px; background: rgba(3, 31, 68, .55); }
.park-pass-upgrade dt { color: #9fb8dc; }
.park-pass-upgrade dd { margin: 0; font-weight: 800; color: #fff; }
.park-pass-upgrade__due { border-color: rgba(242, 193, 78, .6) !important; }
.park-pass-upgrade__due dd { color: #f2c14e; font-size: 22px; }
.park-pass-upgrade__access { margin: 0 0 10px; color: #dbe6fa; line-height: 1.45; }
@media (max-width: 620px) {
  .park-pass-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 24px); padding: 18px 16px 16px; border-radius: 26px; }
  .park-pass-choice { min-height: 60px; padding: 10px 12px; gap: 10px; }
  .park-pass-choice__body strong { font-size: 20px; }
  .park-pass-choice__price { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .park-pass-hero__cta, .park-pass-buy, .park-pass-action, .park-pass-dialog { transition: none !important; animation: none !important; }
}