/**
 * newapp/css/theme-xmas.css
 * Skin for the Xmas journey's customer-facing pages — same mechanism as
 * theme-schools.css/theme-parties.css (na_apply_journey_theme('xmas') ->
 * session -> body class .theme-xmas, see na_theme.php). Palette/fonts read
 * directly off the LIVE xmas.php/xmas_breadcrumb.php (Cinzel display font +
 * Lato body font, gold-on-black-and-deep-red Christmas look) — not
 * reinvented, ported.
 */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&family=Lato:wght@400;700&display=swap');

.theme-xmas {
  --theme-font: 'Lato', sans-serif;
  --theme-display-font: 'Cinzel', serif;
  --theme-btn-bg: #d4af37;
  --theme-btn-color: #1a1a1a;
  --theme-border: #d4af37;
  --xmas-gold: #d4af37;
  --xmas-gold-light: #f0d060;
  --xmas-gold-dark: #a88820;
  --xmas-red-header: #8b0000;
  --xmas-red-bright: #c0392b;
  --xmas-bg-dark: #0a0a0a;

  /* Flat dark ground, as before — the photographic page backdrop is OFF by
     request. The calendar keeps its own parchment backdrop and wax seal further
     down; only this whole-page image was turned off.

     To bring it back, swap the line below for:
       background: var(--xmas-bg-dark) url('../images/xmasbg.webp') center top / cover no-repeat fixed;
     Keep the colour first either way, so a slow or missing image still leaves a
     dark, readable page rather than white-on-white. */
  background: var(--xmas-bg-dark);
  min-height: 100vh;
  font-family: var(--theme-font);
  color: #fff;
}

.theme-xmas h1, .theme-xmas h2, .theme-xmas h3, .theme-xmas h4, .theme-xmas h5 {
  font-family: var(--theme-display-font);
}

/* Cards read as gold-framed panels on the dark wash, not stock white/grey Bootstrap */
.theme-xmas .card {
  background: #161616;
  border: 1.5px solid rgba(212, 175, 55, .35);
  border-radius: 12px;
  color: #f2f2f2;
}
.theme-xmas .card-header {
  background: rgba(212, 175, 55, .08);
  border-bottom: 1px solid rgba(212, 175, 55, .3);
  color: var(--xmas-gold-light);
}
.theme-xmas .text-muted { color: rgba(255, 255, 255, .55) !important; }

/* Bootstrap's .bg-light forces a near-WHITE surface with !important. On this dark
   theme that collided head-on with the .text-muted rule above — white text on a
   white background, i.e. invisible. Real cases: checkout's "included" addon rows
   ("4 tickets x £2.50 (charged per ticket)") and xmas_complete's info panels.
   Keep the "subtly distinct surface" intent, but express it as a light tint OF the
   dark card rather than as actual white.
   .text-bg-light (the ticket-count badges) is deliberately NOT touched — that class
   sets its own dark foreground, so it is self-consistent and already readable. */
.theme-xmas .bg-light {
  background-color: rgba(255, 255, 255, .07) !important;
  color: #f2f2f2;
}

/* na-panel-header defaults to Bootstrap's .bg-dark look (see newapp.css) —
   same override precedent as theme-schools.css/theme-parties.css: Bootstrap's
   .bg-dark is !important and can't be beaten any other way. */
.theme-xmas .na-panel-header {
  background: linear-gradient(135deg, var(--xmas-red-bright) 0%, var(--xmas-red-header) 100%) !important;
  color: #fff !important;
}

