/* ================================================================
   BOOMER'S GAMING CAFE — Ivory Theme System
   Premium warm ivory palette for light / luxury sections.

   Primary Ivory    :  #F1EADF
   Secondary Ivory  :  #F7F2EA
   Warm Border      :  rgba(0, 0, 0, 0.08)
   Warm Shadow      :  rgba(101, 58, 17, 0.10)
   Dark headings    :  #1A1410
   Muted body text  :  #6B5E52
   ================================================================ */

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  --paper:            #F1EADF;
  --paper-secondary:  #F7F2EA;
  --paper-border:     rgba(0, 0, 0, 0.08);
  --paper-shadow:     rgba(101, 58, 17, 0.10);
  --paper-shadow-md:  rgba(101, 58, 17, 0.16);
  --ink-heading:      #1A1410;
  --ink-body:         #6B5E52;
  --ink-muted:        #9A8D83;
}

/* ================================================================
   STORY SECTION  (was already var(--paper) — lock it in)
   ================================================================ */
.story {
  background: var(--paper) !important;
}

.story-copy .display {
  color: var(--ink-heading);
}

.story-copy p {
  color: var(--ink-body);
}

.story-numbers small {
  color: var(--ink-muted);
}

/* ================================================================
   GAME LIBRARY SECTION  →  Ivory Secondary
   ================================================================ */
.game-library {
  background: var(--paper-secondary) !important;
}

.game-library .section-kicker {
  color: var(--accent);
}

.game-library .display {
  color: var(--ink-heading);
}

.game-library .display span {
  color: var(--accent);
}

.game-library .section-intro {
  color: var(--ink-body);
}

/* Keep game covers looking premium with a warm shadow */
.library-game {
  border-color: var(--paper-border) !important;
  box-shadow: 0 10px 30px var(--paper-shadow);
}

/* ================================================================
   BRANCH SPECS SECTION  →  Ivory Primary
   ================================================================ */
.branch-specs {
  background: var(--paper) !important;
}

.branch-specs .section-kicker {
  color: var(--accent);
}

.branch-specs .display {
  color: var(--ink-heading);
}

.branch-specs .display span {
  color: var(--accent);
}

.branch-specs .section-intro {
  color: var(--ink-body);
}

/* Location cards: keep dark — premium dark-card-on-ivory aesthetic */
/* Cards already have inline background: rgba(20,21,25,0.6) which we preserve */
/* Only warm up the border and shadow */
.branch-specs .badge-card.glass-card {
  border: 1px solid rgba(239, 189, 78, 0.18) !important;
  box-shadow: 0 12px 40px var(--paper-shadow-md) !important;
}

/* ================================================================
   GALLERY SECTION  →  Ivory Secondary
   (Section gets `.ivory-gallery` class via index.html)
   ================================================================ */
.ivory-gallery {
  background: var(--paper-secondary) !important;
}

.ivory-gallery .section-kicker {
  color: var(--accent);
}

.ivory-gallery .display {
  color: var(--ink-heading);
}

.ivory-gallery .display span {
  color: var(--accent);
}

.ivory-gallery .section-intro {
  color: var(--ink-body);
}

.ivory-gallery .gallery-item {
  border-color: var(--paper-border) !important;
  box-shadow: 0 6px 20px var(--paper-shadow);
}

/* ================================================================
   CALENDAR SECTION  →  Ivory Primary
   ================================================================ */
.calendar {
  background: var(--paper) !important;
}

.calendar .section-kicker {
  color: var(--accent);
}

.calendar .display {
  color: var(--ink-heading);
}

.calendar .display span {
  color: var(--accent);
}

.calendar .section-intro {
  color: var(--ink-body);
}

.calendar-grid {
  border-color: var(--paper-border) !important;
}

.calendar-event {
  border-color: var(--paper-border) !important;
}

.calendar-event b {
  color: var(--ink-heading);
}

.calendar-event small {
  color: var(--ink-muted);
}

.calendar-event a {
  color: var(--accent);
}

