/* ===========================================
   BONOBONO HAPPY FAMILY FEST — page styles
   Built on the shared design tokens in variables.css
   =========================================== */

/* ─── Hero ─── */
.fest-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--nav-height) + var(--space-16)) var(--space-6) var(--space-16);
  background: linear-gradient(160deg, var(--sky-pale) 0%, var(--sand-light) 55%, var(--shell-pink) 130%);
  text-align: center;
}

/* Scattered-character backdrop — faint full-cover watermark behind the hero copy */
.fest-hero__sky {
  position: absolute;
  inset: 0;
  background: url("../assets/images/BG-4.webp") center center / cover no-repeat;
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
}

@keyframes fest-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.fest-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-narrow);
  margin: 0 auto;
}

.fest-hero__eyebrow {
  font-weight: 600;
  color: var(--coral-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

.fest-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  color: var(--bono-blue);
  font-size: clamp(2.5rem, 8vw, var(--text-hero));
  text-shadow: 2px 2px 0 var(--white), 4px 4px 0 rgba(65, 182, 230, 0.18);
  margin-bottom: var(--space-3);
}
.fest-hero__title span { color: var(--coral-accent); }

.fest-hero__tagline {
  font-weight: 600;
  color: var(--ocean-mid);
  font-size: clamp(1rem, 3vw, var(--text-xl));
  margin-bottom: var(--space-8);
}

/* Quick facts */
.fest-facts {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin: 0 0 var(--space-8);
  padding: 0;
}
.fest-fact {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-soft);
  text-align: center;
}
.fest-fact__label {
  display: block;
  font-weight: 600;
  color: var(--bono-blue);
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
}
.fest-fact__value {
  display: block;
  color: var(--text-primary);
  font-size: var(--text-sm);
  line-height: 1.35;
}

.fest-hero__cta { font-size: var(--text-lg); }
.fest-hero__limited {
  margin-top: var(--space-3);
  color: var(--coral-accent);
  font-weight: 600;
  font-size: var(--text-sm);
}

/* ─── Sections ─── */
.fest-section {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-16) var(--space-6);
}
.fest-section--alt {
  position: relative;
  overflow: hidden;
  background: var(--sky-pale);
  max-width: none;
}
/* sea & sky scene anchored to the bottom, fading up into the section */
.fest-section--alt::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: clamp(200px, 32vw, 380px);
  background: url('../assets/images/background_03.webp') center bottom / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 40%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 40%);
  opacity: 0.9;
  z-index: 0;
  pointer-events: none;
}
.fest-section--alt > * { position: relative; z-index: 1; max-width: var(--container-max); margin-left: auto; margin-right: auto; }

/* ─── Registration section with big flanking friends ─── */
.fest-section--register {
  position: relative;
  overflow: hidden;
}
.fest-side {
  position: absolute;
  bottom: 0;
  height: clamp(220px, 38%, 460px);
  width: auto;
  opacity: 0.95;
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 12px 18px rgba(43, 90, 122, 0.18));
  animation: fest-float 5s var(--ease-gentle) infinite;
}
.fest-side--left { left: 0; }
.fest-side--right { right: 0; animation-delay: 2s; }
.fest-section--register > *:not(.fest-side) { position: relative; z-index: 1; }

.fest-section__title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ocean-deep);
  text-align: center;
  font-size: clamp(1.5rem, 4vw, var(--text-3xl));
  margin-bottom: var(--space-8);
}

/* Highlight cards */
.fest-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-6);
}
.fest-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  box-shadow: var(--shadow-soft);
  transition: transform var(--duration-normal) var(--ease-bounce), box-shadow var(--duration-normal) var(--ease-smooth);
}
.fest-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lifted); }
.fest-card__emoji { font-size: 2.5rem; display: block; margin-bottom: var(--space-3); }
.fest-card h3 { font-family: var(--font-display); color: var(--bono-blue); font-size: var(--text-lg); margin-bottom: var(--space-2); }
.fest-card p { color: var(--text-secondary); font-size: var(--text-sm); }

/* Fun pills */
.fest-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}
.fest-pill {
  background: var(--white);
  border: 2px solid var(--sky-soft);
  border-radius: var(--radius-full);
  padding: var(--space-3) var(--space-6);
  font-weight: 500;
  color: var(--ocean-mid);
  box-shadow: var(--shadow-soft);
}

