/* MPL – Summer LifeFit Promo Styles */

/* ── Promo strip ──────────────────────────────
   MOVED TO main.css. This element is the owner's announcement bar as well
   as the summer promo, and this stylesheet loads ONLY while SUMMER_ACTIVE
   is true -- so switching the summer offer off (which config.ts instructs)
   left an announcement with no styling and no error anywhere.

   ONLY the strip moved. The rest of this file stays here on purpose: it
   loads AFTER rtl.css, and rules that override an RTL rule would lose
   that ability inside main.css, which loads before it. */

/* ── Hero ───────────────────────────────────────────────────────── */
.summer-hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--dark);
}

.summer-hero__media {
  position: absolute;
  inset: 0;
}

.summer-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.summer-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(10,10,10,0.80) 0%,
    rgba(10,10,10,0.55) 50%,
    rgba(10,10,10,0.40) 100%
  );
}

/* Fallback when image is missing */
.summer-hero:not(:has(.summer-hero__img[style])) .summer-hero__overlay {
  background: linear-gradient(135deg, #0A0A0A 0%, #1a0800 100%);
}

.summer-hero__content {
  position: relative;
  z-index: 1;
  /* Push content below the fixed header + banner stack */
  padding: calc(var(--header-h) + var(--offer-banner-h) + 48px) 24px 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
}

.summer-hero__badge {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 100px;
}

.summer-hero__title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(52px, 8vw, 96px);
  line-height: 0.95;
  color: var(--white);
  letter-spacing: 0.03em;
  margin: 0;
}

.summer-hero__title em {
  font-style: normal;
  color: var(--orange);
}

.summer-hero__sub {
  font-size: 18px;
  color: rgba(232,232,232,0.85);
  max-width: 400px;
  line-height: 1.5;
}

.summer-hero__price-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,107,0,0.15);
  border: 1px solid var(--orange);
  border-radius: 100px;
  padding: 8px 20px;
  font-size: 22px;
  font-weight: 700;
  color: var(--orange);
}

.summer-hero__price-pill span {
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
}

/* ── Price box ──────────────────────────────────────────────────── */
.summer-price-section {
  padding: 60px 0;
  background: var(--surface);
}

.summer-price-box {
  max-width: 520px;
  margin: 0 auto;
  background: var(--dark);
  border: 1px solid var(--orange);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: 0 0 48px rgba(255,107,0,0.12);
}

.summer-price-box__amount {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.summer-price-box__num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 72px;
  line-height: 1;
  color: var(--orange);
}

.summer-price-box__currency {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
}

.summer-price-box__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: var(--muted);
}

.summer-price-box__dot { color: var(--orange); }

.summer-price-box__note {
  font-size: 13px;
  color: var(--muted);
}

/* ── Value props ────────────────────────────────────────────────── */
.summer-value-props {
  padding: 80px 0;
  background: var(--dark);
}

.summer-section-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  letter-spacing: 0.05em;
  color: var(--white);
  text-align: center;
  margin-bottom: 48px;
}

.summer-value-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.summer-value-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  transition: border-color var(--transition), transform var(--transition);
}

.summer-value-card:hover {
  border-color: var(--orange);
  transform: translateY(-2px);
}

.summer-value-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--orange-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--orange);
  margin-bottom: 20px;
}

.summer-value-card h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 10px;
  letter-spacing: 0.01em;
}

.summer-value-card p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
}

/* ── FAQ ────────────────────────────────────────────────────────── */
.summer-faq {
  padding: 80px 0;
  background: var(--surface);
}

.summer-faq__list {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.summer-faq__item {
  border-bottom: 1px solid var(--border);
}

.summer-faq__question {
  width: 100%;
  background: none;
  border: none;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  padding: 20px 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: color var(--transition);
}

.summer-faq__question:hover { color: var(--orange); }

.summer-faq__question[aria-expanded="true"] { color: var(--orange); }

.summer-faq__chevron {
  flex-shrink: 0;
  transition: transform var(--transition);
}

.summer-faq__question[aria-expanded="true"] .summer-faq__chevron {
  transform: rotate(180deg);
}

.summer-faq__answer {
  padding: 0 0 20px;
}

.summer-faq__answer p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
}

[dir="rtl"] .summer-faq__question { text-align: right; }

/* ── Checkout form ──────────────────────────────────────────────── */
.summer-checkout {
  padding: 80px 0;
  background: var(--dark);
}

.summer-checkout__title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  letter-spacing: 0.05em;
  color: var(--white);
  text-align: center;
  margin-bottom: 8px;
}

