/* ===========================================================================
   Safed Parindey — dark / gold front-facing theme (Bootstrap pages)
   Loaded after Bootstrap + the layout's inline styles, so it overrides them.
   Many sections carry inline light-theme colours; `!important` is used
   deliberately to win over those inline styles.
   =========================================================================== */

/* Fonts are loaded via <link> in the layout head (more reliable than @import). */

:root {
  --sp-night-950: #030305;
  --sp-night-900: #06060b;
  --sp-night-850: #090911;
  --sp-night-800: #0c0c16;
  --sp-night-700: #12121f;
  --sp-gold-200: #fbe390;
  --sp-gold-300: #f9d264;
  --sp-gold-400: #f5c842;
  --sp-gold-500: #edb025;
  --sp-gold-600: #d4941e;
  --sp-paper: #f7f3e8;
  --sp-ink: #d8d2c4;
  --sp-ink-dim: #a9a397;
  --sp-script: "Golden Winter", "Bodoni Moda", cursive;
}

/* Brand script — for short, title-case display headings only (never long text,
   all-caps, or functional labels). Applied via the .font-script class. */
.font-script {
  font-family: var(--sp-script) !important;
  font-weight: 400 !important;
  letter-spacing: 0.015em;
  line-height: 1.1;
  color: var(--sp-gold-300) !important;
}

/* Bootstrap dark-mode token overrides -------------------------------------- */
[data-bs-theme="dark"] {
  --bs-body-bg: var(--sp-night-900);
  --bs-body-color: var(--sp-ink);
  --bs-emphasis-color: var(--sp-paper);
  --bs-secondary-color: var(--sp-ink-dim);
  --bs-tertiary-bg: var(--sp-night-800);
  --bs-primary: var(--sp-gold-500);
  --bs-primary-rgb: 237, 176, 37;
  --bs-link-color: var(--sp-gold-400);
  --bs-link-color-rgb: 245, 200, 66;
  --bs-link-hover-color: var(--sp-gold-200);
  --bs-border-color: rgba(237, 176, 37, 0.18);
  --bs-heading-color: var(--sp-paper);
}

