/* ═══════════════════════════════════════
   Chess NYC — Merged Stylesheet
   (style.css + about/events/donate/videos/donation/coaches/login/signup pages)
   Bootstrap handles: spacing, grid, flex,
   display, text, colors, borders, shadows
═══════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;800;900&display=swap");

:root {
  --purple: #57058b;
  --purple-rgb: 87, 5, 139;

  --purple-deep: #3c0e66;
  --purple-deep-rgb: 60, 14, 102;

  --gold: #d4a017;
  --gold-rgb: 212, 160, 23;

  --gold-dark: #b8860b;
  --gold-dark-rgb: 184, 134, 11;

  --red: #ef4444;
  --red-rgb: 239, 68, 68;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Montserrat", Arial, sans-serif;
}

/* ══════════════════════════════════════
   Unified Section Heading — purple + gold underline
   Used across: Affiliates, Blogs & News, Why Chess NYC,
   How It Works, FAQ (matches Featured Events style)
   ══════════════════════════════════════ */
.section-title-uniform {
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  font-weight: 900;
  color: var(--purple);
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 3px;
  margin-bottom: 0.5rem;
}

/* ══════════════════════════════════════════════════
   HEADER, HERO/HOMEPAGE, and FOOTER CSS
   (merged in from index.css — canonical source for
   header, footer, and homepage-specific styles)
   ══════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════
   HEADER — Chess NYC
   Replaces the previous #masthead / .nav-menu / .sub-menu /
   .burger block in style.css. Uses existing tokens:
   --purple, --purple-deep, --gold, --gold-dark.
   Bootstrap handles spacing/flex/display where useful;
   grid + transforms here are what BS can't do natively.
   ══════════════════════════════════════════════════ */

#masthead {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease;
}

#masthead.hero-mode {
  background: transparent;
  box-shadow: none;
}

#masthead.scrolled {
  background: var(--purple);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.32);
}

body.has-fixed-header {
  padding-top: 69px;
}

@media (max-width: 1199px) {
  body.has-fixed-header {
    padding-top: 69px;
    /* mobile header height */
  }
}

.header-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
  height: 70px;
}

/* ── Logo ── */
.header-logo img {
  height: 78px;
  width: auto;
  transition: height 0.25s ease;
}

#masthead.scrolled .header-logo img {
  height: 69px;
}

/* Duplicate logo shown only inside the mobile sidebar */
.header-nav-logo {
  display: none;
}

/* ── Nav ── */
.header-nav {
  justify-self: center;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.nav-menu>li {
  position: relative;
}

.nav-menu>li>a {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding: 0.6rem 0.85rem;
  border-radius: 6px;
  transition:
    background 0.2s,
    color 0.2s;
}

.nav-menu>li>a i {
  font-size: 10px;
  transition: transform 0.22s ease;
  opacity: 0.75;
}

.nav-menu>li:hover>a,
.nav-menu>li>a:focus-visible {
  color: var(--gold);
  background: rgba(255, 255, 255, 0.08);
}

.nav-menu>li:hover>a i {
  transform: rotate(180deg);
}

.nav-menu>li>a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Current page indicator */
.nav-menu>li>a.current {
  color: var(--gold);
  font-weight: 700;
}

.nav-menu>li.current-ancestor>a {
  color: var(--gold);
}

.nav-menu>li.current-ancestor>a::after,
.nav-menu>li>a.current::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 2px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
}

/* ── Dropdown ── */
.sub-menu {
  display: block;
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 260px;
  background: var(--purple);
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
  border-radius: 0 0 10px 10px;
  border-top: 3px solid var(--gold);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.32);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s;
}

.nav-menu>li:hover>.sub-menu,
.nav-menu>li:focus-within>.sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sub-menu li {
  position: relative;
}

/* Nested flyout (e.g. Play N' Go Select) sits to the right */
.sub-menu .sub-menu {
  top: -0.5rem;
  left: 100%;
  border-top: none;
  border-left: 3px solid var(--gold);
  border-radius: 10px;
  transform: translateX(-6px);
}

.sub-menu li:hover>.sub-menu,
.sub-menu li:focus-within>.sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.sub-menu li>a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 11.5px;
  /* font-weight: 600; */
  padding: 0.6rem 1.15rem;
  text-decoration: none;
  transition:
    background 0.15s,
    color 0.15s,
    padding-left 0.15s;
}

.sub-menu li>a i {
  font-size: 9px;
  opacity: 0.6;
  transform: rotate(-90deg);
}

.sub-menu li>a:hover,
.sub-menu li>a:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: var(--gold);
  padding-left: 1.4rem;
}

.sub-menu li>a:focus-visible {
  outline: none;
  box-shadow: inset 3px 0 0 var(--gold);
}

.sub-menu li>a.current {
  color: var(--gold);
  background: rgba(255, 255, 255, 0.06);
}

/* ── Burger ── */
.header-right {
  display: flex;
  align-items: center;
}

.burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  background: var(--gold);
  border-radius: 8px;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.15s;
}

.burger:hover,
.burger:focus-visible {
  background: var(--gold-dark);
}

.burger:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.burger:active {
  transform: scale(0.94);
}

.burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}

/* ── Mobile ── */
@media (max-width: 1199px) {
  .header-inner {
    grid-template-columns: auto 1fr auto;
    height: 70px;
  }

  .header-logo img {
    height: 62px;
  }

  .header-nav {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: min(82%, 320px);
    background: var(--purple-deep);
    flex-direction: column;
    padding: 1.5rem 1.5rem 2.5rem;
    box-shadow: 6px 0 28px rgba(0, 0, 0, 0.4);
    transform: translateX(-100%);
    transition: transform 0.32s ease;
    overflow-y: auto;
    z-index: 1001;
    justify-self: auto;
  }

  .header-nav.open {
    transform: translateX(0);
  }

  .header-nav-logo {
    display: block;
    padding-bottom: 1.25rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .header-nav-logo img {
    height: 56px;
  }

  /* Pin the burger to the screen's right edge, independent of the
     fixed sidebar's own layout, so it never visually shifts. */
  .header-right {
    position: fixed;
    top: 0;
    right: 0;
    height: inherit;
    display: flex;
    align-items: center;
    padding-right: 1.25rem;
    z-index: 1002;
  }

  .burger {
    display: flex;
    position: relative;
  }

  .nav-menu {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
  }

  .nav-menu>li>a {
    height: auto;
    padding: 0.85rem 0.25rem;
    width: 100%;
    justify-content: space-between;
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .nav-menu>li:hover>a {
    background: none;
  }

  .nav-menu>li>a i {
    transition: transform 0.25s ease;
  }

  .menu-item-has-children.open>a i {
    transform: rotate(180deg);
  }

  /* Submenus become accordions in place, not floating dropdowns */
  .sub-menu,
  .sub-menu .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border-top: none;
    border-left: 2px solid var(--gold);
    box-shadow: none;
    background: rgba(0, 0, 0, 0.16);
    border-radius: 0;
    margin-left: 0.85rem;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    transition: max-height 0.3s ease;
  }

  .menu-item-has-children.open>.sub-menu {
    max-height: 800px;
    padding: 0.3rem 0;
  }

  .sub-menu li>a {
    padding: 0.65rem 0.85rem;
  }

  .sub-menu li>a:hover,
  .sub-menu li>a:focus-visible {
    padding-left: 1.1rem;
  }

  .sub-menu li>a i {
    transform: rotate(0deg);
  }

  .menu-item-has-children.open>.sub-menu li.open>a i {
    transform: rotate(180deg);
  }

  /* Backdrop behind the sidebar */
  .nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.3s ease,
      visibility 0.3s;
    z-index: 1000;
  }

  .nav-overlay.open {
    opacity: 1;
    visibility: visible;
  }
}

.nav-overlay {
  display: none;
}

body.nav-open-lock {
  overflow: hidden;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {

  #masthead,
  .header-logo img,
  .nav-menu>li>a,
  .nav-menu>li>a i,
  .sub-menu,
  .sub-menu .sub-menu,
  .burger span,
  .header-nav,
  .nav-overlay {
    transition: none !important;
  }
}

/* ===== Hero section (video background) ===== */
.ve-hero {
  position: relative;
  min-height: 560px;
  background: var(--purple);
}

.ve-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
}

.ve-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
      rgba(10, 6, 20, 0.92) 0%,
      rgba(10, 6, 20, 0.75) 45%,
      rgba(10, 6, 20, 0.35) 100%);
  z-index: 1;
}

.ve-hero .container {
  z-index: 2;
  max-width: 1140px;
}

.ve-hero-content {
  max-width: 700px;
  text-align: left;
}

.hero-heading {
  /* font-size: 3.25rem; */
  font-weight: 800;
  line-height: 1.15;
  text-align: left;
}

.ve-highlight-block {
  background: var(--purple);
  padding: 0 6px;
  border-radius: 4px;
}

.ve-hero-sub {
  /* font-size: 1.05rem; */
  color: rgba(255, 255, 255, 0.85);
  max-width: 620px;
  text-align: left;
}

.ve-btn-primary {
  background: var(--gold);
  color: var(--purple-deep);
  text-decoration: none;
  border: none;
}

.ve-btn-primary:hover {
  background: var(--gold-dark);
  color: var(--purple-deep);
}

.ve-btn-ghost {
  border: 2px solid rgba(255, 255, 255, 0.35);
  text-decoration: none;
  background: transparent;
}

.ve-btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold) !important;
  background: rgba(var(--gold-rgb), 0.08);
}

@media (max-width: 767px) {
  .ve-hero {
    min-height: 460px;
  }

  .ve-hero-content {
    max-width: 100%;
  }

  .hero-heading {
    font-size: 2.1rem;
  }

  .ve-hero-sub {
    font-size: 0.95rem;
  }
}


/* trust-bar section */
.trust-bar-section {
  background: var(--gold);
  padding: 14px 0;
  overflow: hidden;
  width: 100%;
}

.trust-bar-track {
  display: flex !important;
  width: max-content;
  animation: trust-scroll 8s linear infinite;
}

.trust-bar-section:hover .trust-bar-track {
  animation-play-state: paused;
}

.trust-bar-group {
  display: flex !important;
  align-items: center;
  gap: 2.5rem;
  padding-right: 2.5rem;
  flex-shrink: 0;
}

.trust-bar-group p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: black;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.trust-bar-group p i {
  color: var(--purple);
  font-size: 12px;
}

@keyframes trust-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 575px) {
  .trust-bar-track {
    animation-duration: 12s;
  }

  .trust-bar-group {
    gap: 1.5rem;
    padding-right: 1.5rem;
  }

  .trust-bar-group p {
    font-size: 12.5px;
  }
}

/* Featured Events Carousel */
.promo-carousel-section .sec-header {
  text-align: center;
  /* margin-bottom: 2rem; */
}

.promo-carousel-section .sec-header p {
  color: #6b6b6b;
  margin-top: 0.4rem;
}

.promo-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.promo-viewport {
  overflow: hidden;
  flex: 1;
  border-radius: 18px;
}

.promo-track {
  display: flex;
  gap: 1.25rem;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}

.promo-card {
  flex: 0 0 calc((100% - 2.5rem) / 3);
  border-radius: 16px;
  overflow: hidden;
  display: block;
  position: relative;
  box-shadow: 0 4px 14px rgba(var(--purple-rgb), 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: #fff;
  /* remove fixed aspect-ratio */
}

.promo-card img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}

.promo-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 28px rgba(var(--purple-rgb), 0.22);
}

.promo-card:hover img {
  transform: scale(1.06);
}

/* Nav arrows */
.promo-nav {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--purple);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(var(--purple-rgb), 0.3);
  transition: background 0.25s ease, transform 0.2s ease;
  z-index: 2;
}

.promo-nav:hover {
  background: var(--gold-dark);
  transform: scale(1.08);
}

.promo-nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

/* Pagination dots */
.promo-pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.promo-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(var(--purple-rgb), 0.25);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.promo-dot.active {
  background: var(--gold);
  width: 26px;
  border-radius: 5px;
}

/* Mobile: 1 card at a time */
@media (max-width: 767.98px) {
  .promo-card {
    flex: 0 0 100%;
  }

  .promo-nav {
    width: 36px;
    height: 36px;
  }

  .promo-viewport {
    border-radius: 14px;
  }
}

/* Tablet: 2 cards */
@media (min-width: 768px) and (max-width: 991.98px) {
  .promo-card {
    flex: 0 0 calc((100% - 1.25rem) / 2);
  }
}


/* ══════════════════════════════════════════════════
   TESTIMONIALS — Chess NYC (card-grid redesign)
   Prefix: testi- (zero collision with existing classes)
   Uses existing tokens: --purple, --purple-deep,
   --gold, --gold-dark.
   ══════════════════════════════════════════════════ */

.testi-section {
  position: relative;
  background:
    radial-gradient(circle at 20% 20%, rgba(var(--purple-rgb), 0.35), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(var(--gold-rgb), 0.12), transparent 50%),
    linear-gradient(180deg, #150729 0%, #0f0520 100%);
  overflow: hidden;
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.testi-section::before {
  content: "♜ ♞ ♝ ♛ ♚ ♝ ♞ ♜";
  position: absolute;
  left: 0;
  bottom: -1.5rem;
  font-size: 7rem;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.02);
  white-space: nowrap;
  pointer-events: none;
  line-height: 1;
  user-select: none;
}

.testi-eyebrow {
  background: rgba(var(--gold-rgb), 0.14);
  border: 1px solid rgba(var(--gold-rgb), 0.4);
  border-radius: 50px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--gold);
}

.testi-heading {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.01em;
}

.testi-heading .gold {
  color: var(--gold);
}

.testi-sub {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.92rem;
  max-width: 480px;
}

/* ── Carousel shell ── */
.testi-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.testi-viewport {
  flex: 1;
  overflow: hidden;
}

.testi-track {
  display: flex;
  gap: 1.5rem;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ── Card ── */
.testi-card {
  flex: 0 0 100%;
  background: linear-gradient(160deg, var(--purple-deep) 0%, #24063f 100%);
  border: 1px solid rgba(var(--gold-rgb), 0.25);
  border-radius: 22px;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  padding: 2rem 1.75rem;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 280px;
}

@media (min-width: 768px) {
  .testi-card {
    flex: 0 0 calc(50% - 0.75rem);
  }
}

@media (min-width: 992px) {
  .testi-card {
    flex: 0 0 calc((100% - 3rem) / 3);
  }
}

/* gold corner accents, same motif as before */
.testi-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 40px;
  height: 40px;
  border-top: 3px solid var(--gold);
  border-left: 3px solid var(--gold);
  border-radius: 22px 0 0 0;
  pointer-events: none;
}

.testi-card::after {
  content: "";
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 40px;
  height: 40px;
  border-bottom: 3px solid var(--gold);
  border-right: 3px solid var(--gold);
  border-radius: 0 0 22px 0;
  pointer-events: none;
}

.testi-quote-icon {
  color: rgba(var(--gold-rgb), 0.5);
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

.testi-stars {
  color: var(--gold);
  font-size: 0.8rem;
  letter-spacing: 3px;
  margin-bottom: 0.85rem;
}

.testi-stars .fa-regular {
  color: rgba(255, 255, 255, 0.25);
}

.testi-quote {
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  font-style: italic;
  flex: 1;
  margin-bottom: 1.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.testi-card-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1rem;
  margin-top: auto;
}

.testi-full-name {
  display: block;
  color: var(--gold);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ── Nav arrows ── */
.testi-nav {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9rem;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s,
    transform 0.15s;
  z-index: 5;
}

.testi-nav:hover,
.testi-nav:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
  transform: scale(1.06);
}

.testi-nav:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.testi-nav:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* ── Pagination dots ── */
.testi-pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.75rem;
}

.testi-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  padding: 0;
}

.testi-dot.active {
  background: var(--gold);
  transform: scale(1.3);
}

@media (prefers-reduced-motion: reduce) {
  .testi-track {
    transition: none;
  }
}

/* Featured Upcoming Programs */
.upcoming-programs {
  background-color: white;
}

/* subtle ambient glow behind the grid, purely decorative */
.upcoming-programs::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(237, 177, 45, 0.15),
      transparent 70%);
  pointer-events: none;
}



.up-eyebrow {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(var(--purple), 0.2);
  padding: 7px 16px;
  border-radius: 16px;
}

.up-heading {
  font-size: 3rem;
  color: var(--purple);
  font-weight: 700;
}

/* Card */
.up-card {
  background: var(--purple-deep, #57058b);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease;
}

.up-card:hover,
.up-card:focus-visible {
  transform: translateY(-6px);
  border-color: var(--gold);
  background: #63099c;
}

.up-icon {
  width: 56px;
  height: 56px;
  font-size: 24px;
  color: var(--purple-deep, #57058b);
  background: var(--gold);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.up-card:hover .up-icon {
  transform: scale(1.08) rotate(-4deg);
}

.up-card-title {
  font-size: 1.15rem;
}

.up-card-text {
  font-size: 0.9rem;
  line-height: 1.6;
}

.up-register {
  color: var(--gold);
  font-size: 0.95rem;
}

.up-arrow {
  transition: transform 0.25s ease;
}

.up-card:hover .up-arrow {
  transform: translateX(6px);
}

/* Accessibility: visible focus ring since it's an <a> wrapping the whole card */
.up-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Tablet */
@media (max-width: 991.98px) {
  .up-card {
    padding: 1.5rem !important;
  }
}

/* Mobile: full-bleed feel, tighter spacing */
@media (max-width: 575.98px) {
  .upcoming-programs {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .up-heading {
    font-size: 1.6rem;
  }

  .up-card-text {
    font-size: 0.85rem;
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {

  .up-card,
  .up-icon,
  .up-arrow {
    transition: none;
  }
}

/* Advantages */
/* Advantages */
/* ── ADVANTAGES ── */
#sect1 {
  background: var(--purple);
}

.adv-header .label {
  color: var(--gold);
  letter-spacing: 0.12em;
}

.adv-header h2 {
  font-size: clamp(40px, 5vw, 58px);
  color: var(--gold);
}

.adv-header p {
  color: rgba(255, 255, 255, 0.85);
}

/* Card */
.adv-card {
  gap: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 1.75rem 1.5rem !important;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease,
    background 0.25s ease, border-color 0.25s ease;
}

.adv-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.adv-card:hover,
.adv-card:focus-within {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--gold, #edb12d);
}

/* Icon circle */
.adv-icon-wrap {
  width: 56px;
  height: 56px;
  min-width: 56px;
  background: var(--gold, #edb12d);
  transition: background 0.25s ease, transform 0.25s ease;
}

.adv-card:hover .adv-icon-wrap,
.adv-card:focus-within .adv-icon-wrap {
  background: #fff;
  transform: scale(1.08);
}

.adv-icon {
  font-size: 1.4rem;
  color: var(--purple-deep, #57058b);
  transition: color 0.25s ease;
}

/* Text */
.adv-text h4 {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 0.4rem;
  color: #fff;
}

.adv-text p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.5;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .adv-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Desktop: 3 cols — left border on every card except col 1, 4 */
@media (min-width: 992px) {
  .adv-card:not(:nth-child(3n + 1)) {
    border-left: 1px solid rgba(255, 255, 255, 0.15);
  }
}

/* Tablet: 2 cols — left border on every even card */
@media (min-width: 768px) and (max-width: 991px) {
  .adv-grid .col-12 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .adv-card:nth-child(even) {
    border-left: 1px solid rgba(255, 255, 255, 0.15);
  }
}

/* Mobile: 1 col — no side borders */
@media (max-width: 767px) {
  .adv-card {
    border-left: none !important;
  }
}


/* ── JOIN SECTION ── */
.join-section {
  position: relative;
  min-height: 340px;
  background-image: url("/assets/images/index/chess-table-2.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: hidden;
}

.join-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(var(--purple-deep-rgb), 0.5);
  z-index: 1;
}

.join-inner {
  position: relative;
  z-index: 2;
}

.join-pawn {
  position: absolute;
  right: 4%;
  bottom: 0;
  height: 95%;
  opacity: 0.55;
  pointer-events: none;
}

.join-inner h2 {
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
}

.join-inner h2.free {
  color: var(--gold);
}

.btn-join {
  display: inline-block;
  padding: 0.85rem 3rem;
  background: var(--gold);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  border-radius: 4px;
  text-decoration: none;
  transition:
    opacity 0.2s,
    transform 0.15s;
}

.btn-join:hover {
  opacity: 0.88;
  transform: translateY(-2px);
  color: #fff;
}

@media (max-width: 600px) {
  .join-pawn {
    display: none;
  }
}

/* FAQ SECTION */

.faq-section {
  padding: 5rem 0;
  background: var(--off-white);
}




.faq-sub {
  text-align: center;
  font-size: 14px;
  color: #666;
  margin-bottom: 2rem;
}

.faq-tabs {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.faq-tab {
  background: none;
  border: 2px solid var(--purple);
  color: var(--purple);
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  padding: 0.4rem 4rem;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
}

.faq-tab.active,
.faq-tab:hover {
  background: var(--purple);
  color: #fff;
}

.accordion-button {
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--text-dark);
}

.accordion-button:not(.collapsed) {
  background: var(--off-white);
  color: var(--purple);
  box-shadow: none;
}

.accordion-button:focus {
  box-shadow: 0 0 0 3px rgba(var(--purple-rgb), 0.15);
}

.accordion-button::after {
  filter: invert(18%) sepia(90%) saturate(6000%) hue-rotate(270deg);
}

.accordion-item {
  border: 1.5px solid #ede8f8;
  border-radius: 8px !important;
  margin-bottom: 0.5rem;
  overflow: hidden;
}

.accordion-body {
  font-size: 13.5px;
  color: black;
  line-height: 1.75;
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .faq-tabs {
    flex-wrap: nowrap;
  }

  .faq-tab {
    flex: 1;
    padding: 0.4rem 0.5rem;
    text-align: center;
  }
}

/*  DISCOUNT DEALS PROMO MODAL */
.discount-model {
  --bs-modal-margin: 0px !important;
}

/* ── 9. MISC ── */
.hp-eyebrow-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(var(--gold-rgb), 0.12);
  border: 1px solid rgba(var(--gold-rgb), 0.4);
  border-radius: 50px;
  padding: 4px 14px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 0.75rem;
}

/* ── STICKY MOBILE BOOK-NOW BAR ── */
.hp-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: var(--purple-deep);
  padding: 0.65rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.25);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.hp-sticky-cta.visible {
  transform: translateY(0);
}

.hp-sticky-cta-text {
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.3;
}

.hp-sticky-cta-text span {
  display: block;
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hp-sticky-cta-btn {
  flex-shrink: 0;
  background: var(--gold);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 0.6rem 1.3rem;
  font-size: 0.8rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

@media (min-width: 992px) {
  .hp-sticky-cta {
    display: none;
  }
}

/* ══════════════════════════════════════════════════
   FOOTER — Chess NYC
   Replaces the previous #colophon block in style.css.
   Uses existing tokens: --purple, --purple-deep, --gold,
   --gold-dark, --red. Bootstrap handles grid/spacing;
   only what BS can't do natively lives here.
   ══════════════════════════════════════════════════ */

#colophon {
  background: var(--purple);
  color: rgba(255, 255, 255, 0.88);
  position: relative;
}

/* ── Contact bar ── */
.footer-contact-bar {
  background: var(--purple);
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-contact-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 0.2s;
}

a.footer-contact-item:hover,
a.footer-contact-item:focus-visible {
  color: var(--gold);
}

a.footer-contact-item:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

.footer-contact-item i {
  color: var(--gold);
  font-size: 0.78rem;
  flex-shrink: 0;
}

.footer-contact-item--static {
  cursor: default;
}

/* ── Main grid ── */
.footer-top {
  padding: 1rem 1rem 1rem;
  position: relative;
  overflow: hidden;
}

/* signature: faint chess-piece row, consistent with the
   ♟ ♜ ♝ ♞ watermark motif already used on deals/online-camps */
.footer-top::before {
  content: "♜ ♞ ♝ ♛ ♚ ♝ ♞ ♜";
  position: absolute;
  left: 0;
  bottom: -1.6rem;
  font-size: 7rem;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.025);
  white-space: nowrap;
  pointer-events: none;
  line-height: 1;
  user-select: none;
}

.footer-grid {
  position: relative;
  z-index: 1;
}

.footer-heading {
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  margin-bottom: 1.25rem;
  position: relative;
  padding-bottom: 0.7rem;
}

.footer-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 3px;
  background: var(--gold);
  border-radius: 2px;
}

/* ── Col 1: logo + tagline + social ── */
.footer-logo img {
  width: 150px;
  height: auto;
}

.footer-tagline {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.62);
  max-width: 280px;
}

.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.18s,
    color 0.2s;
}

.footer-social a:hover,
.footer-social a:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
  transform: translateY(-2px);
}

.footer-social a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ── Link columns (Company / Support) ── */
.footer-links {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: 11.5px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition:
    color 0.2s,
    gap 0.2s,
    padding-left 0.2s;
}

.footer-links a i {
  font-size: 9px;
  color: var(--gold);
  transition: transform 0.2s;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: #fff;
  padding-left: 4px;
}

.footer-links a:hover i,
.footer-links a:focus-visible i {
  transform: translateX(2px);
}

.footer-links a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── Locations column ── */
.footer-links--locations {
  gap: 0.9rem;
}

.footer-links--locations li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.55;
}

.footer-links--locations i {
  color: var(--gold);
  font-size: 13px;
  margin-top: 2px;
  flex-shrink: 0;
}

.footer-badge-img {
  border: 0;
  background: #efe2b8;
  padding: 2px;
  border-radius: 9px;
  max-width: 150px;
}

/* ── Bottom bar ── */
#ftr-btm {
  background: rgba(0, 0, 0, 0.18);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.4rem 1rem;
}

#ftr-btm p {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
  margin: 0;
}

.ftr-btm-link {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}

.ftr-btm-link:hover,
.ftr-btm-link:focus-visible {
  color: var(--gold);
}

.ftr-btm-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

.footer-badge-logo {
  display: block;
  width: auto;
  object-fit: contain;
  opacity: 0.9;
  transition:
    opacity 0.2s,
    transform 0.2s;
}

.footer-badge-logo:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.footer-badge-logo--chess {
  height: 56px;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.footer-badge-logo--yelp {
  height: 36px;
  background: rgba(255, 255, 255, 0.08);
  padding: 6px 12px;
  border-radius: 6px;
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .footer-top {
    padding: 3rem 1rem 2.25rem;
  }

  .footer-top::before {
    font-size: 5rem;
  }

  .footer-grid {
    align-items: center;
  }

  .footer-grid div {
    padding-bottom: 1rem;
  }
}

@media (max-width: 575px) {
  .footer-contact-bar .footer-contact-item span:last-child {
    font-size: 0.78rem;
  }

  .hero-heading {
    font-size: 1.5rem;
  }

  .footer-tagline {
    max-width: 100%;
  }

  #ftr-btm .container {
    text-align: center;
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {

  .footer-social a,
  .footer-links a,
  .footer-links a i,
  .footer-newsletter-form button,
  .footer-badge-logo {
    transition: none;
  }
}



/* ── CTA button (My Account) ── */
.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold);
  color: var(--purple-deep);
  font-weight: 700;
  font-size: 14px;
  padding: 0.6rem 1.25rem;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 0.2s,
    transform 0.15s;
}

.header-cta:hover,
.header-cta:focus-visible {
  background: var(--gold-dark);
  color: var(--purple-deep);
  transform: translateY(-1px);
}

.header-cta i {
  font-size: 12px;
  transition: transform 0.2s;
}

.header-cta:hover i {
  transform: translateX(3px);
}

/* Desktop CTA (in header-right) — hidden on mobile */
.header-cta--desktop {
  display: inline-flex;
}

/* Sidebar CTA (inside mobile menu) — hidden on desktop */
.header-cta--sidebar {
  display: none;
  justify-content: center;
  margin-top: 1.5rem;
  width: 100%;
}

@media (max-width: 1199px) {
  .header-cta--desktop {
    display: none !important;
  }

  .header-cta--sidebar {
    display: inline-flex;
  }
}


/* ══ DISCOUNT DEALS PROMO MODAL ══ */
.promo-modal-content {
  border: none;
  border-radius: 16px;
  overflow: hidden;
  font-family: "Montserrat", Arial, sans-serif;
  position: relative;
}

.promo-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  opacity: 0.9;
}

.promo-modal-header {
  background: linear-gradient(135deg,
      var(--purple-deep) 0%,
      var(--purple) 100%);
  padding: 2rem 1.75rem 1.5rem;
  text-align: center;
  position: relative;
}

.promo-modal-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(var(--gold-rgb), 0.2);
  border: 1px solid rgba(var(--gold-rgb), 0.45);
  border-radius: 50px;
  padding: 4px 14px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.85rem;
}

.promo-modal-title {
  color: #fff;
  font-weight: 900;
  font-size: 1.4rem;
  margin-bottom: 0.4rem;
}

.promo-modal-sub {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.85rem;
  margin: 0;
}

.promo-modal-body {
  padding: 1.5rem 1.5rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  overflow-y: auto;
}

.promo-deal-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: #faf7ff;
  border: 1px solid #ede8f8;
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  position: relative;
}

.promo-deal-highlight {
  border-color: var(--gold);
  background: #fff9ec;
}

.promo-deal-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  background: var(--purple);
  color: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.promo-deal-highlight .promo-deal-icon {
  background: var(--gold-dark);
}

.promo-deal-info {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  min-width: 0;
}

.promo-deal-name {
  font-size: 0.85rem;
  font-weight: 800;
  color: #1a1a1a;
}

.promo-deal-desc {
  font-size: 0.76rem;
  color: #666;
}

.promo-deal-tag {
  margin-left: auto;
  background: var(--gold);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: 50px;
  white-space: nowrap;
  flex-shrink: 0;
}

.promo-modal-footer {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.promo-modal-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--gold);
  color: #fff;
  font-weight: 800;
  font-size: 0.9rem;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  text-decoration: none;
  transition:
    background 0.2s,
    transform 0.15s;
}

.promo-modal-cta:hover {
  background: var(--gold-dark);
  color: #fff;
  transform: translateY(-1px);
}

.promo-modal-later {
  background: none;
  border: none;
  color: #999;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  padding: 0.25rem;
}

.promo-modal-later:hover {
  color: var(--purple);
  text-decoration: underline;
}

/* ── MOBILE: compact, floating with margin on all sides ── */
@media (max-width: 575.98px) {
  .promo-modal-dialog {
    margin: 16px;
    max-width: calc(100% - 32px);
    min-height: calc(100% - 32px);
    display: flex;
    align-items: center;
  }

  .promo-modal-content {
    border-radius: 16px;
    width: 100%;
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .promo-modal-header {
    padding: 1.5rem 1.25rem 1.1rem;
    flex-shrink: 0;
  }

  .promo-modal-badge {
    font-size: 0.62rem;
    padding: 3px 11px;
    margin-bottom: 0.65rem;
  }

  .promo-modal-title {
    font-size: 1.15rem;
    margin-bottom: 0.3rem;
  }

  .promo-modal-sub {
    font-size: 0.78rem;
  }

  .promo-modal-body {
    padding: 1.1rem 1.1rem 0.25rem;
    gap: 0.55rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
  }

  .promo-deal-row {
    padding: 0.6rem 0.75rem;
    gap: 0.65rem;
    /* flex-wrap: wrap; */
  }

  .promo-deal-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    font-size: 0.85rem;
  }

  .promo-deal-name {
    font-size: 0.8rem;
  }

  .promo-deal-desc {
    font-size: 0.7rem;
  }

  .promo-deal-tag {
    margin-left: 0;
    margin-top: 2px;
  }

  .promo-modal-footer {
    padding: 1.1rem;
    flex-shrink: 0;
  }

  .promo-modal-cta {
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
  }

  .promo-modal-close {
    top: 10px;
    right: 10px;
  }
}

.promo-modal-body {
  padding: 1.5rem 1.5rem 0.5rem;
  overflow-y: auto;
}

.promo-deal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}

.promo-deal-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  background: #faf7ff;
  border: 1px solid #ede8f8;
  border-radius: 10px;
  padding: 0.9rem;
  position: relative;
}

.promo-deal-highlight {
  border-color: var(--gold);
  background: #fff9ec;
}

.promo-deal-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  background: var(--purple);
  color: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.promo-deal-highlight .promo-deal-icon {
  background: var(--gold-dark);
}

.promo-deal-info {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  min-width: 0;
}

.promo-deal-name {
  font-size: 0.85rem;
  font-weight: 800;
  color: #1a1a1a;
}

.promo-deal-desc {
  font-size: 0.76rem;
  color: #666;
}