.summer-checkout__sub {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 40px;
}

/* Success / failure states */
.summer-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 48px 32px;
  border-radius: var(--radius-lg);
  margin-bottom: 32px;
}

.summer-result--success {
  background: rgba(37,211,102,0.08);
  border: 1px solid rgba(37,211,102,0.3);
  color: #25D366;
}

.summer-result--fail {
  background: rgba(255,107,0,0.08);
  border: 1px solid rgba(255,107,0,0.3);
  color: var(--orange);
}

.summer-result h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
}

.summer-result p { font-size: 15px; color: var(--text); }

.summer-result__ref {
  font-size: 13px;
  color: var(--muted);
  font-family: monospace;
}

/* Form */
.summer-form { display: flex; flex-direction: column; gap: 20px; }

.summer-form__row { display: flex; flex-direction: column; gap: 8px; }

.summer-form__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.summer-form__optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  font-size: 12px;
}

.summer-form__input {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  padding: 14px 16px;
  width: 100%;
  transition: border-color var(--transition);
  /* focus outline deliberately NOT removed — see public/css/a11y.css */
  appearance: none;
}

.summer-form__input:focus { border-color: var(--orange); }

.summer-form__input::placeholder { color: var(--muted); }

/* Payment methods */
.summer-pay-methods {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.summer-pay-method {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.summer-pay-method input { display: none; }

.summer-pay-method.selected,
.summer-pay-method:has(input:checked) {
  border-color: var(--orange);
  background: var(--orange-glow);
}

.summer-pay-method:hover { border-color: var(--orange-light); }

.summer-pay-method__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.summer-pay-method__sub {
  font-size: 11px;
  color: var(--muted);
}

/* Order summary */
.summer-form__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  color: var(--text);
}

.summer-form__total {
  font-size: 20px;
  font-weight: 700;
  color: var(--orange);
}

/* Error */
.summer-form__error {
  font-size: 14px;
  color: #ff4d4d;
  padding: 12px 16px;
  background: rgba(255,77,77,0.08);
  border: 1px solid rgba(255,77,77,0.25);
  border-radius: var(--radius);
}

/* Submit button */
.summer-form__submit { position: relative; }

.summer-form__submit[disabled] { opacity: 0.7; pointer-events: none; }

/* Secure note */
.summer-form__secure {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}

/* ── Programs grid: summer card ─────────────────────────────────── */
.program-card--summer {
  border-color: var(--orange);
  box-shadow: 0 0 32px rgba(255,107,0,0.12);
}

.program-card__badge--summer {
  background: var(--orange);
  color: #fff;
  animation: summer-pulse 2.5s ease-in-out infinite;
}

@keyframes summer-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,0,0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(255,107,0,0); }
}

/* ── Homepage summer promo card ─────────────────────────────────── */
.summer-home-card {
  background: var(--dark);
  padding: 60px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.summer-slider {
  /* 520px inside a 1200px container left 316px of empty margin either side and
     made the gym's own promotions the smallest thing on the page. */
  max-width: 720px;
  margin: 0 auto;
  /* Every slide occupies the SAME grid cell, so the slider is always as tall as
     its tallest slide. Swapping display:none for display:flex resized the
     container on every rotation — measured live at 591px and 627px, a 36px jump
     every four seconds, which shoves the page under anyone actually reading the
     offers. Stacking costs nothing and removes the shift entirely. */
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
}

.summer-slider__slide {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  /* visibility, not display: it keeps the slide out of the accessibility tree
     and the tab order while still contributing its height to the shared cell */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.summer-slider__slide.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  animation: summerFadeIn 0.5s ease;
}
.summer-slider__dots {
  grid-area: 2 / 1;
}

@keyframes summerFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.summer-slider__poster {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 0 80px rgba(255,107,0,0.22);
}

.summer-slider__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}

.summer-slider__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s, transform 0.3s;
}
.summer-slider__dot.active {
  background: var(--orange);
  transform: scale(1.35);
}

/* The two `:nth-child(4) { grid-column: span 2 !important }` rules that lived
   here are deleted, and with them the mobile rules that existed only to fight
   them back down to `span 1 !important`. The whole chain arrived at the default
   the long way round: main.css already gives every card `span 2` on desktop and
   `span 1` under 768px, so all four rules were no-ops in the normal case.

   They were not harmless. `!important` beats any specificity, so if a category
   tab ever left DOM child 4 as the only VISIBLE card, these outranked
   `.program-card--lone` and stranded it at the left edge instead of centring
   it — the identical defect that the deleted :nth-child(7) rule caused, from
   the identical cause: keying layout on DOM position in a grid whose contents
   are filtered at runtime and whose card count is owner-authored. */