/* Step nav — gold pill active state, matching the live site's breadcrumb look */
.theme-xmas .na-step-pills { background: #161616; border-color: rgba(212, 175, 55, .3) !important; }
.theme-xmas .na-step-pill-active {
  background: linear-gradient(135deg, var(--xmas-gold) 0%, var(--xmas-gold-dark) 100%);
  color: #1a1a1a;
  font-weight: 700;
}
.theme-xmas .na-step-pill-link { color: var(--xmas-gold-light); }
.theme-xmas .na-step-pill-locked { color: #555; }
.theme-xmas .na-step-sep { color: var(--xmas-gold); }

/* Primary "Continue"-style buttons — gold pill, dark text, matching
   .btn-booking-next on the live site. Marker class only (see
   theme-schools.css's own lesson: a blanket .btn-success selector reaches
   into unrelated components using the same stock Bootstrap class). */
.theme-xmas .na-btn-nav,
.theme-xmas .btn-success.na-btn-nav {
  background: linear-gradient(135deg, var(--xmas-gold) 0%, var(--xmas-gold-dark) 100%);
  border: none;
  color: #1a1a1a;
  font-weight: 700;
  padding: .65rem 1.85rem;
  border-radius: 6px;
  box-shadow: 0 4px 15px rgba(212, 175, 55, .4);
}
.theme-xmas .na-btn-nav:hover:not(:disabled) {
  box-shadow: 0 6px 25px rgba(212, 175, 55, .6);
}
.theme-xmas .na-btn-nav:disabled { opacity: .4; box-shadow: none; }

/* Gold links belong on the theme's own dark surfaces, NOT on Bootstrap
   components that bring their own light background. A blanket `a` rule caught
   the admin dropdown — whose menu is white — and produced gold-on-white, which
   is effectively unreadable. Scoped so those components keep Bootstrap's own
   readable defaults. */
.theme-xmas a:not(.dropdown-item):not(.nav-link):not(.btn):not(.page-link):not(.list-group-item) {
  color: var(--xmas-gold-light);
}
.theme-xmas .form-control, .theme-xmas .form-select {
  background: #1e1e1e;
  border-color: rgba(212, 175, 55, .35);
  color: #fff;
}
.theme-xmas .form-control:focus, .theme-xmas .form-select:focus {
  background: #1e1e1e;
  color: #fff;
  border-color: var(--xmas-gold);
  box-shadow: 0 0 0 .2rem rgba(212, 175, 55, .25);
}
.theme-xmas .form-label { color: #eee; }

/* Placeholders were never given a colour, so they kept the browser's default
   grey — which is chosen for a WHITE input and all but vanishes on this theme's
   #1e1e1e one. Affects the booking journeys' own fields, not only personalisation.
   Deliberately dimmer than the typed value so a hint still reads as a hint. */
.theme-xmas .form-control::placeholder,
.theme-xmas .form-select::placeholder {
  color: rgba(255, 255, 255, .45);
  opacity: 1;   /* Firefox dims placeholders again unless told not to */
}
.theme-xmas .modal-content .form-control::placeholder,
.theme-xmas .offcanvas .form-control::placeholder {
  color: #6c757d;   /* those inputs are white — back to Bootstrap's own grey */
}

/* ── Bootstrap components that bring their OWN light surface ──────────────────
   The theme's text rules above (.text-muted at 55% white, .form-label #eee,
   dark .form-control) are written for this theme's DARK page. A Bootstrap modal,
   dropdown, popover, toast and offcanvas each render on their own WHITE surface,
   so those rules landed white-on-white — the Save Progress modal was unreadable.

   Fixed once here, by giving those surfaces their own text colours, rather than
   bolting another :not() onto every theme rule each time a component turns up.
   The dark form-control is deliberately reverted too: a near-black input inside
   a white modal reads as broken rather than themed. */
.theme-xmas .modal-content,
.theme-xmas .dropdown-menu,
.theme-xmas .popover,
.theme-xmas .toast,
.theme-xmas .offcanvas {
  color: #1a1a1a;
}
.theme-xmas .modal-content .text-muted,
.theme-xmas .dropdown-menu .text-muted,
.theme-xmas .popover .text-muted,
.theme-xmas .toast .text-muted,
.theme-xmas .offcanvas .text-muted {
  color: #6c757d !important;
}
.theme-xmas .modal-content .form-label,
.theme-xmas .offcanvas .form-label {
  color: #1a1a1a;
}
.theme-xmas .modal-content .form-control,
.theme-xmas .modal-content .form-select,
.theme-xmas .offcanvas .form-control,
.theme-xmas .offcanvas .form-select {
  background: #fff;
  color: #1a1a1a;
  border-color: #ced4da;
}
.theme-xmas .modal-content .form-control:focus,
.theme-xmas .modal-content .form-select:focus,
.theme-xmas .offcanvas .form-control:focus,
.theme-xmas .offcanvas .form-select:focus {
  background: #fff;
  color: #1a1a1a;
}

/* ── Date calendar (xmas_date_calendar.php) ── */

/* The calendar's own parchment backdrop and its wax seal, both carried over from
   the live site's #booking-calendar-wrap. DESKTOP ONLY: the artwork is sized for
   a wide canvas, and on a phone it crops to an unreadable smear behind the grid —
   which is why the original hid both below md too. */
.theme-xmas .na-xmas-calendar {
  position: relative;                     /* the seal positions against this */
  background: url('../images/calendarbackground.png') top center / 100% auto no-repeat;
  /* The original's flat 100px side padding pushed the 7-column grid 227px past
     the viewport on a 1194px screen — a horizontal scrollbar on the first page of
     the journey. Scales with the viewport instead, so the artwork still has room
     to breathe on a wide screen and the grid always fits on a narrow one. */
  padding: 24px clamp(12px, 5vw, 100px) 48px;
  border-radius: 12px;
  overflow: hidden;                       /* the seal must not extend the page */
}
.theme-xmas .na-xc-wax-seal {
  position: absolute;
  top: 10px;
  left: 40px;
  width: clamp(90px, 12vw, 170px);
  pointer-events: none;                   /* never intercept a click on week one */
  z-index: 0;
}
/* The seal is a positioned element, so a static month title stacks BELOW it and
   "NOVEMBER 2026" was rendered behind the wax. Lifting the calendar's own content
   above it keeps the seal decorative rather than obstructive. */
.theme-xmas .na-xc-month-title,
.theme-xmas .na-xc-dow-row,
.theme-xmas .na-xc-grid {
  position: relative;
  z-index: 1;
}
@media (max-width: 767.98px) {
  .theme-xmas .na-xmas-calendar {
    background-image: none;
    padding: 0;
  }
  .theme-xmas .na-xc-wax-seal { display: none; }
}

.theme-xmas .na-xc-month-title {
  font-family: var(--theme-display-font);
  font-size: clamp(24px, 3.5vw, 38px);
  font-weight: 900;
  color: var(--xmas-gold);
  text-shadow: 0 0 30px rgba(212, 175, 55, .55), 2px 2px 0 rgba(0, 0, 0, .8);
  letter-spacing: .07em;
  margin-bottom: 8px;
}
/* THE HEADER ROW AND THE DAY GRID MUST SHARE EXACTLY ONE TRACK GEOMETRY.
   They were both repeat(7, 1fr) but with different horizontal budgets: the row
   had a 2px border and no gap, the grid had 6px gaps and no border. So the row's
   columns were (W-4)/7 wide and the grid's were (W-36)/7 — the two drifted apart
   more with every column, and the drift shifted as the page resized because the
   fixed 4px/36px do not scale with the fluid columns.

   Fixed by giving the row the SAME gap and moving its border onto the individual
   header cells, which also lines each header up as a pill over the day card below
   it rather than a single strip that only appears to line up. */
/* minmax(0, 1fr), NOT 1fr — this is the actual cause of the day columns drifting
   out of line with their headers. `1fr` is shorthand for `minmax(auto, 1fr)`, and
   that `auto` minimum means a track REFUSES to shrink below its content's
   min-content width. A cell holding "CLASSIC TICKET" therefore pushed its own
   column wider than a seventh, and every column after it shifted — the error
   accumulating left to right (measured: 0, 10, 20, 29, 39, 48px) and growing as
   the page narrowed. The header cells contain one short word, so they always sat
   at a true seventh and the two rows diverged.

   minmax(0, ...) lets a track go narrower than its content, which is what makes
   seven equal columns actually equal. */
.theme-xmas .na-xc-dow-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}
.theme-xmas .na-xc-dow-cell {
  background: linear-gradient(180deg, var(--xmas-red-bright) 0%, var(--xmas-red-header) 100%);
  border: 2px solid var(--xmas-gold-dark);
  border-radius: 6px;
  text-align: center;
  padding: 7px 0;
  font-family: var(--theme-display-font);
  font-size: clamp(10px, 1.2vw, 13px);
  font-weight: 700;
  color: var(--xmas-gold-light);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, .8);
}
.theme-xmas .na-xc-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}
.theme-xmas .na-xc-cell {
  min-width: 0;      /* same reason as minmax(0,1fr): let it shrink under content */
  min-height: clamp(90px, 12vw, 130px);
  border-radius: 6px;
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(20, 15, 5, .6);
  border: 1.5px solid rgba(212, 175, 55, .35);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, .4);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.theme-xmas .na-xc-cell-empty { background: transparent !important; border: none !important; box-shadow: none !important; cursor: default; }