.promo-deal-tag {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  background: var(--gold);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 50px;
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  /* ... keep existing rules above ... */

  .promo-modal-body {
    padding: 1.1rem 1.1rem 0.25rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
  }

  .promo-deal-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

  .promo-deal-row {
    padding: 0.65rem;
    gap: 0.4rem;
  }

  .promo-deal-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    font-size: 0.8rem;
  }

  .promo-deal-name {
    font-size: 0.75rem;
  }

  .promo-deal-desc {
    font-size: 0.66rem;
  }

  .promo-deal-tag {
    font-size: 0.55rem;
    padding: 2px 6px;
    top: 0.5rem;
    right: 0.5rem;
  }
}

.eval-modal-content {
  border: none;
  border-radius: 14px;
  overflow: hidden;
  font-family: "Montserrat", Arial, sans-serif;
}

.eval-modal-header {
  background: var(--purple);
  border-bottom: 3px solid var(--gold);
  padding: 1.1rem 1.4rem;
}

.eval-modal-title {
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
}

.eval-modal-body {
  padding: 1.6rem 1.5rem 1.75rem;
}

.eval-modal-sub {
  font-size: 13px;
  color: #666;
  margin-bottom: 1.25rem;
}

.eval-label {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--purple-deep);
  margin-bottom: 0.35rem;
}

.eval-input {
  border: 1.5px solid #e2dcf0;
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  font-size: 14px;
  font-family: "Montserrat", Arial, sans-serif;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.eval-input:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(var(--purple-rgb), 0.12);
  outline: none;
}

/* Style the select's option list to match the screenshot's hover/selected states */
.eval-input option:checked,
.eval-input option:hover {
  background: var(--purple-deep);
  color: #fff;
}

.eval-submit-btn {
  background: var(--gold);
  color: var(--purple-deep);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.02em;
  border: none;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  transition:
    background 0.2s,
    transform 0.15s;
}

.eval-submit-btn:hover {
  background: var(--gold-dark);
  color: var(--purple-deep);
  transform: translateY(-1px);
}

.eval-submit-btn:active {
  transform: translateY(0);
}

/* ══════════════════════════════════════════════════
   STATISTIC BAR
   ══════════════════════════════════════════════════ */
.stat-bar-section {
  position: relative;
  background: linear-gradient(135deg,
      var(--purple) 0%,
      var(--purple-deep) 100%);
  padding: 1rem 0;
  overflow: hidden;
  margin-top: 1rem;
}



/* faint chess-piece watermark, consistent with footer motif */
.stat-bar-watermark {
  position: absolute;
  left: 0;
  bottom: -1.8rem;
  font-size: 7rem;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.03);
  white-space: nowrap;
  pointer-events: none;
  line-height: 1;
  user-select: none;
}

.stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--gold);
  font-size: 18px;
  margin-bottom: 0.9rem;
  transition:
    transform 0.25s ease,
    background 0.25s ease;
}

.stat-item:hover .stat-icon {
  transform: translateY(-4px) scale(1.05);
  background: var(--gold);
  color: var(--purple-deep);
}

.stat-number {
  font-family: "Montserrat", Arial, sans-serif;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 900;
  color: #fff;
  line-height: 1;
  margin-bottom: 0.35rem;
}

.stat-label {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.7);
}

/* Divider lines between stats on desktop */
@media (min-width: 768px) {
  .stat-item::after {
    content: "";
    position: absolute;
    top: 8px;
    right: -1rem;
    width: 1px;
    height: 60px;
    background: rgba(255, 255, 255, 0.12);
  }

  .col-md-3:last-child .stat-item::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stat-icon {
    transition: none;
  }
}

@media (max-width: 575px) {
  .stat-bar-section {
    padding: 2.5rem 0;
  }

  .stat-icon {
    width: 44px;
    height: 44px;
    font-size: 15px;
  }
}


/* Why Choose Chess NYC */
.why-section {
  background: #ffffff;
}

.why-eyebrow {
  background: rgba(var(--gold-rgb), 0.12);
  color: var(--gold);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.5rem 1.1rem;
}

.why-heading {
  font-weight: 800;
  line-height: 1.15;
}

.why-heading .text-gold {
  color: var(--gold);
}

.why-check {
  width: 26px;
  height: 26px;
  background: var(--gold);
  color: #fff;
  flex: 0 0 26px;
}

.why-image-wrap img {
  object-fit: cover;
  height: 100%;
  min-height: 460px;
}

.why-badge-card {
  background: var(--gold);
  right: -1.5rem;
  bottom: -1.5rem;
  max-width: 260px;
}

.why-badge-card .badge-number {
  color: var(--purple-deep);
  font-weight: 800;
}

.why-badge-card .badge-label {
  color: rgba(var(--purple-deep-rgb), 0.85);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
}

.why-btn {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
  font-weight: 600;
}

.why-btn:hover {
  background: var(--purple-deep);
  border-color: var(--purple-deep);
  color: #fff;
}

@media (max-width: 767.98px) {
  .why-badge-card {
    right: 1rem;
    bottom: -1.25rem;
    max-width: 200px;
  }
}

/* ── AFFILIATES LOGO SCROLL ── */
.logo-track {
  display: flex;
  gap: 100px;
  align-items: center;
  animation: scrollLogos 30s linear infinite;
  width: max-content;
}

.logo-track:hover {
  animation-play-state: paused;
}

@keyframes scrollLogos {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.logo-track img {
  width: 150px;
  height: 150px;
  object-fit: contain;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  flex-shrink: 0;
}

.arr {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(107, 33, 168, 0.12);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 18px;
  color: var(--purple);
  cursor: pointer;
  z-index: 10;
}

.arr:hover {
  background: rgba(107, 33, 168, 0.25);
}

.arr-prev {
  left: 0;
}

.arr-next {
  right: 0;
}

/* ═══════════════════════════════════════
   Mobile Image-Size Fixes (v4)
═══════════════════════════════════════ */

/* ── Affiliates logo scroll: 150x150 is huge on phones ── */
@media (max-width: 767px) {
  .logo-track {
    gap: 45px;
  }

  .logo-track img {
    width: 80px;
    height: 80px;
  }
}

@media (max-width: 480px) {
  .logo-track {
    gap: 30px;
  }

  .logo-track img {
    width: 64px;
    height: 64px;
  }
}

/* ══════════════════════════════════════════════════
   WHAT WE OFFER — Tynker-style cards
   ══════════════════════════════════════════════════ */
.wwo-section .sec-header h2 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 900;
  color: var(--purple-deep);
}

.wwo-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.wwo-card:hover,
.wwo-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(var(--purple-rgb), 0.18);
}

.wwo-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ── Banner (colored header area) ── */
.wwo-card-banner {
  position: relative;
  height: 140px;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

/* Gradient variants, rotating through purple/gold palette */
.wwo-banner-1 {
  background: linear-gradient(135deg,
      var(--purple) 0%,
      var(--purple-deep) 100%);
}

.wwo-banner-2 {
  background: linear-gradient(135deg, #7a1fb8 0%, var(--purple) 100%);
}

.wwo-banner-3 {
  background: linear-gradient(135deg, var(--purple-deep) 0%, #1f0838 100%);
}

.wwo-banner-4 {
  background: linear-gradient(135deg,
      var(--gold-dark) 0%,
      var(--purple-deep) 100%);
}

.wwo-banner-5 {
  background: linear-gradient(135deg, #3c0e66 0%, #57058b 60%, #7a1fb8 100%);
}

.wwo-banner-6 {
  background: linear-gradient(135deg, #6e0e9e 0%, var(--red) 130%);
}

/* subtle chess-piece watermark, consistent with footer motif */
.wwo-card-banner::before {
  content: "♞";
  position: absolute;
  top: -10px;
  right: -6px;
  font-size: 5.5rem;
  color: rgba(255, 255, 255, 0.08);
  line-height: 1;
  pointer-events: none;
}

.wwo-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--gold);
  font-size: 15px;
  backdrop-filter: blur(2px);
}

.wwo-level {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.25rem;
}

.wwo-title {
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  margin: 0;
  line-height: 1.25;
}

/* ── Body ── */
.wwo-card-body {
  padding: 1rem 1.1rem 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.wwo-card-body p {
  font-size: 13px;
  line-height: 1.6;
  color: #555;
  margin-bottom: 0.9rem;
  flex: 1;
}

.wwo-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.wwo-tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--purple);
  background: rgba(var(--purple-rgb), 0.08);
  border-radius: 20px;
  padding: 0.3rem 0.7rem;
  white-space: nowrap;
  transition:
    background 0.2s,
    color 0.2s;
}

.wwo-card:hover .wwo-tag {
  background: rgba(var(--gold-rgb), 0.14);
  color: var(--gold-dark);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

  .wwo-card,
  .wwo-tag {
    transition: none;
  }
}

/* Mobile */
@media (max-width: 575px) {
  .wwo-card-banner {
    height: 120px;
  }

  .wwo-title {
    font-size: 16px;
  }
}

/* ══════════════════════════════════════════════════
   OTHER PAGES CSS
   (retained from original style.css — header, footer,
   and homepage-specific rules removed above)
   ══════════════════════════════════════════════════ */
/* ════════════════ Open Enrollment page ════════════════ */

.page-banner img {
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

.page-title {
  font-size: 2.9rem;
  color: var(--purple);
  line-height: 1;
  text-transform: uppercase;
}

.enroll-title {
  color: var(--purple);
  font-size: clamp(32px, 4vw, 46px);
}

.enroll-gallery-main img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
}

.enroll-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.7;
  transition:
    opacity 0.2s,
    border-color 0.2s;
}

.enroll-thumb:hover,
.enroll-thumb.active {
  opacity: 1;
  border-color: var(--purple);
}

.enroll-product-title {
  font-size: 28px;
  font-weight: 800;
  color: #1c1b22;
}

.enroll-price {
  font-size: 22px;
  font-weight: 700;
  color: var(--purple);
}

.enroll-deals-link {
  color: var(--purple);
  text-transform: uppercase;
  text-decoration: underline;
  font-weight: 700;
  font-size: 14px;
}

.enroll-form .form-label {
  font-weight: 700;
  font-size: 14px;
  color: #333;
}

.enroll-form .form-select,
.enroll-form .form-control {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0.6rem 0.85rem;
}

.enroll-form .form-select:focus,
.enroll-form .form-control:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(var(--purple-rgb), 0.12);
}

.enroll-totals {
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  padding: 1rem 0;
  font-size: 15px;
}

.enroll-qty {
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.enroll-qty .qty-btn {
  width: 38px;
  height: 46px;
  border: none;
  background: #f5f5f5;
  font-size: 18px;
  cursor: pointer;
}

.enroll-qty .qty-input {
  width: 50px;
  height: 46px;
  border: none;
  text-align: center;
  font-size: 15px;
}

.enroll-categories a {
  color: var(--purple);
  text-decoration: none;
}

.enroll-categories a:hover {
  text-decoration: underline;
}

/* Register button — enrollment/coaches pages (purple solid) */

.btn-register:hover {
  opacity: 0.88;
  transform: translateY(-1px);
  color: #fff;
}

.btn-register:active {
  transform: translateY(0);
}

.btn-register:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* FIX: renamed from .btn-register to avoid collision with the purple solid variant above */
/* Register button — donation page (pink-to-purple gradient) */
.btn-donate-register {
  display: inline-block;
  background: linear-gradient(90deg, #e91e8c 0%, #6b2d8e 100%);
  color: #fff;
  font-weight: 600;
  padding: 0.65rem 1.75rem;
  border-radius: 3px;
  text-decoration: none;
  transition: opacity 0.2s;
}

.btn-donate-register:hover {
  opacity: 0.88;
  color: #fff;
}

/*==================================================
                ABOUT PAGE CSS
==================================================*/

/*=========================================
  1. GLOBAL
=========================================*/

html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

/*=========================================
  2. HERO SECTION
=========================================*/

.about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1;
}

.about-hero .container {
  position: relative;
  z-index: 2;
}

/*=========================================
  3. STATS
=========================================*/

/*=========================================
  4. SECTION COMMON
=========================================*/

.ab-section {
  overflow: hidden;
}

.section-title {
  font-size: 40px;
  font-weight: 800;
  color: #111;
  margin-bottom: 25px;
}

/*=========================================
  5. IMAGE
=========================================*/

.ab-img-outer {
  overflow: hidden;
  padding: 0 20px 20px 0;
}

/*=========================================
  6. FEATURE CARDS
=========================================*/

/*=========================================
  7. PROGRAM SECTION
=========================================*/

.ab-trophy {
  max-width: 340px;
  margin: auto;
}

.ab-trophy img {
  width: 100%;
}

/*=========================================
  8. DIRECTOR
=========================================*/

.video-wrap {
  max-width: 740px;
  margin: auto;
}

.video-thumb-btn img {
  width: 100%;
  display: block;
}

/*=========================================
  9. CTA
=========================================*/

/*=========================================
 10. RESPONSIVE
=========================================*/

@media (max-width: 1200px) {
  .section-title {
    font-size: 34px;
  }
}

@media (max-width: 992px) {
  .about-hero {
    min-height: 420px;
  }

  .section-title {
    text-align: center;
    font-size: 32px;
  }

  .ab-section-eyebrow {
    justify-content: center;
  }

  .ab-director-card {
    margin-top: 40px;
    padding: 35px;
  }

  .ab-check-item {
    padding: 16px;
  }
}

@media (max-width: 768px) {
  .about-hero {
    min-height: 360px;
  }

  .ab-hero-title {
    font-size: 2.4rem;
  }

  .ab-hero-sub {
    font-size: 0.95rem;
  }

  .section-title {
    font-size: 28px;
  }

  .ab-stat-number {
    font-size: 2rem;
  }

  .ab-feature-card {
    padding: 25px;
  }

  .ab-director-card {
    padding: 25px;
  }

  .ab-director-card h3 {
    font-size: 30px;
  }

  .ab-play-ring {
    width: 65px;
    height: 65px;
    font-size: 20px;
  }
}

@media (max-width: 576px) {
  .about-hero {
    min-height: 300px;
  }

  .ab-hero-title {
    font-size: 2rem;
  }

  .ab-hero-sub {
    font-size: 0.9rem;
  }

  .section-title {
    font-size: 24px;
  }

  .ab-stat-number {
    font-size: 1.6rem;
  }

  .ab-check-item {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .ab-img-badge {
    font-size: 0.8rem;
    left: 10px;
    bottom: 10px;
  }

  .ab-director-card {
    padding: 20px;
  }

  .ab-director-card h3 {
    font-size: 24px;
  }

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

@media (max-width: 400px) {
  .ab-hero-title {
    font-size: 1.7rem;
  }

  .section-title {
    font-size: 22px;
  }

  .ab-hero-sub {
    font-size: 0.85rem;
  }
}

/* donate.css — only what Bootstrap cannot do */

/* ── Hero ── */

/* ── "Donate Now" inline button ── */
.donate-btn {
  display: inline-block;
  background-color: var(--purple-deep);
  color: #fff;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 600;
  transition: background-color 0.2s;
}

.donate-btn:hover {
  background-color: var(--gold-dark);
  color: #fff;
}

/* ── Donation amount image tiles ── */
.donate-amount-img {
  flex: 1 1 16.666%;
  /* 6 equal columns */
  display: block;
  overflow: hidden;
  transition: opacity 0.2s;
}

.donate-amount-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.donate-amount-img:hover {
  opacity: 0.85;
}

/* ── Big CTA button ── */
.donate-cta-btn {
  display: inline-block;
  background-color: var(--gold-dark);
  color: #fff;
  border-radius: 30px;
  font-size: 1rem;
  transition: background-color 0.2s;
}

.donate-cta-btn:hover {
  background-color: var(--purple-deep);
  color: #fff;
}

/* ── Responsive: stack images 2-per-row on mobile ── */
@media (max-width: 576px) {
  .donate-amount-img {
    flex: 1 1 50%;
  }
}

/* ════════════════════════════════════════════════════════════════
   About Page — Enhanced UI
   Prefix: ab-  (zero collision with style.css existing classes)
   Bootstrap handles grid/spacing/flex/display.
   Existing .about-hero / .section-title / .director-section etc.
   are kept exactly as-is; ab- classes layer on top.
   ════════════════════════════════════════════════════════════════ */

/* ── Scroll reveal ── */
.ab-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease;
}

.ab-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ab-reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease;
}

.ab-reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.ab-reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease;
}

.ab-reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {

  .ab-reveal,
  .ab-reveal-left,
  .ab-reveal-right {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── Hero upgrades (layers on .about-hero, doesn't override it) ── */
.ab-hero-inner {
  position: relative;
  z-index: 2;
}

.ab-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(var(--gold-rgb), 0.18);
  border: 1px solid rgba(var(--gold-rgb), 0.45);
  border-radius: 50px;
  padding: 5px 16px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}

.ab-hero-title {
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #fff;
  line-height: 1.06;
  margin-bottom: 0.6rem;
}

.ab-hero-title .ab-gold {
  color: var(--gold);
}

.ab-hero-sub {
  max-width: 520px;
  margin: 0 auto;
  font-size: 0.95rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.78);
}

/* Gold bottom border on hero (replaces plain bottom edge) */
.about-hero {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  background: url("/assets/images/about/about-us-hero.jpg") center/cover no-repeat;
  border-bottom: 4px solid var(--gold);
}

/* ── Stats bar ── */
.ab-stats {
  background: var(--purple);
  padding: 1.4rem 1rem;
}

.ab-stat-number {
  font-size: 2rem;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
}

.ab-stat-label {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.72);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.2rem;
}

.ab-stat-divider {
  width: 1px;
  height: 44px;
  background: rgba(255, 255, 255, 0.15);
  align-self: center;
}

/* ── Section eyebrow (shared) ── */
.ab-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold-dark);
  font-weight: 800;
  margin-bottom: 0.55rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Gold underline on existing .section-title when inside ab- sections */
.ab-section .section-title,
.ab-section-title {
  position: relative;
  padding-bottom: 0.85rem;
  margin-bottom: 1.5rem;
}

.ab-section .section-title::after,
.ab-section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 52px;
  height: 4px;
  background: var(--gold);
  border-radius: 2px;
}

/* ── Image: gold shadow card (mirrors .il-img-wrap) ── */
.ab-img-wrap {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

.ab-img-wrap img {
  width: 100%;
  display: block;
  position: relative;
  z-index: 1;
  border-radius: 12px;
  box-shadow: 0 8px 36px rgba(var(--purple-rgb), 0.14);
}

.ab-img-wrap::before {
  content: "";
  position: absolute;
  bottom: -16px;
  right: -16px;
  width: 100%;
  height: 100%;
  background: var(--gold);
  opacity: 0.16;
  border-radius: 12px;
  z-index: 0;
}

.ab-img-wrap.ab-img-left::before {
  right: auto;
  left: -16px;
}

@media (max-width: 767px) {
  .ab-img-wrap::before {
    display: none;
  }
}

/* Image badge */
.ab-img-badge {
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: rgba(var(--purple-deep-rgb), 0.9);
  color: #fff;
  padding: 5px 13px;
  border-radius: 50px;
  font-weight: 800;
  z-index: 2;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ab-img-badge i {
  color: var(--gold);
  font-size: 0.62rem;
}

/* ── Pull-quote callout ── */
.ab-callout {
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
  border-left: 4px solid var(--purple);
  background: #f3ecff;
  border-radius: 0 10px 10px 0;
  font-size: 0.88rem;
  color: #333;
  line-height: 1.75;
  font-style: italic;
}

.ab-callout strong {
  color: var(--purple);
  font-style: normal;
}

/* ── Why Unique — feature icon cards ── */
.ab-feature-card {
  height: 100%;
  padding: 1.5rem 1.25rem;
  border-radius: 12px;
  background: #fff;
  transition:
    transform 0.22s,
    box-shadow 0.22s,
    border-color 0.2s;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border: 1.5px solid #ede8f8;
  position: relative;
}

.ab-feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--purple), var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.ab-feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(var(--purple-rgb), 0.13);
  border-color: #d0b8ee;
}

.ab-feature-card:hover::before {
  transform: scaleX(1);
}

.ab-feature-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--purple);
  color: #fff;
  font-size: 1.2rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 14px rgba(var(--purple-rgb), 0.28);
  transition: transform 0.22s;
}

.ab-feature-card:hover .ab-feature-icon {
  transform: scale(1.1) rotate(-5deg);
}

.ab-feature-card h5 {
  font-weight: 800;
  font-size: 0.92rem;
  color: #1a1a1a;
  margin-bottom: 0.35rem;
}

.ab-feature-card p {
  color: #666;
  line-height: 1.7;
  font-size: 0.8rem;
  margin: 0;
}

/* ── Program check list (enhanced) ── */
.ab-check-item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  margin-bottom: 0.75rem;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid #ede8f8;
  transition:
    box-shadow 0.2s,
    border-color 0.2s,
    transform 0.2s;
}

.ab-check-item:hover {
  border-color: #c8a8e8;
  box-shadow: 0 4px 18px rgba(var(--purple-rgb), 0.09);
  transform: translateX(4px);
}

.ab-check-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--purple);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 36px;
  font-size: 0.85rem;
  box-shadow: 0 3px 10px rgba(var(--purple-rgb), 0.25);
  transition: background 0.2s;
}

.ab-check-item:hover .ab-check-icon {
  background: var(--gold-dark);
}

.ab-check-text {
  line-height: 1.65;
  font-size: 0.875rem;
  color: #222;
  font-weight: 600;
}

/* ── Trophy section background ── */
.ab-program-section {
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, #f5f0ff 100%);
}

/* ── Director section enhanced ── */
.ab-director-section {
  background: #ededed;
  overflow: hidden;
  position: relative;
}

/* Video frame upgrade */
.ab-video-frame {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 50px rgba(var(--purple-rgb), 0.22);
  border: 4px solid var(--purple);
  position: relative;
}

.ab-video-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  background: rgba(var(--purple-deep-rgb), 0.9);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ab-video-badge i {
  color: var(--gold);
}

/* Enhanced play button pulse */
.ab-play-ring {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #fff;
  color: #fff;
  font-size: 24px;
  background: rgba(var(--purple-rgb), 0.75);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  transition:
    transform 0.2s,
    background 0.2s;
}

.ab-play-ring::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(var(--purple-rgb), 0.35);
  animation: abPulse 2s ease-out infinite;
}

@keyframes abPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}

.ab-play-ring i {
  font-size: 1.4rem;
  color: #fff;
  margin-left: 5px;
  position: relative;
  z-index: 1;
}

.video-thumb-btn:hover .ab-play-ring {
  transform: translate(-50%, -50%) scale(1.1);
  background: var(--gold-dark);
}

/* Director name card */
.ab-director-card {
  background: #fff;
  border-radius: 14px;
  padding: 1.75rem 2rem;
  box-shadow: 0 6px 28px rgba(var(--purple-rgb), 0.1);
  border-left: 5px solid var(--purple);
}

.ab-director-card h3 {
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--purple-deep);
  font-weight: 900;
  margin-bottom: 0.85rem;
}

.ab-director-card p {
  color: #444;
  line-height: 1.85;
  font-size: 0.875rem;
}

/* ── CTA strip at bottom ── */
.ab-cta-strip {
  padding: 2.5rem 1.5rem;
  background: linear-gradient(135deg,
      var(--purple-deep) 0%,
      var(--purple) 100%);
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.ab-cta-strip h2 {
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 1;
}

.ab-cta-strip h2 span {
  color: var(--gold);
}

.ab-cta-strip p {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 1.25rem;
  position: relative;
  z-index: 1;
}

.ab-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.85rem 2.5rem;
  background: var(--gold);
  color: #fff;
  text-decoration: none;
  border-radius: 50px;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  position: relative;
  z-index: 1;
  transition:
    background 0.2s,
    transform 0.2s,
    box-shadow 0.2s;
  box-shadow: 0 6px 22px rgba(var(--gold-rgb), 0.35);
}

.ab-cta-btn:hover {
  background: var(--gold-dark);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(var(--gold-rgb), 0.45);
  color: #fff;
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .ab-stat-divider {
    display: none;
  }
}

@media (max-width: 575px) {
  .ab-stats .row {
    gap: 0.5rem;
  }

  .ab-stat-number {
    font-size: 1.6rem;
  }

  .ab-check-item {
    padding: 0.85rem 0.9rem;
  }

  .ab-director-card {
    padding: 1.25rem 1.25rem;
  }
}

/* ════════════════ Special Events page ════════════════ */

.events-title {
  text-align: center;
  color: var(--purple);
  font-size: clamp(2rem, 5vw, 4rem);
  padding-top: 4rem;
  font-weight: 600;
  margin-bottom: 15px;
}

.events-subtitle {
  max-width: 700px;
  margin: auto;
  font-size: 1.1rem;
  opacity: 0.9;
}

/* =========================
   IMAGES
========================= */
.event-card {
  width: 100%;
  max-width: 290px;
  margin: auto;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.event-card img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  transition: 0.5s;
  display: block;
}

.event-card:hover img {
  transform: scale(1.08);
}

/* =========================
   CONTENT
========================= */

.events-content {
  text-align: center;
}

.events-content p {
  font-size: 1rem;
  line-height: 1.9;
  color: #444;
  margin-bottom: 20px;
}

/* =========================
   FORM CARD
========================= */

.form-badge {
  display: inline-block;
  padding: 8px 18px;
  background: #f2eaff;
  color: var(--purple-deep);
  border-radius: 50px;
  font-weight: 600;
  margin-bottom: 20px;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {
  .events-form-card {
    padding: 25px;
  }

  .event-card img {
    height: 320px;
  }

  .events-title {
    font-size: 2.2rem;
  }
}

/* ==================================
   DONATE PAGE
================================== */

/* HERO */

.donate-hero {
  background-image: url("/assets/images/about/banner-hero.jpg");
  background-size: cover;
  background-position: center top;
  background-attachment: scroll;
  height: 320px;
  min-height: 500px;
  max-height: 320px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.donate-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
      rgba(10, 10, 10, 0.75),
      rgba(0, 0, 0, 0.55));
}

.donate-hero-content {
  position: relative;
  z-index: 2;
  max-width: 750px;
  margin: auto;
  color: #fff;
}

.donate-hero h1 {
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  font-weight: 800;
  margin-bottom: 20px;
}

.donate-hero p {
  font-size: clamp(0.95rem, 2vw, 1.2rem);
  max-width: 600px;
  margin: auto;
  line-height: 1.8;
}

/* ==================================
   COMMON SECTION
================================== */

.section-heading {
  text-align: center;
  margin-bottom: 50px;
}

.section-badge {
  display: inline-block;
  background: #f4edff;
  color: var(--purple);
  padding: 8px 20px;
  border-radius: 50px;
  font-weight: 700;
  margin-bottom: 15px;
}

.section-heading h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
}

.section-heading p {
  max-width: 700px;
  margin: auto;
  color: #666;
}

/* ==================================
   INTRO
================================== */

.intro-content h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  margin: 20px 0;
}

.intro-content p {
  color: #666;
  line-height: 1.9;
}

.image-card {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
  height: 100%;
}

.image-card img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
}

/* ==================================
   ABOUT
================================== */

.about-nonprofit {
  background: #f7f5fc;
}

.about-card {
  background: #fff;
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
}

.about-card img {
  width: 100%;
  height: 350px;
  object-fit: cover;
}

.about-card p {
  color: #555;
  line-height: 1.9;
}

/* ==================================
   MISSION
================================== */

.mission-content h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  margin-bottom: 20px;
}

.mission-content p {
  color: #666;
  line-height: 1.9;
}

.mission-image {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
}

.mission-image img {
  width: 100%;
  min-height: 350px;
  object-fit: cover;
  transition: 0.5s;
}

.mission-image:hover img {
  transform: scale(1.05);
}

/* Stats */

.mission-stats {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.stat-box {
  flex: 1;
  min-width: 180px;
  background: #f7f4fd;
  padding: 25px;
  border-radius: 18px;
  text-align: center;
}

.stat-box h3 {
  color: var(--purple);
  font-weight: 800;
  margin-bottom: 5px;
}

/* ==================================
   DONATION CARDS
================================== */

.donation-card {
  /* display:block;
    overflow:hidden; */
  border-radius: 20px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
  transition: 0.3s;
}

.donation-card img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  transition: 0.5s;
  border-radius: 20px;
}

.donation-card:hover {
  transform: translateY(-2px);
}

.donation-card:hover img {
  transform: scale(1.08);
}

/* ==================================
   BUTTONS
================================== */

.btn-purple,
.donate-main-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 35px;
  border-radius: 60px;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(135deg, var(--purple-deep), var(--purple));
  transition: 0.3s;
}

.btn-purple:hover,
.donate-main-btn:hover {
  color: #fff;
  transform: translateY(-3px);
}

/* ==================================
   MAIL CARD
================================== */

.mail-card {
  max-width: 750px;
  margin: auto;
  text-align: center;
  background: #fff;
  padding: 50px;
  border-radius: 25px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
}

.mail-card i {
  font-size: 3rem;
  color: var(--purple);
  margin-bottom: 20px;
}

.mail-card h3 {
  font-weight: 800;
  margin-bottom: 15px;
}

.mail-card blockquote {
  margin-top: 20px;
  color: var(--purple);
  font-style: italic;
}

/* ==================================
   TABLETS
================================== */

@media (max-width: 991px) {

  .intro-content,
  .mission-content {
    text-align: center;
  }

  .mission-stats {
    justify-content: center;
  }

  .section-heading {
    margin-bottom: 40px;
  }
}

/* ==================================
   MOBILE
================================== */

@media (max-width: 768px) {
  .donate-hero {
    min-height: 420px;
    padding: 100px 0 60px;
  }

  .about-card {
    padding: 25px;
  }

  .mail-card {
    padding: 30px 20px;
  }

  .mission-stats {
    flex-direction: column;
  }

  .stat-box {
    width: 100%;
    min-width: unset;
  }

  .donation-card img {
    height: 180px;
  }
}

/* ==================================
   EXTRA SMALL DEVICES
================================== */

@media (max-width: 576px) {
  .donate-hero h1 {
    font-size: 2.2rem;
  }

  .donate-hero p {
    font-size: 0.95rem;
  }

  .intro-content h2,
  .mission-content h2 {
    font-size: 1.8rem;
  }

  .about-card img,
  .mission-image img,
  .image-card img {
    min-height: 250px;
    height: 250px;
  }

  .donation-card img {
    height: 150px;
  }

  .btn-purple,
  .donate-main-btn {
    width: 100%;
    max-width: 320px;
  }
}

/* ════════════════ Contact page ════════════════ */

.contact-header {
  background-image: url("/assets/images/contact/contact-hero.png");
  background-size: cover;
  background-position: center;
  position: relative;
}

.contact-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 0;
}

.hero-content {
  position: relative;
  text-align: center;
  color: #fff;
  font-size: clamp(2rem, 5vw, 3.5rem);
  padding-block: 10rem;
  font-weight: 700;
}

.get-in-touch {
  background: #fff;
}

.git-label {
  color: var(--purple);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.git-heading {
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 900;
  color: #1a1a1a;
  margin-bottom: 12px;
  line-height: 1.2;
}

.git-desc {
  font-size: 14.5px;
  color: #555;
  line-height: 1.75;
  margin-bottom: 2rem;
}

.git-info-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.git-info-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px;
  border-radius: 8px;
  transition: background 0.2s;
}

.git-info-item:hover {
  background: #f9f5ff;
}

.git-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  background: var(--purple);
  color: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition:
    background 0.25s,
    transform 0.2s;
}

.git-info-item:hover .git-icon {
  background: #5a1890;
  transform: scale(1.07);
}

.git-info-title {
  font-size: 13.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #1a1a1a;
  margin-bottom: 3px;
}

.git-info-text {
  font-size: 13.5px;
  color: #666;
  margin: 0;
  line-height: 1.55;
}

.git-link {
  text-decoration: none;
  color: #666;
  transition: color 0.2s;
}

.git-link:hover {
  color: var(--purple);
}

.git-card {
  background: #fff;
  box-shadow: 0 8px 40px rgba(107, 33, 168, 0.1);
  border-radius: 12px;
  border-top: 4px solid var(--purple);
  padding: 2.5rem 2.75rem;
  transition: box-shadow 0.3s;
}

.git-card:hover {
  box-shadow: 0 12px 50px rgba(107, 33, 168, 0.15);
}

@media (max-width: 576px) {
  .git-card {
    padding: 1.5rem 1.25rem;
    border-radius: 8px;
  }
}

.git-card-title {
  font-size: 22px;
  font-weight: 900;
  color: #1a1a1a;
  margin-bottom: 6px;
}

.git-card-subtitle {
  font-size: 13px;
  color: #888;
  margin-bottom: 24px;
}

.git-form-label {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #444;
  margin-bottom: 6px;
  display: block;
}

.git-input-wrap {
  position: relative;
}

.git-input-wrap .git-input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #bbb;
  font-size: 13px;
  pointer-events: none;
  transition: color 0.2s;
}

.git-input-wrap.textarea-wrap .git-input-icon {
  top: 14px;
  transform: none;
}