/* ================================================================
   PROOF / TESTIMONIALS SECTION  →  Ivory Primary (already was)
   ================================================================ */
.proof {
  background: var(--paper) !important;
  color: var(--ink-heading);
}

.proof .rating {
  color: var(--ink-heading);
}

/* Grid gap line between metric tiles */
.metrics {
  background: var(--paper-border) !important;
}

.metric {
  background: var(--paper) !important;
}

.metric b {
  color: var(--ink-heading);
}

.metric small {
  color: var(--ink-muted);
}

/* Desktop only — the mobile viewport has its own complete, self-contained
   override block in responsive.css (max-width: 767px). Previously these
   rules had no media query, so on mobile they competed !important-for-
   !important with that block, with the winner decided only by file load
   order — fragile, even though the two sets of values happened to match. */
@media (min-width: 801px) {
  .reviews-slider-wrap {
    border-top-color: rgba(0, 0, 0, 0.1) !important;
  }

  .review-dot {
    background: rgba(0, 0, 0, 0.15) !important;
  }

  .review-dot.active {
    background: var(--accent) !important;
  }
}

/* ================================================================
   BOOK SECTION (booking wizard)
   Dark→Ivory fade — gradient endpoint uses updated --paper token
   ================================================================ */
/* ================================================================
   BOOK SECTION (booking wizard) - PREMIUM DARK STYLING
   The steps side panel is on the dark portion of the gradient background.
   We style it to match the premium black/gold aesthetic with excellent contrast.
   ================================================================ */
.book {
  background: linear-gradient(
    180deg,
    #0d0d0f 0%,
    #14151a 220px,
    var(--paper) 600px
  ) !important;
  color: #fff;
}

/* Large Background Title "FROM PLAN TO PLAY" */
.book .display {
  color: rgba(255, 255, 255, 0.18) !important; /* Subtle but readable 18% opacity */
}
.book .display span {
  color: rgba(255, 255, 255, 0.35) !important;
}

/* Step list spacing and divider line */
.step {
  padding: 24px 0 !important; /* Increased line spacing to improve readability */
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important; /* Clean thin border */
}

/* Base style for step text */
.book .step b {
  font-family: var(--display) !important;
  font-size: 17px !important;
  letter-spacing: -0.03em !important;
  transition: color 0.3s ease !important;
}

/* Step labels based on wizard states */
/* Inactive/Upcoming Steps: Grey */
.book .step:not(.completed):not(.active) b {
  color: rgba(255, 255, 255, 0.72) !important; /* Inactive grey */
}
.book .step:not(.completed):not(.active)::before {
  content: '○' !important; /* Upcoming hollow circle */
  color: #8E8E95 !important;
}

/* Active Step: Glowing Gold */
.book .step.active b {
  color: #F5C34D !important; /* Active gold */
  text-shadow: 0 0 10px rgba(245, 195, 77, 0.15);
}
.book .step.active::before {
  content: '▶' !important; /* Current indicator arrow */
  color: #F5C34D !important;
  text-shadow: 0 0 10px rgba(245, 195, 77, 0.3);
}

/* Completed Steps: High Contrast White */
.book .step.completed b {
  color: #FFFFFF !important; /* Completed white */
}
.book .step.completed::before {
  content: '✔' !important; /* Completed checkmark */
  color: #FFFFFF !important;
}

/* Left & Right Step Numbers: consistent #8E8E95, font-weight 600 */
.book .step::before {
  font-family: var(--mono) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  width: 24px !important;
  display: inline-block !important;
}

.book .step p {
  color: #8E8E95 !important;
  font-family: var(--mono) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  margin: 0 0 0 auto !important;
}

/* Section kicker "YOUR NEXT SESSION" */
.book .section-kicker {
  color: var(--accent) !important;
}


/* ================================================================
   SECTION TRANSITION — warm dividers between black / ivory
   ================================================================ */

/* A very subtle warm glow at the top edge of ivory sections */
.game-library,
.branch-specs,
.ivory-gallery,
.calendar {
  position: relative;
}

