/* Site-wide night electric theme (body.sp-theme) */

body.sp-theme {
  --sp-void: #020b18;
  --sp-navy: #071a33;
  --sp-depth: #0b2748;
  --sp-blue: #2f8fff;
  --sp-cyan: #4ee3ff;
  --sp-ice: #dce9ff;
  --sp-muted: rgba(215, 232, 255, 0.78);
  --sp-line: rgba(78, 227, 255, 0.22);
  --sp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sp-display: 'Syne', 'Outfit', system-ui, sans-serif;
  --sp-body: 'Outfit', 'Manrope', 'Poppins', system-ui, sans-serif;

  background: var(--sp-void) !important;
  color: #e8f1ff;
  -webkit-font-smoothing: antialiased;
}

/* —— Shared dark header —— */
body.sp-theme .spAppHeader,
body.sp-theme .spAppHeader__bar {
  background: linear-gradient(180deg, #041628 0%, #061a32 100%) !important;
  background-color: #061a32 !important;
  box-shadow: 0 1px 0 rgba(78, 227, 255, 0.12) !important;
  border-bottom: 1px solid rgba(47, 143, 255, 0.2) !important;
}

body.sp-theme .spAppHeader__bar a,
body.sp-theme .spAppHeader__bar span,
body.sp-theme .spAppHeader__bar button,
body.sp-theme .spAppHeader__bar p,
body.sp-theme .spAppHeader__bar div {
  color: rgba(232, 241, 255, 0.92) !important;
}

body.sp-theme .spAppHeader__bar a:hover,
body.sp-theme .spAppHeader__bar a:focus-visible {
  color: #4ee3ff !important;
}

body.sp-theme .spNavLink--active {
  background: rgba(47, 143, 255, 0.22) !important;
  background-color: rgba(47, 143, 255, 0.22) !important;
  color: #4ee3ff !important;
  border: 1px solid rgba(78, 227, 255, 0.45) !important;
  border-radius: 8px !important;
  box-shadow: 0 0 18px rgba(47, 143, 255, 0.25) !important;
}

/* My Center / sport centers dropdown — navy panel, readable labels */
body.sp-theme .sport-centers-dropdown {
  background: linear-gradient(180deg, #0b2748 0%, #071a33 100%) !important;
  border: 1px solid rgba(78, 227, 255, 0.28) !important;
  box-shadow: 0 18px 48px rgba(2, 11, 24, 0.55) !important;
}

body.sp-theme .sport-center-title {
  color: #dce9ff !important;
}

body.sp-theme .sport-center-link:hover {
  background-color: rgba(47, 143, 255, 0.14) !important;
}

body.sp-theme .sport-center-link:hover .sport-center-title {
  color: #4ee3ff !important;
}

body.sp-theme .sport-center-link:hover .image-container {
  border-color: #4ee3ff !important;
}

body.sp-theme .header-link {
  color: rgba(232, 241, 255, 0.92) !important;
}

body.sp-theme .header-link.active {
  color: #4ee3ff !important;
}

/* —— Page shell —— */
body.sp-theme .spPage {
  min-height: 40vh;
  background: var(--sp-void);
  color: #e8f1ff;
  font-family: var(--sp-body);
}

body.sp-theme .spPage h1,
body.sp-theme .spPage h2,
body.sp-theme .spPage h3 {
  color: #ffffff;
}

body.sp-theme .spPage > p,
body.sp-theme .spPage .spPage__copy {
  color: var(--sp-ice);
}

body.sp-theme .spPage .spBand--navy {
  background: var(--sp-navy) !important;
  color: #e8f1ff !important;
}

/* Dark cards (blog / feature tiles) */
body.sp-theme .spCardDark,
body.sp-theme a.spCardDark {
  background: #0b2748 !important;
  border: 1px solid rgba(78, 227, 255, 0.22) !important;
  color: #dce9ff !important;
  box-shadow: 0 12px 28px rgba(2, 11, 24, 0.35) !important;
}

body.sp-theme .spCardDark h1,
body.sp-theme .spCardDark h2,
body.sp-theme .spCardDark h3,
body.sp-theme .spCardDark p,
body.sp-theme .spCardDark span {
  color: #dce9ff !important;
}

body.sp-theme .spCardDark h1,
body.sp-theme .spCardDark h2,
body.sp-theme .spCardDark h3 {
  color: #ffffff !important;
}

/* Keep true white cards readable (forms / booking) */
body.sp-theme .spCard,
body.sp-theme .spCard h1,
body.sp-theme .spCard h2,
body.sp-theme .spCard h3,
body.sp-theme .spCard p,
body.sp-theme .spCard span,
body.sp-theme .spCard a,
body.sp-theme .spCard li {
  color: #1a2332 !important;
}

body.sp-theme .spCard a {
  color: #1a7ad4 !important;
}

body.sp-theme input,
body.sp-theme textarea,
body.sp-theme select {
  color: #1a2332;
}

body.sp-theme input::placeholder,
body.sp-theme textarea::placeholder {
  color: rgba(26, 35, 50, 0.55);
}

body.sp-theme .spFeatures {
  background: var(--sp-navy);
  padding: 2rem 1rem 3rem;
}

body.sp-theme .spFeatures h3 {
  color: #ffffff !important;
}

body.sp-theme .spFeatures p {
  color: var(--sp-ice) !important;
}

/* Facility sub-nav under header */
body.sp-theme .spFacilitySubnav,
body.sp-theme .spFacilitySubnavWrap {
  background: #061a32 !important;
  border-bottom: 1px solid rgba(78, 227, 255, 0.22) !important;
  box-shadow: none !important;
  color: #dce9ff !important;
}

body.sp-theme .spFacilitySubnav a,
body.sp-theme .spFacilitySubnav a:hover,
body.sp-theme .spFacilitySubnav a:focus,
body.sp-theme .spFacilitySubnav a:visited,
body.sp-theme .spFacilitySubnavWrap a,
body.sp-theme .spFacilitySubnavWrap a:hover {
  text-decoration: none !important;
}

/* Even nav gaps — My Center shares same padding as peer links */
body.sp-theme .venue-menu-container {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

body.sp-theme .venue-menu-container .header-link {
  padding: 8px 12px !important;
  margin: 0 !important;
}

body.sp-theme .spAppHeader__bar .spNavLink,
body.sp-theme .spAppHeader__bar a.spNavLink {
  margin: 0 !important;
}

/* Venue hero info strip (HeaderBottom) stays above content, never translucent white */
body.sp-theme .spVenueInfoBar {
  background: #071a33 !important;
  color: #dce9ff !important;
}

/* Loading / splash — night void, never white flash */
body.sp-theme .spLoading {
  background: #020b18 !important;
}

body.sp-theme .spLoading--transparent {
  background: rgba(2, 11, 24, 0.72) !important;
}

/* Activity filter chips spacing (Fallback if inline gap unsupported) */
body.sp-theme .spFilterChip {
  margin: 0 !important;
}

/* Subtle hover lift for night cards */
body.sp-theme .spHoverCard,
body.sp-theme .spCardDark.spHoverCard,
body.sp-theme a.spCardDark.spHoverCard {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

body.sp-theme .spHoverCard:hover,
body.sp-theme .spCardDark.spHoverCard:hover,
body.sp-theme a.spCardDark.spHoverCard:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(2, 11, 24, 0.5) !important;
  border-color: rgba(78, 227, 255, 0.4) !important;
}

/* Fixed Contact FAB */
body.sp-theme .spContactFab {
  background: linear-gradient(180deg, #2f8fff 0%, #1a6fd4 100%) !important;
  border: 1px solid rgba(78, 227, 255, 0.45) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 22px rgba(2, 11, 24, 0.45) !important;
}

body.sp-theme .spContactFab:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(2, 11, 24, 0.55) !important;
}