/* ─── Registration / payment ─── */
.fest-register__sub {
  text-align: center;
  color: var(--text-secondary);
  margin: calc(var(--space-8) * -1 + var(--space-2)) auto var(--space-8);
  max-width: 520px;
}
.fest-register {
  max-width: 520px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-lifted);
  border: 3px solid var(--sky-pale);
}

.fest-form { display: flex; flex-direction: column; gap: var(--space-4); }
.fest-field { display: flex; flex-direction: column; gap: var(--space-2); }
.fest-field label { font-weight: 600; color: var(--ocean-deep); font-size: var(--text-sm); }
.fest-field input {
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--sky-soft);
  border-radius: var(--radius-md);
  background: var(--sand-light);
  color: var(--text-primary);
  transition: border-color var(--duration-fast) var(--ease-smooth);
}
.fest-field input:focus {
  outline: none;
  border-color: var(--bono-blue);
  background: var(--white);
}

/* Stepper */
.fest-stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
}
.fest-stepper__btn {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: var(--radius-full);
  background: var(--bono-blue);
  color: var(--white);
  font-size: var(--text-xl);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-smooth), transform var(--duration-fast) var(--ease-bounce);
}
.fest-stepper__btn:hover { background: var(--ocean-mid); transform: scale(1.08); }
.fest-stepper input {
  width: 64px;
  text-align: center;
  font-size: var(--text-lg);
  font-weight: 600;
  padding: var(--space-3) 0;
  border: 2px solid var(--sky-soft);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--ocean-deep);
}

/* Total */
.fest-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 2px dashed var(--sky-soft);
  padding-top: var(--space-4);
  margin-top: var(--space-2);
}
.fest-total span { font-weight: 600; color: var(--ocean-deep); }
.fest-total strong { font-size: var(--text-2xl); color: var(--coral-accent); font-family: var(--font-display); }
.fest-total__note { font-size: var(--text-xs); color: var(--text-secondary); margin-top: calc(var(--space-2) * -1); }

.fest-form__submit { width: 100%; margin-top: var(--space-2); }
.fest-form__submit:disabled { opacity: 0.6; cursor: not-allowed; }

.fest-form__error {
  background: rgba(239, 96, 121, 0.12);
  color: var(--coral-accent);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
}

/* Success */
.fest-success { text-align: center; }
.fest-success__icon { font-size: 3.5rem; margin-bottom: var(--space-3); }
.fest-success h3 { font-family: var(--font-display); color: var(--bono-blue); font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.fest-success p { color: var(--text-secondary); margin-bottom: var(--space-4); }
.fest-success__ref { font-size: var(--text-sm); }
.fest-success__ref span { font-family: var(--font-mono); color: var(--ocean-deep); }

/* Active nav link */
.nav__link--active { color: var(--coral-accent); font-weight: 600; }

/* ─── Responsive ─── */
@media (max-width: 720px) {
  .fest-facts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  /* flanking friends would collide with the form on narrow screens */
  .fest-side { display: none; }
}
@media (max-width: 420px) {
  .fest-register { padding: var(--space-6) var(--space-4); }
}

/* ─── Slot picker ─── */
.fest-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}
.fest-slot { cursor: pointer; }
.fest-slot input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.fest-slot__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  padding: var(--space-3) var(--space-2);
  border: 2px solid var(--sky-soft);
  border-radius: var(--radius-md);
  background: var(--sand-light);
  transition: all var(--duration-fast) var(--ease-smooth);
}
.fest-slot__num { font-weight: 700; color: var(--ocean-deep); font-size: var(--text-sm); }
.fest-slot__time { font-size: var(--text-xs); color: var(--text-secondary); }
.fest-slot input:checked + .fest-slot__box {
  border-color: var(--bono-blue);
  background: var(--sky-pale);
  box-shadow: var(--shadow-glow);
}
.fest-slot input:checked + .fest-slot__box .fest-slot__num { color: var(--bono-blue); }
.fest-slot input:focus-visible + .fest-slot__box { outline: 2px solid var(--coral-accent); outline-offset: 2px; }

.fest-success__slot { font-size: var(--text-base); color: var(--ocean-deep); }

@media (max-width: 420px) {
  .fest-slots { grid-template-columns: 1fr; }
}

/* Inline hint next to a field label (e.g. "₹499 each", "free entry") */
.fest-field__hint {
  font-weight: 500;
  color: var(--coral-accent);
  font-size: var(--text-xs);
  margin-left: var(--space-2);
}