.game-library::before,
.branch-specs::before,
.ivory-gallery::before,
.calendar::before {
  content: '';
  display: block;
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(239, 189, 78, 0.35) 40%,
    rgba(239, 189, 78, 0.35) 60%,
    transparent
  );
  pointer-events: none;
}

/* For ivory sections that follow another ivory section, suppress top line */
.story + .section.game-library::before,
.branch-specs + .calendar::before {
  display: none;
}

/* ================================================================
   WARM SHADOWS — override any cold box-shadows inside ivory areas
   ================================================================ */

/* Cards, panels, buttons inside ivory sections */
.game-library .library-game:hover,
.branch-specs .badge-card.glass-card:hover {
  box-shadow: 0 20px 48px var(--paper-shadow-md) !important;
}

/* ================================================================
   GLOBAL — warm borders replace cold greys on ivory sections
   ================================================================ */
.branch-specs .branch-button {
  border-color: var(--paper-border) !important;
  color: var(--ink-heading);
}

.branch-specs .branch-button small {
  color: var(--ink-muted);
}

.branch-specs .branch-button b {
  color: var(--ink-heading);
}

.branch-specs .branch-button:hover,
.branch-specs .branch-button.active {
  border-color: var(--accent) !important;
  background: rgba(239, 189, 78, 0.08) !important;
}

/* Comparison table on ivory */
.branch-specs .comparison-table {
  border-color: var(--paper-border) !important;
  background: rgba(255, 255, 255, 0.5) !important;
}

.branch-specs .comparison-table th,
.branch-specs .comparison-table td {
  border-color: var(--paper-border) !important;
}

.branch-specs .comparison-table th {
  background: rgba(0, 0, 0, 0.03) !important;
}

.branch-specs .comparison-table td b {
  color: var(--ink-heading) !important;
}

.branch-specs .comparison-table td {
  color: var(--ink-body);
}

/* ================================================================
   COMPREHENSIVE TEXT CONTRAST — all ivory sections
   Catch-all: any text that defaults to body color (#f8f8f4 = near
   white) needs to be forced dark on ivory backgrounds.
   ================================================================ */

/* Game Library — all text elements */
.game-library .display,
.game-library h2,
.game-library h3 {
  color: var(--ink-heading) !important;
}

.game-library p,
.game-library .section-intro {
  color: var(--ink-body) !important;
}

/* Branch Specs — section-level text */
.branch-specs .display,
.branch-specs h2 {
  color: var(--ink-heading) !important;
}

.branch-specs p,
.branch-specs .section-intro {
  color: var(--ink-body) !important;
}

/* Gallery — section-level text */
.ivory-gallery .display,
.ivory-gallery h2,
.ivory-gallery h3 {
  color: var(--ink-heading) !important;
}

.ivory-gallery p,
.ivory-gallery .section-intro {
  color: var(--ink-body) !important;
}

/* Calendar — section-level text + dynamic event cards */
.calendar .display,
.calendar h2 {
  color: var(--ink-heading) !important;
}

.calendar p,
.calendar .section-intro {
  color: var(--ink-body) !important;
}

/* Calendar event time numbers keep gold accent */
.calendar .calendar-event time {
  color: var(--accent) !important;
}

/* Calendar event title and description */
.calendar .calendar-event b {
  color: var(--ink-heading) !important;
}

.calendar .calendar-event p {
  color: var(--ink-body) !important;
}

/* Story section — body text and numbers */
.story p {
  color: var(--ink-body) !important;
}

.story-numbers b {
  color: var(--ink-heading);
}

/* Proof section */
.proof .section-kicker {
  color: var(--accent) !important;
}

.proof p,
.proof .section-intro {
  color: var(--ink-body) !important;
}

@media (min-width: 801px) {
  .review-slide {
    color: var(--ink-body) !important;
  }
}

.proof h2,
.proof .display,
.proof .rating {
  color: var(--ink-heading) !important;
}