.theme-xmas .na-xc-cell:not(.na-xc-cell-empty):hover {
  border-color: rgba(212, 175, 55, .65);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, .4), 0 0 8px rgba(212, 175, 55, .2);
}
.theme-xmas .na-xc-selected {
  border-color: var(--xmas-gold) !important;
  box-shadow: 0 0 0 2px var(--xmas-gold), inset 0 0 12px rgba(0, 0, 0, .4) !important;
}
.theme-xmas .na-xc-date-num {
  width: clamp(24px, 3vw, 32px); height: clamp(24px, 3vw, 32px);
  border-radius: 50%;
  background: linear-gradient(135deg, #f0f0f0 0%, #ccc 100%);
  color: #1a1a1a;
  font-family: var(--theme-display-font);
  font-size: clamp(11px, 1.3vw, 14px);
  font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--xmas-gold);
  box-shadow: 0 0 8px rgba(212, 175, 55, .5);
  position: absolute; top: -8px; left: -4px; z-index: 10;
}
/* Everything below must be able to shrink with its column. Once the tracks stopped
   refusing to go under their content (minmax(0,1fr) above), the pills inside kept
   their own min-content width and spilled out of the day cell instead — the ticket
   thumbnails ended up outside the calendar entirely. min-width:0 at each nesting
   level is what lets that shrinking reach the text. */