.git-input {
  width: 100%;
  background: #f8f8f8;
  border: 1.5px solid #e8e8e8;
  border-radius: 6px;
  padding: 0.7rem 0.85rem 0.7rem 2.2rem;
  font-size: 13.5px;
  font-family: "Montserrat", Arial, sans-serif;
  color: #333;
  outline: none;
  transition:
    border-color 0.25s,
    background 0.25s,
    box-shadow 0.25s;
}

.git-input:focus {
  border-color: var(--purple);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(107, 33, 168, 0.1);
}

.git-input:focus+.git-input-icon,
.git-input-wrap:focus-within .git-input-icon {
  color: var(--purple);
}

.git-input:not(:placeholder-shown):valid {
  border-color: #22c55e;
}

.git-input:not(:placeholder-shown):invalid {
  border-color: #ef4444;
}

.git-textarea {
  resize: vertical;
  min-height: 120px;
  padding-top: 0.7rem;
}

.git-btn {
  width: 100%;
  background: var(--purple);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.9rem;
  font-size: 14px;
  font-weight: 800;
  font-family: "Montserrat", Arial, sans-serif;
  letter-spacing: 0.1em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition:
    background 0.25s,
    transform 0.15s,
    box-shadow 0.2s;
}

.git-btn:hover {
  background: #5a1890;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(107, 33, 168, 0.3);
}

.git-btn:active {
  transform: translateY(0);
}

/* FIX: renamed from .section-divider to .contact-divider to avoid collision with signup page */
.contact-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, #e0d0f5, transparent);
  margin: 0 auto;
  max-width: 80%;
}

/* ════════════════ Coaches page ════════════════ */

.purple {
  color: var(--purple);
}

.coaches-corner {
  padding: 5rem 1rem 6rem;
  background: #fff;
}

@media (min-width: 768px) {
  .coaches-corner {
    padding: 5rem 2rem 7rem;
  }
}

.cc-heading {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.cc-desc {
  font-size: clamp(13.5px, 1.5vw, 16px);
  color: #222;
  line-height: 1.8;
  margin-bottom: 0.25rem;
  font-weight: 500;
}

.cc-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #1a1a1a;
  margin-bottom: 6px;
}

.cc-required {
  color: orangered;
  font-weight: 400;
  font-size: 12px;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}

.cc-input-wrap {
  position: relative;
}

.cc-input-wrap .cc-input-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: #bbb;
  font-size: 13px;
  pointer-events: none;
  transition: color 0.2s;
}

.cc-input-wrap:focus-within .cc-input-icon {
  color: var(--purple);
}

.cc-input {
  width: 100%;
  border: 1.5px solid #d8d8d8;
  border-radius: 6px;
  padding: 0.68rem 0.85rem 0.68rem 2.1rem;
  font-size: 13.5px;
  font-family: "Montserrat", Arial, sans-serif;
  color: #333;
  outline: none;
  background: #fafafa;
  transition:
    border-color 0.2s,
    background 0.2s,
    box-shadow 0.2s;
}

.cc-input:focus {
  border-color: var(--purple);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(107, 33, 168, 0.1);
}

.cc-input.no-icon {
  padding-left: 0.85rem;
}

.cc-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, #d0b8f0, transparent);
  margin: 2rem 0 1.5rem;
}

.cc-students-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.cc-students-label {
  font-size: 15px;
  font-weight: 800;
  color: #1a1a1a;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cc-students-label::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 18px;
  background: var(--purple);
  border-radius: 2px;
}

.cc-student-count {
  font-size: 11px;
  background: var(--purple);
  color: #fff;
  border-radius: 20px;
  padding: 1px 9px;
  font-weight: 700;
}

.student-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 12px;
  background: #faf8ff;
  border: 1px solid #ede8f8;
  border-radius: 8px;
  padding: 14px 14px 12px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.student-row:hover {
  border-color: #c4a8e8;
  box-shadow: 0 2px 10px rgba(107, 33, 168, 0.07);
}

.student-row label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #444;
  margin-bottom: 5px;
}

@media (max-width: 900px) {
  .student-row {
    grid-template-columns: 1fr 1fr;
  }

  .student-row .sr-remove-wrap {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
  }
}

@media (max-width: 480px) {
  .student-row {
    grid-template-columns: 1fr;
  }

  .student-row .sr-remove-wrap {
    grid-column: 1;
    display: flex;
    justify-content: flex-end;
  }
}

/* FIX: merged two .sr-remove definitions — kept 36px (coaches) as canonical */
.sr-remove {
  width: 36px;
  height: 36px;
  min-width: 34px;
  background: #fff;
  border: 1.5px solid #e0e0e0;
  border-radius: 6px;
  color: #bbb;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color 0.2s,
    color 0.2s,
    background 0.2s;
  flex-shrink: 0;
}

.sr-remove:hover {
  border-color: #ef4444;
  color: #ef4444;
  background: #fff5f5;
}

/* FIX: merged two .cc-add-btn definitions — used 13.5px/0.55rem 1.2rem from coaches as canonical */
.cc-add-btn {
  background: none;
  border: 1.5px dashed var(--purple);
  border-radius: 6px;
  color: var(--purple);
  font-size: 13.5px;
  font-weight: 700;
  font-family: "Montserrat", Arial, sans-serif;
  cursor: pointer;
  padding: 0.55rem 1.2rem;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition:
    background 0.2s,
    color 0.2s;
  margin-top: 4px;
}

.cc-add-btn:hover {
  background: var(--purple);
  color: #fff;
}

.cc-submit-btn {
  background: linear-gradient(to right, var(--purple), #c026d3);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.82rem 3rem;
  font-size: 14px;
  font-weight: 700;
  font-family: "Montserrat", Arial, sans-serif;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition:
    opacity 0.2s,
    transform 0.15s,
    box-shadow 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cc-submit-btn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(107, 33, 168, 0.3);
}

.cc-submit-btn:active {
  transform: translateY(0);
}

@media (max-width: 480px) {
  .cc-submit-btn {
    width: 100%;
    justify-content: center;
  }
}

/* FIX: merged two .cc-empty-state definitions — they were identical */
.cc-empty-state {
  text-align: center;
  padding: 1.5rem;
  border: 1.5px dashed #d0bfee;
  border-radius: 8px;
  color: #aaa;
  font-size: 13px;
  margin-bottom: 12px;
}

/* ════════════════ My Account (Login) page ════════════════ */

.login-page {
  background: #f5f3fb;
  min-height: 100vh;
}

.login-card {
  border-top: 4px solid var(--purple) !important;
}

.login-logo {
  width: 56px;
  height: 56px;
  background: var(--purple);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
}

/* FIX: merged two .input-icon-wrap blocks (login + signup) into one shared block.
   Kept z-index:1 from the signup version as a safe superset. */
.input-icon-wrap {
  position: relative;
}

.input-icon-wrap .field-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: #bbb;
  font-size: 13px;
  pointer-events: none;
  transition: color 0.2s;
  z-index: 1;
}

.input-icon-wrap:focus-within .field-icon {
  color: var(--purple);
}

.input-icon-wrap .eye-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #bbb;
  font-size: 14px;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  transition: color 0.2s;
  z-index: 1;
}

.input-icon-wrap .eye-btn:hover {
  color: var(--purple);
}

.input-icon-wrap .form-control {
  padding-left: 2.15rem;
}

.input-icon-wrap .form-control.has-eye {
  padding-right: 2.5rem;
}

.btn-login {
  background: linear-gradient(to right, var(--purple), #c026d3);
  color: #fff;
  border: none;
  font-weight: 700;
  letter-spacing: 0.05em;
  transition:
    opacity 0.2s,
    transform 0.15s;
}

.btn-login:hover {
  color: #fff;
  opacity: 0.9;
  transform: translateY(-1px);
}

.btn-login:active {
  transform: translateY(0);
}

.link-purple {
  color: var(--purple);
  transition: opacity 0.2s;
}

.link-purple:hover {
  opacity: 0.75;
  color: var(--purple);
}

.card-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, #d0bfee, transparent);
}

.flip-wrapper {
  perspective: 2000px;
  max-width: 520px;
  margin: 0 auto;
}

.flip-inner {
  position: relative;
  display: grid;
  transform-style: preserve-3d;
  will-change: transform;

  /* smoother easing */
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.flip-inner.flipped {
  transform: rotateY(180deg);
}

.flip-front,
.flip-back,
.flip-front *,
.flip-back * {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flip-front,
.flip-back {
  grid-area: 1 / 1;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  /* smooth fade */
  transition:
    opacity 0.25s ease,
    visibility 0s linear;
}

/* FRONT */
.flip-front {
  visibility: visible;
  opacity: 1;
  transform: rotateY(0deg) translateZ(1px);
}

/* BACK */
.flip-back {
  visibility: hidden;
  opacity: 0;
  transform: rotateY(180deg) translateZ(1px);
}

/* When flipped */
.flip-inner.flipped .flip-front {
  visibility: hidden;
  opacity: 0;
}

.flip-inner.flipped .flip-back {
  visibility: visible;
  opacity: 1;
}

/* Prevent icon flicker */
.field-icon,
.eye-btn,
.eye-btn i {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
}

/* Hardware acceleration */
.flip-front,
.flip-back,
.flip-inner {
  transform-origin: center center;
  will-change: transform, opacity;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {

  .flip-inner,
  .flip-front,
  .flip-back {
    transition: none;
  }
}

/* ════════════════ Programs inner pages ════════════════ */

.programs-hero {
  position: relative;
  min-height: 430px;
  padding-top: 130px;
  padding-bottom: 70px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.programs-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(8, 6, 12, 0.35) 0%,
      rgba(8, 6, 12, 0.72) 100%);
  z-index: 0;
}

.programs-hero .container {
  position: relative;
  z-index: 1;
}

.programs-hero-title {
  color: #fff;
  font-weight: 800;
  font-size: clamp(34px, 5vw, 52px);
  margin-bottom: 1.25rem;
}

.programs-hero-text {
  color: rgba(255, 255, 255, 0.92);
  font-size: 16px;
  line-height: 1.8;
  max-width: 720px;
  margin: 0 auto;
}

.programs-hero-cta {
  color: var(--gold);
  font-weight: 700;
}

@media (max-width: 576px) {
  .programs-hero {
    padding-top: 110px;
    padding-bottom: 50px;
    min-height: 360px;
  }

  .programs-hero-text {
    font-size: 14.5px;
  }
}

.online-programs-intro {
  border-bottom: 1px solid #efefef;
}

.oip-title {
  font-size: clamp(22px, 4vw, 36px);
  font-weight: 700;
  color: var(--purple);
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.oip-divider {
  width: 60px;
  height: 3px;
  background: var(--gold);
  border-radius: 2px;
}

.oip-meta {
  font-size: 14px;
  color: #555;
}

.oip-semester {
  font-size: 14px;
  color: #1a1a1a;
}

.oip-body {
  font-size: 14.5px;
  color: #444;
  line-height: 1.85;
  max-width: 820px;
  margin: 0 auto;
}

.prog-cards-section {
  background: #f9f7fd;
}

.prog-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(var(--purple-rgb), 0.08);
  transition:
    transform 0.22s,
    box-shadow 0.22s;
  display: flex;
  flex-direction: column;
}

.prog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 32px rgba(var(--purple-rgb), 0.16);
}

.prog-card-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.prog-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.prog-card:hover .prog-card-img {
  transform: scale(1.04);
}

.prog-card-body {
  padding: 1.5rem 1.4rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.prog-card-title {
  font-size: 18px;
  font-weight: 900;
  color: #1a1a1a;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.85rem;
  line-height: 1.3;
}

.prog-card-text {
  font-size: 13.5px;
  color: #555;
  line-height: 1.75;
  margin-bottom: 1.25rem;
  flex: 1;
}

.btn-prog-book {
  display: inline-block;
  padding: 0.6rem 2rem;
  background: var(--purple);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  border-radius: 4px;
  text-decoration: none;
  letter-spacing: 0.05em;
  transition:
    opacity 0.2s,
    transform 0.15s;
}

.btn-prog-book:hover {
  opacity: 0.88;
  transform: translateY(-1px);
  color: #fff;
}

/* ════════════════════════════════════════════════════════════════
   Signup Wizard — Step 1 (Account) → Step 2+ (Students)
   Prefix: sw- (no collisions with style.css)
   Bootstrap handles grid/spacing/flex/display.
   Reuses tokens: --purple, --purple-deep, --gold, --gold-dark, --red
   ════════════════════════════════════════════════════════════════ */

/* ── Page shell ── */
.membership-section {
  background: #f5f3fb;
  min-height: 100vh;
}

.purple-card {
  background: #fff;
  border-radius: 14px;
  border-top: 4px solid var(--purple);
  box-shadow: 0 8px 40px rgba(107, 33, 168, 0.12);
  overflow: hidden;
  margin: 0 auto;
}

@media (max-width: 576px) {
  .membership-section {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }

  .membership-inner.container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* ── Header ── */
.membership-header {
  background: var(--purple);
  color: #fff;
  padding: 2rem 2.5rem 2.25rem;
}

.membership-header h2 {
  font-size: clamp(20px, 4vw, 30px);
  font-weight: 900;
  line-height: 1.15;
  color: #fff;
}

.membership-header p {
  font-size: 14px;
  opacity: 0.88;
  max-width: 560px;
}

@media (max-width: 576px) {
  .membership-header {
    padding: 1.5rem 1.25rem 1.75rem;
  }

  .membership-header h2 {
    font-size: 20px !important;
  }

  .membership-header p {
    font-size: 12.5px !important;
  }

  .perks-list {
    display: none;
    /* keep step 1 short & scannable on phones */
  }
}

.gold-tag {
  background: var(--gold);
  color: #fff;
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  align-self: center;
}

.perks-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.perks-list li {
  font-size: 13px;
  opacity: 0.9;
  padding-left: 1.35rem;
  position: relative;
}

.perks-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 700;
}

/* ── Body ── */
.membership-body {
  padding: 2rem 2.5rem 2.5rem;
}

@media (max-width: 576px) {
  .membership-body {
    padding: 1.5rem 1.25rem 2rem;
  }
}

.section-label {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--purple);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right,
      rgba(var(--purple-rgb), 0.2),
      transparent);
}

/* renamed from .section-divider to .signup-divider to avoid collision with contact page */
.signup-divider {
  height: 1px;
  background: linear-gradient(to right,
      transparent,
      rgba(var(--purple-rgb), 0.18),
      transparent);
  border: none;
}

/* ── STEP PROGRESS BAR ── */
.sw-progress {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 1.1rem 1.5rem 1.5rem;
  background: var(--purple);
}

@media (max-width: 576px) {
  .sw-progress {
    padding: 0.9rem 1.1rem 1rem;
  }
}

.sw-step {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.sw-step-dot {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.78rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    background 0.25s,
    border-color 0.25s,
    color 0.25s,
    transform 0.2s;
}

.sw-step-dot i {
  font-size: 0.72rem;
  display: none;
}

.sw-step-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.25s;
}

.sw-step-line {
  flex: 0 0 auto;
  width: clamp(20px, 6vw, 48px);
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 6px;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.sw-step-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.sw-progress.sw-on-step-2 .sw-step-line::after {
  transform: scaleX(1);
}

.sw-progress.sw-on-step-2 .sw-step[data-step="1"] .sw-step-dot {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}

.sw-progress.sw-on-step-2 .sw-step[data-step="1"] .sw-step-dot i {
  display: block;
}

.sw-progress.sw-on-step-2 .sw-step[data-step="1"] .sw-step-dot span {
  display: none;
}

.sw-progress.sw-on-step-2 .sw-step[data-step="1"] .sw-step-label {
  color: rgba(255, 255, 255, 0.55);
}

.sw-progress .sw-step[data-step="1"] .sw-step-dot {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}

.sw-progress .sw-step[data-step="1"] .sw-step-label {
  color: #fff;
}

.sw-progress.sw-on-step-2 .sw-step[data-step="2"] .sw-step-dot {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
  transform: scale(1.08);
}

.sw-progress.sw-on-step-2 .sw-step[data-step="2"] .sw-step-label {
  color: #fff;
}

.sw-progress-spacer {
  height: 1rem;
}

@media (max-width: 576px) {
  .sw-progress-spacer {
    height: 0.85rem;
  }
}

/* ── PANELS / SLIDE TRANSITION ── */
.sw-panels {
  position: relative;
  overflow: hidden;
}

.sw-panel {
  display: none;
  animation: sw-fade-in 0.32s ease;
}

.sw-panel.sw-active {
  display: block;
}

@keyframes sw-fade-in {
  from {
    opacity: 0;
    transform: translateX(14px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sw-panel {
    animation: none;
  }
}

/* ── Step heading inside body ── */
.sw-step-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0.35rem;
}

.sw-step-heading-icon {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 9px;
  background: var(--purple);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

.sw-step-heading h3 {
  font-size: 1.05rem;
  font-weight: 900;
  color: #1a1a1a;
  margin: 0;
}

.sw-step-sub {
  font-size: 0.78rem;
  color: #888;
  margin-bottom: 1.35rem;
}

/* ── Password strength / hint row ── */
.sw-hint-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: #999;
  margin-top: 0.4rem;
}

.sw-hint-row i {
  color: var(--gold-dark);
  font-size: 0.7rem;
}

/* ── Student summary chip strip (shown atop step 2 on mobile) ── */
.sw-student-tabs {
  display: flex;
  gap: 0.45rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.6rem;
  margin-bottom: 1rem;
  scrollbar-width: thin;
}

.sw-student-tabs::-webkit-scrollbar {
  height: 3px;
}

.sw-student-tabs::-webkit-scrollbar-thumb {
  background: rgba(var(--purple-rgb), 0.3);
  border-radius: 3px;
}

.sw-student-tab {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid #e5dcf5;
  background: #faf8ff;
  color: var(--purple);
  border-radius: 50px;
  padding: 0.35rem 0.9rem 0.35rem 0.5rem;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  white-space: nowrap;
}

.sw-student-tab .sw-tab-num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--purple);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sw-student-tab.active {
  background: var(--purple);
  color: #fff;
  border-color: var(--purple);
}

.sw-student-tab.active .sw-tab-num {
  background: var(--gold);
}

/* ── Individual student card ── */
.student-block {
  background: #faf8ff;
  border: 1.5px solid #ede8f8;
  border-radius: 10px;
  padding: 1.25rem 1.25rem 1rem;
  margin-bottom: 12px;
  scroll-margin-top: 96px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.student-block:hover {
  border-color: #c4a8e8;
  box-shadow: 0 2px 10px rgba(107, 33, 168, 0.07);
}

.student-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.student-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--purple);
  display: flex;
  align-items: center;
  gap: 8px;
}

.student-num {
  width: 22px;
  height: 22px;
  min-width: 22px;
  background: var(--purple);
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 576px) {
  .student-block {
    padding: 1rem 1rem 0.85rem;
  }

  /* stack pill groups to full width, comfortable tap targets */
  .pill-btn {
    padding: 0.4rem 0.85rem;
    font-size: 0.74rem;
  }

  .pill-group-scroll {
    margin: 0 -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .pill-group {
    flex-wrap: nowrap;
  }
}

/* ── Nav buttons (Continue / Back) ── */
.sw-nav-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.sw-btn-continue {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(to right, var(--purple), #c026d3);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.85rem 1rem;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  font-family: "Montserrat", Arial, sans-serif;
  cursor: pointer;
  transition:
    opacity 0.2s,
    transform 0.15s,
    box-shadow 0.2s;
  box-shadow: 0 6px 20px rgba(var(--purple-rgb), 0.25);
}

.sw-btn-continue:hover {
  opacity: 0.92;
  transform: translateY(-2px);
  color: #fff;
}

.sw-btn-continue:active {
  transform: translateY(0);
}

.sw-btn-continue:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

.sw-btn-continue i {
  font-size: 0.78rem;
  transition: transform 0.2s;
}

.sw-btn-continue:hover i {
  transform: translateX(3px);
}

.sw-btn-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #fff;
  border: 1.5px solid #ddd;
  color: #555;
  border-radius: 8px;
  padding: 0.85rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: "Montserrat", Arial, sans-serif;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  flex-shrink: 0;
}

.sw-btn-back:hover {
  border-color: var(--purple);
  color: var(--purple);
  background: #faf8ff;
}

@media (max-width: 480px) {
  .sw-nav-row {
    flex-direction: column-reverse;
  }

  .sw-btn-back,
  .sw-btn-continue {
    width: 100%;
  }

  .btn-register {
    width: 100%;
    justify-content: center;
    padding: 0.85rem 1rem;
  }
}

/* ── Inline validation shake ── */
@keyframes sw-shake {

  0%,
  100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-6px);
  }

  40% {
    transform: translateX(6px);
  }

  60% {
    transform: translateX(-4px);
  }

  80% {
    transform: translateX(4px);
  }
}

.sw-shake {
  animation: sw-shake 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
  .sw-shake {
    animation: none;
  }
}

/* ── Success state (after final submit, optional) ── */
.sw-success-panel {
  text-align: center;
  padding: 2.5rem 1.5rem;
}

.sw-success-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
}

.sw-success-panel h3 {
  font-weight: 900;
  color: #1a1a1a;
  margin-bottom: 0.5rem;
}

.sw-success-panel p {
  color: #666;
  font-size: 0.9rem;
}

/* ── Field labels ── */
.field-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #444;
  margin-bottom: 6px;
}

.field-label .req {
  color: #ef4444;
  font-style: normal;
  font-weight: 400;
  margin-left: 2px;
}

/* ── Inputs / selects ── */
.membership-body .form-control,
.membership-body .form-select {
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 13.5px;
  background: #fafafa;
  border: 1.5px solid #ddd;
  border-radius: 6px;
  color: #333;
  transition:
    border-color 0.2s,
    background 0.2s,
    box-shadow 0.2s;
}

.membership-body .form-control:focus,
.membership-body .form-select:focus {
  border-color: var(--purple);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(107, 33, 168, 0.1);
  outline: none;
}

/* ── Field spacing tightened for mobile density ── */
@media (max-width: 576px) {
  .field-label {
    font-size: 11px;
    margin-bottom: 5px;
  }

  .membership-body .form-control,
  .membership-body .form-select {
    font-size: 16px;
    /* prevents iOS auto-zoom on focus */
    padding: 0.6rem 1.85rem;
  }

  .input-icon-wrap .form-control {
    font-size: 16px;
  }
}

/* ── Sticky continue bar on very small screens (optional, step 1 only) ── */
@media (max-width: 480px) {
  .sw-nav-row {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding-top: 0.85rem;
    padding-bottom: 0.25rem;
    margin-top: 1.25rem;
    box-shadow: 0 -8px 16px -8px rgba(0, 0, 0, 0.06);
  }
}

/* ── Inline form-level error box (populated by signup.js) ── */
#register-errors:empty {
  display: none;
}

#register-errors {
  background: #fdeaea;
  border: 1px solid #f3b7b7;
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  margin-bottom: 1rem;
}

/* ════════════════════════════════════════════════════════════════
   Pill-choice fields (replaces dropdown selects)
   ════════════════════════════════════════════════════════════════ */

.pill-field-icon {
  color: var(--purple);
  font-size: 0.7rem;
  margin-right: 4px;
}

input.btn-check {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

.pill-group-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--purple-rgb), 0.35) transparent;
  margin: 0 -2px;
  padding: 2px 2px 6px;
}

.pill-group-scroll::-webkit-scrollbar {
  height: 4px;
}

.pill-group-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.pill-group-scroll::-webkit-scrollbar-thumb {
  background: rgba(var(--purple-rgb), 0.3);
  border-radius: 4px;
}

.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

@media (max-width: 575px) {
  .pill-group {
    flex-wrap: nowrap;
  }

  .pill-group-scroll {
    margin: 0 -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.pill-btn {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid #ddd;
  border-radius: 50px;
  padding: 0.32rem 0.85rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #666;
  background: #fafafa;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  user-select: none;
  transition:
    background 0.18s,
    border-color 0.18s,
    color 0.18s,
    box-shadow 0.18s;
}

.pill-btn:hover {
  border-color: var(--purple);
  color: var(--purple);
}

.btn-check:checked+.pill-btn {
  background: var(--purple);
  border-color: var(--purple);
  color: #fff;
  box-shadow: 0 3px 10px rgba(var(--purple-rgb), 0.3);
}

.btn-check:focus-visible+.pill-btn {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--purple-rgb), 0.18);
}

@media (max-width: 480px) {
  .pill-btn {
    font-size: 0.68rem;
    padding: 0.3rem 0.7rem;
  }
}

/* ── Range slider field (Grade) ── */
.range-field-wrap {
  padding-top: 4px;
}

.range-input {
  width: 100%;
  accent-color: var(--purple);
  height: 1.4rem;
  cursor: pointer;
}

.range-input::-webkit-slider-thumb {
  box-shadow: 0 2px 8px rgba(var(--purple-rgb), 0.4);
}

.range-input::-moz-range-thumb {
  box-shadow: 0 2px 8px rgba(var(--purple-rgb), 0.4);
}

.range-value-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  margin-top: 0.3rem;
  background: var(--purple);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  border-radius: 50px;
  padding: 0.2rem 0.65rem;
}

@media (prefers-reduced-motion: reduce) {

  .pill-btn,
  .student-block {
    transition: none;
  }
}

/* ════════════════ Videos page ════════════════ */

.videos-hero {
  position: relative;
  background-image: url("/assets/images/about/video-hero.jpg");
  background-size: cover;
  background-position: center;
  min-height: 420px;
  color: #fff;
}

.videos-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.8) 100%);
  z-index: 1;
  pointer-events: none;
}

.videos-hero>.container {
  position: relative;
  z-index: 2;
}

.videos-hero h1 {
  font-weight: 800;
  font-size: 3rem;
  letter-spacing: 0.5px;
  line-height: 1.25;
}

.videos-hero h1 .highlight {
  color: var(--gold);
}

.videos-hero p {
  font-size: 1.1rem;
  color: #f1f1f1;
}

.videos-hero .yt-link {
  color: var(--gold);
  font-weight: 600;
  text-decoration: underline;
}

.videos-hero .yt-link:hover {
  color: var(--gold-dark);
}

.video-card .ratio {
  background-color: #000;
  overflow: hidden;
}

.video-card iframe {
  border: 0;
}

.video-caption {
  margin-top: 1.25rem;
  text-align: center;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 1.15rem;
  color: #1a1a1a;
}

@media (max-width: 767px) {
  .videos-hero h1 {
    font-size: 2rem;
  }
}

/* ════════════════ Donation product page ════════════════ */

.donation-main-img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
  border: 1px solid #e6e6e6;
}

.donation-thumbs {
  gap: 0.75rem;
}

.donation-thumb {
  border: 2px solid transparent;
  padding: 0;
  background: none;
  width: 110px;
  height: 110px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s;
}

.donation-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.donation-thumb.active,
.donation-thumb:hover {
  border-color: var(--gold-dark);
}

.donation-title {
  color: var(--purple-deep);
  font-weight: 800;
  font-size: 2.25rem;
}

.donation-divider {
  border-color: #ddd;
  opacity: 1;
  margin: 1.25rem 0 1.75rem;
}

.donation-subtext {
  font-size: 1.25rem;
  font-weight: 500;
  color: #000000;
}

.donation-label {
  font-weight: 600;
  color: #1a1a1a;
}

.donation-select {
  min-width: 220px;
  border-radius: 2px;
  border: 1px solid #ccc;
  color: #777;
}

.donation-select:focus {
  border-color: var(--purple-deep);
  box-shadow: 0 0 0 0.2rem rgba(75, 31, 126, 0.15);
}

.qty-stepper {
  border: 1px solid #ccc;
}

.qty-btn {
  width: 38px;
  height: 42px;
  background: #f4f4f4;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.qty-btn:hover {
  background: #e9e9e9;
}

.qty-input {
  width: 42px;
  height: 42px;
  border: none;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  text-align: center;
}

.qty-input:focus {
  outline: none;
}

@media (max-width: 991px) {
  .donation-main-img {
    height: 300px;
  }
}

/* ════════════════ In-Person Camps page ════════════════ */

/* ── Hero ── */
.camps-hero {
  position: relative;
  background-image: url("/assets/images/camps/camps-about-hero.jpg");
  background-size: cover;
  background-position: center;
  min-height: 440px;
  color: #fff;
}

.camps-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.45) 0%,
      rgba(0, 0, 0, 0.8) 100%);
  z-index: 1;
  pointer-events: none;
}

.camps-hero>.container {
  position: relative;
  z-index: 2;
}

.camps-hero h1 {
  font-weight: 800;
  letter-spacing: 1px;
}

.camps-hero p {
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  margin-bottom: 0.25rem;
}

/* ── Section headings ── */
.camps-heading {
  color: #1a1a1a;
  font-weight: 800;
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2.5rem;
}

/* ── Schedule list ── */
.camps-schedule-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.camps-schedule-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  color: #333;
}

.camps-schedule-list i {
  color: var(--purple-deep);
  margin-top: 0.55rem;
  flex-shrink: 0;
  font-size: 0.8rem;
}

/* ── Register / CTA button (reused across sections) ── */
.btn-camps {
  display: inline-block;
  background-color: var(--purple-deep);
  color: #fff;
  font-weight: 600;
  padding: 0.65rem 2rem;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.2s;
}

/* ── Camp location cards ── */
.camp-location-card {
  background: #fff;
  border: 1px solid #eee;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  padding: 2rem 2.5rem;
}

.camp-location-card h3 {
  color: var(--purple-deep);
  font-weight: 800;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.camp-location-card p {
  color: #444;
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 0;
}

/* Google Maps embed on the right side of each location card */
.camp-map {
  border-radius: 4px;
  overflow: hidden;
}

.camp-map iframe {
  width: 100%;
  height: 100%;
}

/* ── Video + copy section ── */
.camps-media-section {
  background: #ededed;
}

/* Video is intentionally constrained to .video-wrap's max-width (740px,
   defined in about-us.css) instead of running full-bleed — keeps it
   proportional to the rest of the page instead of towering over the
   "Whether Uptown Or Downtown" copy beneath it. */
.camps-media-section .video-wrap {
  margin: 0 auto;
}

/* Legacy rule from the old inline play-button swap — no longer used now
   that camps.js opens the video in a fullscreen lightbox instead (see
   .camps-lightbox below). Left in place in case anything still renders
   a video inside the static ratio box. */
.camp-video-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camps-subheading {
  color: var(--purple-deep);
  font-weight: 800;
  font-size: 1.6rem;
}

.camps-copy {
  max-width: 880px;
  margin: 0 auto;
}

.camps-copy p {
  font-size: 0.87rem;
  color: #000000;
  line-height: 1.8;
  text-align: center;
  font-weight: 600;
}

/* Add this inside the "── Video + copy section ──" camps block */

.video-thumb-btn {
  position: relative;
  display: block;
  justify-content: center;
  align-items: center;
  border: none;
  background: none;
  width: 100%;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
}

.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(var(--purple-rgb), 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition:
    background 0.2s,
    transform 0.2s;
}

/* Triangle play icon via pure CSS — no Font Awesome needed */
.play-btn::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 0 12px 22px;
  border-color: transparent transparent transparent #fff;
  margin-left: 5px;
  /* optical centre */
}

/* Pulse ring */
.play-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(var(--purple-rgb), 0.35);
  animation: playPulse 2s ease-out infinite;
}

@keyframes playPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(1.75);
    opacity: 0;
  }
}

.video-thumb-btn:hover .play-btn {
  background: var(--gold-dark);
  transform: translate(-50%, -50%) scale(1.1);
}

/* Dim the thumbnail slightly on hover so the button pops */
.video-thumb-btn:hover img {
  filter: brightness(0.82);
  transition: filter 0.2s;
}

/* ── Program cards (Fun & Training / GM Tag / Online) ── */
.program-card {
  background-color: #ffffff;
  padding-block: 1.5rem;
  padding-inline: 1rem;
  border: 1px solid white;
  border-radius: 0.7rem;
}

.program-card h4 {
  color: #1a1a1a;
  font-weight: 800;
  text-align: center;
  font-size: 1.05rem;
  letter-spacing: 0.3px;
  margin-bottom: 1rem;
}

.program-card p {
  font-size: 0.9rem;
  color: #000000;
  line-height: 1.7;
}

.program-card .btn-camps {
  display: block;
  width: max-content;
  margin: 1rem auto 0;
}

/* ── Important notes ── */
.important-notes-title {
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 1.25rem;
}

.important-notes-list {
  list-style: none;
  padding-left: 0;
}

.important-notes-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.2rem;
  font-size: 1rem;
  color: #000000;
}

.important-notes-list i {
  color: var(--purple-deep);
  margin-top: 0.45rem;
  flex-shrink: 0;
  font-size: 0.8rem;
}

.camps-thanks {
  color: #000000;
  font-weight: 700;
  font-size: medium;
}

@media (max-width: 767px) {
  .camps-heading {
    font-size: 1.5rem;
  }

  .camp-location-card {
    padding: 1.5rem;
  }
}