/* Base --------------------------------------------------------------------- */
body {
  background:
    radial-gradient(120% 85% at 50% -10%, #14141f 0%, #08080f 52%, #030305 100%)
      fixed,
    var(--sp-night-950) !important;
  color: var(--sp-ink) !important;
  font-family: "Inter Tight", system-ui, -apple-system, sans-serif !important;
  font-size: 1.08rem !important; /* ~17.3px — the base felt too small on dark */
  line-height: 1.7;
  font-weight: 400;
}

/* Readability scale for the Bootstrap pages. These are UNLAYERED element rules
   (so they beat Bootstrap), which means they would also leak into the layered
   Tailwind utilities of the .safed-experience island and override its type.
   So every bare-element rule is excluded from the island via :not(). */
:is(p, li, td, th):not(.safed-experience *),
.card-text, .card-body,
.form-control, .form-select, .form-label, label,
.btn, .navbar, .navbar-text, .nav-link, .alert, .badge {
  font-size: 1.02rem;
}
.lead {
  font-size: 1.28rem !important;
  line-height: 1.6;
}
small, .small { font-size: 0.92rem !important; }

:is(h1, .h1, .display-4):not(.safed-experience *) { font-size: clamp(2.2rem, 4vw, 3rem); }
:is(h2, .h2):not(.safed-experience *) { font-size: clamp(1.9rem, 3vw, 2.4rem); }
:is(h3, .h3):not(.safed-experience *) { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
:is(h4, .h4):not(.safed-experience *) { font-size: 1.4rem; }
:is(h5, .h5, .card-title):not(.safed-experience *) { font-size: 1.2rem; }
.btn-lg { font-size: 1.12rem !important; }

:is(h1, h2, h3, h4, h5, h6, .card-title, .display-1, .display-2, .display-3, .display-4):not(.safed-experience *):not(.font-script) {
  font-family: "Bodoni Moda", Georgia, serif !important;
  color: var(--sp-paper) !important;
  letter-spacing: 0.01em;
}

.lead, .text-muted, small, .small {
  color: var(--sp-ink-dim) !important;
}

a {
  color: var(--sp-gold-400);
}
a:hover {
  color: var(--sp-gold-200);
}

hr {
  border-color: rgba(237, 176, 37, 0.22) !important;
  opacity: 1;
}

/* Kill the light section backgrounds baked into inline styles -------------- */
section,
.section-spacing,
[style*="background-color: #f8f9fa"],
[style*="background-color: #fff8e1"],
[style*="background: linear-gradient(135deg, #bfa046"] {
  background: transparent !important;
}

/* Navbar ------------------------------------------------------------------- */
.navbar {
  background: rgba(6, 6, 11, 0.72) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(237, 176, 37, 0.16);
}
.navbar-brand {
  color: var(--sp-gold-400) !important;
  font-family: var(--sp-script) !important;
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
}
.navbar .nav-item,
.navbar .nav-link,
.navbar .navbar-text {
  color: #cbc6b8 !important;
}
.navbar-toggler {
  border-color: rgba(237, 176, 37, 0.4) !important;
}

/* Buttons ------------------------------------------------------------------ */
.btn-primary,
.btn-warning,
.btn-success {
  background: linear-gradient(180deg, var(--sp-gold-400), var(--sp-gold-600)) !important;
  border: none !important;
  color: #1a1207 !important;
  font-weight: 600 !important;
  box-shadow: 0 8px 24px -12px rgba(237, 176, 37, 0.6);
}
.btn-primary:hover,
.btn-warning:hover,
.btn-success:hover {
  filter: brightness(1.08);
  color: #1a1207 !important;
  transform: translateY(-1px);
}
.btn-outline-primary,
.btn-outline-warning,
.btn-outline-light {
  border-color: var(--sp-gold-500) !important;
  color: var(--sp-gold-300) !important;
}
.btn-outline-primary:hover,
.btn-outline-warning:hover,
.btn-outline-light:hover {
  background: var(--sp-gold-500) !important;
  color: #1a1207 !important;
}

/* Cards -------------------------------------------------------------------- */
.card {
  background: var(--sp-night-800) !important;
  border: 1px solid rgba(237, 176, 37, 0.16) !important;
  color: var(--sp-ink) !important;
  border-radius: 14px;
  overflow: hidden;
}
.card .card-title,
.card .card-title a,
.card h5 {
  color: var(--sp-gold-300) !important;
}
.card .card-text,
.card .card-body p,
.card-body {
  color: var(--sp-ink) !important;
}
.card-hover-effect {
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.card-hover-effect:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 70px -34px rgba(0, 0, 0, 0.95);
  border-color: rgba(237, 176, 37, 0.42) !important;
}

/* Section headings / eyebrows in the retained sections --------------------- */
.events-section h2 {
  color: var(--sp-gold-400) !important;
}

/* Forms (booking) ---------------------------------------------------------- */
.form-control,
.form-select {
  background: var(--sp-night-850) !important;
  border: 1px solid rgba(237, 176, 37, 0.22) !important;
  color: var(--sp-paper) !important;
}
.form-control::placeholder {
  color: rgba(169, 163, 151, 0.7) !important;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--sp-gold-400) !important;
  box-shadow: 0 0 0 0.2rem rgba(237, 176, 37, 0.18) !important;
  background: var(--sp-night-850) !important;
}
.form-label,
label {
  color: var(--sp-ink) !important;
}
.input-group-text {
  background: var(--sp-night-700) !important;
  border-color: rgba(237, 176, 37, 0.22) !important;
  color: var(--sp-gold-300) !important;
}

/* Badges / pills ----------------------------------------------------------- */
.badge {
  background: rgba(237, 176, 37, 0.16) !important;
  color: var(--sp-gold-200) !important;
}

/* Footer ------------------------------------------------------------------- */
footer {
  background: var(--sp-night-950) !important;
  border-top: 1px solid rgba(237, 176, 37, 0.16);
  color: #8f897e !important;
}
footer a {
  color: var(--sp-gold-300) !important;
}
footer h5,
footer h6 {
  color: var(--sp-paper) !important;
}

/* Utility colour classes that assume a light bg ---------------------------- */
.text-dark {
  color: var(--sp-paper) !important;
}
.bg-white,
.bg-light {
  background: var(--sp-night-800) !important;
  color: var(--sp-ink) !important;
}

/* Booking flow ------------------------------------------------------------- */
.card-header {
  background: var(--sp-night-700) !important;
  border-bottom: 1px solid rgba(237, 176, 37, 0.16) !important;
  color: var(--sp-paper) !important;
}
/* …but keep the WhatsApp-branded OTP headers green (they set an inline
   gradient, which already wins over the rule above — no override needed). */

.btn-golden {
  background: linear-gradient(180deg, var(--sp-gold-400), var(--sp-gold-600)) !important;
  border: none !important;
  color: #1a1207 !important;
  font-weight: 600 !important;
}
.btn-golden:hover {
  filter: brightness(1.08);
  color: #1a1207 !important;
}

.event-description,
.event-description * {
  color: var(--sp-ink) !important;
}

/* Alerts: legible on the dark stage */
.alert-info {
  background: rgba(237, 176, 37, 0.1) !important;
  border-color: rgba(237, 176, 37, 0.3) !important;
  color: var(--sp-gold-200) !important;
}

/* Scanner login page (custom container classes) */
.login-container {
  background: rgba(12, 12, 22, 0.96) !important;
  border: 1px solid rgba(237, 176, 37, 0.16) !important;
  color: var(--sp-ink) !important;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9) !important;
}
.login-container h1,
.login-container h2,
.login-container h3,
.login-container h4,
.login-container h5 {
  color: var(--sp-paper) !important;
}
.dev-autofill {
  background: var(--sp-night-700) !important;
  border: 1px solid rgba(237, 176, 37, 0.2) !important;
  color: var(--sp-ink) !important;
}

/* Modals / offcanvas inherit the dark surface */
.modal-content,
.offcanvas {
  background: var(--sp-night-800) !important;
  color: var(--sp-ink) !important;
  border: 1px solid rgba(237, 176, 37, 0.16) !important;
}
.modal-header,
.modal-footer {
  border-color: rgba(237, 176, 37, 0.16) !important;
}

/* "Join the White Circle" waitlist — the home empty-state CTA. The emblem is a
   gilded ring around the dove mark, echoing the "white birds" brand. */
.wc-emblem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 1px solid rgba(237, 176, 37, 0.55);
  background: radial-gradient(circle at 50% 40%, rgba(237, 176, 37, 0.14), transparent 70%);
  box-shadow: 0 0 34px rgba(237, 176, 37, 0.22), inset 0 0 18px rgba(237, 176, 37, 0.1);
}
.wc-emblem i {
  font-size: 2rem;
  color: var(--sp-gold-400);
}