.theme-xmas .na-xc-events {
  display: flex; flex-direction: column; gap: 4px;
  padding: 4px 5px 5px; margin-top: clamp(14px, 1.8vw, 18px); flex: 1;
  min-width: 0;
}
.theme-xmas .na-xc-event {
  border-radius: 4px;
  /* Horizontal padding scales harder than vertical: side padding is what eats the
     width a word needs, and losing it costs nothing visually. Together with the
     lower font floor this keeps "CLASSIC" on one line down to a ~90px column,
     instead of splitting to "CLASSI / C". */
  padding: clamp(5px, .8vw, 9px) clamp(4px, .7vw, 12px);
  /* Ticket names scaled down 20% on 2026-08-30, asked for directly (10/1.25/18 ->
     8/1/14.4). Every part of the clamp is scaled, not just the ceiling, so the
     reduction holds at every screen width rather than only on a wide desktop.
     FONT SIZE ONLY — padding, the thumbnail and the wrapping are deliberately
     untouched: a long name wrapping across two lines here is accepted. */
  font-size: clamp(8px, 1vw, 14.4px); line-height: 1.25; color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  min-width: 0;
  /* NO overflow:hidden. It used to crop a name that wrapped past the pill's own
     height, so a two-line ticket lost its second line entirely. The day cell is
     min-height, not a fixed height, so letting the pill grow simply makes the
     row taller — which is the wanted behaviour (2026-09-01). */
}
.theme-xmas .na-xc-event-title {
  font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  flex: 1; min-width: 0;
  /* Wrap at spaces ONLY — a ticket name must never be split mid-word
     (2026-09-01, asked for directly). This was `overflow-wrap: break-word`,
     which sounds conservative but fired constantly: with the thumbnail taking
     30px of a ~109px pill the text was left 53px, while TWILIGHT needs 65px and
     CHRISTMAS 77px — so almost every name fragmented into TODDLE/R, TWILIG/HT,
     CHRIST/MAS/VALENT/INES. The fix is the width, handled by the thumbnail rule
     below; this just states that splitting a word is not an acceptable answer. */
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}