/* ── Video Lightbox Overlay ── */
.camps-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 2, 12, 0.92);
  backdrop-filter: blur(8px);
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.28s ease;
}

.camps-lightbox.is-open {
  opacity: 1;
}

.clb-inner {
  width: 100%;
  max-width: 620px;
  background: #0f0520;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(var(--gold-rgb), 0.3);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.7);
  transform: scale(0.93) translateY(12px);
  transition: transform 0.28s cubic-bezier(0.34, 1.36, 0.64, 1);
}

.camps-lightbox.is-open .clb-inner {
  transform: scale(1) translateY(0);
}

/* Header */
.clb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: #07030f;
  border-bottom: 2px solid var(--gold);
}

.clb-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.clb-brand-icon {
  width: 34px;
  height: 34px;
  background: var(--purple);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: var(--gold);
  flex-shrink: 0;
}

.clb-brand-name {
  display: block;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
}

.clb-brand-sub {
  display: block;
  color: rgba(255, 255, 255, 0.42);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
}

.clb-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.65);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.18s,
    color 0.18s;
  flex-shrink: 0;
}

.clb-close:hover {
  background: rgba(var(--red-rgb), 0.25);
  border-color: rgba(var(--red-rgb), 0.5);
  color: #fff;
}

.clb-close:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Video */
.clb-video-wrap {
  position: relative;
  background: #000;
}

.clb-video {
  width: 100%;
  display: block;
  max-height: 60vh;
  object-fit: contain;
}

.clb-progress-track {
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
}

.clb-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--gold);
  border-radius: 0 2px 2px 0;
  transition: width 0.25s linear;
}

/* Footer */
.clb-footer {
  padding: 0.85rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.clb-footer-title {
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  margin: 0 0 2px;
  line-height: 1.3;
}

.clb-footer-sub {
  color: rgba(255, 255, 255, 0.42);
  font-size: 11px;
  font-weight: 600;
  margin: 0;
}

.clb-footer-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.clb-footer-btn {
  display: inline-block;
  padding: 0.45rem 1rem;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.65);
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}

.clb-footer-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

.clb-footer-btn--gold {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}

.clb-footer-btn--gold:hover {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
  color: #fff;
}

@media (max-width: 576px) {
  .clb-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .clb-footer-actions {
    width: 100%;
  }

  .clb-footer-btn {
    flex: 1;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {

  .camps-lightbox,
  .clb-inner {
    transition: none;
  }
}

/* ════════════════ Personal Evaluation product page ════════════════ */

/* ════════════════ Personal Evaluation page — UI upgrade ════════════════
   Prefix: pe- (Personal Evaluation) to avoid collisions with style.css.
   Mirrors the il-/ol- pattern: breadcrumb hero, eyebrow + gold badge,
   purple/gold tokens. Reuses .eval-copy/.donation-* from existing CSS.
   ════════════════════════════════════════════════════════════════════ */

/* ── Mini hero ── */
.pe-hero {
  position: relative;
  background: linear-gradient(135deg,
      var(--purple-deep) 0%,
      var(--purple) 100%);
  padding: 2.5rem 1rem 3rem;
  text-align: center;
  overflow: hidden;
}

.pe-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 1.1rem;
  position: relative;
  z-index: 1;
}

.pe-breadcrumb a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color 0.2s;
}

.pe-breadcrumb a:hover,
.pe-breadcrumb a:focus-visible {
  color: var(--gold);
}

.pe-breadcrumb i {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.4);
}

.pe-breadcrumb .current {
  color: var(--gold);
}

.pe-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(var(--gold-rgb), 0.16);
  border: 1px solid rgba(var(--gold-rgb), 0.4);
  border-radius: 50px;
  padding: 4px 14px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}

.pe-hero-title {
  color: #fff;
  font-weight: 800;
  font-size: clamp(28px, 4.5vw, 42px);
  margin-bottom: 0.6rem;
  position: relative;
  z-index: 1;
}

.pe-hero-sub {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.92rem;
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.7;
  position: relative;
  z-index: 1;
}

@media (max-width: 576px) {
  .pe-hero {
    padding: 2rem 1rem 2.25rem;
  }
}

/* ── Gallery image badge ── */
.pe-img-wrap {
  position: relative;
}

.pe-img-badge {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 2;
  background: rgba(var(--purple-deep-rgb), 0.9);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pe-img-badge i {
  color: var(--gold);
  font-size: 0.68rem;
}

/* ── Trust strip beneath gallery ── */
.pe-trust-strip {
  display: flex;
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid #ece4f7;
}

.pe-trust-item {
  flex: 1;
  text-align: center;
}

.pe-trust-num {
  display: block;
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--purple);
  line-height: 1;
}

.pe-trust-label {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 3px;
}

/* ── Content panel wrapper ── */
.pe-panel {
  background: #fff;
  border-radius: 14px;
  border-top: 4px solid var(--purple);
  box-shadow: 0 8px 36px rgba(var(--purple-rgb), 0.1);
  padding: 2rem 2.25rem 2.25rem;
}

@media (max-width: 576px) {
  .pe-panel {
    padding: 1.5rem 1.25rem 1.75rem;
    border-radius: 10px;
  }
}

.pe-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 0.75rem;
}

/* ── Select with icon (matches ol-select-wrap pattern) ── */
.pe-select-wrap {
  position: relative;
}

.pe-select-wrap .pe-select-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--purple);
  font-size: 0.85rem;
  pointer-events: none;
}

.pe-select-wrap select {
  padding-left: 2.4rem !important;
}

.pe-option-note {
  font-size: 0.78rem;
  color: #888;
  font-style: italic;
  margin: 0.5rem 0 0;
}

/* ── Secure checkout micro-note ── */
.pe-secure-note {
  font-size: 0.74rem;
  color: #999;
  margin: 1rem 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pe-secure-note i {
  color: var(--gold-dark);
}

/* Portrait variant of the existing donation gallery image */
.donation-main-img.portrait {
  height: auto;
  aspect-ratio: 3 / 4;
}

.eval-copy {
  font-size: 14.5px;
  line-height: 1.8;
  color: #1a1a1a;
  margin-bottom: 1.25rem;
}

.eval-totals {
  font-size: 14.5px;
  color: #333;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.eval-final-price {
  color: var(--purple);
  font-weight: 800;
  font-size: 20px;
}

.pdp-img-box {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid #eee;
}

.pdp-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.pdp-img-box:hover img {
  transform: scale(1.04);
}

.hr-double {
  border: none;
  border-top: 3px double #e0e0e0;
  margin: 1.25rem 0;
}

.rel-card {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  transition:
    box-shadow 0.22s,
    transform 0.22s;
}

.rel-card:hover {
  box-shadow: 0 8px 28px rgba(var(--purple-rgb), 0.13);
  transform: translateY(-4px);
}

.rel-card-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

/* ════════════════ In-Person Lessons page — UI upgrade ════════════════
   Prefix: il- (In-person Lessons) to avoid collisions with style.css.
   Reuses existing tokens (--purple, --gold, etc.) and the site's
   established eyebrow/gold-underline/chess-watermark patterns so this
   page reads as part of the same system as Events, Donate, Deals, etc.
   ════════════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.il-hero {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.il-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
      rgba(var(--purple-deep-rgb), 0.82) 0%,
      rgba(20, 8, 35, 0.78) 55%,
      rgba(8, 6, 12, 0.88) 100%);
  z-index: 0;
}

.il-hero .container {
  position: relative;
  z-index: 1;
}

.il-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 1.25rem;
}

.il-breadcrumb a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color 0.2s;
}

.il-breadcrumb a:hover,
.il-breadcrumb a:focus-visible {
  color: var(--gold);
}

.il-breadcrumb i {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.4);
}

.il-breadcrumb .current {
  color: var(--gold);
}

.il-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(var(--gold-rgb), 0.16);
  border: 1px solid rgba(var(--gold-rgb), 0.4);
  border-radius: 50px;
  padding: 4px 14px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}

.il-hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 1.75rem;
}

.il-btn-hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold);
  color: #fff;
  font-weight: 800;
  font-size: 0.92rem;
  padding: 0.85rem 2rem;
  border-radius: 50px;
  text-decoration: none;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 24px rgba(var(--gold-rgb), 0.35);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    background 0.2s;
}

.il-btn-hero-primary:hover,
.il-btn-hero-primary:focus-visible {
  background: var(--gold-dark);
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(var(--gold-rgb), 0.45);
  color: #fff;
}

.il-btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.85rem 1.9rem;
  border-radius: 50px;
  text-decoration: none;
  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.2s;
}

.il-btn-hero-secondary:hover,
.il-btn-hero-secondary:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--gold);
  color: #fff;
  transform: translateY(-2px);
}

@media (max-width: 576px) {
  .il-hero {
    min-height: 400px;
  }
}

/* ── Eyebrow + underline section header, reused across the two
   intro rows (Private Lessons / Chess Buddy Tutoring) ── */
.il-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 0.65rem;
}

.il-section-eyebrow i {
  font-size: 0.7rem;
}

.il-section-title {
  position: relative;
  padding-bottom: 0.9rem;
  margin-bottom: 1.5rem !important;
}

.il-section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 4px;
  background: var(--gold);
  border-radius: 2px;
}

/* ── Image treatment: purple offset shadow card, matching the
   .service-img-wrap pattern already used elsewhere on the site ── */
.il-img-wrap {
  position: relative;
}

.il-img-wrap img {
  position: relative;
  z-index: 1;
  border-radius: 8px;
}

.il-img-wrap::before {
  content: "";
  position: absolute;
  bottom: -16px;
  right: -16px;
  width: 100%;
  height: 100%;
  background: var(--gold);
  opacity: 0.18;
  border-radius: 8px;
  z-index: 0;
}

.il-img-wrap.il-img-wrap--left::before {
  right: auto;
  left: -16px;
}

@media (max-width: 767px) {
  .il-img-wrap::before {
    display: none;
  }
}

.il-img-badge {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 2;
  background: rgba(var(--purple-deep-rgb), 0.9);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 50px;
  backdrop-filter: blur(3px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.il-img-badge i {
  color: var(--gold);
  font-size: 0.68rem;
}

/* ── Guide download buttons, slightly richer than plain .btn-learn ── */
.il-guide-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1.5px solid #e8dff5;
  border-radius: 10px;
  padding: 0.85rem 1.25rem;
  text-decoration: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
}

.il-guide-link:hover,
.il-guide-link:focus-visible {
  border-color: var(--purple);
  box-shadow: 0 8px 24px rgba(var(--purple-rgb), 0.14);
  transform: translateY(-2px);
}

.il-guide-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  background: var(--purple-light, #f3ecff);
  color: var(--purple);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.il-guide-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.il-guide-text .il-guide-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #999;
}

.il-guide-text .il-guide-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: #1a1a1a;
}

/* ── Lesson option cards: icon badge, meta row, arrow CTA ── */
.il-card-icon {
  width: 52px;
  height: 52px;
  min-width: 52px;
  background: var(--purple);
  color: #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  position: absolute;
  top: -26px;
  left: 1.75rem;
  box-shadow: 0 8px 20px rgba(var(--purple-rgb), 0.35);
  z-index: 2;
}

.il-card-img-wrap {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1.75rem !important;
}

.il-card-img-wrap img {
  margin-bottom: 0 !important;
  transition: transform 0.4s ease;
}

.lesson-option-card:hover .il-card-img-wrap img {
  transform: scale(1.05);
}

.il-card-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--purple);
  margin-bottom: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.il-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.il-card-meta i {
  color: var(--gold-dark);
  font-size: 0.78rem;
}

.btn-register {
  display: inline-flex;
  padding: 0.75rem 2.2rem;
  background: var(--purple);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition:
    opacity 0.2s,
    transform 0.15s;
  align-items: center;
  gap: 8px;
}

.btn-register i {
  font-size: 0.78rem;
  transition: transform 0.2s;
}

.btn-register:hover i {
  transform: translateX(3px);
}

/* ── Subtle alternating section divider, matching the site's
   gold-rule pattern (see .gold-rule on the Events page) ── */
.il-gold-rule {
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
  border: none;
  max-width: 200px;
  margin: 0 auto;
}

.il-options-header {
  text-align: center;
  padding: 0 1rem 1rem;
}

.il-options-header .il-section-eyebrow {
  justify-content: center;
}

.il-options-header h2 {
  margin-bottom: 0.6rem !important;
}

.il-options-header p {
  font-size: 0.92rem;
  color: #666;
  max-width: 560px;
  margin: 0 auto;
}

@media (prefers-reduced-motion: reduce) {

  .il-btn-hero-primary,
  .il-btn-hero-secondary,
  .il-guide-link,
  .il-card-img-wrap img,
  .btn-register i {
    transition: none;
  }
}

/* Light gray section background, matching .prog-cards-section's pattern */
.lesson-options-section {
  background: #f3f3f3;
}

/* White card that pops off the gray section background */
.lesson-option-card {
  position: relative;
  overflow: visible !important;
  background: #fff;
  border-radius: 10px;
  padding: 2rem 2rem 2.25rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition:
    transform 0.22s,
    box-shadow 0.22s;
}

.lesson-option-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

@media (max-width: 767px) {
  .lesson-option-card {
    padding: 1.5rem 1.5rem 1.75rem;
  }
}

/* ── Tabbed lesson-type switcher (replaces stacked Private Lessons /
   Chess Buddy sections) ── */
.il-tabs-section {
  padding: 4rem 0;
}

.il-tab-nav {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

.il-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #f3ecff;
  border: 1.5px solid #ddd3f5;
  color: var(--purple);
  border-radius: 50px;
  padding: 0.7rem 1.6rem;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.22s, color 0.22s, border-color 0.22s, transform 0.18s;
}

.il-tab-btn i {
  color: var(--gold-dark);
  font-size: 0.82rem;
  transition: color 0.22s;
}

.il-tab-btn:hover {
  transform: translateY(-2px);
  border-color: var(--purple);
}

.il-tab-btn[aria-selected="true"] {
  background: var(--purple);
  border-color: var(--purple);
  color: #fff;
}

.il-tab-btn[aria-selected="true"] i {
  color: var(--gold);
}

.il-tab-panel {
  display: none;
}

.il-tab-panel.il-tab-active {
  display: block;
}

/* fade the panel in on switch, matching the site's existing reveal feel */
.il-tab-panel.il-tab-active {
  animation: il-tab-fade 0.35s ease;
}

@keyframes il-tab-fade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .il-tab-panel.il-tab-active {
    animation: none;
  }
}

@media (max-width: 576px) {
  .il-tab-nav {
    gap: 0.5rem;
  }

  .il-tab-btn {
    flex: 1 1 auto;
    justify-content: center;
    padding: 0.65rem 1rem;
    font-size: 0.8rem;
  }
}

/* ════════════════ Online Lessons page — UI upgrade ════════════════
   Prefix: ol- (Online Lessons) to avoid collisions with style.css.
   Mirrors the il- (In-Person Lessons) upgrade pattern: eyebrow +
   gold-underline headers, purple/gold tokens, chess watermark motif.
   ════════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.ol-hero {
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.ol-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
      rgba(var(--purple-deep-rgb), 0.82) 0%,
      rgba(20, 8, 35, 0.78) 55%,
      rgba(8, 6, 12, 0.88) 100%);
  z-index: 0;
}

.ol-hero .container {
  position: relative;
  z-index: 1;
}

.ol-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 1.1rem;
}

.ol-breadcrumb a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color 0.2s;
}

.ol-breadcrumb a:hover,
.ol-breadcrumb a:focus-visible {
  color: var(--gold);
}

.ol-breadcrumb i {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.4);
}

.ol-breadcrumb .current {
  color: var(--gold);
}

.ol-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(var(--gold-rgb), 0.16);
  border: 1px solid rgba(var(--gold-rgb), 0.4);
  border-radius: 50px;
  padding: 4px 14px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}

.ol-hero h1 {
  color: #fff;
  font-weight: 800;
  font-size: clamp(34px, 5vw, 52px);
  margin-bottom: 0.75rem;
}

.ol-hero p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
}

@media (max-width: 576px) {
  .ol-hero {
    min-height: 320px;
  }

  .il-hero {
    min-height: 560px;
  }
}

/* ── Section eyebrow + underline (shared pattern) ── */
.ol-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 0.65rem;
}

.ol-section-eyebrow i {
  font-size: 0.7rem;
}

.ol-section-title {
  position: relative;
  padding-bottom: 0.9rem;
  margin-bottom: 1.25rem !important;
}

.ol-section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 4px;
  background: var(--gold);
  border-radius: 2px;
}

/* ── Product image, gold offset shadow (matches .il-img-wrap) ── */
.ol-img-wrap {
  position: relative;
}

.ol-img-wrap img {
  position: relative;
  z-index: 1;
  border-radius: 8px;
  width: 100%;
  display: block;
}

.ol-img-wrap::before {
  content: "";
  position: absolute;
  bottom: -16px;
  left: -16px;
  width: 100%;
  height: 100%;
  background: var(--gold);
  opacity: 0.18;
  border-radius: 8px;
  z-index: 0;
}

@media (max-width: 767px) {
  .ol-img-wrap::before {
    display: none;
  }
}

.ol-img-badge {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 2;
  background: rgba(var(--purple-deep-rgb), 0.9);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ol-img-badge i {
  color: var(--gold);
  font-size: 0.68rem;
}

.ol-stat-strip {
  display: flex;
  gap: 1.5rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #ece4f7;
}

.ol-stat {
  text-align: center;
  flex: 1;
}

.ol-stat-num {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--purple);
  line-height: 1;
}

.ol-stat-label {
  font-size: 0.66rem;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 3px;
}

/* ── Evaluation CTA card (replaces the mismatched pink/purple gradient button) ── */

.ol-eval-icon {
  width: 46px;
  height: 46px;
  min-width: 46px;
  background: rgba(var(--gold-rgb), 0.2);
  border: 1px solid rgba(var(--gold-rgb), 0.45);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 1.1rem;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.ol-eval-text {
  flex: 1;
  position: relative;
  z-index: 1;
}

.ol-eval-text .ol-eval-label {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin-bottom: 2px;
}

.ol-eval-text .ol-eval-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
}

.ol-eval-price {
  font-size: 1.1rem;
  font-weight: 900;
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.ol-eval-card-link {
  text-decoration: none;
  display: block;
}

.ol-eval-card-link:hover .ol-eval-card {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(var(--purple-deep-rgb), 0.3);
}

.ol-eval-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(135deg,
      var(--purple-deep) 0%,
      var(--purple) 100%);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

/* ── Guide download link (matches .il-guide-link) ── */
.ol-guide-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1.5px solid #e8dff5;
  border-radius: 10px;
  padding: 0.8rem 1.2rem;
  text-decoration: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
}

.ol-guide-link:hover,
.ol-guide-link:focus-visible {
  border-color: var(--purple);
  box-shadow: 0 8px 24px rgba(var(--purple-rgb), 0.14);
  transform: translateY(-2px);
}

.ol-guide-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: #f3ecff;
  color: var(--purple);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.ol-guide-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.ol-guide-text .ol-guide-label {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #999;
}

.ol-guide-text .ol-guide-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: #1a1a1a;
}

/* ── Registration form card ── */
.ol-form-card {
  background: #faf8ff;
  border: 1.5px solid #ede8f8;
  border-radius: 14px;
  padding: 1.75rem 1.75rem 2rem;
}

.ol-form-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #333;
  margin-bottom: 6px;
}

.ol-required {
  color: #ef4444;
  font-weight: 400;
}

.ol-form-card .form-select,
.ol-form-card .form-control {
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 13.5px;
  background: #fff;
  border: 1.5px solid #ddd;
  border-radius: 6px;
  padding: 0.65rem 0.85rem;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.ol-form-card .form-select:focus,
.ol-form-card .form-control:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(var(--purple-rgb), 0.1);
  outline: none;
}

/* Selected-plan preview, fills in once a Lesson Type is chosen */
.ol-plan-preview {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: #fff;
  border: 1.5px solid var(--gold);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-top: 0.65rem;
}

.ol-plan-preview.visible {
  display: flex;
}

.ol-plan-preview-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #1a1a1a;
}

.ol-plan-preview-price {
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--purple);
  white-space: nowrap;
}

/* ── Date picker $0 explanation chip ── */
.ol-date-note {
  font-size: 0.72rem;
  color: #888;
  font-style: italic;
}

/* ── Coach referral select with avatar-style prefix icon ── */
.ol-select-wrap {
  position: relative;
}

.ol-select-wrap i.ol-select-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--purple);
  font-size: 0.85rem;
  pointer-events: none;
}

.ol-select-wrap select {
  padding-left: 2.4rem !important;
}

/* ── Totals box, now live ── */
.ol-totals {
  background: #fff;
  border: 1.5px solid #ede8f8;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.ol-totals-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 1.1rem;
  font-size: 0.85rem;
  color: #555;
  border-bottom: 1px solid #f0eaf8;
}

.ol-totals-row:last-child {
  border-bottom: none;
  background: #f3ecff;
  font-weight: 800;
  color: var(--purple);
  font-size: 0.95rem;
}

.ol-totals-row .ol-totals-val {
  font-weight: 700;
  transition: color 0.15s;
}

.ol-totals-row .ol-totals-val.ol-updated {
  color: var(--gold-dark);
}

/* ── Submit button ── */
.ol-form-card .btn-register {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ol-form-card .btn-register i {
  font-size: 0.78rem;
}

@media (max-width: 480px) {
  .ol-form-card {
    padding: 1.25rem 1.25rem 1.5rem;
  }
}

/* ── Additional information: cleaner pricing table ── */
.ol-info-section {
  background: #f9f7fd;
  border-radius: 14px;
  padding: 2rem 2rem 2.25rem;
}

.ol-price-table {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

@media (max-width: 900px) {
  .ol-price-table {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .ol-price-table {
    grid-template-columns: 1fr;
  }
}

.ol-price-group {
  background: #fff;
  border: 1px solid #e8dff5;
  border-radius: 10px;
  padding: 1.1rem 1.2rem;
}

.ol-price-group-title {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--purple);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 7px;
}

.ol-price-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: #444;
  padding: 0.35rem 0;
  border-bottom: 1px dashed #ece4f7;
}

.ol-price-line:last-child {
  border-bottom: none;
}

.ol-price-line .ol-price-val {
  font-weight: 700;
  color: #1a1a1a;
}

.ol-time-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

.ol-time-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #e8dff5;
  border-radius: 50px;
  padding: 0.45rem 0.9rem;
  font-size: 0.76rem;
  font-weight: 700;
  color: #444;
}

.ol-time-pill i {
  color: var(--gold-dark);
  font-size: 0.7rem;
}

@media (prefers-reduced-motion: reduce) {

  .ol-eval-card,
  .ol-guide-link {
    transition: none;
  }
}

/* =================Events page CSS====================== */
/* ══════════════════════════════
       CONTACT BAR
    ══════════════════════════════ */
.contact-bar {
  position: fixed;
  bottom: 3rem;
  right: 1.25rem;
  z-index: 999;
}

.btn-contact-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--purple);
  color: #fff;
  border-radius: 50px;
  padding: 0.5rem 1.2rem 0.5rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(var(--purple-deep-rgb), 0.35);
  transition:
    background 0.2s,
    transform 0.15s;
}

.btn-contact-bar:hover {
  background: var(--purple-deep);
  transform: translateY(-1px);
  color: #fff;
}

.btn-contact-bar .avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--purple);
  font-size: 0.7rem;
  font-weight: 900;
  flex-shrink: 0;
}

/* ══════════════════════════════
       HERO  (image + purple card)
    ══════════════════════════════ */
.events-hero {
  position: relative;
  background: #1a1a2e;
  min-height: 340px;
  overflow: hidden;
}

.hero-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* gradient fade photo into purple */
.hero-img-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
      rgba(26, 26, 46, 0) 30%,
      var(--purple) 65%);
  z-index: 1;
}

.hero-card {
  position: relative;
  z-index: 2;
  background: var(--purple);
  padding: 2.25rem 2rem 2rem;
  max-width: 480px;
  margin-left: auto;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(var(--gold-rgb), 0.2);
  border: 1px solid rgba(var(--gold-rgb), 0.45);
  border-radius: 50px;
  padding: 3px 11px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.85rem;
}

.hero-title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 0.35rem;
}

.hero-title em {
  color: var(--gold);
  font-style: italic;
}

.hero-hashtag {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--gold);
  margin-bottom: 1rem;
}

.hero-desc {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.75;
  margin-bottom: 0.6rem;
}

.hero-tagline {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  font-style: italic;
  margin-bottom: 0.75rem;
}

.hero-quote {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gold);
  border-left: 3px solid var(--gold);
  padding-left: 0.85rem;
  margin-top: 1rem;
}

/* feature pills */
.feature-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1rem;
}

.feature-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  padding: 3px 10px;
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
}

.feature-pill i {
  color: var(--gold);
  font-size: 0.62rem;
}

/* ══════════════════════════════
       SECTION HEADER (reusable)
    ══════════════════════════════ */
.sec-header {
  
  padding: 2.5rem 1rem 1.5rem;
}

.sec-header h2 {
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-weight: 900;
  color: #1a1a1a;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: var(--gold);
}

.sec-header p {
  font-size: 0.82rem;
  color: #666;
  margin-top: 0.35rem;
}

/* gold rule divider */
.gold-rule {
  height: 4px;
  background: linear-gradient(90deg,
      var(--purple-deep),
      var(--gold) 50%,
      var(--purple-deep));
  border: none;
}

/* ══════════════════════════════
       EVENT LIST + ACCORDION
    ══════════════════════════════ */
.events-list-wrap {
  background: #fff;
  border: 2px solid #e8dff5;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(var(--purple-rgb), 0.08);
}

/* month group header */
.month-header {
  background: linear-gradient(90deg, var(--purple-deep), var(--purple));
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.45rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.month-header::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
}

/* ── Each event item wraps trigger + panel ── */
.event-item {
  border-bottom: 1px solid #f0eaf8;
}

.event-item:last-child {
  border-bottom: none;
}

/* ── Trigger row (always visible) ── */
.event-trigger {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.25rem;
  cursor: pointer;
  transition: background 0.18s;
  user-select: none;
  background: #fff;
  border: none;
  width: 100%;
  text-align: left;
}

.event-trigger:hover {
  background: var(--purple-light);
}

.event-item.open .event-trigger {
  background: #ede5f8;
}

.event-date-badge {
  min-width: 52px;
  text-align: center;
  background: var(--purple);
  color: #fff;
  border-radius: 8px;
  padding: 0.45rem 0.3rem;
  flex-shrink: 0;
  transition: background 0.2s;
}

.event-item.open .event-date-badge {
  background: var(--purple-deep);
}

.event-date-badge .month {
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
  line-height: 1;
}

.event-date-badge .day {
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1;
}

.event-date-badge .dow {
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
  line-height: 1.4;
}

.event-trigger-info {
  flex: 1;
  min-width: 0;
}

.event-dow-date {
  font-size: 0.7rem;
  font-weight: 700;
  color: #888;
  margin-bottom: 2px;
}

.event-name {
  font-size: 0.82rem;
  font-weight: 800;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s;
}

.event-item.open .event-name {
  color: var(--red);
}

.event-chevron {
  color: #bbb;
  font-size: 0.75rem;
  flex-shrink: 0;
  transition:
    transform 0.28s ease,
    color 0.2s;
}

.event-item.open .event-chevron {
  transform: rotate(180deg);
  color: var(--purple);
}

.btn-ticket {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--gold);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 0.5rem 1.1rem;
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  transition:
    background 0.18s,
    transform 0.14s;
}

.btn-ticket:hover {
  background: var(--gold-dark);
  transform: translateY(-1px);
  color: #fff;
}

/* ── Accordion panel (collapsed by default) ── */
.event-panel {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.32s ease,
    padding 0.28s ease;
  background: #f3ecff;
  padding: 0 1.25rem;
}

.event-item.open .event-panel {
  max-height: 320px;
  padding: 1rem 1.25rem 1.1rem;
}

.ep-datetime {
  font-size: 0.78rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 0.2rem;
}

.ep-address {
  font-size: 0.75rem;
  color: #555;
  margin-bottom: 0.85rem;
  display: flex;
  align-items: flex-start;
  gap: 5px;
}

.ep-address i {
  color: var(--purple);
  margin-top: 2px;
  flex-shrink: 0;
  font-size: 0.68rem;
}

.ep-features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ep-features li {
  font-size: 0.78rem;
  font-weight: 700;
  color: #1a1a1a;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 0.28rem;
  line-height: 1.45;
}

.ep-features li i {
  color: var(--purple);
  font-size: 0.65rem;
  margin-top: 3px;
  flex-shrink: 0;
}

/* show-more toggle */
.show-more-wrap {
  padding: 1rem;
  text-align: center;
  background: var(--purple-light);
}

.btn-show-more {
  background: none;
  border: 2px solid var(--purple);
  border-radius: 50px;
  color: var(--purple);
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.55rem 1.75rem;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  transition:
    background 0.2s,
    color 0.2s;
}

.btn-show-more:hover {
  background: var(--purple);
  color: #fff;
}

.event-item.hidden {
  display: none;
}

/* ══════════════════════════════
       DEALS PROMO STRIP
    ══════════════════════════════ */
.deals-strip {
  background: linear-gradient(135deg,
      var(--purple-deep) 0%,
      var(--purple) 100%);
  padding: 1.5rem 1.5rem;
  position: relative;
  overflow: hidden;
}

.deals-strip-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(var(--gold-rgb), 0.2);
  border: 1px solid rgba(var(--gold-rgb), 0.4);
  border-radius: 50px;
  padding: 3px 10px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.6rem;
}

.deals-strip h3 {
  font-size: clamp(1rem, 2.5vw, 1.35rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: 0.3rem;
}

.deals-strip p {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 1rem;
}

.btn-deals {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--gold);
  color: #fff;
  border-radius: 50px;
  padding: 0.65rem 1.75rem;
  font-size: 0.8rem;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: 0.05em;
  transition:
    background 0.2s,
    transform 0.14s;
}

.btn-deals:hover {
  background: var(--gold-dark);
  transform: translateY(-1px);
  color: #fff;
}

.deal-pill {
  display: inline-block;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  text-align: center;
}

.deal-pill .dp-price {
  font-size: 1.1rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}

.deal-pill .dp-label {
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}

.deal-pill .dp-save {
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--gold);
}

/* ══════════════════════════════
       LOCATIONS SECTION
    ══════════════════════════════ */
.locations-section {
  background: #fff;
  padding: 2.5rem 0 3rem;
}

/* transparent link wrapper — stretches to fill column */
.loc-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.loc-card {
  border: 2px solid #e8dff5;
  border-radius: 14px;
  padding: 1.75rem 1.5rem 1.5rem;
  text-align: center;
  background: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
  position: relative;
  overflow: hidden;
}

/* clickable (linked) cards get a stronger hover */
a.loc-card-link:hover .loc-card {
  border-color: var(--purple);
  box-shadow: 0 10px 32px rgba(var(--purple-rgb), 0.15);
  transform: translateY(-5px);
}

a.loc-card-link:hover .loc-directions-hint {
  opacity: 1;
  transform: translateY(0);
}

/* logo image area */
.loc-logo-wrap {
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  overflow: hidden;
  flex-shrink: 0;
}

.loc-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}

.loc-name {
  font-size: 0.95rem;
  font-weight: 900;
  color: #1a1a1a;
  margin-bottom: 0.15rem;
}

.loc-school {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--purple);
  margin-bottom: 0.1rem;
}

.loc-city {
  font-size: 0.72rem;
  color: #888;
  font-weight: 600;
  margin-bottom: 0.85rem;
}

.loc-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--purple-light);
  color: var(--purple);
  border-radius: 50px;
  padding: 4px 11px;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.6rem;
}

.loc-day {
  font-size: 0.82rem;
  font-weight: 900;
  color: #1a1a1a;
  margin-bottom: 0.7rem;
}

.loc-address {
  font-size: 0.72rem;
  color: #666;
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  margin-bottom: 0;
}

.loc-address i {
  color: var(--purple);
  margin-top: 2px;
  flex-shrink: 0;
}

/* "Get Directions" hint — slides up on hover */
.loc-directions-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 0.75rem;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--purple);
  background: var(--purple-light);
  border-radius: 50px;
  padding: 4px 12px;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}

.loc-card.coming-soon {
  border-style: dashed;
  cursor: default;
}

.loc-card.coming-soon .loc-name {
  color: #aaa;
}

.loc-card.coming-soon .loc-school {
  color: #bbb;
}

/* ══════════════════════════════
       REVEAL ANIMATION
    ══════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity 0.5s ease,
      transform 0.5s ease;
  }

  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ══════════════════════════════
       RESPONSIVE
    ══════════════════════════════ */
@media (max-width: 767px) {
  .hero-img {
    width: 100%;
    height: 220px;
    position: relative;
    opacity: 0.35;
  }

  .hero-img-fade {
    display: none;
  }

  .events-hero {
    flex-direction: column;
    min-height: auto;
  }

  .hero-card {
    max-width: 100%;
    margin: 0;
  }

  .event-title {
    white-space: normal;
  }
}