/* "Who's coming?" group label above the adult/kids pickers */
.fest-group-label {
  font-weight: 700;
  color: var(--ocean-deep);
  font-size: var(--text-base);
  margin: var(--space-2) 0 calc(var(--space-2) * -1);
}
.fest-group-label span {
  display: block;
  font-weight: 500;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  margin-top: 2px;
}

/* ─── Slot availability ─── */
.fest-slot__seats {
  font-size: 10px;
  font-weight: 700;
  color: var(--forest-green);
  margin-top: 3px;
  letter-spacing: 0.02em;
  min-height: 12px;
}
.fest-slot__seats--low { color: var(--coral-accent); }

/* Sold-out slots: dimmed and not clickable */
.fest-slot--full { opacity: 0.5; }
.fest-slot--full .fest-slot__box { cursor: not-allowed; border-style: dashed; }
.fest-slot--full .fest-slot__seats { color: var(--coral-accent); }

.fest-slots__note {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--ocean-mid);
  font-weight: 500;
  text-align: center;
}

/* YouTube card rendered as a clickable link */
.fest-card--link { text-decoration: none; color: inherit; display: block; }
.fest-card--link .fest-card__emoji svg { display: inline-block; vertical-align: middle; }
.fest-card--link:hover h3 { color: var(--coral-accent); }

/* Adults + Kids side by side ("Who's coming?") */
.fest-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

/* SVG icons inside highlight cards (replaces emojis) */
.fest-card__emoji .fest-icon {
  width: 52px;
  height: 52px;
  color: var(--bono-blue);
  vertical-align: middle;
}

/* ═══════════ Mobile optimisation ═══════════ */
/* Anchor target shouldn't tuck under the fixed nav */
#register { scroll-margin-top: calc(var(--nav-height) + 12px); }

@media (max-width: 768px) {
  .fest-section { padding: var(--space-12) var(--space-4); }

  /* Highlight cards: two compact cards per row */
  .fest-cards { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .fest-card { padding: var(--space-6) var(--space-3); border-radius: var(--radius-lg); }
  .fest-card h3 { font-size: var(--text-base); }
  .fest-card p { font-size: var(--text-xs); }
  .fest-card__emoji { margin-bottom: var(--space-2); }
  .fest-card__emoji .fest-icon { width: 44px; height: 44px; }
  .fest-card--link .fest-card__emoji svg { width: 50px; height: 36px; }

  /* Fun-element pills */
  .fest-pills { gap: var(--space-2); }
  .fest-pill { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
}

@media (max-width: 600px) {
  .fest-hero { padding: calc(var(--nav-height) + var(--space-8)) var(--space-4) var(--space-12); }
  .fest-register { padding: var(--space-6) var(--space-4); }
  .fest-register__sub { margin-top: 0; }
  .fest-facts { gap: var(--space-3); }
  .fest-fact { padding: var(--space-3); }
  /* keep the three slots in one tappable row instead of stacking too soon */
  .fest-slots { gap: 6px; }
  .fest-slot__box { padding: var(--space-3) 4px; }
}

@media (max-width: 380px) {
  .fest-cards { grid-template-columns: 1fr; }
  .fest-slots { grid-template-columns: 1fr; }
}

/* ─── Coupon code ─── */
.fest-coupon {
  display: flex;
  gap: var(--space-2);
}
.fest-coupon input {
  flex: 1;
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--sky-soft);
  border-radius: var(--radius-md);
  background: var(--sand-light);
  color: var(--text-primary);
  text-transform: none;
}
.fest-coupon input:focus { outline: none; border-color: var(--bono-blue); background: var(--white); }
.fest-coupon__input--applied { border-color: var(--forest-green); background: #eef7f0; }
.fest-coupon__btn {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: 600;
  padding: 0 var(--space-5);
  border: none;
  border-radius: var(--radius-md);
  background: var(--ocean-mid);
  color: var(--white);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-smooth);
}
.fest-coupon__btn:hover:not(:disabled) { background: var(--ocean-deep); }
.fest-coupon__btn:disabled { background: var(--forest-green); cursor: default; }
.fest-coupon__msg { margin-top: var(--space-2); font-size: var(--text-sm); font-weight: 500; }
.fest-coupon__msg--ok { color: var(--forest-green); }
.fest-coupon__msg--err { color: var(--coral-accent); }