/* The 7th-card centring rule that lived here is deleted (for the second time --
   it was removed once and then resurrected when this file was rebuilt from an
   older commit to undo an over-broad move).

   It keyed on DOM position in a grid whose card count is now owner-authored,
   and at (0,5,0) it outranked .program-card--lone (0,2,0) in main.css, which
   decides the same thing from the cards that are actually VISIBLE. Concretely:
   with 7 cards in the DOM, hiding one of cards 1-6 via a category tab left 6
   visible, main.js correctly removed --lone, and this rule still pinned DOM
   child 7 to column 3 -- dropping it alone onto a new row with the two columns
   beside it empty. */

/* Any lone card left on the final row is centred rather than stranded at the
 * left edge. 3n+1 is the first card of a row in this 6-column/span-2 grid, so
 * "starts a row AND is the last card" means it is alone on it.
 *
 * MUST stay inside a min-width query. Below 769px the grid collapses to ONE
 * column, and pinning a card to column 3 there creates implicit columns and
 * scrolls the page sideways — the same defect this file already caused once. */
/* The lone-trailing-card rule that lived here moved to main.css and now hangs
   on .program-card--lone, set by main.js from the VISIBLE cards. It had two
   defects here: it counted DOM children, so the category tabs (which hide with
   display:none) pointed it at the wrong card; and it lived in a stylesheet that
   only loads while SUMMER_ACTIVE is true, so the grid correction vanished the
   moment the summer offer was switched off. */

@media (max-width: 768px) {
  .summer-home-card { padding: 40px 0; }
  /* The :nth-child(4) and :nth-child(7) counter-rules that lived here are gone
     with the desktop rules they existed to neutralise. main.css collapses every
     card to `span 1` below 768px on its own. */
}

/* ── Sticky CTA (mobile only) ───────────────────────────────────── */
.summer-sticky-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  background: var(--dark);
  border-top: 1px solid var(--border);
  z-index: 999;
  transition: transform 0.3s ease;
}

/* ── Button additions ───────────────────────────────────────────── */
.btn--lg { padding: 16px 36px; font-size: 16px; }

.btn--block { width: 100%; justify-content: center; }

.btn--outline {
  background: transparent;
  border: 1px solid var(--orange);
  color: var(--orange);
  padding: 12px 28px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.btn--outline:hover {
  background: var(--orange);
  color: #fff;
}

/* ── RTL adjustments ────────────────────────────────────────────── */
[dir="rtl"] .summer-hero__content { align-items: flex-end; text-align: right; }
[dir="rtl"] .summer-hero__sub { max-width: 440px; }
[dir="rtl"] .summer-form__summary { flex-direction: row-reverse; }
[dir="rtl"] .summer-faq__question { flex-direction: row-reverse; }
[dir="rtl"] .summer-value-card__icon { margin-bottom: 20px; }

/* ── Kids Quantity Stepper (Summer Camp checkout) ──────────────── */
.kids-qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius);
  margin: 12px 0;
}

.kids-qty__label {
  font-size: .875rem;
  color: var(--text-muted);
  font-weight: 500;
}

.kids-qty__ctrl {
  display: flex;
  align-items: center;
  gap: 12px;
}

.kids-qty__btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--orange);
  background: transparent;
  color: var(--orange);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s;
  line-height: 1;
  padding: 0;
}

.kids-qty__btn:hover:not(:disabled) {
  background: var(--orange);
  color: #fff;
}

.kids-qty__btn:disabled {
  opacity: .35;
  cursor: not-allowed;
  border-color: rgba(255, 255, 255, .2);
  color: rgba(255, 255, 255, .2);
}

.kids-qty__val {
  min-width: 24px;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .summer-value-grid {
    grid-template-columns: 1fr;
  }

  .summer-pay-methods {
    grid-template-columns: 1fr;
  }

  .summer-hero { min-height: 75vh; }

  .summer-hero__content {
    padding: calc(var(--header-h) + var(--offer-banner-h) + 32px) 24px 60px;
  }

  .summer-sticky-cta {
    display: block;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  .summer-checkout { padding-bottom: 100px; }

  .summer-price-box { padding: 28px 20px; }

  .summer-price-box__num { font-size: 56px; }
}

@media (max-width: 480px) {
  /* .summer-strip__link font-size moved to main.css with the strip. */
  .summer-hero__title { font-size: 48px; }
}