@media (max-width: 480px) {
  .event-row {
    gap: 0.6rem;
    padding: 0.8rem 1rem;
  }

  .btn-ticket {
    padding: 0.45rem 0.85rem;
    font-size: 0.68rem;
  }
}

/* =====================Exclusive Deals CSS=============================== */

/* ── 1. HERO ── */
.deals-hero {
  position: relative;
  background: linear-gradient(135deg,
      #c8860e 0%,
      var(--gold) 40%,
      #e8b84b 100%);
  padding: 3.5rem 1.5rem 3rem;
  overflow: hidden;
}

.deals-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg,
      rgba(255, 255, 255, 0.04) 0px,
      rgba(255, 255, 255, 0.04) 10px,
      transparent 10px,
      transparent 20px);
  pointer-events: none;
}

.deals-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50px;
  padding: 4px 14px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1rem;
  backdrop-filter: blur(4px);
}

.deals-hero-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.02em;
  line-height: 1.1;
  position: relative;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

.deals-hero-title .dash {
  color: rgba(255, 255, 255, 0.5);
}

.deals-hero-sub {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 0.5rem;
  font-weight: 500;
  position: relative;
}

/* deal cards hero */
.deal-card-hero {
  position: relative;
  background: rgba(255, 255, 255, 0.18);
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 20px;
  padding: 2rem 1.75rem 1.75rem;
  text-align: center;
  backdrop-filter: blur(6px);
  transition:
    transform 0.25s,
    background 0.25s,
    box-shadow 0.25s;
  overflow: hidden;
}

.deal-card-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(160deg,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0) 60%);
  pointer-events: none;
}

.deal-card-hero:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.28);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.deal-save-badge {
  display: inline-block;
  background: var(--purple);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  border-radius: 50px;
  padding: 4px 12px;
  margin-bottom: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(var(--purple-deep-rgb), 0.35);
}

.deal-card-icon {
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.4rem;
  display: block;
}

.deal-label {
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 0.2rem;
}

.deal-price {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 900;
  color: #fff;
  line-height: 1;
  margin-bottom: 0.15rem;
}

.deal-original {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: line-through;
  margin-bottom: 1.1rem;
  font-weight: 600;
}

.btn-pay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--purple);
  color: #fff;
  border-radius: 50px;
  padding: 0.75rem 2rem;
  font-size: 0.85rem;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: 0.06em;
  border: none;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  width: 100%;
  max-width: 220px;
  transition:
    background 0.2s,
    transform 0.15s,
    box-shadow 0.2s;
}

.btn-pay:hover {
  background: var(--purple-deep);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(var(--purple-deep-rgb), 0.45);
  color: #fff;
}

/* ── 2. DIVIDER ── */
.section-divider {
  height: 5px;
  background: linear-gradient(90deg,
      var(--purple-deep),
      var(--gold) 50%,
      var(--purple-deep));
}

/* ── 3. VALUE STRIP ── */
.value-strip {
  background: #fff;
  border-bottom: 1px solid #f0eaf8;
  padding: 1.75rem 1.5rem;
}

.value-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  transition: background 0.2s;
}

.value-item:hover {
  background: #faf7ff;
}

.value-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: var(--purple);
  color: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(var(--purple-rgb), 0.25);
  transition: transform 0.2s;
}

.value-item:hover .value-icon {
  transform: scale(1.08) rotate(-4deg);
}

.value-text h5 {
  font-size: 0.84rem;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 3px;
}

.value-text p {
  font-size: 0.74rem;
  color: #777;
  margin: 0;
  line-height: 1.55;
}

/* ── 4. LEFT PANEL ── */
.left-panel {
  background: #fff;
  border-right: 1px solid #f0eaf8;
}

.chess-photo-wrap {
  position: relative;
  overflow: hidden;
}

.chess-photo {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.chess-photo-wrap:hover .chess-photo {
  transform: scale(1.04);
}

.chess-photo-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top,
      rgba(var(--purple-deep-rgb), 0.85),
      transparent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.85rem 1rem 0.65rem;
}

.stat-strip {
  background: linear-gradient(135deg, #faf7ff 0%, #f3ecff 100%);
  border-top: 3px solid var(--gold);
  border-bottom: 1px solid #ede8f8;
  padding: 1.25rem 1rem;
}

.stat-item {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0.25rem 0.5rem;
}

.stat-num {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--purple);
  line-height: 1;
}

.stat-desc {
  font-size: 0.65rem;
  font-weight: 800;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
}

/* subscribe */
.email-subscribe {
  padding: 1.75rem 1.5rem;
  background: #fff;
}

.email-subscribe-title {
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--purple);
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.email-subscribe-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right,
      rgba(var(--purple-rgb), 0.2),
      transparent);
}

.email-subscribe p {
  font-size: 0.78rem;
  color: #666;
  font-weight: 500;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.subscribe-input-wrap {
  position: relative;
}

.subscribe-input-wrap i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #bbb;
  font-size: 0.8rem;
  pointer-events: none;
  transition: color 0.2s;
}

.subscribe-input-wrap:focus-within i {
  color: var(--purple);
}

.subscribe-input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.4rem;
  border-radius: 50px;
  border: 2px solid #e0d8f5;
  font-family: "Montserrat", sans-serif;
  font-size: 0.82rem;
  color: #333;
  background: #faf7ff;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  margin-bottom: 0.6rem;
}

.subscribe-input:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(var(--purple-rgb), 0.12);
}

.subscribe-input::placeholder {
  color: #bbb;
}

.btn-subscribe {
  background: var(--purple);
  border: none;
  color: #fff;
  font-weight: 800;
  font-size: 0.8rem;
  cursor: pointer;
  letter-spacing: 0.04em;
  padding: 0.65rem 1.4rem;
  border-radius: 50px;
  font-family: "Montserrat", sans-serif;
  transition:
    background 0.2s,
    transform 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  justify-content: center;
}

.btn-subscribe:hover {
  background: var(--purple-deep);
  transform: translateY(-1px);
}

.btn-subscribe.success {
  background: #16a34a;
}

/* ── 5. RIGHT PANEL ── */
.right-panel {
  background: var(--purple);
  padding: 2.75rem 2.25rem 2.25rem;
  position: relative;
  overflow: hidden;
}

.right-panel::before {
  content: "♜ ♝ ♞ ♟";
  position: absolute;
  top: -1rem;
  right: -1rem;
  font-size: 12rem;
  color: rgba(255, 255, 255, 0.025);
  line-height: 1;
  pointer-events: none;
  letter-spacing: 0.1em;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  text-align: right;
}

.panel-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(var(--gold-rgb), 0.18);
  border: 1px solid rgba(var(--gold-rgb), 0.4);
  border-radius: 50px;
  padding: 4px 12px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.85rem;
}

.panel-title {
  font-size: clamp(1.2rem, 3vw, 1.65rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: 0.75rem;
  line-height: 1.2;
  position: relative;
}

.panel-intro {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.8;
  margin-bottom: 2rem;
  position: relative;
}

.panel-intro a {
  color: var(--gold);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* deal blocks */
.deal-block {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  padding: 1.75rem 1.75rem 1.5rem;
  margin-bottom: 1.5rem;
  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.2s;
  position: relative;
  overflow: hidden;
}

.deal-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--gold);
  border-radius: 16px 0 0 16px;
}

.deal-block:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateX(4px);
}

.deal-block-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.deal-block-num {
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: var(--gold);
  color: #fff;
  border-radius: 50%;
  font-size: 0.82rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(var(--gold-rgb), 0.4);
}

.deal-block-title {
  font-size: 1rem;
  font-weight: 900;
  color: var(--gold);
  line-height: 1.3;
}

.deal-block-subtitle {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 600;
  margin-top: 3px;
}

.deal-block-body {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.85;
  margin-bottom: 1.25rem;
}

.deal-block-body p {
  margin-bottom: 0.55rem;
}

.deal-block-body p:last-child {
  margin-bottom: 0;
}

/* steps */
.deal-steps {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0.5rem;
}

.deal-steps li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 0.5rem;
  line-height: 1.55;
}

.step-dot {
  width: 20px;
  height: 20px;
  min-width: 20px;
  background: rgba(var(--gold-rgb), 0.2);
  border: 1px solid rgba(var(--gold-rgb), 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  color: var(--gold);
  font-weight: 900;
  flex-shrink: 0;
  margin-top: 1px;
}

.deal-block-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 1rem;
  margin-top: 0.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.deal-price-tag {
  font-size: 1.5rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}

.deal-price-tag span {
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.btn-pay-gold {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold);
  color: #fff;
  border-radius: 50px;
  padding: 0.72rem 1.75rem;
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: 0.06em;
  border: none;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  white-space: nowrap;
  transition:
    background 0.2s,
    transform 0.15s,
    box-shadow 0.2s;
}

.btn-pay-gold:hover {
  background: var(--gold-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--gold-rgb), 0.4);
  color: #fff;
}

/* disclaimer */
.disclaimer {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
  line-height: 1.75;
  margin-bottom: 1.75rem;
  padding: 0.85rem 1.1rem;
  border-left: 3px solid rgba(var(--gold-rgb), 0.55);
  background: rgba(var(--gold-rgb), 0.06);
  border-radius: 0 8px 8px 0;
}

.disclaimer strong {
  color: var(--gold);
  font-style: normal;
}

/* hashtag */
.hashtag-section {
  text-align: center;
  padding: 1.25rem 0 0.5rem;
}

.hashtag {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.04em;
}

.hashtag-sub {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 0.3rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* return */
.return-section {
  text-align: center;
  padding: 1.75rem 0 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 0.5rem;
}

.btn-return {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--gold);
  border: 2px solid var(--gold);
  border-radius: 50px;
  padding: 0.8rem 2.5rem;
  font-size: 0.85rem;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  transition:
    background 0.2s,
    color 0.2s,
    transform 0.15s;
}

.btn-return:hover {
  background: var(--gold);
  color: #fff;
  transform: translateY(-2px);
}

/* ── REVEAL ANIMATION ── */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity 0.55s ease,
      transform 0.55s ease;
  }

  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── RESPONSIVE ── */
@media (max-width: 991px) {
  .right-panel {
    padding: 2rem 1.5rem 1.75rem;
  }
}

@media (max-width: 767px) {
  .deals-hero {
    padding: 2.5rem 1rem 2rem;
  }

  .deals-hero::after {
    font-size: 8rem;
  }

  .deal-card-hero {
    padding: 1.4rem 1.2rem;
  }

  .chess-photo {
    height: 220px;
  }

  .right-panel {
    padding: 1.75rem 1.25rem 1.5rem;
  }

  .deal-block {
    padding: 1.4rem 1.25rem;
  }
}

@media (max-width: 480px) {
  .btn-pay {
    max-width: 100%;
  }

  .deal-block-footer {
    flex-direction: column;
    align-items: flex-start;
  }

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

  .btn-return {
    padding: 0.75rem 1.5rem;
  }
}

/* ════════ Worldwide Online Camps — minimal custom CSS ════════
   Bootstrap utilities handle layout/spacing/typography.
   Only what Bootstrap genuinely cannot do is here.
   ════════════════════════════════════════════════════════════ */

/* ── Hero ── */

.oc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.58);
  z-index: 0;
}

/* ── Style-card images ── */

/* ── Side images (World Class Training + Register) ── */
.oc-side-img {
  max-height: 460px;
  object-fit: cover;
}

/* ── Accordion ── */

.oc-accordion .accordion-button::after {
  display: none;
}

.oc-accordion .accordion-button .fa-caret-down {
  transition: transform 0.2s;
}

.oc-accordion .accordion-button:not(.collapsed) .fa-caret-down {
  transform: rotate(-180deg);
}

.oc-accordion .accordion-button.collapsed {
  background: var(--purple);
}

.oc-accordion .accordion-button:focus {
  box-shadow: none;
}

/* ════════════════ Fun & Training Camps™ ════════════════
   Only styles Bootstrap utilities cannot handle.
   Everything else is done with BS5 classes in the markup.
   ════════════════════════════════════════════════════════ */

/* ── Hero ── */

.fntc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 0;
  pointer-events: none;
}

/* ── Accordion ── */

.fntc-accordion .accordion-button::after {
  display: none;
}

.fntc-accordion .accordion-button:focus {
  box-shadow: none;
}

.fntc-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

/* ── Section title ── */

/* ── Gallery ── */

.fntc-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Mini stepper (Pizza / Ice-cream inline) ── */
.fntc-mini-stepper {
  width: auto;
  flex-shrink: 0;
}

.fntc-mini-stepper .btn {
  padding: 0 0.55rem;
  font-size: 1rem;
}

/* ── Main QTY stepper pill shape ── */
.fntc-main-stepper {
  width: auto;
}

.fntc-main-stepper .btn {
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 1.1rem;
}

/* Force pill on left/right ends despite input-group context */
.fntc-main-stepper .fntc-qty-decrease {
  border-radius: 50px 0 0 50px !important;
}

.fntc-main-stepper .fntc-qty-increase {
  border-radius: 0 50px 50px 0 !important;
}

@media (max-width: 991px) {
  .fntc-main-img {
    height: 320px;
  }
}

/* ══════════════════════════════════════
   discount-deals.css
══════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   After School Online Enrollment Pages
   — advancing-in-chess.html / gm-inspired-tag-training.html
   Prefix: aso-  (no collision with style.css)
   Bootstrap 5 utilities cover all layout/spacing/grid/flex.
   Only what BS genuinely cannot express lives here.
   ════════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.aso-hero {
  min-height: 340px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
}

/* Fallback gradient when image is missing */
.aso-hero:not([style*="url"]) {
  background: linear-gradient(135deg,
      var(--purple-deep) 0%,
      var(--purple) 100%);
}

.aso-hero-eyebrow {
  display: inline-block;
  background: var(--gold);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 0.3rem 1rem;
  border-radius: 50px;
  margin-bottom: 1rem;
}

.aso-hero-title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}

/* ── Product image ── */
.aso-img-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 36px rgba(var(--purple-deep-rgb), 0.16);
}

.aso-product-img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 3;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.aso-img-wrap:hover .aso-product-img {
  transform: scale(1.03);
}

.aso-img-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--purple-deep);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.35rem 0.9rem;
  border-radius: 50px;
  z-index: 2;
}

/* ── Feature pills under image ── */
.aso-feature-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #f3ecff;
  color: var(--purple);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.3rem 0.8rem;
  border-radius: 50px;
  border: 1px solid #ddd3f5;
}

.aso-feature-pill i {
  font-size: 0.7rem;
}

/* ── Title block ── */
.aso-product-title {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 900;
  color: var(--purple-deep);
  line-height: 1.15;
  margin-bottom: 0.4rem;
}

.aso-enrollment-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0;
}

/* ── Description text ── */
.aso-desc p {
  font-size: 0.9rem;
  color: #333;
  line-height: 1.8;
  margin-bottom: 0.85rem;
}

.aso-desc p:last-child {
  margin-bottom: 0;
}

.aso-inline-link {
  color: var(--purple);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.aso-inline-link:hover {
  color: var(--gold-dark);
}

/* ── Time badge ── */
.aso-time-badge {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(90deg, var(--purple-deep), var(--purple));
  color: var(--gold);
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.55rem 1.25rem;
  border-radius: 50px;
  box-shadow: 0 4px 16px rgba(var(--purple-deep-rgb), 0.22);
}

/* ── Form card ── */
.aso-form-card {
  background: #fff;
  border: 1px solid #e8e0f5;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 16px rgba(var(--purple-deep-rgb), 0.07);
}

/* Field group */
.aso-field-group {
  margin-bottom: 1.15rem;
}

.aso-field-group:last-child {
  margin-bottom: 0;
}

/* Label */
.aso-field-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #2d2d2d;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.45rem;
  flex-wrap: wrap;
}

.aso-field-label i {
  color: var(--purple);
  font-size: 0.82rem;
  width: 15px;
  text-align: center;
  flex-shrink: 0;
}

/* Required badge */
.aso-required-badge {
  margin-left: auto;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--purple);
  padding: 0.12rem 0.5rem;
  border-radius: 50px;
  line-height: 1.6;
}

/* Select / date input */
.aso-select {
  border: 1.5px solid #d8d0ec;
  border-radius: 8px;
  font-size: 0.9rem;
  color: #333;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.aso-select:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(var(--purple-rgb), 0.12);
  outline: none;
}

.aso-select.is-invalid {
  border-color: #dc3545;
}

.aso-select.is-valid {
  border-color: #198754;
}

/* Inline price under duration */
.aso-inline-price {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gold-dark);
}

/* ── Totals ── */
.aso-totals {
  border-top: 1px solid #e8e0f5;
  border-bottom: 1px solid #e8e0f5;
}

/* ── Big price ── */
.aso-big-price {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--purple);
  line-height: 1;
}

/* ── QTY stepper ── */
.aso-qty-stepper {
  border: 1.5px solid #d0c8e8;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.aso-qty-btn {
  width: 38px;
  height: 40px;
  border: none;
  background: #f5f0ff;
  color: var(--purple-deep);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s;
  font-family: "Montserrat", Arial, sans-serif;
}

.aso-qty-btn:hover {
  background: #e8dcf8;
}

.aso-qty-input {
  width: 46px;
  height: 40px;
  border: none;
  border-left: 1.5px solid #d0c8e8;
  border-right: 1.5px solid #d0c8e8;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: #222;
  background: #fff;
  pointer-events: none;
}

/* ── Register button ── */
.aso-register-btn {
  height: 44px;
  background: var(--purple);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  border-radius: 8px;
  border: none;
  transition:
    background 0.2s,
    transform 0.15s,
    box-shadow 0.2s;
  font-family: "Montserrat", Arial, sans-serif;
}

.aso-register-btn:hover {
  background: var(--purple-deep);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--purple-deep-rgb), 0.3);
}

.aso-register-btn:active {
  transform: translateY(0);
}

/* ── Section eyebrow ── */
.aso-section-eyebrow {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold-dark);
  margin-bottom: 0.5rem;
}

/* ── Why-card highlights section ── */
.aso-why-card {
  background: #fff;
  border: 1px solid #e8e0f5;
  border-radius: 12px;
  box-shadow: 0 2px 14px rgba(var(--purple-deep-rgb), 0.06);
  transition:
    transform 0.22s,
    box-shadow 0.22s;
}

.aso-why-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(var(--purple-deep-rgb), 0.13);
}

.aso-why-icon {
  width: 52px;
  height: 52px;
  background: var(--purple);
  color: #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  box-shadow: 0 4px 14px rgba(var(--purple-rgb), 0.28);
  transition: transform 0.2s;
}

.aso-why-card:hover .aso-why-icon {
  transform: scale(1.08) rotate(-4deg);
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .aso-product-img {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 575px) {
  .aso-form-card {
    padding: 1.1rem;
  }

  .aso-register-btn {
    width: 100%;
  }

  .aso-qty-stepper {
    align-self: flex-start;
  }
}

/* ── Image ── */
.dd-img-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(75, 0, 130, 0.15);
}

.dd-product-img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  display: block;
}

.dd-img-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--purple-deep);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.35rem 0.85rem;
  border-radius: 20px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ── Panel Header ── */
.dd-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--purple-mid, #5b2d8e);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.dd-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--purple-deep);
  line-height: 1.25;
}

/* ── Divider ── */
.dd-divider {
  border-color: #e0e0e0;
  opacity: 1;
}

/* ── Bonus Note ── */
.dd-bonus-note {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: #f5f0ff;
  border-left: 4px solid var(--purple-deep);
  border-radius: 0 8px 8px 0;
  padding: 0.9rem 1.1rem;
  font-size: 0.9rem;
  color: #333;
  font-weight: 500;
}

.dd-bonus-icon {
  color: var(--purple-deep);
  font-size: 1.05rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

/* ── Form Card ── */
.dd-form-card {
  background: #fff;
  border: 1px solid #e8e0f5;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 12px rgba(75, 0, 130, 0.06);
}

.dd-field-group {
  margin-bottom: 1.25rem;
}

.dd-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 0.4rem;
  letter-spacing: 0.2px;
}

.dd-field-icon {
  color: var(--purple-mid, #5b2d8e);
  width: 16px;
  margin-right: 0.35rem;
}

.dd-select {
  border-color: #d0c4e8;
  font-size: 0.88rem;
  color: #444;
  border-radius: 8px;
  padding: 0.55rem 0.85rem;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.dd-select:focus {
  border-color: var(--purple-deep);
  box-shadow: 0 0 0 0.2rem rgba(75, 0, 130, 0.15);
}

/* ── Totals ── */
.dd-totals {
  background: #faf8ff;
  border: 1px solid #e8e0f5;
  border-radius: 10px;
  overflow: hidden;
}

.dd-totals-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.1rem;
  border-bottom: 1px solid #ede8f8;
  font-size: 0.9rem;
}

.dd-totals-row:last-child {
  border-bottom: none;
}

.dd-totals-final {
  background: #f0e8ff;
  font-weight: 700;
  font-size: 0.95rem;
}

.dd-totals-label {
  color: #444;
}

.dd-totals-val {
  font-weight: 600;
  color: #222;
}

.dd-final-price {
  color: var(--purple-deep);
  font-size: 1.15rem;
}

/* ── Actions ── */
.dd-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.dd-qty-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dd-qty-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dd-qty-stepper {
  display: flex;
  align-items: center;
  border: 1.5px solid #d0c4e8;
  border-radius: 8px;
  overflow: hidden;
}

.dd-qty-btn {
  width: 38px;
  height: 40px;
  border: none;
  background: #f5f0ff;
  color: var(--purple-deep);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s;
}

.dd-qty-btn:hover {
  background: #e8dcf8;
}

.dd-qty-input {
  width: 46px;
  height: 40px;
  border: none;
  border-left: 1.5px solid #d0c4e8;
  border-right: 1.5px solid #d0c4e8;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: #222;
  background: #fff;
}

.dd-register-btn {
  flex: 1;
  min-width: 160px;
  height: 44px;
  background: var(--purple-deep);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition:
    background 0.2s,
    transform 0.15s;
}

.dd-register-btn:hover {
  background: var(--gold-dark, #b8860b);
  transform: translateY(-1px);
}

.dd-register-btn:active {
  transform: translateY(0);
}

/* ── Security note ── */
.dd-note {
  font-size: 0.78rem;
  color: #888;
  margin-bottom: 0;
}

/* ══ RESPONSIVE ══════════════════════ */
@media (max-width: 767px) {
  .dd-product-img {
    height: 260px;
  }

  .dd-title {
    font-size: 1.5rem;
  }

  .dd-form-card {
    padding: 1.1rem;
  }

  .dd-register-btn {
    width: 100%;
    flex: unset;
  }

  .dd-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .dd-qty-wrap {
    justify-content: center;
  }
}

@media (max-width: 400px) {
  .dd-title {
    font-size: 1.3rem;
  }

  .dd-form-card {
    padding: 0.85rem;
  }
}

/* Chosen state for selects */
.dd-select--chosen {
  border-color: var(--purple-deep);
  background-color: #faf8ff;
  color: #1a1a1a;
  font-weight: 500;
}

/* ------------------------------------------------ Worldwide Online Camps --- Enhanced UI ------------------------------------------------

   Every class here is prefixed oc- to avoid collision with style.css.

   Bootstrap utilities handle spacing/grid/flex/display.

   --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* ------ Scroll-reveal base ------

   Elements that carry .oc-reveal start hidden and slide up into view

   once IntersectionObserver fires. Reduced-motion users skip the

   animation entirely. */

.oc-reveal {
  opacity: 0;

  transform: translateY(36px);

  transition:
    opacity 0.55s ease,
    transform 0.55s ease;
}

.oc-reveal.is-visible {
  opacity: 1;

  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .oc-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ------ Hero ------ */

.oc-hero {
  background-image: url("/assets/images/camps/online-camps-hero.jpg");
  padding-top: 7rem;
  padding-inline: 2rem;
  background-size: cover;
  background-position: center;
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
}

.oc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
      rgba(var(--purple-deep-rgb), 0.88) 0%,
      rgba(10, 5, 20, 0.7) 60%,
      rgba(0, 0, 0, 0.55) 100%);
  z-index: 0;
  pointer-events: none;
}

.oc-hero > .container,
.oc-hero .container {
  position: relative;
  z-index: 1;
}

.oc-hero-eyebrow {
  display: inline-block;
  background: var(--gold);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.3rem 0.9rem;
  border-radius: 50px;
  margin-bottom: 1.25rem;
}

.oc-hero h1 {
  color: #fff;
  font-weight: 900;
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  text-align: center;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.oc-hero h1 .oc-gold {
  color: var(--gold);
}

.oc-hero-quote {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.7;
  max-width: 580px;
  border-left: 3px solid var(--gold);
  padding-left: 1rem;
}

.oc-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--gold);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 0.85rem 2rem;
  border-radius: 50px;
  text-decoration: none;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.2s;
  box-shadow: 0 6px 22px rgba(var(--gold-rgb), 0.35);
}

.oc-hero-cta:hover {
  background: #c89010;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(var(--gold-rgb), 0.45);
  color: #fff;
}

.oc-hero-cta i {
  transition: transform 0.2s;
}

.oc-hero-cta:hover i {
  transform: translateX(4px);
}
/* ------ Section header ------ */

.oc-section-title {
  font-weight: 900;

  font-size: clamp(1.5rem, 3.5vw, 2.2rem);

  color: #1a1a1a;

  letter-spacing: -0.01em;
}

.oc-section-title .oc-line {
  display: inline-block;

  width: 52px;

  height: 4px;

  background: var(--gold);

  border-radius: 2px;

  vertical-align: middle;

  margin-left: 0.75rem;
}

/* ------ Style cards (Head Start / Advancing / GM) ------ */

.oc-card {
  background: #fff;

  border-radius: 14px;

  overflow: hidden;

  box-shadow: 0 4px 24px rgba(var(--purple-deep-rgb), 0.08);

  display: flex;

  flex-direction: column;

  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease;
  padding: 1.5rem;
  height: 100%;
}

.oc-card:hover {
  transform: translateY(-7px);

  box-shadow: 0 16px 40px rgba(var(--purple-deep-rgb), 0.16);
}

.oc-card-img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.oc-card:hover .oc-card-img {
  transform: scale(1.04);
}

.oc-card-body {
  padding: 1.4rem 1.5rem 1.75rem;

  display: flex;

  flex-direction: column;

  flex: 1;
}

.oc-card-title {
  font-size: 1rem;

  font-weight: 900;

  color: #1a1a1a;

  text-transform: uppercase;

  letter-spacing: 0.04em;

  margin-bottom: 0.6rem;
}

.oc-card-text {
  font-size: 0.85rem;

  color: #666;

  line-height: 1.7;

  flex: 1;

  margin-bottom: 1.1rem;
}

.oc-card-btn {
  display: block;

  text-align: center;

  background: var(--purple);

  color: #fff;

  font-weight: 800;

  font-size: 0.875rem;

  padding: 0.65rem 1rem;

  border-radius: 8px;

  text-decoration: none;

  letter-spacing: 0.04em;

  transition:
    background 0.2s,
    transform 0.2s;
}

.oc-card-btn:hover {
  background: var(--gold);

  transform: translateY(-2px);

  color: #fff;
}

/* ------ Accordion ------ */

.oc-accordion .accordion-item {
  border: none;
  border-radius: 10px !important;
  overflow: hidden;
  margin-bottom: 10px;
  box-shadow: 0 2px 12px rgba(var(--purple-deep-rgb), 0.08);
}

.oc-accordion .accordion-button {
  background: var(--purple);
  color: #fff;
  font-weight: 700;
  font-size: 0.97rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: none;
  border-radius: 10px !important;
  gap: 0.6rem;
}

.oc-accordion .accordion-button .oc-acc-icon {
  transition: transform 0.25s ease;
}

.oc-accordion .accordion-button:not(.collapsed) .oc-acc-icon {
  transform: rotate(180deg);
}

.oc-accordion .accordion-button:not(.collapsed) {
  border-radius: 10px 10px 0 0 !important;
}

.oc-accordion .accordion-body {
  background: #faf8ff;
  font-size: 0.9rem;
  color: #333;
  line-height: 1.8;
  border-top: 2px solid var(--gold);
  padding: 1.5rem 1.75rem;
}

/* ------ World Class Training feature block ------ */

.oc-feature-block {
  background: linear-gradient(135deg, #f8f5ff 0%, #fff 100%);

  border-left: 5px solid var(--purple);

  border-radius: 0 12px 12px 0;

  padding: 2rem 2.25rem;
}

.oc-feature-badge {
  display: inline-block;

  background: var(--gold);

  color: #fff;

  font-size: 0.7rem;

  font-weight: 800;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  padding: 0.25rem 0.75rem;

  border-radius: 50px;

  margin-bottom: 0.85rem;
}

.oc-feature-img {
  border-radius: 14px;

  object-fit: cover;

  max-height: 420px;

  width: 100%;

  box-shadow: 0 12px 40px rgba(var(--purple-deep-rgb), 0.18);
}

/* ------ Register / product form ------ */

.oc-form-card {
  background: #fff;

  border-radius: 16px;

  border-top: 4px solid var(--purple);

  box-shadow: 0 8px 40px rgba(var(--purple-deep-rgb), 0.12);

  padding: 2rem 2.25rem 2.5rem;
}

.oc-form-label {
  font-weight: 700;

  font-size: 0.82rem;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  color: #444;

  margin-bottom: 6px;

  display: block;
}

.oc-price-tag {
  color: var(--purple);

  font-weight: 900;

  font-size: 1.4rem;
}

.oc-totals {
  border-top: 1px solid #e8e0f4;

  border-bottom: 1px solid #e8e0f4;

  padding: 0.9rem 0;

  font-size: 0.875rem;

  color: #555;
}

.oc-register-btn {
  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  background: linear-gradient(90deg, var(--purple) 0%, #9b2fbd 100%);

  color: #fff;

  font-weight: 800;

  font-size: 0.95rem;

  padding: 0.85rem 2.5rem;

  border-radius: 50px;

  text-decoration: none;

  border: none;

  cursor: pointer;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    opacity 0.2s;

  box-shadow: 0 6px 22px rgba(var(--purple-deep-rgb), 0.3);
}

.oc-register-btn:hover {
  transform: translateY(-3px);

  box-shadow: 0 12px 30px rgba(var(--purple-deep-rgb), 0.4);

  opacity: 0.93;

  color: #fff;
}

/* ------ Qty stepper (reuses .qty-btn / .qty-input from style.css) ------ */

.oc-stepper {
  border: 1.5px solid #d8d8d8;

  border-radius: 8px;

  overflow: hidden;

  display: inline-flex;

  width: fit-content;
}

/* ------ Stats bar ------ */

.oc-stats {
  background: var(--purple);
}

.oc-stat-number {
  font-size: 2.25rem;

  font-weight: 900;

  color: var(--gold);

  line-height: 1;
}

.oc-stat-label {
  font-size: 0.8rem;

  color: rgba(255, 255, 255, 0.78);

  text-transform: uppercase;

  letter-spacing: 0.08em;

  margin-top: 0.25rem;
}

/* ------ Register section image ------ */

.oc-register-img {
  border-radius: 14px;

  object-fit: cover;

  max-height: 500px;

  width: 100%;

  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
}

@media (max-width: 767px) {
  .oc-form-card {
    padding: 1.5rem 1.25rem 2rem;
  }

  .oc-hero {
    min-height: 420px;
  }
}

/* ================================================
   Fun & Training Camps(TM) -- Enhanced UI
   Mirrors the online-camps page visual system.
   Prefix: fntc- (no collisions with style.css)
   Bootstrap handles spacing/grid/flex/display.
   ================================================ */

/* -- Scroll-reveal base -- */
.fntc-reveal {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease;
}

.fntc-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .fntc-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* -- Hero -- */
.fntc-hero {
  background-image: url("/assets/images/camps/fun-training-hero.jpg");
  padding-top: 7rem;
  padding-inline: 2rem;
  background-size: cover;
  background-position: center;
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
}

.fntc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
      rgba(var(--purple-deep-rgb), 0.88) 0%,
      rgba(10, 5, 20, 0.7) 60%,
      rgba(0, 0, 0, 0.55) 100%);
  z-index: 0;
  pointer-events: none;
}

.fntc-hero>.container,
.fntc-hero .container {
  position: relative;
  z-index: 1;
}

.fntc-hero-eyebrow {
  display: inline-block;
  background: var(--gold);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.3rem 0.9rem;
  border-radius: 50px;
  margin-bottom: 1.25rem;
}

.training-hero-title {
  color: #fff;
  font-weight: 900;
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  text-align: center;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.training-hero-title .fntc-gold {
  color: var(--gold);
}

.fntc-hero-sub {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.7;
  max-width: 580px;
  border-left: 3px solid var(--gold);
  padding-left: 1rem;
}

.fntc-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--gold);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 0.85rem 2rem;
  border-radius: 50px;
  text-decoration: none;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.2s;
  box-shadow: 0 6px 22px rgba(var(--gold-rgb), 0.35);
}