/* The thumbnail is a nice-to-have; the ticket NAME is the thing being chosen, so
   below the width where both fit, the thumbnail stands down and gives the space
   back. Raised 1100px -> 1500px on 2026-09-01 after measuring it: at a 1280px
   viewport the day cell is 121px, the pill 109px, and the fixed 30px thumbnail
   plus its 6px gap and 18px of padding left the name just 53px — less than the
   65px TWILIGHT needs. 1500px is where a full-width name (CHRISTMAS VALENTINES,
   the longest in the catalogue) fits beside the thumbnail without breaking:
   past 1440px the font stops growing (the clamp ceiling) so the word width is
   fixed at ~90px while the pill keeps widening, and 1700px is where the box
   finally overtakes it. Measured, not guessed — if a ticket name longer than
   CHRISTMAS VALENTINES is ever added, this number needs raising with it.
   Below it the name gets the pill's full width, which fits every name there is. */
@media (max-width: 1700px) {
  .theme-xmas .na-xc-event-img { display: none; }
}
.theme-xmas .na-xc-event-img { width: clamp(22px, 3vw, 30px); height: clamp(22px, 3vw, 30px); object-fit: cover; border-radius: 2px; flex-shrink: 0; }

/* Mobile list */
.theme-xmas .na-xc-list-month-title {
  font-family: var(--theme-display-font); font-size: 22px; font-weight: 900;
  color: var(--xmas-gold); letter-spacing: .06em; margin: 19px 0 10px;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, .6);
}
.theme-xmas .na-xc-list-item {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  border-radius: 10px; border: 2px solid rgba(212, 175, 55, .3);
  background: rgba(20, 15, 5, .85); cursor: pointer; margin-bottom: 9px;
  transition: border-color .15s, box-shadow .15s;
}
.theme-xmas .na-xc-list-item:hover { border-color: rgba(212, 175, 55, .65); }
.theme-xmas .na-xc-list-item.na-xc-selected {
  border-color: var(--xmas-gold);
  box-shadow: 0 0 0 2px var(--xmas-gold), 0 0 14px rgba(212, 175, 55, .25);
}
.theme-xmas .na-xc-list-date-col { display: flex; flex-direction: column; align-items: center; min-width: 52px; flex-shrink: 0; }
.theme-xmas .na-xc-list-dow { font-size: 12px; color: rgba(212, 175, 55, .8); font-weight: 700; text-transform: uppercase; }
.theme-xmas .na-xc-list-day { font-size: 30px; font-weight: 900; font-family: var(--theme-display-font); color: #fff; line-height: 1; }
.theme-xmas .na-xc-list-month-short { font-size: 12px; color: rgba(255, 255, 255, .55); text-transform: uppercase; }
.theme-xmas .na-xc-list-divider { width: 1.5px; align-self: stretch; background: rgba(212, 175, 55, .25); flex-shrink: 0; }
.theme-xmas .na-xc-list-tickets { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.theme-xmas .na-xc-list-pill {
  border-radius: 20px; padding: 8px 18px; font-size: 12px; font-weight: 700;   /* 15px -20%, matching .na-xc-event above */
  text-transform: uppercase; letter-spacing: .03em; color: #fff;
  /* Wraps at spaces (was white-space:nowrap, so a long name ran past the pill
     rather than taking a second line). max-width keeps one long name from
     claiming the whole row and pushing its siblings off. */
  white-space: normal; overflow-wrap: break-word; max-width: 100%;
}

@media (max-width: 480px) {
  .theme-xmas .na-xc-grid { display: none; } /* desktop grid already hidden via d-none d-md-block wrapper; safety net */
}

/* ── Ticket card picker (ticket_card_picker.php) — ported from live .tc-* ── */
.theme-xmas .na-tc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.theme-xmas .na-tc-divider { border-color: rgba(212, 175, 55, .3); margin: 2.5rem 0 1.5rem; }
.theme-xmas .na-tc-card {
  background: #161616;
  border: 2px solid rgba(212, 175, 55, .3);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
  transition: border-color .15s, box-shadow .15s;
  position: relative;
  cursor: pointer;
}
.theme-xmas .na-tc-card:hover { border-color: var(--xmas-gold); box-shadow: 0 4px 16px rgba(212, 175, 55, .2); }
.theme-xmas .na-tc-card-selected {
  border-color: var(--xmas-gold) !important;
  box-shadow: 0 0 0 3px var(--xmas-gold), 0 0 22px rgba(212, 175, 55, .45) !important;
  transform: scale(1.03);
}
.theme-xmas .na-tc-inner { display: flex; flex-direction: column; height: 100%; border-radius: 10px; overflow: hidden; user-select: none; }
.theme-xmas .na-tc-img-wrap { width: 100%; aspect-ratio: 3/2; overflow: hidden; background: #222; flex-shrink: 0; }
.theme-xmas .na-tc-main-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.theme-xmas .na-tc-img-placeholder { background: linear-gradient(135deg, #333, #222); }
.theme-xmas .na-tc-info { padding: .75rem .85rem .5rem; flex: 1; }
.theme-xmas .na-tc-name { font-size: 1rem; font-weight: 700; color: #fff; margin: 0 0 .3rem; line-height: 1.25; }
.theme-xmas .na-tc-desc { font-size: .8rem; color: rgba(255, 255, 255, .6); margin: 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.theme-xmas .na-tc-alt-dates { font-size: .78rem; color: rgba(255, 255, 255, .7); margin: .4rem 0 0; }
.theme-xmas .na-tc-more { color: rgba(255, 255, 255, .45); font-size: .72rem; }
.theme-xmas .na-tc-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: .5rem .6rem .65rem; }
.theme-xmas .na-tc-thumb { aspect-ratio: 1; border-radius: 5px; overflow: hidden; border: 1px solid rgba(212, 175, 55, .25); background: #222; cursor: zoom-in; }
.theme-xmas .na-tc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.theme-xmas .na-tc-thumb-placeholder { background: linear-gradient(135deg, #2a2a2a, #1a1a1a); width: 100%; height: 100%; }
.theme-xmas .na-tc-selected-indicator {
  display: none; text-align: center; font-size: .78rem; font-weight: 700; color: var(--xmas-gold-light);
  padding: .4rem; background: rgba(212, 175, 55, .12); border-top: 1px solid rgba(212, 175, 55, .35);
}
.theme-xmas .na-tc-card-selected .na-tc-selected-indicator { display: block; }
.theme-xmas .na-tc-alt-footer { padding: .5rem .6rem .7rem; border-top: 1px solid rgba(212, 175, 55, .2); }
.theme-xmas .na-tc-alt-btn {
  display: block; width: 100%; text-align: center; background: transparent; border: 1.5px solid var(--xmas-gold);
  color: var(--xmas-gold-light); border-radius: 5px; padding: .4rem .6rem; font-size: .78rem; font-weight: 700;
  text-decoration: none; transition: background .15s, color .15s;
}
.theme-xmas .na-tc-alt-btn:hover { background: var(--xmas-gold); color: #1a1a1a; }

/* Lightbox — theme-neutral dark overlay, works regardless of page theme */
.na-tc-lightbox { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, .9); align-items: center; justify-content: center; padding: 1.5rem; }
.na-tc-lightbox.active { display: flex; }
.na-tc-lightbox-inner { position: relative; display: flex; align-items: center; justify-content: center; gap: 1rem; max-width: 900px; width: 100%; }
.na-tc-lightbox-close { position: absolute; top: -2.8rem; right: 0; background: none; border: none; color: #fff; font-size: 2.2rem; line-height: 1; cursor: pointer; opacity: .75; padding: 0; }
.na-tc-lightbox-close:hover { opacity: 1; }
.na-tc-lightbox-main { flex: 1; max-width: 640px; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 50px rgba(0, 0, 0, .7); aspect-ratio: 4/3; background: #111; }
.na-tc-lightbox-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.na-tc-lightbox-main-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, #333, #555); }
.na-tc-lightbox-strip { display: flex; flex-direction: column; gap: .5rem; flex-shrink: 0; }
.na-tc-lb-thumb { width: 90px; height: 68px; border-radius: 6px; overflow: hidden; border: 2px solid rgba(255, 255, 255, .25); cursor: pointer; background: #222; }
.na-tc-lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.na-tc-lb-thumb-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, #444, #666); }
.na-tc-lb-thumb.active, .na-tc-lb-thumb:hover { border-color: #fff; }
@media (max-width: 600px) {
  .na-tc-lightbox-inner { flex-direction: column; }
  .na-tc-lightbox-strip { flex-direction: row; }
  .na-tc-lb-thumb { width: 65px; height: 50px; }
  .na-tc-lightbox-main { max-width: 100%; }
}

/* ── Session picker (xmas_session.php) — ported from live .st-* ── */
.theme-xmas .na-xs-product-section {
  margin-bottom: 2rem;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid rgba(212, 175, 55, .2);
}
.theme-xmas .na-xs-product-header {
  display: flex; align-items: center; gap: .6rem; padding: .6rem 1rem;
  color: #fff; font-weight: 700; font-size: 1rem; letter-spacing: .02em;
}
.theme-xmas .na-xs-primary-tag { font-size: .75rem; opacity: .85; font-weight: 400; }
.theme-xmas .na-xs-product-body { padding: 1rem; background: #161616; }
.theme-xmas .na-xs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .85rem; margin-bottom: .75rem; }
.theme-xmas .na-xs-card {
  background: #1e1e1e; border: 2px solid rgba(212, 175, 55, .25); border-radius: 10px;
  padding: .85rem .75rem .7rem; display: flex; flex-direction: column; align-items: center; gap: .35rem;
  cursor: pointer; transition: border-color .15s, box-shadow .15s; text-align: center; user-select: none;
}
.theme-xmas .na-xs-card:hover { border-color: var(--xmas-gold); box-shadow: 0 2px 12px rgba(212, 175, 55, .3); }
.theme-xmas .na-xs-card.na-xs-selected { border-color: var(--xmas-gold); box-shadow: 0 0 0 3px var(--xmas-gold), 0 0 16px rgba(212, 175, 55, .35); }
.theme-xmas .na-xs-time { font-size: 1.3rem; font-weight: 900; color: #fff; line-height: 1; }
.theme-xmas .na-xs-group-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: rgba(255, 255, 255, .5); margin: .25rem 0 .5rem; }
.theme-xmas .na-xs-group + .na-xs-group { margin-top: 1.25rem; }
.theme-xmas .na-xs-legend { display: flex; flex-wrap: wrap; gap: .75rem; font-size: .8rem; color: rgba(255, 255, 255, .55); margin-top: .75rem; }
.theme-xmas .na-xs-legend-dot { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 3px; vertical-align: middle; }
@media (max-width: 480px) { .theme-xmas .na-xs-grid { grid-template-columns: repeat(2, 1fr); gap: .65rem; } }