.fntc-hero-cta:hover {
  background: #c89010;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(var(--gold-rgb), 0.45);
  color: #fff;
}

.fntc-hero-cta i {
  transition: transform 0.2s;
}

.fntc-hero-cta:hover i {
  transform: translateX(4px);
}

/* -- Stats bar -- */
.fntc-stats {
  background: var(--purple);
}

.fntc-stat-number {
  font-size: 2.25rem;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
}

.fntc-stat-label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.78);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.25rem;
}

/* -- Section heading -- */
.fntc-section-title {
  color: var(--purple);
  font-weight: 900;
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  letter-spacing: -0.01em;
}

.fntc-section-title .fntc-line {
  display: inline-block;
  width: 52px;
  height: 4px;
  background: var(--gold);
  border-radius: 2px;
  vertical-align: middle;
  margin-left: 0.75rem;
}

/* -- Accordion -- */
.fntc-accordion .accordion-item {
  border: none;
  border-radius: 10px !important;
  margin-bottom: 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(var(--purple-deep-rgb), 0.08);
}

.fntc-accordion .accordion-button {
  background: var(--purple);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  padding: 1rem 1.5rem;
  box-shadow: none;
  border-radius: 10px !important;
  gap: 0.6rem;
}

.fntc-accordion .accordion-button .fa-caret-down {
  margin-right: 0.75rem;
  transition: transform 0.25s ease;
}

.fntc-accordion .accordion-button:not(.collapsed) .fa-caret-down {
  transform: rotate(-180deg);
}

.fntc-accordion .accordion-button:not(.collapsed) {
  border-radius: 10px 10px 0 0 !important;
}

.fntc-accordion .accordion-body {
  background: #faf8ff;
  font-size: 0.92rem;
  color: #333;
  line-height: 1.8;
  border-top: 2px solid var(--gold);
  padding: 1.5rem 1.75rem;
}

.fntc-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
  font-size: 0.95rem;
}

.fntc-list i {
  color: var(--purple);
  margin-top: 0.3rem;
  flex-shrink: 0;
  font-size: 0.75rem;
}

/* -- Gallery -- */
.fntc-main-img {
  height: 420px;
  object-fit: cover;
  border-radius: 10px;
}

.fntc-thumb {
  width: 90px;
  height: 90px;
  padding: 0;
  border: 2px solid transparent;
  background: none;
  overflow: hidden;
  cursor: pointer;
  border-radius: 8px;
  transition:
    border-color 0.2s,
    transform 0.2s;
}

.fntc-thumb.active,
.fntc-thumb:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}

/* -- Register form card -- */
.fntc-form-card {
  background: #fff;
  border-radius: 16px;
  border-top: 4px solid var(--purple);
  box-shadow: 0 8px 40px rgba(var(--purple-deep-rgb), 0.12);
  padding: 2rem 2.25rem 2.5rem;
}

.fntc-totals-wrap {
  border-radius: 10px;
  overflow: hidden;
}

.fntc-totals-options {
  background: #f5f3fb;
  padding: 0.7rem 1rem;
  font-size: 0.88rem;
  color: #555;
}

.fntc-totals-final {
  background: #ede8fa;
  padding: 0.7rem 1rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--purple);
}

/* -- Register button -- */
.fntc-register-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(90deg, var(--purple) 0%, #9b2fbd 100%);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 0.9rem 2rem;
  border-radius: 50px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  width: 100%;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    opacity 0.2s;
  box-shadow: 0 6px 22px rgba(var(--purple-deep-rgb), 0.3);
}

.fntc-register-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(var(--purple-deep-rgb), 0.4);
  opacity: 0.93;
  color: #fff;
}

@media (max-width: 991px) {
  .fntc-form-card {
    padding: 1.5rem 1.25rem 2rem;
  }
}

.shop-hero {
  background: linear-gradient(135deg,
      var(--purple-deep) 0%,
      var(--purple) 60%,
      #7b12b8 100%);
  padding: 4.5rem 1.5rem 3.5rem;
  position: relative;
  overflow: hidden;
}

.shop-hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg,
      var(--gold-dark),
      var(--gold),
      var(--gold-dark));
}

.shop-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(var(--gold-rgb), 0.18);
  border: 1px solid rgba(var(--gold-rgb), 0.45);
  border-radius: 50px;
  padding: 4px 14px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}

.shop-hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.shop-hero h1 span {
  color: var(--gold);
}

.shop-hero p {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.78);
  max-width: 560px;
  line-height: 1.7;
}

.shop-hero-stats {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 1.75rem;
}

.shop-stat {
  text-align: center;
}

.shop-stat-num {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
}

.shop-stat-label {
  font-size: 0.62rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
}

/* ── FILTER / SORT BAR ── */
.shop-toolbar {
  background: #fff;
  border-bottom: 1px solid #ede8f8;
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(var(--purple-rgb), 0.07);
}

.shop-toolbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.filter-tabs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.filter-tab {
  background: none;
  border: 1.5px solid #ddd;
  border-radius: 50px;
  padding: 0.4rem 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #666;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  transition: all 0.2s;
  white-space: nowrap;
}

.filter-tab:hover {
  border-color: var(--purple);
  color: var(--purple);
}

.filter-tab.active {
  background: var(--purple);
  border-color: var(--purple);
  color: #fff;
}

.sort-select {
  border: 1.5px solid #ddd;
  border-radius: 8px;
  padding: 0.4rem 0.85rem;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
  color: #444;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s;
}

.sort-select:focus {
  border-color: var(--purple);
}

.results-count {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}

.results-count span {
  color: var(--purple);
}

/* ── PROMO BANNER STRIP ── */
.promo-strip {
  background: linear-gradient(90deg,
      var(--gold-dark) 0%,
      var(--gold) 50%,
      var(--gold-dark) 100%);
  padding: 0.65rem 1.5rem;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.05em;
}

.promo-strip a {
  color: #fff;
  text-decoration: underline;
}

/* ── PRODUCT GRID ── */
.shop-section {
  background: var(--gray-bg);
  padding: 2.5rem 0 4rem;
}

/* Category section label */
.cat-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  margin-top: 2.5rem;
}

.cat-label:first-child {
  margin-top: 0;
}

.cat-label-badge {
  background: var(--purple);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 14px;
  border-radius: 50px;
  white-space: nowrap;
}

.cat-label-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right,
      rgba(var(--purple-rgb), 0.25),
      transparent);
}

.cat-label-count {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ── PRODUCT CARD ── */
.prod-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 3px 18px rgba(var(--purple-rgb), 0.08);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.prod-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 40px rgba(var(--purple-rgb), 0.16);
}

/* Image area */
.prod-img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #f3ecff;
}

.prod-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.38s ease;
}

.prod-card:hover .prod-img {
  transform: scale(1.05);
}

/* Badge overlays */
.prod-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 50px;
  z-index: 2;
}

.prod-badge-hot {
  background: var(--red);
  color: #fff;
}

.prod-badge-new {
  background: var(--gold);
  color: #fff;
}

.prod-badge-free {
  background: #16a34a;
  color: #fff;
}

.prod-badge-sale {
  background: var(--purple);
  color: #fff;
}

/* Quick-view button */
.prod-quickview {
  position: absolute;
  bottom: -40px;
  left: 0;
  right: 0;
  background: rgba(var(--purple-rgb), 0.9);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.65rem;
  cursor: pointer;
  transition:
    bottom 0.25s ease,
    background 0.2s;
  border: none;
  width: 100%;
  font-family: "Montserrat", sans-serif;
}

.prod-card:hover .prod-quickview {
  bottom: 0;
}

.prod-quickview:hover {
  background: var(--purple-deep);
}

/* Card body */
.prod-body {
  padding: 1.25rem 1.2rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.prod-category {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold-dark);
  margin-bottom: 0.4rem;
}

.prod-title {
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--text-dark);
  line-height: 1.3;
  margin-bottom: 0.5rem;
}

.prod-description {
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.6;
  flex: 1;
  margin-bottom: 1rem;
}

/* Form fields inside card */
.prod-field-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #555;
  margin-bottom: 4px;
}

.prod-select {
  width: 100%;
  border: 1.5px solid #ddd;
  border-radius: 6px;
  padding: 0.45rem 0.75rem;
  font-size: 0.76rem;
  font-family: "Montserrat", sans-serif;
  color: #333;
  outline: none;
  background: #fafafa;
  margin-bottom: 0.65rem;
  transition: border-color 0.2s;
}

.prod-select:focus {
  border-color: var(--purple);
}

/* Totals row */
.prod-totals {
  background: var(--purple-light);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  font-size: 0.76rem;
  color: #555;
  margin-bottom: 0.9rem;
}

.prod-totals .total-line {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2px;
}

.prod-totals .total-line:last-child {
  margin-bottom: 0;
}

.prod-totals .final-total {
  font-weight: 800;
  color: var(--purple);
  font-size: 0.82rem;
}

/* CTA buttons */
.btn-enroll {
  display: block;
  width: 100%;
  background: var(--purple);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.72rem 1rem;
  font-size: 0.8rem;
  font-weight: 800;
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0.06em;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  transition:
    background 0.2s,
    transform 0.15s,
    box-shadow 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.btn-enroll:hover {
  background: var(--purple-deep);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--purple-rgb), 0.3);
  color: #fff;
}

.btn-details {
  display: block;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--purple);
  text-decoration: none;
  margin-top: 0.55rem;
  transition: opacity 0.2s;
}

.btn-details:hover {
  opacity: 0.7;
  color: var(--purple);
}

/* Donation card price range */
.prod-price-range {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--purple);
  margin-bottom: 0.9rem;
}

/* ── FEATURED WIDE CARD ── */
.featured-card {
  background: linear-gradient(135deg,
      var(--purple-deep) 0%,
      var(--purple) 100%);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  padding: 2.5rem 2rem;
  color: #fff;
  box-shadow: 0 8px 40px rgba(var(--purple-rgb), 0.25);
}

.featured-card-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(var(--gold-rgb), 0.2);
  border: 1px solid rgba(var(--gold-rgb), 0.4);
  border-radius: 50px;
  padding: 3px 11px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.85rem;
}

.featured-card h3 {
  font-size: clamp(1.2rem, 3vw, 1.65rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: 0.6rem;
  line-height: 1.2;
}

.featured-card h3 span {
  color: var(--gold);
}

.featured-card p {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.75;
  max-width: 520px;
  margin-bottom: 1.25rem;
}

.featured-prices {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.feat-price-pill {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  padding: 0.5rem 0.9rem;
  text-align: center;
  min-width: 90px;
}

.feat-price-pill .fpp-amount {
  font-size: 1.05rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}

.feat-price-pill .fpp-label {
  font-size: 0.58rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}

.btn-enroll-gold {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 0.8rem 2rem;
  font-size: 0.85rem;
  font-weight: 800;
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-decoration: none;
  transition:
    background 0.2s,
    transform 0.18s,
    box-shadow 0.2s;
}

.btn-enroll-gold:hover {
  background: var(--gold-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(var(--gold-rgb), 0.4);
  color: #fff;
}

.featured-img-col img {
  border-radius: 12px;
  object-fit: cover;
  width: 100%;
  height: 260px;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.3);
}

/* ── PAGINATION ── */
.shop-pagination {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  padding: 2rem 0 0;
}

.page-btn {
  width: 38px;
  height: 38px;
  border: 1.5px solid #ddd;
  background: #fff;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #555;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.page-btn:hover,
.page-btn.active {
  background: var(--purple);
  border-color: var(--purple);
  color: #fff;
}

/* ── DEALS CTA STRIP ── */
.deals-cta {
  background: linear-gradient(135deg,
      #c8860e 0%,
      var(--gold) 50%,
      #e8b84b 100%);
  padding: 2.5rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.deals-cta::before {
  content: "SAVE";
  position: absolute;
  right: -1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.06);
  pointer-events: none;
  line-height: 1;
}

.deals-cta h2 {
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: 0.4rem;
}

.deals-cta p {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 1.25rem;
}

.btn-deals-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--purple);
  color: #fff;
  border-radius: 50px;
  padding: 0.8rem 2.5rem;
  font-size: 0.88rem;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: 0.06em;
  transition:
    background 0.2s,
    transform 0.18s;
}

.btn-deals-cta:hover {
  background: var(--purple-deep);
  transform: translateY(-2px);
  color: #fff;
}

/* ── SCROLL REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── RESPONSIVE ── */
@media (max-width: 767px) {
  .shop-hero {
    padding: 3rem 1rem 2.5rem;
  }

  .featured-img-col {
    display: none;
  }

  .filter-tabs {
    gap: 0.3rem;
  }

  .shop-hero::before {
    font-size: 12rem;
  }
}

@media (max-width: 480px) {
  .filter-tab {
    padding: 0.35rem 0.75rem;
    font-size: 0.68rem;
  }
}

/* ════════════════════════════════════════
   Open Enrollment — Mobile Responsiveness
   Fixes for viewports ≤ 576px / ≤ 400px
   ════════════════════════════════════════ */

/* ── Intro eyebrow ── */
.oe-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(var(--gold-rgb), 0.12);
  border: 1px solid rgba(var(--gold-rgb), 0.4);
  border-radius: 50px;
  padding: 5px 16px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

/* ── Program tier quick-glance row ── */
.oe-tier-row {
  margin-top: 2.5rem;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.oe-tier-card {
  background: #fff;
  border: 1.5px solid #ede8f8;
  border-radius: 12px;
  padding: 1.5rem 1.25rem;
  text-align: center;
  height: 100%;
  transition:
    transform 0.2s,
    box-shadow 0.2s,
    border-color 0.2s;
}

.oe-tier-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(var(--purple-rgb), 0.1);
  border-color: #d8c8ee;
}

.oe-tier-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 0.85rem;
  background: var(--purple);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.oe-tier-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--purple);
  margin-bottom: 0.3rem;
}

.oe-tier-desc {
  font-size: 0.8rem;
  color: #777;
}

/* ── Gallery image badge (matches dv-/pe-img-badge) ── */
.oe-img-wrap {
  position: relative;
}

.oe-img-badge {
  position: absolute;
  bottom: 26px;
  left: 14px;
  z-index: 2;
  background: rgba(var(--purple-deep-rgb), 0.9);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.oe-img-badge i {
  color: var(--gold);
  font-size: 0.68rem;
}

/* ── Location chips beneath gallery ── */
.oe-location-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

.oe-location-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--purple-light);
  color: var(--purple);
  border-radius: 50px;
  padding: 5px 13px;
  font-size: 0.76rem;
  font-weight: 700;
}

.oe-location-chip i {
  color: var(--purple);
  font-size: 0.68rem;
}

/* ── Semester schedule card ── */
.oe-schedule-card {
  background: #fff;
  border: 1.5px solid #ede8f8;
  border-radius: 10px;
  padding: 0.4rem 1.1rem;
  margin-top: 1.25rem;
}

.oe-schedule-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 0;
  border-bottom: 1px solid #f0eaf8;
  font-size: 0.85rem;
}

.oe-schedule-row:last-child {
  border-bottom: none;
}

.oe-schedule-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #1a1a1a;
}

.oe-schedule-label i {
  color: var(--gold-dark);
  width: 16px;
  text-align: center;
}

.oe-schedule-dates {
  color: #666;
  font-weight: 600;
}

/* ── Form panel wrapper ── */
.oe-panel {
  background: #fff;
  border-radius: 14px;
  border-top: 4px solid var(--purple);
  box-shadow: 0 8px 36px rgba(var(--purple-rgb), 0.1);
  padding: 2rem 2.25rem 2.25rem;
}

@media (max-width: 576px) {
  .oe-panel {
    padding: 1.5rem 1.25rem 1.75rem;
    border-radius: 10px;
  }
}

.oe-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 0.85rem;
}

/* ── Deals banner replacing the bare link ── */
.oe-deals-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  background: #faf8ff;
  border: 1px dashed #d8c8ee;
  border-radius: 8px;
  padding: 0.65rem 1rem;
  font-size: 0.84rem;
  color: #555;
  text-align: center;
  margin-bottom: 1.5rem;
}

.oe-deals-banner i {
  color: var(--gold-dark);
}

/* ── Field labels ── */
.oe-field-label {
  font-size: 13px;
  font-weight: 700;
  color: #333;
}

/* Subtly mark selects that affect price */
.oe-priced-select {
  border-color: #ddd;
}

.oe-priced-select:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(var(--purple-rgb), 0.1);
}

/* ── Add-ons grouping ── */
.oe-addons-group {
  background: #faf8ff;
  border: 1.5px solid #ede8f8;
  border-radius: 10px;
  padding: 1.1rem 1.1rem 0.2rem;
}

.oe-addons-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 0.9rem;
}

.oe-addons-label i {
  color: var(--gold-dark);
}

/* ── Totals (purple-tinted final row, matches dv-/ol-totals) ── */
.oe-totals {
  background: #fff;
  border: 1.5px solid #ede8f8;
  border-radius: 10px;
  overflow: hidden;
}

.oe-totals-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 1.1rem;
  font-size: 14.5px;
  color: #333;
  border-bottom: 1px solid #f0eaf8;
}

.oe-totals-row--final {
  border-bottom: none;
  background: #f3ecff;
  font-weight: 800;
  color: var(--purple);
  font-size: 18px;
}

/* ── Register button ── */
.oe-register-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.oe-register-btn i {
  font-size: 0.78rem;
  transition: transform 0.2s;
}

.oe-register-btn:hover i {
  transform: translateX(3px);
}

/* ── Secure checkout micro-note ── */
.oe-secure-note {
  font-size: 0.74rem;
  color: #999;
  margin: 1rem 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.oe-secure-note i {
  color: var(--gold-dark);
}

@media (max-width: 480px) {
  .oe-tier-row {
    margin-top: 2rem;
  }
}

/* 1. Page intro: remove max-width constraint that causes overflow */
.page-content p {
  font-size: 18px;
  line-height: 1.7;
  color: black;
  margin-bottom: 1.25rem;
  max-width: 100%;
}

/* 2. Page title: scale down on mobile */
@media (max-width: 576px) {
  .page-title {
    font-size: clamp(1.5rem, 6vw, 2.4rem);
    line-height: 1.15;
  }

  /* 3. Intro section: reduce horizontal padding */
  .page-intro .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .page-content p {
    font-size: 15px;
  }

  /* 4. Enrollment section padding */
  .enroll-section .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* 5. Gallery thumbnails: shrink so they fit in one row */
  .enroll-thumb {
    width: 60px;
    height: 60px;
  }

  /* 6. Gallery thumb row: allow wrapping if needed */
  .enroll-gallery-thumbs {
    flex-wrap: wrap;
  }

  /* 7. Product title and price */
  .enroll-product-title {
    font-size: 22px;
  }

  .enroll-price {
    font-size: 18px;
  }

  /* 8. Totals row: keep text from colliding */
  .enroll-totals {
    font-size: 14px;
  }

  /* 9. Register row: stack qty + button on very small screens */
  .enroll-form .d-flex.align-items-center.gap-3 {
    flex-direction: column;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }

  .enroll-form .d-flex.align-items-center.gap-3 .enroll-qty {
    align-self: flex-start;
  }

  /* 10. Select and input: prevent font zoom on iOS (min 16px) */
  .enroll-form .form-select,
  .enroll-form .form-control {
    font-size: 16px;
  }
}

/* 11. Very narrow screens (≤ 400px): thumbnail overflow guard */
@media (max-width: 400px) {
  .enroll-thumb {
    width: 52px;
    height: 52px;
  }

  .enroll-gallery-thumbs {
    gap: 0.4rem !important;
  }

  .page-title {
    font-size: 1.35rem;
  }
}

/* =====================USCF Membership============================= */

/* ── USCF Product Page ── */

.uscf-hero-banner img {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
}

/* Product layout wrapper */
.uscf-product-section {
  background: #f9f7fd;
  padding: 3rem 0 4rem;
}

/* Left: image */
.uscf-img-wrap {
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid #e8dff5;
  background: #1a1030;
}

.uscf-img-wrap img {
  width: 100%;
  display: block;
}

/* Right: product panel */
.uscf-panel {
  background: #fff;
  border-radius: 12px;
  border-top: 4px solid var(--purple);
  box-shadow: 0 6px 32px rgba(var(--purple-rgb), 0.1);
  padding: 2rem 2rem 2.25rem;
}

.uscf-eyebrow {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.uscf-title {
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 900;
  color: var(--purple);
  line-height: 1.15;
  margin-bottom: 0.5rem;
}

.uscf-price-range {
  font-size: 1.25rem;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 1rem;
}

.uscf-divider {
  border-color: #e8dff5;
  opacity: 1;
  margin: 1rem 0 1.25rem;
}

.uscf-desc {
  font-size: 0.9rem;
  color: #444;
  line-height: 1.75;
  margin-bottom: 1.5rem;
}

/* Variation table */
.uscf-variations {
  margin-bottom: 1.5rem;
}

.uscf-field-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #333;
  margin-bottom: 5px;
}

.uscf-select {
  width: 100%;
  border: 1.5px solid #d8d0ee;
  border-radius: 6px;
  padding: 0.6rem 0.85rem;
  font-size: 0.875rem;
  font-family: "Montserrat", Arial, sans-serif;
  color: #333;
  background: #fafafa;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2357058b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.2rem;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.uscf-select:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(var(--purple-rgb), 0.12);
  background-color: #fff;
}

/* Student select block */
.uscf-student-block {
  background: #f3ecff;
  border: 1px solid #ddd3f5;
  border-radius: 8px;
  padding: 1rem 1rem 0.85rem;
  margin-bottom: 1.5rem;
}

.uscf-student-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--purple);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Price summary */
.uscf-totals {
  background: #faf7ff;
  border: 1px solid #e8dff5;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
}

.uscf-totals-row {
  display: flex;
  justify-content: space-between;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid #ede8f8;
}

.uscf-totals-row:last-child {
  border-bottom: none;
  background: #ede8fa;
  font-weight: 800;
  color: var(--purple);
}

/* Qty + CTA row */
.uscf-action-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.uscf-qty {
  display: flex;
  align-items: center;
  border: 1.5px solid #d8d0ee;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}

.uscf-qty-btn {
  width: 36px;
  height: 44px;
  border: none;
  background: #f5f0ff;
  font-size: 1.1rem;
  color: var(--purple);
  cursor: pointer;
  transition: background 0.18s;
}

.uscf-qty-btn:hover {
  background: #e8dcf8;
}

.uscf-qty-input {
  width: 46px;
  height: 44px;
  border: none;
  border-left: 1.5px solid #d8d0ee;
  border-right: 1.5px solid #d8d0ee;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: "Montserrat", Arial, sans-serif;
  color: #222;
  background: #fff;
}

.uscf-qty-input:focus {
  outline: none;
}

.uscf-register-btn {
  flex: 1;
  min-width: 160px;
  height: 44px;
  background: var(--purple);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 800;
  font-family: "Montserrat", Arial, sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition:
    background 0.2s,
    transform 0.15s,
    box-shadow 0.2s;
}

.uscf-register-btn:hover {
  background: var(--purple-deep);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(var(--purple-rgb), 0.3);
}

.uscf-register-btn:active {
  transform: translateY(0);
}

/* Variation description badge */
.uscf-variation-desc {
  display: none;
  background: #f3ecff;
  border-left: 3px solid var(--purple);
  border-radius: 0 6px 6px 0;
  padding: 0.55rem 0.85rem;
  font-size: 0.82rem;
  color: var(--purple);
  font-weight: 700;
  margin-bottom: 1rem;
}

.uscf-variation-desc.visible {
  display: block;
}

/* Meta */
.uscf-meta {
  font-size: 0.75rem;
  color: #888;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #ede8f8;
}

.uscf-meta a {
  color: var(--purple);
  text-decoration: none;
  font-weight: 700;
}

.uscf-meta a:hover {
  text-decoration: underline;
}

/* Additional info tab */
.uscf-tabs-section {
  background: #fff;
  border-top: 1px solid #ede8f8;
  padding: 2.5rem 0 3rem;
}

.uscf-tab-nav {
  display: flex;
  border-bottom: 2px solid #e8dff5;
  margin-bottom: 1.75rem;
}

.uscf-tab-btn {
  background: none;
  border: none;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  color: #888;
  padding: 0.75rem 1.25rem;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition:
    color 0.2s,
    border-color 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.uscf-tab-btn.active {
  color: var(--purple);
  border-bottom-color: var(--purple);
}

.uscf-attr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.uscf-attr-table th {
  width: 180px;
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 800;
  color: #333;
  background: #f9f7fd;
  border: 1px solid #e8dff5;
  vertical-align: top;
}

.uscf-attr-table td {
  padding: 0.75rem 1rem;
  color: #555;
  border: 1px solid #e8dff5;
  line-height: 1.7;
}

/* Responsive */
@media (max-width: 767px) {
  .uscf-panel {
    padding: 1.5rem 1.25rem 1.75rem;
  }

  .uscf-action-row {
    flex-direction: column;
    align-items: stretch;
  }

  .uscf-register-btn {
    min-width: unset;
    width: 100%;
  }

  .uscf-qty {
    align-self: flex-start;
  }

  .uscf-attr-table th {
    width: 120px;
  }
}

@media (max-width: 480px) {

  .uscf-select,
  .uscf-qty-input {
    font-size: 16px;
  }
}

/* ===========Chess Play Ngo========================= */

/* ══════════════════════════════════
       TOP AWARD BANNER
    ══════════════════════════════════ */
.bg-purple {
  background: var(--purple);
}

.award-banner {
  background-image: url("/assets/images/ngo/ngo-hero.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  min-height: 100vh;
  width: 100%;
}

.award-banner p {
  color: #fff;
  font-size: clamp(11px, 2vw, 13px);
  font-weight: 700;
  margin: 0;
  line-height: 1.5;
}

.award-banner .fine-print {
  font-size: 10px;
  font-weight: 400;
  opacity: 0.8;
}

/* ══════════════════════════════════
       NEW EVENTS RIBBON
    ══════════════════════════════════ */
.events-ribbon {
  background: var(--gold);
  padding: 1rem 1rem;
  text-align: center;
}

.events-ribbon p {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 0.2rem;
}

/* ══════════════════════════════════
       HERO SECTION
    ══════════════════════════════════ */
.png-hero {
  background: linear-gradient(135deg, #f8f4ff 0%, #ede5fa 100%);
  padding: 4rem 0 3rem;
}

.png-hero-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--purple);
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.png-hero h1 {
  font-size: clamp(28px, 5vw, 52px);
  font-weight: 900;
  line-height: 1.08;
  color: var(--text-dark);
  margin-bottom: 1rem;
}

.png-hero h1 .tm {
  font-size: 0.55em;
  vertical-align: super;
}

.png-hero h1 .accent {
  color: var(--purple);
}

.png-hero-sub {
  font-size: 14.5px;
  color: #444;
  line-height: 1.75;
  margin-bottom: 1.6rem;
  max-width: 500px;
}

.btn-hero-gold {
  display: inline-block;
  background: var(--gold);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  padding: 0.75rem 2rem;
  border-radius: 4px;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition:
    opacity 0.2s,
    transform 0.15s;
}

.btn-hero-gold:hover {
  opacity: 0.88;
  transform: translateY(-2px);
  color: #fff;
}

.hero-img-wrap {
  position: relative;
  width: 100%;
}

.hero-img-wrap img {
  display: block;
  width: 100%;
  border-radius: 4rem;
  box-shadow: 0 12px 48px rgba(var(--purple-rgb), 0.2);
  object-fit: cover;
  /* aspect-ratio: 6 / 3; */
}

.hero-img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/images/ngo/cover.png") center/100% 100% no-repeat;
  pointer-events: none;
}

.hero-badge {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--purple);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 0.4rem 1rem;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(var(--purple-rgb), 0.3);
}

/* ══════════════════════════════════
       FEATURE ROW — Play N' Go intro
    ══════════════════════════════════ */
.feature-row {
  padding: 3rem 0;
  background: #fff;
}

.feature-row .section-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.feature-row h2 {
  font-size: clamp(22px, 3.5vw, 36px);
  font-weight: 900;
  color: var(--text-dark);
  margin-bottom: 1rem;
  line-height: 1.2;
}

.feature-row p {
  font-size: 14px;
  color: #555;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}

.feature-img-wrap {
  position: relative;
}

.feature-img-wrap::before {
  content: "";
  position: absolute;
  bottom: -12px;
  right: -12px;
  width: 100%;
  height: 100%;
  /* background: var(--purple); */
  border-radius: 8px;
  z-index: 0;
}

.feature-img-wrap img {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .feature-img-wrap::before {
    display: none;
  }
}

/* ══════════════════════════════════
   Rules of the Game card 
    ══════════════════════════════════ */
.rules-card {
  background: var(--off-white);
  border-left: 4px solid var(--purple);
  border-radius: 8px;
  padding: 1.5rem 1.75rem;
}

.rules-card h4 {
  font-size: 18px;
  font-weight: 800;
  color: var(--purple);
  margin-bottom: 0.5rem;
}

.rules-card p {
  font-size: 13.5px;
  color: #444;
  margin-bottom: 1rem;
}

.btn-outline-purple {
  display: inline-block;
  border: 2px solid var(--purple);
  color: var(--purple);
  font-size: 12px;
  font-weight: 800;
  padding: 0.45rem 1.2rem;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.2s;
  margin-right: 0.5rem;
  margin-bottom: 0.4rem;
}

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

.btn-solid-purple {
  display: inline-block;
  background: var(--purple);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 0.45rem 1.2rem;
  border-radius: 4px;
  text-decoration: none;
  transition: opacity 0.2s;
  margin-bottom: 0.4rem;
}

.btn-solid-purple:hover {
  opacity: 0.85;
  color: #fff;
}

/* ══════════════════════════════════
       POINTS & PRIZES SECTION
    ══════════════════════════════════ */
.prizes-section {
  background: linear-gradient(135deg,
      var(--purple) 0%,
      var(--purple-deep) 100%);
  padding: 4rem 0rem;
  position: relative;
  overflow: hidden;
}

.prizes-section h2 {
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 900;
  color: var(--gold);
  margin-bottom: 0.75rem;
}

.prizes-section .lead {
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.prize-item {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 1.25rem 1rem;
  text-align: center;
  transition: background 0.2s;
}

.prize-item:hover {
  background: rgba(255, 255, 255, 0.16);
}

.prize-item .place {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}

.prize-item .pts {
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  margin-bottom: 0.2rem;
}

.prize-item .desc {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.75);
}

.btn-live-play {
  display: inline-block;
  background: var(--gold);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  padding: 0.8rem 2.5rem;
  border-radius: 4px;
  text-decoration: none;
  transition:
    opacity 0.2s,
    transform 0.15s;
  letter-spacing: 0.04em;
}

.btn-live-play:hover {
  opacity: 0.88;
  transform: translateY(-2px);
  color: #fff;
}

/* ══════════════════════════════════
       MENTAL EDGE BANNER
    ══════════════════════════════════ */
.mental-edge-banner {
  background: var(--gold);
  padding: 1.25rem 1rem;
  text-align: center;
}

.mental-edge-banner h3 {
  color: #fff;
  font-size: clamp(16px, 3vw, 24px);
  font-weight: 900;
  margin-bottom: 0.4rem;
}

.mental-edge-banner p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1rem;
  margin-bottom: 0.75rem;
}

.btn-edge {
  display: inline-block;
  background: var(--purple);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 0.5rem 1.8rem;
  border-radius: 4px;
  text-decoration: none;
  transition: opacity 0.2s;
}

.btn-edge:hover {
  opacity: 0.88;
  color: #fff;
}

/* ══════════════════════════════════
       HOW DOES IT WORK
    ══════════════════════════════════ */
.hiw-section {
  padding: 5rem 0;
  background: #fff;
}

.hiw-section .hiw-sub {
  text-align: center;
  font-size: 1rem;
  color: #555;
  max-width: 700px;
  margin: 0 auto 3rem;
  line-height: 1.75;
}

.hp-step-num {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(var(--gold-rgb), 0.4);
}

.hiw-card {
  position: relative;
  z-index: 1;
}

.hiw-cards-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

@media (max-width: 575.98px) {
  .hiw-cards-row {
    grid-template-columns: 1fr;
  }
}

.hiw-card {
  border: 1.5px solid var(--gold);
  border-radius: 10px;
  padding: 2rem 1.5rem;
  text-align: center;
  background: var(--off-white);
  transition:
    box-shadow 0.2s,
    transform 0.2s;
}

.hiw-card:hover {
  box-shadow: 0 8px 28px rgba(var(--purple-rgb), 0.12);
  transform: translateY(-4px);
}

.hiw-icon {
  width: 60px;
  height: 60px;
  background: var(--purple);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.2rem;
  color: #fff;
  font-size: 22px;
}

.hiw-card h4 {
  font-size: 15px;
  font-weight: 800;
  color: var(--purple);
  margin-bottom: 0.6rem;
}

.hiw-card p {
  font-size: 13px;
  color: #555;
  line-height: 1.75;
  margin: 0;
}

.hiw-cards-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

@media (max-width: 991.98px) {
  .hiw-cards-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575.98px) {
  .hiw-cards-row {
    grid-template-columns: 1fr;
  }
}

/* Dots hidden by default (desktop) */
.hiw-dots {
  display: none;
}

/* ══ Mobile auto-cycling steps ══ */
@media (max-width: 767.98px) {
  .hiw-cards-row {
    display: block;
    position: relative;
    min-height: 260px;
  }

  .hiw-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transform: translateX(24px);
    pointer-events: none;
    transition: opacity 0.45s ease, transform 0.45s ease;
  }

  .hiw-card.hiw-active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    position: relative;
  }

  .hiw-card.hiw-leaving {
    opacity: 0;
    transform: translateX(-24px);
  }

  .hiw-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 0.5rem;
  }

  .hiw-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold);
    opacity: 0.3;
    transition: opacity 0.3s, transform 0.3s;
    cursor: pointer;
  }

  .hiw-dot.active {
    opacity: 1;
    transform: scale(1.3);
  }
}

/* ══════════════════════════════════
       WHY CHOOSE US
    ══════════════════════════════════ */
.why-section {
  padding: 5rem 1rem;
  background: var(--off-white);
}

.why-wrapper {
  border-radius: 20px;
  overflow: hidden;
}

.why-content {
  padding: 3rem;
}

.why-section h2 {
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 700;
  color: #fff;
  margin-bottom: 1.5rem;
}

.why-content p {
  color: #fff;
  line-height: 1.8;
  margin-bottom: 2rem;
}

.why-image {
  height: 100%;
}

.why-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}



@media (max-width: 991.98px) {
  .why-content {
    padding: 2rem;
  }

  .why-image img {
    max-height: 400px;
    object-fit: cover;
  }

  .png-hero h1 {
    font-size: 2rem;
    font-weight: 700;
  }

  .feature-img-wrap img {
    height: 452px;
  }
}

/* ══════════════════════════════════
       FOUNDERS SECTION
    ══════════════════════════════════ */
.founders-section {
  padding: 5rem 0;
  background: #f9f7fd;
}

.founders-section .row {
  align-items: stretch;
}

.founders-section h2 {
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 900;
  text-align: center;
  color: var(--text-dark);
  margin-bottom: 3rem;
}

.founder-card {
  height: 100%;
  text-align: center;
  background: var(--off-white);
  border-radius: 12px;
  padding: 2.5rem 1.5rem 2rem;
  border: 1.5px solid #ede8f8;
  transition:
    box-shadow 0.2s,
    transform 0.2s;
}

.founder-card:hover {
  box-shadow: 0 10px 32px rgba(var(--purple-rgb), 0.12);
  border: 1px solid goldenrod;
  transform: translateY(-4px);
}

.founder-avatar {
  width: 10rem;
  height: 12rem;
  /* border-radius: 50%; */
  object-fit: cover;
  /* border: 4px solid var(--gold); */
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 18px rgba(var(--gold-rgb), 0.25);
}

.founder-card h4 {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 0.3rem;
}

.founder-card .role {
  font-size: 12px;
  font-weight: 700;
  color: var(--purple);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.75rem;
}

.founder-card p {
  font-size: 13px;
  color: #666;
  line-height: 1.7;
}

/* ══════════════════════════════════
       WHO WE ARE
    ══════════════════════════════════ */
.who-section {
  background: linear-gradient(135deg,
      var(--purple) 0%,
      var(--purple-deep) 100%);
  padding: 5rem 0;
}

.who-section h2 {
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 900;
  color: #fff;
  margin-bottom: 1rem;
}

.who-section p {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

@media (max-width: 575.98px) {
  .who-logo {
    width: 200px;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
  }
}

.who-logo img {
  width: 100%;
}

/* ═══════════════════════════════
       OUR VALUES
  ═══════════════════════════════ */
/* ── layout ──────────────────────────────────────────── */
.our-values {
  --radius: 1.25rem;
}

.values-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 50/50 on desktop */
  background: var(--purple, #4b0082);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

/* ── image pane ──────────────────────────────────────── */
.values-img-wrap {
  position: relative;
  min-height: 360px;
  overflow: hidden;
}

.values-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.6s ease;
}

.values-card:hover .values-img {
  transform: scale(1.04);
}

/* subtle dark gradient on right edge so text side blends */
.values-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
      transparent 60%,
      var(--purple, #4b0082) 100%);
}

/* ── content pane ────────────────────────────────────── */
.values-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.values-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold, #c9a84c);
  margin-bottom: 0.5rem;
}

.values-heading {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.15;
  color: #fff;
}

/* ── value items ─────────────────────────────────────── */
.values-list {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

.values-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition:
    background 0.25s,
    transform 0.25s;
}

.values-item:hover {
  background: rgba(255, 255, 255, 0.13);
  transform: translateX(4px);
}

.values-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(var(--gold-rgb, 201, 168, 76), 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold, #c9a84c);
  font-size: 1rem;
}

.values-label {
  color: var(--gold, #c9a84c);
  font-size: 0.95rem;
}

.values-text p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

/* ── CTA button ──────────────────────────────────────── */
.btn-award {
  display: inline-block;
  background: var(--gold);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  border-radius: 3px;
  padding: 0.5rem 1rem;
  text-decoration: none;
  transition: opacity 0.2s;
  margin-top: 0.25rem;

  transition:
    opacity 0.2s,
    transform 0.2s;
}

.btn-award:hover {
  opacity: 0.88;
  color: #fff;
  transform: translateY(-2px);
}

/* ── responsive ──────────────────────────────────────── */

/* Tablet – stack image on top */
@media (max-width: 991.98px) {
  .values-card {
    grid-template-columns: 1fr;
  }

  .values-img-wrap {
    min-height: 280px;
  }

  /* on stacked layout the overlay should go bottom → purple */
  .values-img-overlay {
    background: linear-gradient(to bottom,
        transparent 55%,
        var(--purple, #4b0082) 100%);
  }
}

/* Mobile – tighten spacing */
@media (max-width: 575.98px) {
  .values-img-wrap {
    min-height: 220px;
  }

  .values-item {
    flex-direction: column;
    gap: 0.6rem;
  }

  .values-heading {
    font-size: 1.7rem;
  }
}

/* Reduced-motion */
@media (prefers-reduced-motion: reduce) {

  .values-img,
  .values-item,
  .btn-award {
    transition: none;
  }
}


/* News-letter */
.chess-newsletter-section {
  background: linear-gradient(135deg, var(--purple-deep) 0%, var(--purple) 100%);
  position: relative;
  overflow: hidden;
}

.chess-newsletter-section::before {
  content: "\f439";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%) rotate(-12deg);
  font-size: 14rem;
  color: rgba(var(--gold-rgb), 0.06);
  pointer-events: none;
}

.newsletter-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(var(--gold-rgb), 0.15);
  border: 1px solid rgba(var(--gold-rgb), 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.newsletter-icon-wrap i {
  font-size: 1.4rem;
  color: var(--gold);
}

.newsletter-input-group {
  border: 1px solid var(--gold);
  border-radius: 50px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.03);
  max-width: 500px;
}

.newsletter-input {
  background: transparent;
  border: none;
  color: #fff;
  padding: 0.75rem 1.5rem;
  flex: 1;
}

.newsletter-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.newsletter-input:focus {
  background: transparent;
  box-shadow: none;
  color: #fff;
}

.newsletter-btn {
  background-color: var(--gold);
  color: var(--purple-deep);
  border: none;
  border-radius: 0;
  padding: 0.75rem 2rem;
  white-space: nowrap;
}

/* Success State */
.newsletter-btn.success {
  background-color: #28a745 !important;
  color: #fff !important;
}

.newsletter-btn.success:hover {
  background-color: #218838 !important;
  color: #fff !important;
}

.newsletter-btn:hover {
  background-color: var(--gold-dark);
  color: var(--purple-deep);
}

.newsletter-disclaimer {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  max-width: 500px;
}

.newsletter-disclaimer i {
  color: rgba(var(--gold-rgb), 0.8);
}

@media (max-width: 575.98px) {
  .newsletter-input {
    padding: 0.7rem 1.1rem;
    font-size: 0.9rem;
  }

  .newsletter-btn {
    padding: 0.7rem 1.25rem;
    font-size: 0.85rem;
  }
}

/* ==========================
   BLOGS & NEWS
========================== */

.blogs-news {
  background: #fff;
}

.section-subtitle {
  display: inline-block;
  color: var(--gold);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.section-title {
  font-weight: 700;
  color: var(--purple-deep);
}

.section-description {
  max-width: 650px;
  color: #6c757d;
}

.blog-card {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(0, 0, 0, .08);
  transition: .35s;
}

.blog-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, .12);
}

.blog-image {
  position: relative;
  overflow: hidden;
}

.blog-image img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  transition: .5s;
}

.blog-card:hover .blog-image img {
  transform: scale(1.08);
}

.blog-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--gold);
  color: #fff;
  padding: .35rem .8rem;
  border-radius: 50px;
  font-size: .8rem;
  font-weight: 600;
}

.blog-content {
  padding: 1.5rem;
}

.blog-meta {
  display: flex;
  justify-content: space-between;
  font-size: .85rem;
  color: #6c757d;
  margin-bottom: 1rem;
}

.blog-content h5 {
  color: var(--purple-deep);
  font-weight: 700;
  margin-bottom: .9rem;
  line-height: 1.4;
}

.blog-content p {
  color: #666;
  line-height: 1.7;
  margin-bottom: 1.4rem;
}

.blog-content .btn {
  border-radius: 50px;
  padding: .55rem 1.25rem;
  font-weight: 600;
}

@media (max-width:768px) {

  .blog-image img {
    height: 210px;
  }

  .blog-meta {
    flex-direction: column;
    gap: .35rem;
  }

}


/* ══════════════════════════════════
       USCF MEMBERSHIP BANNER
    ══════════════════════════════════ */
.uscf-banner {
  border-radius: 12px;
  padding: 2.5rem;
  text-align: center;
  margin: 4rem auto;
  max-width: 820px;
}

.uscf-banner h3 {
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 900;
  color: white;
  margin-bottom: 0.75rem;
}

.uscf-banner p {
  font-size: 1rem;
  color: white;
  line-height: 1.75;
  margin-bottom: 1.25rem;
}

/* ══════════════════════════════════
       FINAL REGISTER CTA
    ══════════════════════════════════ */
.register-cta {
  background: linear-gradient(135deg, var(--purple-deep) 0%, #7c13c2 100%);
  padding: 3rem 1rem;
  text-align: center;
  margin-bottom: 2rem;
}

.register-cta h3 {
  color: #fff;
  font-size: clamp(18px, 3vw, 30px);
  font-weight: 900;
  margin-bottom: 1rem;
}

.btn-register-big {
  display: inline-block;
  background: var(--gold);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 0.9rem 3rem;
  border-radius: 4px;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    opacity 0.2s,
    transform 0.15s;
}

.btn-register-big:hover {
  opacity: 0.88;
  transform: translateY(-2px);
  color: #fff;
}

/* ══════════════════════════════════
       MINIMAL HEADER/FOOTER PLACEHOLDER
    ══════════════════════════════════ */
.site-header-bar {
  background: var(--purple);
  padding: 0.6rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-header-bar .logo-text {
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  text-decoration: none;
}

.site-header-bar .logo-text span {
  color: var(--gold);
}

.header-nav-links a {
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  margin-left: 1.25rem;
  transition: color 0.2s;
}

.header-nav-links a:hover {
  color: var(--gold);
}

@media (max-width: 576px) {
  .header-nav-links {
    display: none;
  }
}

/* Chess piece decorative */
.chess-deco {
  font-size: 80px;
  opacity: 0.07;
  position: absolute;
}

/* Responsive helpers */
@media (max-width: 767px) {
  .feature-row {
    padding: 3rem 0;
  }

  .prizes-section {
    padding: 3rem 0;
  }

  .hiw-section {
    padding: 3rem 0;
  }

  .jtf-section {
    padding: 3rem 0;
  }

  .why-section {
    padding: 3rem 0.5rem;
  }

  .founders-section {
    padding: 3rem 0;
  }

  .who-section {
    padding: 3rem 0;
  }

  .testi-section {
    padding: 3rem 0;
  }

  .faq-section {
    padding: 3rem 0;
  }
}

/* ════════════════════════════════════════════════════
   Chess NYC — Home Team™ Page Styles
   File: /assets/css/home-team.css
   Loaded AFTER style.css — uses its tokens:
     --purple, --purple-deep, --gold, --gold-dark
   Prefix: ht- (no collisions with style.css)
   Bootstrap handles: grid, spacing, flex, display,
   text utilities. Only non-Bootstrap, non-style.css
   rules live here.
════════════════════════════════════════════════════ */

/* ══ 1. HERO
   Full-width purple gradient banner with chess-piece
   watermark and gold underline — mirrors pe-hero / dv-hero.
══════════════════════════════════════════════════════ */
.ht-hero {
  position: relative;
  background: linear-gradient(135deg,
      var(--purple-deep) 0%,
      var(--purple) 60%,
      #7714be 100%);
  padding: 3.5rem 1.5rem 3rem;
  overflow: hidden;
}

/* Chess piece watermark */

/* Gold accent rule at base */
.ht-hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg,
      var(--gold-dark),
      var(--gold),
      var(--gold-dark));
}

/* Breadcrumb — all hero children need z-index above ::before */
.ht-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}

.ht-breadcrumb a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s;
}

.ht-breadcrumb a:hover {
  color: var(--gold);
}

.ht-breadcrumb i {
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.35);
}

.ht-breadcrumb .current {
  color: var(--gold);
}

/* Eyebrow badge — same visual as .pe-hero-eyebrow / .dv-hero-eyebrow,
   kept here because those classes live inside .pe-hero/.dv-hero selectors */
.ht-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(var(--gold-rgb), 0.18);
  border: 1px solid rgba(var(--gold-rgb), 0.45);
  border-radius: 50px;
  padding: 4px 16px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}

.ht-hero h1 {
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.08;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}

.ht-hero h1 .ht-gold {
  color: var(--gold);
}

.ht-hero h1 .ht-tm {
  font-size: 0.5em;
  vertical-align: super;
  color: var(--gold);
}

.ht-hero-sub {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.75;
  max-width: 580px;
  margin: 0.75rem auto 0;
  position: relative;
  z-index: 1;
}

/* "By Invitation Only" pill */
.ht-invite-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50px;
  padding: 4px 14px;
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 1rem;
  position: relative;
  z-index: 1;
}

.ht-invite-pill i {
  color: var(--gold);
  font-size: 0.62rem;
}

/* ══ 2. MAIN PRODUCT SECTION background ══════════════ */
.ht-main {
  background: #f7f5fc;
}

/* ══ 3. GALLERY ════════════════════════════════════════
   Main image + thumbnail strip.
   .enroll-gallery-main / .enroll-thumb already exist in
   style.css but carry fixed 4/3 aspect and different
   active colour — ht- variants are needed here.
══════════════════════════════════════════════════════ */
.ht-gallery-main {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  box-shadow: 0 12px 40px rgba(var(--purple-rgb), 0.18);
  transition: transform 0.35s ease;
}

.ht-gallery-main:hover {
  transform: scale(1.012);
}

.ht-thumb-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.9rem;
}

/* Reuses .enroll-thumb idea but gold active border instead of purple */
.ht-thumb {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  border: 2.5px solid transparent;
  opacity: 0.68;
  transition:
    opacity 0.2s,
    border-color 0.2s,
    transform 0.18s;
}

.ht-thumb:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.ht-thumb.active {
  opacity: 1;
  border-color: var(--gold);
  transform: translateY(-2px);
}

/* Image badge overlay */
.ht-img-badge {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 2;
  background: rgba(var(--purple-deep-rgb), 0.9);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ht-img-badge i {
  color: var(--gold);
  font-size: 0.6rem;
}

/* ══ 4. PERKS GRID (what's included) ══════════════════ */
.ht-perks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem;
  margin-top: 1.5rem;
}

.ht-perk {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fff;
  border: 1px solid #ede8f8;
  border-radius: 10px;
  padding: 0.75rem 0.85rem;
}

.ht-perk-icon {
  width: 34px;
  height: 34px;
  min-width: 34px;
  background: var(--purple);
  color: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.ht-perk-text {
  font-size: 0.78rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.4;
}

.ht-perk-text span {
  display: block;
  font-size: 0.68rem;
  font-weight: 500;
  color: #888;
  margin-top: 1px;
}

/* ══ 5. PRODUCT PANEL (right column) ══════════════════ */
.ht-panel {
  background: #fff;
  border-radius: 16px;
  border-top: 4px solid var(--purple);
  box-shadow: 0 8px 40px rgba(var(--purple-rgb), 0.12);
  padding: 2rem 2rem 2.25rem;
  position: sticky;
  top: 108px;
  /* clears the 96px fixed header + 12px breathing room */
}

.ht-panel-eyebrow {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold-dark);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ht-panel-title {
  font-size: clamp(1.25rem, 2.5vw, 1.6rem);
  font-weight: 900;
  color: #1a1a1a;
  line-height: 1.15;
  margin-bottom: 0.35rem;
}

.ht-panel-price {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1.35rem;
}

.ht-price-free {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--purple);
}

.ht-price-note {
  font-size: 0.72rem;
  color: #888;
  font-weight: 500;
}

/* Schedule summary chip */
.ht-session-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f3ecff;
  border: 1px solid #ddd3f5;
  border-radius: 8px;
  padding: 0.65rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--purple);
  margin-bottom: 1.5rem;
}

.ht-session-chip i {
  color: var(--gold-dark);
  flex-shrink: 0;
}

/* Field label — same visual as .oe-field-label / .ht-field-label */
.ht-field-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #444;
  margin-bottom: 5px;
}

/* Custom select — matches .uscf-select pattern */
.ht-select {
  width: 100%;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  padding: 0.65rem 2.2rem 0.65rem 0.9rem;
  font-size: 0.875rem;
  font-family: "Montserrat", Arial, sans-serif;
  color: #333;
  background: #fafafa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2357058b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 0.85rem center;
  appearance: none;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background-color 0.2s;
}

.ht-select:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(var(--purple-rgb), 0.1);
  background-color: #fff;
}

/* Plan preview chip — visible only when a plan is chosen */
.ht-plan-preview {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: #fff;
  border: 1.5px solid var(--gold);
  border-radius: 8px;
  padding: 0.65rem 0.9rem;
  margin-top: 0.6rem;
  font-size: 0.82rem;
}

.ht-plan-preview.visible {
  display: flex;
}

.ht-plan-preview-name {
  font-weight: 700;
  color: #1a1a1a;
}

.ht-plan-preview-price {
  font-weight: 900;
  color: var(--purple);
  font-size: 0.95rem;
  white-space: nowrap;
}

/* Totals box — mirrors .ol-totals / .dv-totals structure */
.ht-totals {
  background: #fff;
  border: 1.5px solid #ede8f8;
  border-radius: 10px;
  overflow: hidden;
  margin: 1.25rem 0;
}

.ht-totals-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 1rem;
  font-size: 0.875rem;
  color: #555;
  border-bottom: 1px solid #f0eaf8;
}

.ht-totals-row:last-child {
  border-bottom: none;
  background: #f3ecff;
  font-weight: 800;
  color: var(--purple);
  font-size: 1rem;
}

.ht-totals-val {
  font-weight: 700;
}

/* Quantity stepper — mirrors .uscf-qty */
.ht-qty {
  display: flex;
  align-items: center;
  border: 1.5px solid #d8d0ee;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.ht-qty-btn {
  width: 40px;
  height: 46px;
  border: none;
  background: #f5f0ff;
  color: var(--purple);
  font-size: 1.15rem;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.18s;
}

.ht-qty-btn:hover {
  background: #e8dcf8;
}

.ht-qty-input {
  width: 50px;
  height: 46px;
  border: none;
  border-left: 1.5px solid #d8d0ee;
  border-right: 1.5px solid #d8d0ee;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: "Montserrat", Arial, sans-serif;
  color: #1a1a1a;
  background: #fff;
}

.ht-qty-input:focus {
  outline: none;
}

/* Register button — gradient variant of .fntc-register-btn */
.ht-register-btn {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(90deg, var(--purple) 0%, #9b2fbd 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  height: 46px;
  padding: 0 1.5rem;
  font-size: 0.9rem;
  font-weight: 800;
  font-family: "Montserrat", Arial, sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(var(--purple-rgb), 0.28);
  transition:
    transform 0.2s,
    box-shadow 0.2s,
    opacity 0.2s;
}

.ht-register-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(var(--purple-rgb), 0.38);
  opacity: 0.93;
  color: #fff;
}

.ht-register-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.ht-register-btn i {
  font-size: 0.78rem;
  transition: transform 0.2s;
}

.ht-register-btn:hover:not(:disabled) i {
  transform: translateX(3px);
}

/* Secure checkout note */
.ht-secure-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 0.72rem;
  color: #aaa;
  margin-top: 0.85rem;
}

.ht-secure-note i {
  color: var(--gold-dark);
  font-size: 0.7rem;
}

/* ══ 6. INFO SECTION (detail cards + CTA) ════════════ */
.ht-info {
  border-top: 1px solid #ede8f8;
  padding-top: 3.5rem;
  padding-bottom: 4rem;
}

/* Section eyebrow label — same visual as .ol-section-eyebrow */
.ht-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 0.65rem;
}

/* Section title with gold underline — mirrors .il-section-title */
.ht-section-title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 900;
  color: #1a1a1a;
  line-height: 1.15;
  position: relative;
  padding-bottom: 0.9rem;
  margin-bottom: 1.5rem;
}

.ht-section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 4px;
  background: var(--gold);
  border-radius: 2px;
}

/* Feature detail cards */
.ht-detail-card {
  background: #faf7ff;
  border: 1.5px solid #ede8f8;
  border-radius: 12px;
  padding: 1.5rem 1.4rem;
  height: 100%;
  transition:
    box-shadow 0.22s,
    transform 0.22s;
}

.ht-detail-card:hover {
  box-shadow: 0 8px 28px rgba(var(--purple-rgb), 0.1);
  transform: translateY(-3px);
}

.ht-detail-icon {
  width: 46px;
  height: 46px;
  background: var(--purple);
  color: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin-bottom: 0.85rem;
  box-shadow: 0 4px 14px rgba(var(--purple-rgb), 0.22);
}

.ht-detail-card h5 {
  font-size: 0.9rem;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 0.35rem;
}

.ht-detail-card p {
  font-size: 0.82rem;
  color: #666;
  line-height: 1.7;
  margin: 0;
}

/* CTA strip — mirrors .deals-strip */
.ht-cta-strip {
  background: linear-gradient(135deg,
      var(--purple-deep) 0%,
      var(--purple) 100%);
  border-radius: 14px;
  padding: 2rem 2.25rem;
  margin-top: 3rem;
  position: relative;
  overflow: hidden;
}

.ht-cta-strip h3 {
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: 0.4rem;
  position: relative;
  z-index: 1;
}

.ht-cta-strip h3 span {
  color: var(--gold);
}

.ht-cta-strip p {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}

.ht-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold);
  color: #fff;
  border-radius: 50px;
  padding: 0.8rem 2rem;
  font-size: 0.85rem;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition:
    background 0.2s,
    transform 0.18s;
}

.ht-cta-btn:hover {
  background: var(--gold-dark);
  transform: translateY(-2px);
  color: #fff;
}

/* ══ 7. RESPONSIVE ═════════════════════════════════════ */
@media (max-width: 991px) {

  /* Panel loses sticky on tablet/mobile — flows naturally */
  .ht-panel {
    position: static;
    top: auto;
  }
}

@media (max-width: 576px) {
  .ht-panel {
    padding: 1.5rem 1.25rem 1.75rem;
    border-radius: 10px;
  }

  .ht-perks {
    grid-template-columns: 1fr 1fr;
  }

  .ht-select {
    font-size: 16px;
  }

  /* prevents iOS auto-zoom */
  .ht-cta-strip {
    padding: 1.5rem 1.25rem;
  }

  .ht-cta-strip .d-flex {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }

  .ht-hero {
    padding: 2.5rem 1rem 2.25rem;
  }

  .ht-hero::before {
    font-size: 10rem;
  }
}

@media (max-width: 400px) {
  .ht-perks {
    grid-template-columns: 1fr;
  }
}

/* ══ 8. REDUCED MOTION ════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

  .ht-gallery-main,
  .ht-thumb,
  .ht-register-btn,
  .ht-register-btn i,
  .ht-cta-btn,
  .ht-detail-card {
    transition: none !important;
    transform: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   School-Specific Afterschool Programs™ — Page Styles
   Prefix: ssp-  (no collisions with style.css)
   Bootstrap handles: grid, spacing, flex, display, text utils.
   Tokens reused from style.css: --purple, --gold, --gold-dark,
   --purple-deep. Patterns reused: eyebrow badges, gold-underline
   section titles, schedule cards, filter tabs, btn-register.
════════════════════════════════════════════════════════════════ */

/* ── 1. HERO — purple gradient fallback (matches il-hero / ol-hero)
   When the cartoon image loads it sits centered; when it 404s
   the purple background is intentional, not a broken state.    */
.ssp-hero {
  position: relative;
  background-color: #f7f5fc;
  padding: 3rem 1.5rem 2.5rem;
  overflow: hidden;
  text-align: center;
}

/* Chess-piece watermark — identical motif to .ht-hero::before */
.ssp-hero::before {
  content: "";
  position: absolute;
  right: -1rem;
  bottom: -2rem;
  font-size: 11rem;
  color: rgba(255, 255, 255, 0.04);
  pointer-events: none;
  line-height: 1;
  user-select: none;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

/* Gold accent rule at base — matches .shop-hero::after */
.ssp-hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg,
      var(--gold-dark),
      var(--gold),
      var(--gold-dark));
}

.ssp-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(var(--gold-rgb), 0.18);
  border: 1px solid rgba(var(--gold-rgb), 0.45);
  border-radius: 50px;
  padding: 4px 16px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
  position: relative;
  z-index: 1;
}

.ssp-hero-img {
  max-height: 280px;

  width: 100%;

  position: relative;
  z-index: 1;
  /* image-specific drop shadow so it reads over the gradient */
  filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.4));
}

/* Hide broken img icon but keep space if image never loads */
.ssp-hero-img[src=""],
.ssp-hero-img:not([src]) {
  display: none;
}

/* Fallback chess-piece illustration shown when image 404s */
.ssp-hero-fallback {
  font-size: 6rem;
  color: rgba(255, 255, 255, 0.18);
  position: relative;
  z-index: 1;
  line-height: 1;
  letter-spacing: 0.1em;
}

@media (max-width: 576px) {
  .ssp-hero {
    padding: 2.25rem 1rem 2rem;
  }

  .ssp-hero::before {
    font-size: 5rem;
  }
}

/* ── 2. PAGE INTRO PANEL
   Replaces the bare .page-banner text block.
   Uses the same split-info pattern as .oe-schedule-card.        */
.ssp-intro-section {
  background: #fff;
  border-bottom: 1px solid #ede8f8;
  padding: 3rem 0 2.5rem;
}

.ssp-page-title {
  font-size: clamp(1.8rem, 4vw, 2.9rem);
  color: var(--purple);
  font-weight: 900;
  line-height: 1.08;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.ssp-note-card {
  background: #faf7ff;
  border-left: 4px solid var(--gold);
  border-radius: 0 10px 10px 0;
  padding: 1rem 1.25rem;
  font-size: 0.9rem;
  color: #444;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.ssp-note-card strong {
  color: var(--purple-deep);
}

/* Schedule card — reuses .oe-schedule-card visual language */
.ssp-schedule-card {
  background: #fff;
  border: 1.5px solid #ede8f8;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.ssp-schedule-header {
  background: var(--purple);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.4rem 1rem;
  display: flex;
  align-items: center;
  gap: 7px;
}

.ssp-schedule-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #f0eaf8;
  font-size: 0.875rem;
}

.ssp-schedule-row:last-child {
  border-bottom: none;
}

.ssp-schedule-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  color: #1a1a1a;
}

.ssp-schedule-label i {
  color: var(--gold-dark);
  width: 16px;
  text-align: center;
}

.ssp-schedule-dates {
  color: #555;
  font-weight: 600;
  font-size: 0.85rem;
}

/* CTA email button row */
.ssp-contact-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: #555;
}

.ssp-contact-row i {
  color: var(--gold-dark);
}

.ssp-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--purple);
  color: #fff;
  border-radius: 50px;
  padding: 0.55rem 1.4rem;
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition:
    background 0.2s,
    transform 0.15s;
}

.ssp-contact-btn:hover {
  background: var(--purple-deep);
  transform: translateY(-1px);
  color: #fff;
}

/* ── 3. SCHOOL LIST SECTION                                      */
.ssp-list-section {
  background: #f7f5fc;
  padding: 3rem 0 4rem;
}

/* Section eyebrow + underline — matches .il-section-title pattern */
.ssp-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 0.5rem;
}

.ssp-section-title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 900;
  color: #1a1a1a;
  position: relative;
  padding-bottom: 0.85rem;
  margin-bottom: 1.75rem;
}

.ssp-section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 4px;
  background: var(--gold);
  border-radius: 2px;
}

.ssp-section-title.centered {
  text-align: center;
}

.ssp-section-title.centered::after {
  left: 50%;
  transform: translateX(-50%);
}

/* ── 4. FILTER + SEARCH BAR — reuses .filter-tab from shop page  */
.ssp-toolbar {
  background: #fff;
  border: 1.5px solid #ede8f8;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  box-shadow: 0 2px 12px rgba(var(--purple-rgb), 0.06);
}

.ssp-search-wrap {
  position: relative;
  flex: 1 1 200px;
  min-width: 180px;
}

.ssp-search-wrap i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #bbb;
  font-size: 0.82rem;
  pointer-events: none;
  transition: color 0.2s;
}

.ssp-search-wrap:focus-within i {
  color: var(--purple);
}

.ssp-search-input {
  width: 100%;
  border: 1.5px solid #ddd;
  border-radius: 50px;
  padding: 0.5rem 1rem 0.5rem 2.3rem;
  font-size: 0.82rem;
  font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
  color: #333;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.ssp-search-input:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(var(--purple-rgb), 0.1);
}

.ssp-search-input::placeholder {
  color: #bbb;
}

.ssp-filter-tabs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* Reuse .filter-tab visual from shop page */
.ssp-filter-tab {
  background: none;
  border: 1.5px solid #ddd;
  border-radius: 50px;
  padding: 0.4rem 0.9rem;
  font-size: 0.73rem;
  font-weight: 700;
  color: #666;
  cursor: pointer;
  font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
  transition: all 0.2s;
  white-space: nowrap;
}

.ssp-filter-tab:hover {
  border-color: var(--purple);
  color: var(--purple);
}

.ssp-filter-tab.active {
  background: var(--purple);
  border-color: var(--purple);
  color: #fff;
}

.ssp-results-count {
  font-size: 0.7rem;
  font-weight: 700;
  color: #aaa;
  white-space: nowrap;
  margin-left: auto;
}

.ssp-results-count span {
  color: var(--purple);
}

/* ── 5. BOROUGH GROUPS — month-header pattern from events page   */
.ssp-borough-group {
  margin-bottom: 2.5rem;
}

.ssp-borough-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1rem;
  padding: 0.5rem 1.1rem;
  background: linear-gradient(90deg, var(--purple-deep), var(--purple));
  border-radius: 8px;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ssp-borough-header::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.22);
}

.ssp-borough-header i {
  color: var(--gold);
  font-size: 0.8rem;
}

.ssp-borough-count {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50px;
  padding: 1px 8px;
  font-size: 0.62rem;
  font-weight: 800;
}

/* ── 6. SCHOOL CARDS — adapted from .prog-card / .loc-card        */
.ssp-school-card {
  background: #fff;
  border: 1.5px solid #ede8f8;
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
  height: 100%;
}

.ssp-school-card:hover {
  border-color: var(--purple);
  box-shadow: 0 6px 22px rgba(var(--purple-rgb), 0.12);
  transform: translateY(-2px);
}

.ssp-school-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  background: var(--purple);
  color: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  transition: background 0.2s;
}

.ssp-school-card:hover .ssp-school-icon {
  background: var(--purple-deep);
}

.ssp-school-info {
  flex: 1;
  min-width: 0;
}

.ssp-school-name {
  font-size: 0.92rem;
  font-weight: 800;
  color: #1a1a1a;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s;
}

.ssp-school-card:hover .ssp-school-name {
  color: var(--purple);
}

.ssp-school-type {
  font-size: 0.68rem;
  font-weight: 700;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 1px;
}

.ssp-school-arrow {
  color: #ccc;
  font-size: 0.7rem;
  flex-shrink: 0;
  transition:
    color 0.2s,
    transform 0.2s;
}

.ssp-school-card:hover .ssp-school-arrow {
  color: var(--gold-dark);
  transform: translateX(3px);
}

/* No-results state */
.ssp-no-results {
  display: none;
  text-align: center;
  padding: 3rem 1rem;
  color: #aaa;
  font-size: 0.9rem;
  font-weight: 600;
}

.ssp-no-results i {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 0.75rem;
  color: #ddd;
}

.ssp-no-results.visible {
  display: block;
}

/* Hidden cards during filter */
.ssp-school-col.hidden {
  display: none !important;
}

.ssp-borough-group.hidden {
  display: none !important;
}

/* ── 7. ENROLL CTA STRIP — mirrors .ht-cta-strip                 */
.ssp-cta-strip {
  background: linear-gradient(135deg,
      var(--purple-deep) 0%,
      var(--purple) 100%);
  border-radius: 14px;
  padding: 2rem 2.25rem;
  margin-top: 3rem;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.ssp-cta-strip h3 {
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: 0.25rem;
  position: relative;
  z-index: 1;
}

.ssp-cta-strip h3 span {
  color: var(--gold);
}

.ssp-cta-strip p {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  position: relative;
  z-index: 1;
}

.ssp-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold);
  color: #fff;
  border-radius: 50px;
  padding: 0.8rem 2rem;
  font-size: 0.85rem;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition:
    background 0.2s,
    transform 0.18s;
}

.ssp-cta-btn:hover {
  background: var(--gold-dark);
  transform: translateY(-2px);
  color: #fff;
}

@media (max-width: 576px) {
  .ssp-cta-strip {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem 1.25rem;
  }
}

/* ── 8. SCROLL REVEAL — matches events + shop pages              */
@media (prefers-reduced-motion: no-preference) {
  .ssp-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity 0.45s ease,
      transform 0.45s ease;
  }

  .ssp-reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── 9. REDUCED MOTION                                           */
@media (prefers-reduced-motion: reduce) {

  .ssp-school-card,
  .ssp-contact-btn,
  .ssp-cta-btn,
  .ssp-school-arrow {
    transition: none !important;
    transform: none !important;
  }
}

/* ============Events Details page css============ */

/* ── Event Hero ── */
.ev-hero {
  background: linear-gradient(135deg,
      var(--purple-deep) 0%,
      var(--purple) 60%,
      #7714be 100%);
  padding: 4rem 1.5rem 3.5rem;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.ev-hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg,
      var(--gold-dark),
      var(--gold),
      var(--gold-dark));
}

.ev-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(var(--gold-rgb), 0.18);
  border: 1px solid rgba(var(--gold-rgb), 0.45);
  border-radius: 50px;
  padding: 4px 16px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
  position: relative;
  z-index: 1;
}

.ev-hero h1 {
  font-size: clamp(1.6rem, 4.5vw, 3rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  position: relative;
  z-index: 1;
  margin-bottom: 0.75rem;
}

.ev-hero h1 .ev-gold {
  color: var(--gold);
}

.ev-meta-pills {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  position: relative;
  z-index: 1;
  margin-bottom: 1.5rem;
}

.ev-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  padding: 5px 14px;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

.ev-meta-pill i {
  color: var(--gold);
  font-size: 0.68rem;
}

.ev-hero-desc {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.75;
  max-width: 560px;
  margin: 0 auto 1.75rem;
  position: relative;
  z-index: 1;
}

.ev-hero-desc strong {
  color: var(--gold);
}

.btn-ev-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold);
  color: #fff;
  border-radius: 50px;
  padding: 0.85rem 2.5rem;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  box-shadow: 0 6px 22px rgba(var(--gold-rgb), 0.4);
  transition:
    background 0.2s,
    transform 0.18s,
    box-shadow 0.2s;
  position: relative;
  z-index: 1;
}

.btn-ev-primary:hover {
  background: var(--gold-dark);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(var(--gold-rgb), 0.5);
  color: #fff;
}

/* ── Trust Strip ── */
.ev-trust {
  background: var(--purple);
  padding: 0.9rem 1rem;
  border-bottom: 3px solid var(--gold);
}

.ev-trust-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

.ev-trust-item i {
  color: var(--gold);
  font-size: 0.7rem;
}

/* ── Main layout ── */
.ev-main {
  background: #f7f5fc;
  padding: 2.5rem 0 4rem;
}

/* ── Section eyebrow + underline ── */
.ev-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 0.5rem;
}

.ev-section-title {
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 900;
  color: #1a1a1a;
  position: relative;
  padding-bottom: 0.75rem;
  margin-bottom: 1.25rem;
}

.ev-section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 4px;
  background: var(--gold);
  border-radius: 2px;
}

/* ── Info card (Time & Location + About) ── */
.ev-info-card {
  background: #fff;
  border-radius: 14px;
  border-top: 4px solid var(--purple);
  box-shadow: 0 6px 32px rgba(var(--purple-rgb), 0.1);
  padding: 1.75rem 1.75rem 2rem;
  margin-bottom: 1.25rem;
}

/* Time & Location rows */
.ev-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid #f0eaf8;
}

.ev-detail-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ev-detail-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  background: var(--purple);
  color: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.ev-detail-label {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #aaa;
  margin-bottom: 2px;
}

.ev-detail-value {
  font-size: 0.875rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.45;
}

.ev-detail-value a {
  color: var(--purple);
  text-decoration: none;
  font-weight: 700;
}

.ev-detail-value a:hover {
  text-decoration: underline;
}

/* About list */
.ev-about-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ev-about-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333;
  padding: 0.55rem 0;
  border-bottom: 1px dashed #f0eaf8;
  line-height: 1.5;
}

.ev-about-list li:last-child {
  border-bottom: none;
}

.ev-about-list li i {
  color: var(--purple);
  font-size: 0.7rem;
  margin-top: 4px;
  flex-shrink: 0;
}

.ev-about-list li strong {
  color: var(--purple-deep);
}

/* USCF link chip */
.ev-uscf-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f3ecff;
  border: 1px solid #ddd3f5;
  border-radius: 8px;
  padding: 0.55rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--purple);
  text-decoration: none;
  transition:
    border-color 0.2s,
    background 0.2s;
  margin-top: 0.25rem;
}

.ev-uscf-chip:hover {
  border-color: var(--purple);
  background: #ede5ff;
  color: var(--purple);
}

.ev-uscf-chip i {
  font-size: 0.7rem;
}

/* ── Ticket Panel ── */
.ev-ticket-panel {
  background: #fff;
  border-radius: 14px;
  border-top: 4px solid var(--gold);
  box-shadow: 0 6px 32px rgba(var(--purple-rgb), 0.1);
  padding: 1.75rem 1.75rem 2rem;
  position: sticky;
  top: 108px;
}

.ev-ticket-eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold-dark);
  margin-bottom: 0.85rem;
}

.ev-ticket-type-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: #faf7ff;
  border: 1.5px solid #ede8f8;
  margin-bottom: 1rem;
}

.ev-ticket-type-name {
  font-size: 0.875rem;
  font-weight: 800;
  color: #1a1a1a;
}

.ev-ticket-type-sub {
  font-size: 0.7rem;
  color: #888;
  margin-top: 1px;
}

.ev-ticket-price {
  font-size: 1rem;
  font-weight: 900;
  color: var(--purple);
  white-space: nowrap;
}

/* Qty selector */
.ev-qty-wrap {
  display: flex;
  align-items: center;
  gap: 0;
}

.ev-qty-select {
  border: 1.5px solid #ddd;
  border-radius: 8px;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  color: #333;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2357058b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
  appearance: none;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.ev-qty-select:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(var(--purple-rgb), 0.1);
}

/* Total row */
.ev-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 0;
  border-top: 1.5px solid #ede8f8;
  margin-top: 0.5rem;
}

.ev-total-label {
  font-size: 0.875rem;
  font-weight: 700;
  color: #555;
}

.ev-total-value {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--purple);
}

.btn-checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--purple);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 0.9rem 1rem;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  font-family: "Montserrat", sans-serif;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(var(--purple-rgb), 0.3);
  transition:
    background 0.2s,
    transform 0.18s,
    box-shadow 0.2s;
}

.btn-checkout:hover {
  background: var(--purple-deep);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(var(--purple-rgb), 0.4);
}

.btn-checkout:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.ev-secure-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 0.68rem;
  color: #bbb;
  margin-top: 0.85rem;
}

.ev-secure-note i {
  color: var(--gold-dark);
}

/* ── Highlights strip ── */
.ev-highlights {
  background: linear-gradient(135deg,
      var(--purple-deep) 0%,
      var(--purple) 100%);
  border-radius: 14px;
  padding: 1.75rem 1.75rem 1.5rem;
  position: relative;
  overflow: hidden;
  margin-top: 1.25rem;
}

.ev-highlights::before {
  content: "♞";
  position: absolute;
  right: -1rem;
  bottom: -1.5rem;
  font-size: 9rem;
  color: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}

.ev-highlight-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ev-highlight-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ev-highlight-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  background: rgba(var(--gold-rgb), 0.2);
  border: 1px solid rgba(var(--gold-rgb), 0.4);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--gold);
  flex-shrink: 0;
}

.ev-highlight-text {
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
}

.ev-highlight-text span {
  display: block;
  font-size: 0.68rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 1px;
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .ev-ticket-panel {
    position: static;
    top: auto;
  }
}

@media (max-width: 576px) {
  .ev-hero {
    padding: 2.75rem 1rem 2.5rem;
  }

  .ev-hero::before {
    font-size: 9rem;
  }

  .ev-info-card,
  .ev-ticket-panel {
    padding: 1.25rem;
    border-radius: 10px;
  }

  .ev-ticket-type-row {
    grid-template-columns: 1fr auto;
  }

  .ev-ticket-price {
    grid-column: 1 / -1;
  }
}

/* ════════════════════════════════════════════════════════
   Reusable Read More / Show Less component
   Prefix: rm- (generic, safe to use on any page)
   Usage: wrap content in .rm-content, add a .rm-btn after it
   with data-target pointing to the content's id.
   ════════════════════════════════════════════════════════ */

.rm-content {
  position: relative;
  max-height: var(--rm-collapsed-height, 215px);
  overflow: hidden;
  transition: max-height 0.45s ease;
}

.rm-content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 88%);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.rm-content.rm-expanded {
  max-height: var(--rm-expanded-height, 2000px);
}

.rm-content.rm-expanded::after {
  opacity: 0;
}

.rm-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 0.9rem;
  margin-bottom: 0.5rem;
  background: none;
  border: 1.5px solid var(--purple);
  color: var(--purple);
  border-radius: 50px;
  padding: 0.5rem 1.3rem;
  font-size: 0.8rem;
  font-weight: 800;
  font-family: "Montserrat", Arial, sans-serif;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s;
}

.rm-btn:hover,
.rm-btn:focus-visible {
  background: var(--purple);
  color: #fff;
}

.rm-btn i {
  font-size: 0.7rem;
  transition: transform 0.25s ease;
}

.rm-btn[aria-expanded="true"] i {
  transform: rotate(180deg);
}

@media (min-width: 992px) {
  .rm-content {
    max-height: var(--rm-collapsed-height-lg,
        var(--rm-collapsed-height, 265px));
  }
}

@media (prefers-reduced-motion: reduce) {

  .rm-content,
  .rm-btn i {
    transition: none;
  }
}

/* Soft, non-trapping scroll-snap: sections gently settle instead of
       forcing the user through them like a slideshow. */
html {
  scroll-behavior: smooth;
}

body {
  scroll-snap-type: y proximity;
}

body>section,
body>.join-section {
  scroll-snap-align: start;
  scroll-margin-top: 90px;
  /* clears the fixed/sticky site-header */
}

/* Never snap-trap the hero, since it's the entry point */
.ve-hero {
  scroll-snap-align: none;
}

/* Respect reduced-motion users: kill all of the below instantly */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  body {
    scroll-snap-type: none;
  }

  .reveal,
  .stagger-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Fallback reveal styles — used only if style.css doesn't already
       define .reveal / .reveal.visible, so nothing double-applies. */
.reveal:not(.visible) {
  opacity: 0;
  transform: translateY(28px);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Staggered card/grid children */
.stagger-item {
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.stagger-item.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Parallax layers */
.ve-hero-video {
  will-change: transform;
}

.stat-bar-watermark {
  will-change: transform;
}

.why-image-wrap img {
  will-change: transform;
}




/* ══════════════════════════════════════════════════════════════
       Quick View modal (Shop page) — "ticket stub" redesign
       A single-column card at every breakpoint: photo header, a torn-
       paper edge into the details, a dashed perforation before the
       action footer. Echoes the site's own vouchers/passes language.
       ══════════════════════════════════════════════════════════════ */

.qvm-card {
  --qvm-surface: #ffffff;
  --qvm-surface-soft: #faf7fd;
  --qvm-ink: #1c1626;
  --qvm-muted: #6f6580;
  --qvm-border: #ece1f7;
}

/* ── Dialog shell: bottom sheet by default (mobile-first) ── */
#quickViewModal .modal-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100% - 1rem);
  margin: .5rem auto;
  max-width: 480px;
}

#quickViewModal:not(.show) .qvm-dialog {
  transform: translateY(100%);
}

#quickViewModal.show .qvm-dialog {
  transform: translateY(0);
}

.qvm-card {
  width: 100%;
  border: none;
  border-radius: 22px 22px 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 80vh;

  box-shadow: 0 -12px 40px rgba(30, 10, 50, 0.25);
  background: var(--qvm-surface);
  position: relative;
}

/* Drag-handle affordance so the sheet reads as swipeable/dismissible */
.qvm-card::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.6);
  z-index: 6;
}

/* ── Hero photo: badge + floating close button live on top of it ── */
#quickViewModal.show .qvm-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(20, 8, 40, 0.4);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.qvm-close:hover,
.qvm-close:focus-visible {
  background: var(--red);
  transform: rotate(90deg);
}

.qvm-close:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.qvm-hero-caption i {
  color: var(--gold);
}

/* ── Torn-paper edge: the photo appears to tear into the card body ── */
/* ── Scrolling body ── */
.qvm-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--purple-rgb), 0.3) transparent;
}

.qvm-scroll::-webkit-scrollbar {
  width: 5px;
}

.qvm-scroll::-webkit-scrollbar-thumb {
  background: rgba(var(--purple-rgb), 0.28);
  border-radius: 10px;
}

.qvm-body {
  padding: 0.85rem 1.1rem 1.1rem;
}

.qvm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--gold-dark);
  margin-bottom: 0.35rem;
}

.qvm-title {
  font-size: 1.02rem;
  font-weight: 900;
  color: var(--qvm-ink);
  margin-bottom: 0.35rem;
  line-height: 1.25;
}

.qvm-desc {
  font-size: 0.78rem;
  color: var(--qvm-muted);
  line-height: 1.5;
  margin-bottom: 0.8rem;
}

/* ── Fields (cloned straight from the product card) ── */
.qvm-fields {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.qvm-fields .prod-field-label {
  font-size: 0.64rem;
  font-weight: 800;
  color: #4a3466;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 7px;
}

/* Small diamond "stub" marker instead of a bullet */
.qvm-fields .prod-field-label::before {
  content: "";
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  background: var(--gold-dark);
  transform: rotate(45deg);
  border-radius: 1px;
}

.qvm-fields .prod-select,
.qvm-fields input[type="date"].prod-select {
  margin-bottom: 0;
  width: 100%;
  border: 1.5px solid var(--qvm-border);
  background: var(--qvm-surface-soft);
  border-radius: 10px;
  /* 16px prevents iOS auto-zoom on focus */
  font-size: 16px;
  padding: 0.55rem 2rem 0.55rem 0.8rem;
  appearance: none;
  -webkit-appearance: none;
  color: var(--qvm-ink);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.qvm-fields select.prod-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b2d8e' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
}

.qvm-fields .prod-select:hover {
  border-color: #cbb3e8;
}

.qvm-fields .prod-select:focus {
  border-color: var(--purple);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(var(--purple-rgb), 0.14);
  outline: none;
}

/* Ticket-stub totals box, dashed like a receipt */
.qvm-fields .prod-totals {
  margin-top: 0.1rem;
  background: var(--qvm-surface-soft);
  border: 1px dashed #d9c4f2;
  border-radius: 12px;
  padding: 0.6rem 0.85rem;
}

.qvm-fields .prod-totals .total-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.76rem;
  color: #6b5a80;
  padding: 0.08rem 0;
}

.qvm-fields .prod-totals .final-total {
  margin-top: 0.2rem;
  padding-top: 0.4rem;
  font-size: 0.96rem;
  font-weight: 800;
  color: var(--purple-deep, var(--purple));
}

.qvm-fields .prod-totals .final-total span:last-child {
  color: var(--gold-dark);
}

.qvm-fields .prod-price-range {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--purple);
  margin-bottom: 0.15rem;
}

/* ── Footer: dashed perforation, then the sticky action row ── */
.qvm-footer {
  position: relative;
  flex-shrink: 0;
  padding: 0.8rem 1.1rem calc(0.8rem + env(safe-area-inset-bottom, 0px));
  background: var(--qvm-surface);
}

.qvm-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.1rem;
  right: 1.1rem;
  border-top: 1.5px dashed #e2d3f2;
}

.qvm-enroll-btn {
  width: 100%;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  padding: 0.78rem 1rem;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(135deg, var(--purple-deep) 0%, var(--purple) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 6px 18px rgba(var(--purple-rgb), 0.3);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.18s, box-shadow 0.2s;
}

.qvm-enroll-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.35) 45%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.6s ease;
}

.qvm-enroll-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(var(--purple-rgb), 0.38);
}

.qvm-enroll-btn:hover::after {
  transform: translateX(120%);
}

/* Brief confirmation state after tapping Enroll */
.qvm-enroll-btn.qvm-added {
  background: linear-gradient(135deg, #2fae63 0%, #1f8f4f 100%);
  box-shadow: 0 6px 18px rgba(31, 143, 79, 0.35);
  pointer-events: none;
}

.qvm-enroll-btn.qvm-added:hover {
  transform: none;
  box-shadow: 0 6px 18px rgba(31, 143, 79, 0.35);
}

.qvm-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.66rem;
  color: #9a91a8;
  margin-top: 0.5rem;
}

.qvm-secure i {
  color: var(--gold-dark);
}

/* ══════════════════════════════════════════════════
       Tablet / desktop — a centered card, single column
       throughout (same structure, just roomier)
       ══════════════════════════════════════════════════ */
@media (min-width: 576px) {
  #quickViewModal .modal-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100% - 1rem);
    margin: .5rem auto;
    max-width: 480px;
  }

  #quickViewModal:not(.show) .qvm-dialog,
  #quickViewModal.show .qvm-dialog {
    transform: none;
  }

  .qvm-card {
    border-radius: 20px;
    max-height: 85vh;
    box-shadow: 0 24px 60px rgba(var(--purple-deep-rgb), 0.32), 0 4px 14px rgba(var(--purple-deep-rgb), 0.14);
  }

  .qvm-card::before {
    display: none;
  }

  .qvm-body {
    padding: 1.1rem 1.4rem 1.3rem;
  }

  .qvm-title {
    font-size: 1.16rem;
  }

  .qvm-footer {
    padding: 0.95rem 1.4rem 0.95rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  #quickViewModal .qvm-dialog,
  .qvm-close,
  .qvm-hero-img,
  .qvm-enroll-btn,
  .qvm-enroll-btn::after {
    transition: none !important;
  }

  .qvm-close:hover,
  .qvm-close:focus-visible {
    transform: none;
  }

}



/* ════════════════ Chess Game for Discount widget ════════════════ */

.cgd-section {
  background: var(--purple-deep);
  color: #fff;
  padding-block: 4rem;
  margin-bottom: 10px;
}

.cgd-title {
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 900;
  margin-bottom: 8px;
}

.cgd-subtitle {
  font-size: 14px;
  color: #b8b8b8;
  margin-bottom: 2rem;
}

.cgd-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.cgd-turn {
  font-size: 13.5px;
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 0.03em;
}

.cgd-turn strong {
  color: #fff;
}

.cgd-newgame-btn {
  background: var(--gold);
  color: #1a1a1a;
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1.1rem;
  font-size: 13px;
  font-weight: 800;
  font-family: "Montserrat", Arial, sans-serif;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}

.cgd-newgame-btn:hover {
  background: var(--gold-dark);
  transform: translateY(-1px);
}

.cgd-board {
  display: grid;
  grid-template-columns: repeat(8, minmax(32px, 60px));
  grid-template-rows: repeat(8, minmax(32px, 60px));
  width: fit-content;
  margin: 0 auto;
  border: 3px solid var(--gold-dark);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.cgd-square {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(20px, 4vw, 34px);
  line-height: 1;
  cursor: pointer;
  position: relative;
  user-select: none;
  transition: background 0.15s;
}

.cgd-square--light {
  background: #f0dfc0;
}

.cgd-square--dark {
  background: #b98554;
}

.cgd-square--selected {
  background: rgba(237, 177, 45, 0.55) !important;
}

.cgd-square--move::after {
  content: "";
  position: absolute;
  width: 22%;
  height: 22%;
  border-radius: 50%;
  background: rgba(87, 5, 139, 0.55);
}

.cgd-square--capture::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 3px solid rgba(87, 5, 139, 0.65);
  background: transparent;
}

.cgd-square--check {
  background: rgba(220, 53, 69, 0.55) !important;
}

.cgd-piece--white {
  color: #fdfdfd;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.cgd-piece--black {
  color: #111;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.25);
}

.cgd-hint {
  margin-top: 1.25rem;
  font-size: 13px;
  color: #999;
}

/* Modal */
.cgd-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1050;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.cgd-modal-overlay.cgd-show {
  display: flex;
}

.cgd-modal {
  background: #f2ece0;
  border-radius: 10px;
  max-width: 380px;
  width: 100%;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.cgd-modal-header {
  padding: 1.75rem 1.5rem 1.25rem;
  color: #fff;
}

.cgd-modal-header--win {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
}

.cgd-modal-header--end {
  background: linear-gradient(135deg, #4b4b4b, #6b6b6b);
}

.cgd-modal-title {
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 8px;
}

.cgd-modal-text {
  font-size: 13px;
  margin: 0;
  opacity: 0.95;
}

.cgd-modal-body {
  padding: 1.75rem 1.5rem;
}

.cgd-discount-circle {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #e8552e;
  color: #fff;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(232, 85, 46, 0.4);
}

.cgd-discount-pct {
  font-size: 28px;
  font-weight: 900;
}

.cgd-discount-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.cgd-modal-footer {
  display: flex;
  gap: 10px;
  padding: 0 1.5rem 1.75rem;
}

.cgd-claim-btn,
.cgd-close-btn {
  flex: 1;
  border: none;
  border-radius: 6px;
  padding: 0.7rem;
  font-size: 13px;
  font-weight: 800;
  font-family: "Montserrat", Arial, sans-serif;
  cursor: pointer;
  transition: transform 0.15s, background 0.2s;
}

.cgd-claim-btn {
  background: var(--gold);
  color: #1a1a1a;
}

.cgd-claim-btn:hover {
  background: var(--gold-dark);
  transform: translateY(-1px);
}

.cgd-close-btn {
  background: #4b4b4b;
  color: #fff;
}

.cgd-close-btn:hover {
  background: #333;
}

@media (max-width: 480px) {
  .cgd-board {
    grid-template-columns: repeat(8, minmax(28px, 40px));
    grid-template-rows: repeat(8, minmax(28px, 40px));
  }
}

/* ========================================================================= */
/* MINI CART STYLES */
/* ========================================================================= */
.cart-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background-color: var(--red);
  color: #fff;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 800;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.mini-cart-drawer {
  position: fixed;
  top: 0;
  right: -400px;
  width: 100%;
  max-width: 380px;
  height: 100vh;
  background: #fff;
  z-index: 10000;
  box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  transition: right 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.mini-cart-drawer.open {
  right: 0;
}

.mini-cart-header {
  padding: 1.5rem;
  border-bottom: 1px solid #eaeaea;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mini-cart-header h4 {
  color: var(--purple-deep);
  font-weight: 800;
}

.close-cart {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #888;
  cursor: pointer;
  transition: color 0.2s;
}

.close-cart:hover {
  color: #333;
}

.mini-cart-body {
  flex-grow: 1;
  overflow-y: auto;
  padding: 1.5rem;
  background: #fafafa;
}

.mini-cart-footer {
  padding: 1.5rem;
  border-top: 1px solid #eaeaea;
  background: #fff;
}

.mini-cart-total {
  font-size: 1.1rem;
}

.cart-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(2px);
}

.cart-overlay.open {
  opacity: 1;
  visibility: visible;
}

body.cart-open-lock {
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════
   Shop Page — Redesign Layer (From shop.html)
   ══════════════════════════════════════════════════════════════════ */
.shop-hero {
  padding-top: 2.75rem;
  padding-bottom: 2.5rem;
  position: relative;
}

.shop-hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: min(46vw, 420px);
  aspect-ratio: 1;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .05) 25%, transparent 25%), linear-gradient(-45deg, rgba(255, 255, 255, .05) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, .05) 75%), linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, .05) 75%);
  background-size: 44px 44px;
  background-position: 0 0, 0 22px, 22px -22px, -22px 0px;
  mask-image: radial-gradient(circle at 100% 0%, #000 40%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 100% 0%, #000 40%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}

.shop-hero .container {
  position: relative;
  z-index: 1;
}

.shop-hero-stats {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.shop-stat {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  padding: 0.6rem 1.1rem;
  min-width: 92px;
  text-align: center;
  backdrop-filter: blur(3px);
}

.shop-toolbar {
  padding: 0.75rem 0;
}

.shop-toolbar-inner {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.shop-toolbar-inner>div:first-child {
  position: relative;
  width: 100%;
}

#shopSearch {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 42px;
  font-size: 16px;
  border: 1.5px solid #e5e7eb;
  border-radius: 50px;
  padding: 0.5rem 1rem 0.5rem 2.2rem;
  outline: none;
  transition: border-color 0.2s;
}

.filter-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
  margin: 0 -1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}

.filter-tabs::-webkit-scrollbar {
  display: none;
}

.filter-tab {
  flex-shrink: 0;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
}

.shop-toolbar-inner>.d-flex.align-items-center.gap-3:last-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: nowrap;
}

.results-count {
  display: block;
  flex-shrink: 0;
  white-space: nowrap;
}

.sort-select {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 190px;
  font-size: 16px;
  min-height: 42px;
}

@media (min-width: 768px) {
  .shop-toolbar-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .shop-toolbar-inner>div:first-child {
    order: 2;
    width: 200px;
    flex-shrink: 0;
  }

  .filter-tabs {
    order: 1;
    flex-wrap: wrap;
    overflow-x: visible;
    margin: 0;
    padding: 0;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .shop-toolbar-inner>.d-flex.align-items-center.gap-3:last-child {
    order: 3;
    width: auto;
    flex-shrink: 0;
  }
}

@media (max-width: 575.98px) {
  .btn-add-cart {
    min-height: 44px;
    font-size: 0.8rem;
  }

  .prod-footer-row .btn-details,
  .prod-footer-row .prod-quickview {
    flex: 1 1 auto;
    min-height: 38px;
  }
}

@media (max-width: 420px) {
  .cat-label-badge {
    font-size: 0.6rem;
    padding: 3px 10px;
  }

  .cat-label-count {
    display: none;
  }
}

#productsGrid .text-center.py-5 {
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
}

@media (max-width: 400px) {
  .deals-cta h2 {
    font-size: 1.25rem;
  }

  .btn-deals-cta {
    width: 100%;
    justify-content: center;
    padding: 0.75rem 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  .shop-toolbar,
  .filter-tabs,
  .shop-stat {
    transition: none !important;
  }
}

.btn-add-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--purple-deep), var(--purple));
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.btn-add-cart:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(var(--purple-rgb), 0.3);
}

.btn-add-cart:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.btn-add-cart.btn-added {
  background: linear-gradient(135deg, #059669, #10b981);
}

.shop-loading-skeleton {
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Shop Page — Modern Vertical Cards
   ══════════════════════════════════════════════════════════════════ */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.shop-section {
  padding-top: 1.75rem;
  padding-bottom: 2.75rem;
}

.cat-label {
  margin-top: 1.75rem !important;
  margin-bottom: 1.1rem !important;
}

.cat-label:first-child {
  margin-top: 0 !important;
}

.featured-card {
  padding: 2rem 1.75rem;
}

.prod-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(var(--purple-rgb), 0.08);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
  height: 100%;
}

.prod-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(var(--purple-rgb), 0.12);
  border-color: rgba(var(--gold-rgb), 0.4);
}

.prod-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(145deg, #f8f6fb, #eee8f5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  border-bottom: 1px solid rgba(var(--purple-rgb), 0.05);
  overflow: hidden;
}

.prod-img.img-fluid {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.4s ease;
}

.prod-card:hover .prod-img.img-fluid {
  transform: scale(1.05);
}

.prod-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 8px;
  color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.prod-badge-hot {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

.prod-badge-free {
  background: linear-gradient(135deg, #10b981, #059669);
}

.prod-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.prod-category {
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 1px;
  margin-bottom: 0.4rem;
}

.prod-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--purple-deep);
  line-height: 1.3;
  margin-bottom: 0.5rem;
}

.prod-description {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 1.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.prod-options-container {
  background: rgba(249, 247, 252, 0.7);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(var(--purple-rgb), 0.05);
}

.prod-field-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--purple-deep);
  margin-bottom: 0.4rem;
  letter-spacing: 0.5px;
}

.prod-select,
.prod-addon-input.form-control {
  width: 100%;
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
  border: 1px solid #e2dcf0;
  border-radius: 8px;
  background-color: #fff;
  color: var(--text);
  margin-bottom: 1rem;
  transition: all 0.2s ease;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322153b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1em;
}

.prod-addon-input.form-control {
  background-image: none;
}

.prod-select:focus,
.prod-addon-input.form-control:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(var(--purple-rgb), 0.1);
}

.addon-check-group {
  margin-bottom: 0.75rem;
}

.addon-check-group:last-child {
  margin-bottom: 1rem;
}

.form-check-input.prod-addon-input {
  width: 1.1em;
  height: 1.1em;
  margin-top: 0.15em;
  border-color: #d1c8e1;
}

.form-check-input.prod-addon-input:checked {
  background-color: var(--purple);
  border-color: var(--purple);
}

.form-check-label {
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
}

.prod-totals {
  margin-top: auto;
  border-top: 2px dashed #ede6f7;
  padding-top: 1rem;
  margin-bottom: 1rem;
}

.total-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}

.total-line.final-total {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--purple-deep);
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.prod-footer-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.secondary-actions {
  display: flex;
  gap: 0.5rem;
}

.prod-quickview {
  flex: 1;
  padding: 0.6rem;
  text-align: center;
  background: rgba(var(--purple-rgb), 0.05);
  color: var(--purple-deep);
  border: 1px solid rgba(var(--purple-rgb), 0.1);
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: all 0.2s;
}

.prod-quickview:hover {
  background: var(--purple);
  color: #fff;
  border-color: var(--purple);
}


/* ══════════════════════════════════════════════════
   DRAGGABLE FLOATING CTA (labeled pill)
   Prefix: dfab- (Draggable Floating Action Button)
   Uses existing tokens: --purple, --purple-deep, --gold, --gold-dark
   ══════════════════════════════════════════════════ */

.dfab-btn {
  position: fixed;
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  cursor: grab;
  background: var(--gold);
  color: var(--purple-deep);
  padding: 12px 18px 12px 14px;
  border-radius: 50px;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 10px 28px rgba(var(--purple-rgb), 0.35);
  touch-action: none;
  user-select: none;
  z-index: 120;
  transition:
    box-shadow 0.2s,
    transform 0.15s,
    padding 0.2s,
    background 0.2s;
}

.dfab-btn:hover {
  background: var(--gold-dark);
}

.dfab-btn:active,
.dfab-btn.dfab-dragging {
  cursor: grabbing;
  transform: scale(1.05);
  box-shadow: 0 14px 34px rgba(var(--purple-rgb), 0.45);
}

.dfab-btn:focus-visible {
  outline: 2px solid var(--purple-deep);
  outline-offset: 3px;
}

.dfab-btn i {
  font-size: 18px;
  flex-shrink: 0;
}

/* Collapses to icon-only near screen edges so the label never
   hangs off-screen or covers content beneath it */
.dfab-btn.dfab-collapsed {
  padding: 12px;
}

.dfab-btn.dfab-collapsed .dfab-txt {
  display: none;
}

@media (max-width: 576px) {
  .dfab-btn {
    font-size: 12px;
    padding: 10px 15px 10px 12px;
  }

  .dfab-btn i {
    font-size: 16px;
  }

  .dfab-btn.dfab-collapsed {
    padding: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dfab-btn {
    transition: none;
  }
}