/* ==========================================================
   TixHub — Listing Page Styles
   tixhub-listing.css
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&display=swap');


/* ----------------------------------------------------------
   Custom Properties — DEFAULT THEME (Classic: light, near-black accents)
   ---------------------------------------------------------- */
:root {
  /* ============================================================
     DEFAULT THEME = COOL.
     These values are the Cool palette, promoted into :root so every
     page renders Cool on the first paint with no JavaScript — killing
     the flash-of-beige that happened when Cool was applied via JS
     after load (and the pages where that JS never ran). The old warm
     "Classic" palette is preserved below as body.theme-classic.
     ============================================================ */

  /* Brand — cool near-black ink */
  --tx-navy:        #1C1E24;
  --tx-navy-dark:   #0F1116;
  --tx-coral:       #3D5A80;
  --tx-on-accent:   #FFFFFF;

  /* CTA — cool slate-blue */
  --tx-cta-bg:        #3D5A80;
  --tx-cta-bg-hover:  #2E4860;
  --tx-cta-text:      #FFFFFF;

  /* Surfaces — cool gray page, white cards */
  --tx-page-bg:     #F1F2F4;
  --tx-page-glow:   transparent;
  --tx-card-bg:     #FFFFFF;
  --tx-card-edge:   transparent;
  --tx-card-hover-shadow: 0 2px 6px rgba(20, 24, 40, 0.06), 0 18px 40px rgba(20, 24, 40, 0.16);
  --tx-search-bg:   #FFFFFF;
  --tx-dropdown-bg: #FFFFFF;
  --tx-dropdown-hover: #E8EAEE;

  /* Borders — cool blue-gray tint */
  --tx-border:      rgba(20, 24, 40, 0.08);
  --tx-border-mid:  rgba(20, 24, 40, 0.16);
  --tx-divider:     rgba(20, 24, 40, 0.07);

  /* Text — cool ink */
  --tx-text:        #1C1E24;
  --tx-muted:       #444851;
  --tx-hint:        #5E636E;

  /* Navbar — slate-blue */
  --tx-nav-bg:           #2E4860;
  --tx-nav-bg-scrolled:  rgba(46, 72, 96, 0.92);
  --tx-nav-border:       rgba(255, 255, 255, 0.10);
  --tx-nav-text:         #FFFFFF;
  --tx-nav-text-muted:   rgba(255, 255, 255, 0.85);
  --tx-nav-hover-bg:     rgba(255, 255, 255, 0.10);
  --tx-nav-active-bg:    rgba(255, 255, 255, 0.16);
  --tx-nav-border-strong: rgba(255, 255, 255, 0.4);

  --tx-focus-ring:  rgba(61, 90, 128, 0.25);

  /* Availability indicators */
  --tx-avail-good:  #2A9D8F;
  --tx-avail-low:   #C98A2C;
  --tx-avail-out:   #9B2C2C;

  /* Radii */
  --tx-radius-card: 14px;
  --tx-radius-btn:  20px;
  --tx-radius-sm:   8px;
}

/* ----------------------------------------------------------
   THEME: CLASSIC (legacy warm palette) — preserved as an opt-in
   class. No longer the default; apply body.theme-classic to use it.
   ---------------------------------------------------------- */
body.theme-classic {
  --tx-navy:        #241E18;
  --tx-navy-dark:   #150F0A;
  --tx-coral:       #D85A30;
  --tx-on-accent:   #FFFFFF;

  --tx-cta-bg:        #D85A30;
  --tx-cta-bg-hover:  #BC4823;
  --tx-cta-text:      #FFFFFF;

  --tx-page-bg:     #ECE5D8;
  --tx-page-glow:   radial-gradient(ellipse 90% 60% at 85% -10%,
                      rgba(216, 90, 48, 0.05), transparent 60%);
  --tx-card-bg:     #FFFFFF;
  --tx-card-edge:   transparent;
  --tx-card-hover-shadow: 0 2px 6px rgba(45, 32, 20, 0.08), 0 18px 40px rgba(45, 32, 20, 0.20);
  --tx-search-bg:   #FFFFFF;
  --tx-dropdown-bg: #FFFFFF;
  --tx-dropdown-hover: #EFEAE1;

  --tx-border:      rgba(45, 32, 20, 0.07);
  --tx-border-mid:  rgba(45, 32, 20, 0.16);
  --tx-divider:     rgba(45, 32, 20, 0.07);

  --tx-text:        #241E18;
  --tx-muted:       #4A4038;
  --tx-hint:        #6B5F52;

  --tx-nav-bg:           #1A1A1A;
  --tx-nav-bg-scrolled:  rgba(26, 26, 26, 0.88);
  --tx-nav-border:       rgba(255, 255, 255, 0.08);
  --tx-nav-text:         #FFFFFF;
  --tx-nav-text-muted:   rgba(255, 255, 255, 0.85);
  --tx-nav-hover-bg:     rgba(255, 255, 255, 0.08);
  --tx-nav-active-bg:    rgba(216, 90, 48, 0.20);
  --tx-nav-border-strong: rgba(255, 255, 255, 0.4);

  --tx-focus-ring:  rgba(216, 90, 48, 0.22);

  --tx-avail-good:  #2A9D8F;
  --tx-avail-low:   #C98A2C;
  --tx-avail-out:   #9B2C2C;
}

/* ----------------------------------------------------------
   THEME: DARK — warm dark + cream + coral CTA
   Warmer palette + better card lift + coral CTA + ambient glow
   ---------------------------------------------------------- */
body.theme-dark {
  /* Brand colors — navy inverts to cream for chip-active, headings */
  --tx-navy:        #F5F2EC;
  --tx-navy-dark:   #E8E2D4;
  --tx-coral:       #E85540;
  --tx-on-accent:   #111110;

  /* CTA goes CORAL in dark mode — gives the page a warm focal anchor */
  --tx-cta-bg:        #E85540;
  --tx-cta-bg-hover:  #D44530;
  --tx-cta-text:      #111110;

  /* Surfaces — slightly warm near-black (less brown than before)
     Page bg is lifted above the navbar so the two visually separate
     when you look at the top of the page. */
  --tx-page-bg:     #25231F;
  --tx-card-bg:     #2F2D2A;
  --tx-card-edge:   rgba(255, 255, 255, 0.04);
  --tx-card-hover-shadow: 0 8px 32px rgba(232, 85, 64, 0.15);
  --tx-search-bg:   #2F2D2A;
  --tx-dropdown-bg: #38362F;
  --tx-dropdown-hover: rgba(245, 242, 236, 0.06);

  /* Ambient warm glow at top-right of page — barely visible */
  --tx-page-glow: radial-gradient(ellipse 90% 60% at 85% -10%,
                    rgba(232, 85, 64, 0.06),
                    transparent 60%);

  /* Borders — warmer, slightly stronger */
  --tx-border:      rgba(245, 242, 236, 0.09);
  --tx-border-mid:  rgba(245, 242, 236, 0.16);
  --tx-divider:     rgba(245, 242, 236, 0.07);

  /* Text */
  --tx-text:        #F5F2EC;
  --tx-muted:       rgba(245, 242, 236, 0.92);
  --tx-hint:        rgba(245, 242, 236, 0.78);

  /* Navbar — matches page bg */
  --tx-nav-bg:             #111110;
  --tx-nav-bg-scrolled:    rgba(17, 17, 16, 0.88);
  --tx-nav-text:           #F5F2EC;
  --tx-nav-text-muted:     rgba(245, 242, 236, 0.72);
  --tx-nav-hover-bg:       rgba(245, 242, 236, 0.08);
  --tx-nav-active-bg:      rgba(232, 85, 64, 0.15);
  --tx-nav-border-strong:  rgba(245, 242, 236, 0.3);
  --tx-nav-border:         rgba(245, 242, 236, 0.08);

  --tx-focus-ring:  rgba(232, 85, 64, 0.25);

  --tx-avail-good:  #4FC3A1;
  --tx-avail-low:   #E5B454;
  --tx-avail-out:   #E26565;
}

/* ----------------------------------------------------------
   THEME: COOL — neutral gray light theme
   Same coral CTA anchor as the other two themes, but a cool
   gray page + cool-tinted shadows/borders instead of warm paper.
   A cleaner, more neutral alternative to Classic's warm tone.
   ---------------------------------------------------------- */
body.theme-cool {
  /* Brand — cool near-black ink */
  --tx-navy:        #1C1E24;
  --tx-navy-dark:   #0F1116;
  --tx-coral:       #3D5A80;
  --tx-on-accent:   #FFFFFF;

  /* CTA is a cool slate-blue — Cool commits to neutral; no warm
     coral here (that's Classic/Dark's signature, not this theme's). */
  --tx-cta-bg:        #3D5A80;
  --tx-cta-bg-hover:  #2E4860;
  --tx-cta-text:      #FFFFFF;

  /* Surfaces — cool gray page, white cards */
  --tx-page-bg:     #F1F2F4;
  --tx-page-glow:   transparent;
  --tx-card-bg:     #FFFFFF;
  --tx-card-edge:   transparent;
  --tx-card-hover-shadow: 0 2px 6px rgba(20, 24, 40, 0.06), 0 18px 40px rgba(20, 24, 40, 0.16);
  --tx-search-bg:   #FFFFFF;
  --tx-dropdown-bg: #FFFFFF;
  --tx-dropdown-hover: #E8EAEE;

  /* Borders — cool blue-gray tint */
  --tx-border:      rgba(20, 24, 40, 0.08);
  --tx-border-mid:  rgba(20, 24, 40, 0.16);
  --tx-divider:     rgba(20, 24, 40, 0.07);

  /* Text — cool ink */
  --tx-text:        #1C1E24;
  --tx-muted:       #444851;
  --tx-hint:        #5E636E;

  /* Navbar — slate-blue to match the Cool CTA (distinct from the
     near-black bar used by Classic and Dark). */
  --tx-nav-bg:           #2E4860;
  --tx-nav-bg-scrolled:  rgba(46, 72, 96, 0.92);
  --tx-nav-border:       rgba(255, 255, 255, 0.10);
  --tx-nav-text:         #FFFFFF;
  --tx-nav-text-muted:   rgba(255, 255, 255, 0.85);
  --tx-nav-hover-bg:     rgba(255, 255, 255, 0.10);
  --tx-nav-active-bg:    rgba(255, 255, 255, 0.16);
  --tx-nav-border-strong: rgba(255, 255, 255, 0.4);

  --tx-focus-ring:  rgba(61, 90, 128, 0.25);

  --tx-avail-good:  #2A9D8F;
  --tx-avail-low:   #C98A2C;
  --tx-avail-out:   #9B2C2C;
}

/* ----------------------------------------------------------
   THEME: PLUM — performing-arts "velvet & gold" theme
   Plum nav/brand, gold reserved strictly for CTAs (charcoal text on
   gold fill — the accessible pattern), cream canvas, charcoal text,
   rose as muted secondary, sage for category labels. Availability
   colors are contrast-corrected to clear WCAG AA on white.
   ---------------------------------------------------------- */
body.theme-plum {
  /* Brand — deep plum/burgundy + charcoal ink */
  --tx-navy:        #5B2333;
  --tx-navy-dark:   #1A1A1D;
  --tx-coral:       #C9A227;
  --tx-on-accent:   #1A1A1D;

  /* CTA is GOLD with CHARCOAL text (gold-on-cream fails contrast as
     text, but charcoal-on-gold-fill passes — gold stays a fill only).
     Hover drops to the darker gold sibling. */
  --tx-cta-bg:        #C9A227;
  --tx-cta-bg-hover:  #A6841C;
  --tx-cta-text:      #1A1A1D;

  /* Surfaces — cream canvas, white cards, warm-gray secondary panels */
  --tx-page-bg:     #F4F1EA;
  --tx-page-glow:   transparent;
  --tx-card-bg:     #FFFFFF;
  --tx-card-edge:   transparent;
  --tx-card-hover-shadow: 0 2px 6px rgba(26, 26, 29, 0.06), 0 18px 40px rgba(91, 35, 51, 0.16);
  --tx-search-bg:   #FFFFFF;
  --tx-dropdown-bg: #FFFFFF;
  --tx-dropdown-hover: #E8E3D8;

  /* Borders — warm plum-tinted */
  --tx-border:      rgba(26, 26, 29, 0.10);
  --tx-border-mid:  rgba(26, 26, 29, 0.18);
  --tx-divider:     rgba(26, 26, 29, 0.08);

  /* Text — charcoal ink; muted/hint lean warm */
  --tx-text:        #1A1A1D;
  --tx-muted:       #4A4044;
  --tx-hint:        #6B5C62;

  /* Navbar — plum bar with gold accents on active/hover */
  --tx-nav-bg:           #5B2333;
  --tx-nav-bg-scrolled:  rgba(91, 35, 51, 0.92);
  --tx-nav-border:       rgba(255, 255, 255, 0.10);
  --tx-nav-text:         #FFFFFF;
  --tx-nav-text-muted:   rgba(255, 255, 255, 0.82);
  --tx-nav-hover-bg:     rgba(255, 255, 255, 0.10);
  --tx-nav-active-bg:    rgba(201, 162, 39, 0.22);
  --tx-nav-border-strong: rgba(255, 255, 255, 0.4);

  --tx-focus-ring:  rgba(201, 162, 39, 0.30);

  /* Availability — contrast-corrected to clear AA on white */
  --tx-avail-good:  #3D6138;
  --tx-avail-low:   #B5651D;
  --tx-avail-out:   #6B5C5C;
}

/* ----------------------------------------------------------
   Overrides: main.css & toplogin.asp conflicts
   ---------------------------------------------------------- */

/* Global heading colour — overrides any maroon/red from main.css */
h1, h2, h3 {
  color: var(--tx-navy);
  font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* main.css: body { font-family: Arial; color: #333 } */
body {
  font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--tx-text);
  background-color: var(--tx-page-bg);
  background-image: var(--tx-page-glow);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* main.css: .col-body { background-color: #fff } */
.col-body {
  background-color: var(--tx-page-bg);
}

/* main.css: .content padding override.
   The page also caps .content at max-width:1408px !important but sets no
   margin, leaving the container pinned left. Center it so the banner and
   card grid (both 1340px, centered inside) sit centered in the viewport. */
#divlistStyle.content {
  padding: 16px 16px 40px;
  margin-left: auto;
  margin-right: auto;
}

/* toplogin.asp inline style: select { width:100%; display:block } */
.tx-filter-bar select {
  display: inline-block;
  width: auto;
  max-width: 160px;
  margin: 0;
  background-image: none;
  background-color: var(--tx-search-bg);
  border: 1px solid var(--tx-border);
  border-radius: var(--tx-radius-sm);
  padding: 8px 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--tx-text);
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: border-color 0.15s;
}

.tx-filter-bar select:focus {
  outline: none;
  border-color: var(--tx-navy);
  box-shadow: none;
}

/* main.css: a { color: #a6093d } bleeds into card titles — neutralize */
.event-card__title a,
.event-card__title a:visited,
.event-card__title a:hover {
  color: var(--tx-text);
  text-decoration: none;
}
.event-card__title a:hover {
  text-decoration: underline;
}

/* ----------------------------------------------------------
   Filter Bar — single row, wraps on narrow viewports
   Search grows to fill, venue and toggle keep natural width.
   ---------------------------------------------------------- */
.tx-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  padding: 10px 0 4px;
  flex-wrap: wrap;
  max-width: 1340px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.tx-search-wrap {
  flex: 0 1 360px;
  min-width: 200px;
  max-width: 420px;
  position: relative;
  display: flex;
  align-items: center;
}

.tx-search-icon {
  position: absolute;
  left: 12px;
  color: var(--tx-hint);
  font-size: 13px;
  pointer-events: none;
  line-height: 1;
  top: 50%;
  transform: translateY(-50%);
}

/* Forces below defend against main.css's `input[type='text'] { color:#333; height:34px }` */
.tx-search-input {
  width: 100%;
  padding: 8px 14px 8px 36px !important;
  border: 1px solid var(--tx-border) !important;
  border-radius: var(--tx-radius-sm) !important;
  font-size: 14px;
  font-family: inherit;
  background: var(--tx-search-bg) !important;
  color: var(--tx-text) !important;
  height: auto !important;
  box-sizing: border-box;
  margin: 0 !important;
  line-height: normal;
  display: block;
  transition: border-color 0.15s;
}

.tx-search-input:focus {
  border-color: var(--tx-navy) !important;
  box-shadow: none !important;
  outline: none;
  background-color: var(--tx-search-bg);
}

.tx-search-input::placeholder {
  color: var(--tx-hint);
}

.tx-filter-divider {
  width: 1px;
  height: 28px;
  background: var(--tx-border);
  flex-shrink: 0;
}

/* ----------------------------------------------------------
   View Toggle (Gallery / Calendar / Schedule)
   Sits on the right side of the filter bar.
   Each button is an <a> linking to ?view=<id> — no JS needed.
   ---------------------------------------------------------- */
.tx-view-toggle {
  display: inline-flex;
  align-items: stretch;
  margin-left: auto;
  border: 1px solid var(--tx-border);
  border-radius: var(--tx-radius-sm);
  background: var(--tx-search-bg);
  overflow: hidden;
  flex-shrink: 0;
}

.tx-view-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--tx-muted);
  text-decoration: none !important;
  background: transparent;
  border: none;
  border-right: 1px solid var(--tx-border);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
  line-height: 1.2;
}
.tx-view-toggle__btn:last-child { border-right: none; }
.tx-view-toggle__btn:hover {
  background: var(--tx-dropdown-hover);
  color: var(--tx-text);
}
.tx-view-toggle__btn.is-active {
  background: var(--tx-text);
  color: var(--tx-page-bg);
  cursor: default;
}
.tx-view-toggle__btn.is-active:hover {
  background: var(--tx-text);
  color: var(--tx-page-bg);
}
.tx-view-toggle__btn i {
  font-size: 12px;
}

/* Mobile: show icons only, hide labels to save space */
@media (max-width: 600px) {
  .tx-view-toggle__btn span {
    display: none;
  }
  .tx-view-toggle__btn {
    padding: 8px 10px;
  }
  .tx-view-toggle__btn i {
    font-size: 14px;
  }
}

/* ----------------------------------------------------------
   Genre Chips
   ---------------------------------------------------------- */
.tx-chips {
  padding: 16px 0 18px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  background: transparent;
  border: none;
  margin: 0 auto;
  max-width: 1340px;
  width: 100%;
  box-sizing: border-box;
}

/* main.css: button[class^='btn-'] { background-color:#8d211f; margin:5px } */
.tx-chip {
  font-size: 12px;
  font-family: inherit;
  padding: 5px 14px;
  border-radius: var(--tx-radius-btn);
  border: 1px solid var(--tx-border-mid);
  background: transparent !important;
  color: var(--tx-muted);
  cursor: pointer;
  white-space: nowrap;
  margin: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  display: inline-block;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.tx-chip:hover {
  background: var(--tx-page-bg) !important;
  border-color: var(--tx-navy);
  color: var(--tx-navy);
  box-shadow: none !important;
  text-decoration: none;
}

.tx-chip.active {
  background: var(--tx-navy) !important;
  border-color: var(--tx-navy);
  color: var(--tx-on-accent);
  font-weight: 500;
}

/* ----------------------------------------------------------
   Event Container — CSS Grid override
   Replaces flexboxgrid's row/col with auto-fitting columns.

   IMPORTANT: Source images are 320×200. We never scale cards
   wider than 320px so images stay sharp. The grid fits as many
   320px columns as the container allows; remaining width is
   left empty (justify-content: center keeps the row centered).
   ---------------------------------------------------------- */
.event-container {
  padding: 12px 0 24px;
  display: grid !important;
  /* Fixed 320px columns (cards never scale past their 320px source
     image). 4 × 320 + 3 × 20 gap = 1340 = the container/banner width,
     so start-aligned the row fills edge-to-edge and the first card's
     left edge sits flush with the banner's left edge. */
  grid-template-columns: repeat(auto-fit, 320px);
  justify-content: start;
  align-content: start;
  gap: 20px;
  max-width: 1340px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.event-container::before,
.event-container::after { content: none !important; }

/* Below 660px only a single column fits, but the fixed 320px track
   doesn't stretch — leaving a right-side gutter that varies by device.
   Switch to one fluid column and let the card fill it. gridlex sets
   col-*_xs-12 widths with !important and loads after this file, so a
   plain .event-item rule loses; #divGrid (id) outranks gridlex's
   [class*=col-] (class-level) and wins regardless of order. */
@media (max-width: 659px) {
  #divGrid.event-container {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  #divGrid .event-item,
  #divGrid .event-item.col-4_md-4_sm-6_xs-12 {
    max-width: none !important;
    width: 100% !important;
    flex-basis: 100% !important;
  }
}

/* The page's [class*=grid-] rule sets margin:0 !important, which kills
   the centering above (the grid has class grid-equalHeight). Restore
   centering with id specificity + !important so it wins, matching the
   banner's margin:0 auto so grid and banner are both centered & aligned. */
#divlistStyle .event-container {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ----------------------------------------------------------
   Event Item wrapper — reset legacy flexboxgrid behavior
   ---------------------------------------------------------- */
.event-item {
  /* Override flexboxgrid's col-*_*_* widths */
  width: auto !important;
  max-width: 320px !important;
  flex: initial !important;
  float: none !important;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: static;
}

/* ----------------------------------------------------------
   CALENDAR VIEW — desktop month grid + mobile day-list
   Two layouts driven by a single dataset:
     - .tx-calendar__grid : 7-col grid, visible at >768px
     - .tx-calendar__list : 1-col stacked day cards, visible at <=768px
   Each performance entry uses the same .tx-cal-perf component in both.
   ---------------------------------------------------------- */
.tx-calendar {
  max-width: 1340px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 0 32px;
}

/* --- Header: prev / month / next / today --- */
.tx-calendar__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 0 4px;
}

.tx-calendar__nav-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tx-card-bg);
  border: 1px solid var(--tx-border);
  border-radius: var(--tx-radius-sm);
  color: var(--tx-text);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  padding: 0;
}
.tx-calendar__nav-btn:hover {
  background: var(--tx-dropdown-hover);
  border-color: var(--tx-border-mid);
}
.tx-calendar__nav-btn i {
  font-size: 13px;
}

.tx-calendar__month-label {
  font-size: 18px;
  font-weight: 600;
  color: var(--tx-text);
  margin: 0;
  min-width: 180px;
  text-align: left;
  font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.tx-calendar__today-btn {
  margin-left: auto;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  border: 1px solid var(--tx-border-mid);
  border-radius: var(--tx-radius-sm);
  color: var(--tx-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.tx-calendar__today-btn:hover {
  background: var(--tx-dropdown-hover);
  color: var(--tx-text);
}

/* --- Weekday header row --- */
.tx-calendar__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}
.tx-calendar__weekday {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tx-muted);
  padding: 8px 10px;
}

/* --- Grid (desktop) --- */
.tx-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

/* --- List (mobile only — hidden on desktop) --- */
.tx-calendar__list {
  display: none;
  flex-direction: column;
  gap: 12px;
}

/* --- Day cell (desktop) --- */
.tx-cal-cell {
  background: var(--tx-card-bg);
  border: 1px solid var(--tx-border);
  border-radius: var(--tx-radius-sm);
  padding: 12px 8px 8px 12px;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Empty cells stay compact — they don't need 110px reserved for content
   that isn't there. Rows with at least one populated cell will grow to
   fit; days with no performances stay short. Background removed so the
   grid reads as anchored by date numbers, not as a sea of tiles. */
.tx-cal-cell.is-empty {
  min-height: 0;
  background: transparent;
}
.tx-cal-cell.is-out-of-month {
  background: transparent;
}
.tx-cal-cell.is-out-of-month .tx-cal-cell__num {
  color: var(--tx-hint);
  opacity: 0.55;
}
.tx-cal-cell.is-past .tx-cal-cell__num {
  color: var(--tx-hint);
}
.tx-cal-cell.is-past .tx-cal-perf {
  opacity: 0.55;
}

.tx-cal-cell__num {
  font-size: 17px;
  font-weight: 700;
  color: var(--tx-text);
  padding: 0;
  line-height: 1;
  letter-spacing: -0.01em;
  align-self: flex-start;
}
.tx-cal-cell.is-today .tx-cal-cell__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--tx-text);
  color: var(--tx-page-bg);
  border-radius: 50%;
  padding: 0;
  font-size: 14px;
}

.tx-cal-cell__perfs {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* --- Day card (mobile) --- */
.tx-cal-day {
  background: var(--tx-card-bg);
  border: 1px solid var(--tx-border);
  border-radius: var(--tx-radius-sm);
  overflow: hidden;
}
.tx-cal-day__header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 16px;
  background: var(--tx-dropdown-hover);
  border-bottom: 1px solid var(--tx-border);
}
.tx-cal-day.is-today .tx-cal-day__header {
  background: var(--tx-text);
  color: var(--tx-page-bg);
}
.tx-cal-day.is-today .tx-cal-day__name,
.tx-cal-day.is-today .tx-cal-day__num {
  color: var(--tx-page-bg);
}
.tx-cal-day.is-past {
  opacity: 0.7;
}
.tx-cal-day__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--tx-text);
}
.tx-cal-day__num {
  font-size: 14px;
  font-weight: 600;
  color: var(--tx-text);
}
.tx-cal-day__perfs {
  display: flex;
  flex-direction: column;
}
.tx-cal-day__perfs .tx-cal-perf {
  border-bottom: 1px solid var(--tx-divider);
  padding: 14px 16px;
  background: transparent;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
}
.tx-cal-day__perfs .tx-cal-perf:last-child { border-bottom: none; }

/* --- Performance entry: shared by desktop cells + mobile day cards --- */
.tx-cal-perf {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 8px 10px;
  background: var(--tx-dropdown-hover);
  border-radius: var(--tx-radius-sm);
  border-left: 3px solid var(--tx-border-mid);
  font-size: 12px;
  line-height: 1.35;
}
.tx-cal-perf.hidden { display: none !important; }

.tx-cal-perf__title {
  font-weight: 600;
  color: var(--tx-text) !important;
  text-decoration: none !important;
  font-size: 13px;
  line-height: 1.3;
  display: block;
  margin-bottom: 2px;
}
.tx-cal-perf__title:hover {
  text-decoration: underline !important;
}

.tx-cal-perf__venue {
  color: var(--tx-hint);
  font-size: 10px;
  opacity: 0.85;
  line-height: 1.35;
}
.tx-cal-perf__sep {
  opacity: 0.5;
}

.tx-cal-perf__time {
  color: var(--tx-text);
  font-weight: 600;
  font-size: 12px;
  margin-top: 2px;
}

.tx-cal-perf__avail {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  margin-top: 2px;
}
.tx-cal-perf__avail-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tx-hint);
  flex-shrink: 0;
}
.tx-cal-perf__avail--good                              { color: var(--tx-avail-good); }
.tx-cal-perf__avail--good    .tx-cal-perf__avail-dot   { background: var(--tx-avail-good); }
.tx-cal-perf__avail--limited                           { color: var(--tx-avail-low); }
.tx-cal-perf__avail--limited .tx-cal-perf__avail-dot   { background: var(--tx-avail-low); }
.tx-cal-perf__avail--soldout                           { color: var(--tx-avail-out); }
.tx-cal-perf__avail--soldout .tx-cal-perf__avail-dot   { background: var(--tx-avail-out); }

.tx-cal-perf__cta {
  margin-top: 8px !important;
  padding: 4px 10px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  background: var(--tx-cta-bg) !important;
  color: var(--tx-cta-text) !important;
  border-radius: var(--tx-radius-btn) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  white-space: nowrap;
  transition: background 0.12s;
  border: none;
}
.tx-cal-perf__cta:hover {
  background: var(--tx-cta-bg-hover) !important;
}
.tx-cal-perf__cta.is-disabled {
  background: var(--tx-divider) !important;
  color: var(--tx-muted) !important;
  cursor: not-allowed;
}

/* --- Empty state --- */
.tx-calendar__empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--tx-muted);
  font-size: 14px;
}

/* --- Mobile breakpoint: switch from grid to day-list --- */
@media (max-width: 768px) {
  .tx-calendar {
    padding-left: 14px;
    padding-right: 14px;
  }
  .tx-calendar__weekdays { display: none; }
  .tx-calendar__grid { display: none; }
  .tx-calendar__list { display: flex; }

  .tx-calendar__header {
    flex-wrap: wrap;
    gap: 8px;
  }
  .tx-calendar__month-label {
    font-size: 16px;
    min-width: 0;
    flex: 1;
  }
}

/* ----------------------------------------------------------
   SCHEDULE VIEW — per-performance chronological list
   Layout: [date text] [thumbnail] [body]
   Inside body: title → venue/seating, then bottom row with
   time + availability + Buy tickets all on one horizontal line.
   The whole row is an <a> wrapping the booking URL.
   ---------------------------------------------------------- */
.tx-schedule {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 0 32px;
  max-width: 1340px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.tx-sched-row {
  display: flex;
  align-items: stretch;
  gap: 18px;
  padding: 16px;
  background: var(--tx-card-bg);
  border: 1px solid var(--tx-border);
  border-radius: var(--tx-radius-sm);
  text-decoration: none !important;
  color: var(--tx-text);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.tx-sched-row:hover {
  transform: translateY(-1px);
  box-shadow: var(--tx-card-hover-shadow);
  border-color: var(--tx-border-mid);
}

/* Sold-out rows: do NOT dim the row. The "Sold out" status dot+label and
   the prominent "Waiting list" CTA communicate the state — dimming would
   make the actionable Waiting list button look disabled. */

/* --- Date: plain text, no box. Stretches to row height via parent's
   align-items: stretch + flex column that centers its content. --- */
.tx-sched-row__date {
  flex-shrink: 0;
  width: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
}

.tx-sched-row__dow {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tx-muted);
}

.tx-sched-row__num {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--tx-text);
}

.tx-sched-row__mon {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tx-muted);
}

/* --- Thumbnail — stretches to row height so date + image always match --- */
.tx-sched-row__thumb {
  flex-shrink: 0;
  width: 130px;
  align-self: stretch;
  border-radius: var(--tx-radius-sm);
  overflow: hidden;
  background: var(--tx-divider);
  border: 1px solid var(--tx-border);
}

.tx-sched-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Body: title + venue line stack at top, then bottom row --- */
.tx-sched-row__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.tx-sched-row__title {
  font-size: 18px;
  font-weight: 600;
  font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--tx-text);
  margin: 0 0 2px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.tx-sched-row__venue-line {
  font-size: 13px;
  color: var(--tx-hint);
  line-height: 1.4;
}

.tx-sched-row__venue,
.tx-sched-row__seat {
  color: var(--tx-hint);
}

.tx-sched-row__sep {
  color: var(--tx-hint);
  opacity: 0.5;
  margin: 0 4px;
}

/* --- Bottom row: time + availability + CTA inline.
   Time and availability sit on the left; CTA is pushed to the right.
   Generous margin-top separates this row from title/venue above. --- */
.tx-sched-row__bottom {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.tx-sched-row__time {
  font-size: 13px;
  color: var(--tx-muted);
  font-weight: 500;
  line-height: 1.4;
}

.tx-sched-row__avail {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
}

.tx-sched-row__avail-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tx-hint);
  flex-shrink: 0;
}

.tx-sched-row__avail.avail-good    .tx-sched-row__avail-dot { background: var(--tx-avail-good); }
.tx-sched-row__avail.avail-good                              { color: var(--tx-avail-good); }
.tx-sched-row__avail.avail-limited .tx-sched-row__avail-dot { background: var(--tx-avail-low); }
.tx-sched-row__avail.avail-limited                           { color: var(--tx-avail-low); }

/* Sold out is more prominent than Good / Limited — it's the *reason* the
   row's CTA is "Waiting list" instead of "Buy tickets", so the customer
   needs to clearly see that buying isn't an option. Bolder, uppercase,
   slightly bigger than the other availability labels. !important on color
   defends against the parent <a>'s :visited / inherited link color. */
.tx-sched-row__avail.avail-soldout {
  color: var(--tx-avail-out) !important;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tx-sched-row__avail.avail-soldout .tx-sched-row__avail-dot {
  background: var(--tx-avail-out);
  width: 8px;
  height: 8px;
}

/* CTA in the bottom row — pushed to the right edge of the row.
   !important needed because main.css's a[class^='btn-'] selector has
   higher specificity than our class. */
.tx-sched-row__cta {
  margin: 0 0 0 auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 6px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: var(--tx-cta-bg) !important;
  color: var(--tx-cta-text) !important;
  border-radius: var(--tx-radius-btn) !important;
  white-space: nowrap;
  transition: background 0.15s;
}

.tx-sched-row:hover .tx-sched-row__cta:not(.is-disabled) {
  background: var(--tx-cta-bg-hover) !important;
}

.tx-sched-row__cta.is-disabled {
  background: var(--tx-divider) !important;
  color: var(--tx-muted) !important;
  cursor: not-allowed;
}

/* Defensive: main.css applies a { color:#a6093d } globally; the row is
   an <a>, so descendant text inherits. Force back to theme text colors. */
.tx-sched-row,
.tx-sched-row:visited,
.tx-sched-row:hover,
a.tx-sched-row,
a.tx-sched-row:visited,
a.tx-sched-row:hover {
  color: var(--tx-text);
  text-decoration: none;
}
.tx-sched-row__title,
.tx-sched-row .tx-sched-row__title {
  color: var(--tx-text);
}

/* --- Mobile --- */
@media (max-width: 700px) {
  .tx-schedule {
    padding-left: 14px;
    padding-right: 14px;
  }
  .tx-sched-row {
    gap: 12px;
    padding: 12px;
  }
  .tx-sched-row__date {
    width: 56px;
  }
  .tx-sched-row__num { font-size: 22px; }
  .tx-sched-row__thumb {
    width: 100px;
  }
}

@media (max-width: 480px) {
  .tx-sched-row__thumb { display: none; }
  .tx-sched-row__cta { padding: 7px 14px; }
}

/* ----------------------------------------------------------
   EVENT DETAIL PAGE — b_otix.asp
   Layout: stack of cards
     [hero]    title + perf picker + Buy CTA + (optional promo)
     [info]    social buttons + directions + description + notices
   ---------------------------------------------------------- */
.tx-detail-page {
  max-width: 1340px;
  margin: 0 auto;
  width: 100%;
  padding: 12px 0 32px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tx-detail-card {
  background: var(--tx-card-bg);
  border: 1px solid var(--tx-border);
  border-radius: var(--tx-radius-card);
  padding: 24px 28px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
/* Dark theme: page bg and card bg are close in tone, so bump the
   border to make the card edges clearly visible. */
body.theme-dark .tx-detail-card {
  border-color: rgba(255, 255, 255, 0.08);
}

/* --- Hero card: title/perf picker (left) + Buy CTA (right) --- */
.tx-detail-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.tx-detail-hero__main {
  flex: 1;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tx-detail-hero__title {
  font-size: 28px !important;
  font-weight: 600 !important;
  color: var(--tx-text) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.015em !important;
  text-transform: none !important;
  font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

.tx-detail-hero__perf {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.tx-detail-hero__perf-fixed {
  font-size: 15px;
  color: var(--tx-text);
  font-weight: 500;
}

.tx-detail-hero__perf-multi {
  font-size: 12px;
  color: var(--tx-coral);
  font-weight: 500;
}

.tx-detail-hero__action {
  flex-shrink: 0;
  align-self: center;
}

/* Sold-out banner: prominent status pill + explanatory text above the WL CTA.
   Stacks vertically; right-aligns within the action column. */
.tx-detail-hero__action--soldout {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.tx-detail-hero__soldout-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(231, 111, 81, 0.12);
  border-radius: 999px;
}
.tx-detail-hero__soldout-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--tx-coral);
}
.tx-detail-hero__soldout-label {
  font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--tx-coral);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* CTA button — overrides main.css .btn-default
   The `:visited / :focus / :active` pseudos defend against main.css's
   default <a> link color cascade — without them the button can render
   blue (visited) or pick up the legacy link color on click/focus. */
.tx-detail-hero__cta,
a.tx-detail-hero__cta,
a.tx-detail-hero__cta:link,
a.tx-detail-hero__cta:visited,
a.tx-detail-hero__cta:focus,
a.tx-detail-hero__cta:active {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 11px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  background: var(--tx-cta-bg) !important;
  color: var(--tx-cta-text) !important;
  border-radius: var(--tx-radius-btn) !important;
  border: none !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.15s;
  margin: 0 !important;
}
.tx-detail-hero__cta:hover,
a.tx-detail-hero__cta:hover {
  background: var(--tx-cta-bg-hover) !important;
  color: var(--tx-cta-text) !important;
  text-decoration: none !important;
}

/* Performance picker dropdown */
.tx-perf-picker {
  font-family: inherit !important;
  font-size: 14px !important;
  padding: 9px 36px 9px 14px !important;
  border: 1px solid var(--tx-border-mid) !important;
  border-radius: var(--tx-radius-sm) !important;
  background-color: var(--tx-card-bg) !important;
  color: var(--tx-text) !important;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%236B6760' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  cursor: pointer;
  min-width: 240px;
  max-width: 100%;
  width: auto !important;
  display: inline-block !important;
  margin: 0 !important;
  transition: border-color 0.15s;
}
.tx-perf-picker:hover,
.tx-perf-picker:focus {
  border-color: var(--tx-text) !important;
  outline: none;
}

/* --- Promo code field (only renders when there's a promo on the perf) --- */
.tx-detail-promo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
}
.tx-detail-promo__label {
  font-size: 13px;
  color: var(--tx-muted);
  font-weight: 500;
}
.tx-detail-promo__input {
  font-family: inherit;
  font-size: 14px;
  padding: 8px 12px;
  border: 1px solid var(--tx-border-mid);
  border-radius: var(--tx-radius-sm);
  background: var(--tx-card-bg);
  color: var(--tx-text);
  max-width: 320px;
  transition: border-color 0.15s;
}
.tx-detail-promo__input:focus {
  border-color: var(--tx-text);
  outline: none;
}

/* --- Meta row: social + directions + weather --- */
.tx-detail-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--tx-divider);
}
.tx-detail-meta__group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tx-detail-meta__directions {
  margin-left: auto;
}

/* Social buttons (FB, X) — small pills with brand color */
.tx-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 12px;
  text-decoration: none !important;
  color: #fff !important;
  transition: opacity 0.15s;
  margin: 0 !important;
}
.tx-social-btn:hover { opacity: 0.85; }
.tx-social-btn--fb { background: #1877f2; }
.tx-social-btn--x  { background: #000000; }

/* Driving / transit / weather icons */
.tx-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--tx-dropdown-hover);
  transition: background 0.15s;
}
.tx-icon-link:hover { background: var(--tx-divider); }
.tx-icon-link img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* --- Description block (BOM-rendered HTML) ---
   The BOM editor injects inline styles (background:#fff, hardcoded colors)
   that fight our theme. We force-reset them to inherit. */
.tx-detail-description {
  font-size: 15px;
  line-height: 1.6;
  color: var(--tx-text);
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--tx-divider);
}
.tx-detail-description :last-child { margin-bottom: 0; }
.tx-detail-description img { max-width: 100%; height: auto; }
.tx-detail-description a { color: var(--tx-coral); }

/* Editor saves bold as <strong> (some legacy content uses <b>). Force
   bold weight explicitly — a global reset elsewhere was flattening it,
   so emphasis typed in the admin editor didn't show on the public page. */
.tx-detail-description strong,
.tx-detail-description b {
  font-weight: 700 !important;
}
.tx-detail-description em,
.tx-detail-description i {
  font-style: italic !important;
}

/* Override BOM inline backgrounds and colors so dark theme works.
   BOM tables don't have explicit width so they shrink to content. We
   force 100% width on them so the text cell expands naturally next to
   the image. The image cell stays sized to the image (default <td>
   behavior with an <img> child), so we don't need to fight it. */
.tx-detail-description *,
.tx-detail-description div,
.tx-detail-description span,
.tx-detail-description p,
.tx-detail-description td,
.tx-detail-description table {
  background: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
}
.tx-detail-description table {
  width: 100% !important;
}
.tx-detail-description td {
  vertical-align: top;
  padding: 0 16px 16px 0;
}
.tx-detail-description td:last-child {
  padding-right: 0;
}

/* Paragraph + heading spacing. Tiptap emits <p> blocks with no inline
   styling; without explicit margins the public site renders them flush,
   making the description look like one wall of text. We give paragraphs
   a comfortable bottom margin and a slightly larger gap above headings
   so structure is visible. */
.tx-detail-description p {
  margin: 0 0 18px;
}
/* Empty <p></p> blocks are how Tiptap encodes intentional blank lines
   the user added by pressing Enter twice. Without a min-height the
   paragraph collapses to zero, so multiple blank lines look like one.
   The min-height matches a normal line of body text. */
.tx-detail-description p:empty {
  min-height: 1em;
}
.tx-detail-description h1,
.tx-detail-description h2,
.tx-detail-description h3 {
  margin: 24px 0 10px;
  line-height: 1.25;
}
.tx-detail-description h1:first-child,
.tx-detail-description h2:first-child,
.tx-detail-description h3:first-child,
.tx-detail-description p:first-child {
  margin-top: 0;
}
.tx-detail-description ul,
.tx-detail-description ol {
  margin: 0 0 14px;
  padding-left: 24px;
}
.tx-detail-description li {
  margin-bottom: 6px;
}

/* New rich-text editor outputs <figure class="img-{full|left|right|center}">
   with optional inline width:N% and an optional <figcaption>. The editor
   uses CSS Grid in admin for selection chrome — public side just needs the
   block-level positioning + caption styling. */
.tx-detail-description figure {
  margin: 16px 0;
  display: block;
}
.tx-detail-description figure img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Full = block-level image at its natural size (no stretching beyond
   the image's intrinsic width). max-width: 100% keeps oversized images
   contained within the column; width: auto + display: block lets the
   figure shrink to the image's natural width when smaller than the
   column. Left-aligned (no auto margins) to match the editor preview. */
.tx-detail-description figure.img-full {
  display: block;
  width: auto;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}
.tx-detail-description figure.img-full img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Center = block image centered, no text wrap. Default width 55%
   mirrors the editor preview. Inline style="width:NN%" (from the
   Size buttons) overrides via specificity since it's on the element. */
.tx-detail-description figure.img-center {
  display: block;
  width: 55%;
  margin: 16px auto;
  text-align: center;
}
.tx-detail-description figure.img-center img {
  display: block;
  margin: 0 auto;
}

/* Left / Right float so paragraphs wrap around. Default width 38%
   mirrors the editor preview; inline width:NN% from the Size buttons
   overrides. The max-width: 360px cap prevents wide customer columns
   from rendering the image much larger than what was previewed in the
   editor (the editor content area is narrower, so 38% there is ~280px;
   on a 900px+ public column 38% becomes 340px+ and visually dominates).
   The cap keeps the float closer to the editor's appearance. */
.tx-detail-description figure.img-left {
  float: left;
  width: 38%;
  max-width: 360px;
  margin: 4px 18px 12px 0;
}
.tx-detail-description figure.img-right {
  float: right;
  width: 38%;
  max-width: 360px;
  margin: 4px 0 12px 18px;
}
/* Clear floats at the description block boundary so subsequent siblings
   (notices, schedule, etc.) don't get pulled up next to a floated image. */
.tx-detail-description::after {
  content: "";
  display: block;
  clear: both;
}

/* Optional caption styling - editor adds <figcaption> when "+ Caption" is on.
   !important needed to beat the wildcard color:inherit reset earlier in
   this section. */
.tx-detail-description figure figcaption,
.tx-detail-description figcaption {
  font-size: 13px;
  color: var(--tx-muted) !important;
  text-align: center;
  margin-top: 6px;
  font-style: italic;
}

/* On narrow viewports floated images get crammed; drop the float so the
   image takes its own line and the wrapping text reads cleanly. */
@media (max-width: 640px) {
  .tx-detail-description figure.img-left,
  .tx-detail-description figure.img-right {
    float: none;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
  }
}

/* YouTube embed: responsive video with native aspect ratio. Same
   <figure> wrapper as images, with the .video-embed class. The
   aspect-ratio is set inline on each embed by the editor (16/9 for
   normal videos, 9/16 for Shorts, etc.); this rule supplies the
   fallback for legacy embeds without an inline aspect-ratio. */
.tx-detail-description figure.video-embed {
  position: relative;
  width: 100%;
  margin: 16px auto;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #000;
  border-radius: 6px;
  float: none;
  max-width: 100%;
}
.tx-detail-description figure.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- Notices: accessibility + refund --- */
.tx-detail-notice {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tx-detail-notice p { margin: 0; }
.tx-detail-notice__access {
  font-size: 13px;
  line-height: 1.5;
  color: var(--tx-muted);
}
.tx-detail-notice__access a {
  color: var(--tx-coral);
  text-decoration: none;
  font-weight: 500;
}
.tx-detail-notice__access a:hover { text-decoration: underline; }
.tx-detail-notice__icon {
  width: 16px;
  height: 16px;
  vertical-align: middle;
}
.tx-detail-notice__refund {
  font-size: 13px;
  font-weight: 600;
  color: var(--tx-avail-out);
  letter-spacing: 0.02em;
}

/* --- Modal alert (used via colorbox for promo-required prompt) --- */
.tx-modal-alert {
  padding: 24px;
  text-align: center;
}
.tx-modal-alert h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--tx-text);
  margin: 0 0 12px;
}
.tx-modal-alert p {
  font-size: 14px;
  color: var(--tx-muted);
  margin: 0;
}

/* --- Mobile --- */
@media (max-width: 700px) {
  .tx-detail-card {
    padding: 18px 16px;
    /* Email-template descriptions (#iDesignTemplate) have a 640px-wide
       table giving this card a 640px intrinsic minimum. As a flex item
       in .tx-detail-page's column the card then refuses to shrink and
       overflows, collapsing the sibling notice text to one-word-per-line.
       min-width:0 lets it shrink; overflow clips residual table spill. */
    min-width: 0;
    overflow-x: hidden;
  }
  .tx-detail-description,
  .tx-detail-description #iDesignTemplate {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  .tx-detail-hero {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .tx-detail-hero__action {
    align-self: flex-start;
  }
  .tx-detail-hero__title {
    font-size: 22px !important;
  }
  .tx-detail-meta {
    gap: 12px;
  }
  .tx-detail-meta__directions {
    margin-left: 0;
    width: 100%;
  }
  .tx-perf-picker {
    width: 100% !important;
    min-width: 0;
  }
  /* Stack BOM / email-template table cells vertically. These legacy
     descriptions use nested tables with fixed pixel WIDTH ATTRIBUTES
     and rely on email-client mobile CSS that doesn't exist here, so on
     a phone the fixed widths crush the text cell to one-word-per-line.
     Force every table part to linearize and drop fixed/min widths. */
  .tx-detail-description table,
  .tx-detail-description tbody,
  .tx-detail-description tr,
  .tx-detail-description td,
  .tx-detail-description #iDesignTemplate table,
  .tx-detail-description #iDesignTemplate tbody,
  .tx-detail-description #iDesignTemplate tr,
  .tx-detail-description #iDesignTemplate td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .tx-detail-description td {
    padding: 0 0 14px 0;
  }
  .tx-detail-description td:last-child {
    padding-bottom: 0;
  }
  .tx-detail-description img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
  }
}


/* ----------------------------------------------------------
   HERO EVENT — full-width featured banner above the grid/list
   Renders on Gallery + Schedule views only.
   Layout: image left, info right (desktop); stacked (mobile).
   ---------------------------------------------------------- */
/* Wrapper shares the same 1340px max-width and centering as
   .event-container below, so the hero's left edge aligns with the
   first column of cards. */
.tx-hero-wrap {
  max-width: 1340px;
  margin: 0 auto;
  width: 100%;
  padding: 12px 0 0;
  box-sizing: border-box;
}

.tx-hero {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 0;
  background: var(--tx-card-bg);
  border: 1px solid var(--tx-border);
  border-radius: var(--tx-radius-card);
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  /* Full-width hero: image cell fixed 320px, info fills the rest.
     The wrapper (.tx-hero-wrap) caps the overall width at 1340px so the
     hero still aligns with the grid/list below. */
  width: 100%;
  margin: 0 0 24px 0;
  max-height: 280px;
  box-sizing: border-box;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tx-hero:hover {
  transform: translateY(-2px);
  box-shadow: var(--tx-card-hover-shadow);
}
.tx-hero.is-hidden { display: none; }

/* Dark theme: bump border so card edge is visible against dark page */
body.theme-dark .tx-hero {
  border-color: rgba(255, 255, 255, 0.08);
}

.tx-hero__img-link {
  display: block;
  overflow: hidden;
  line-height: 0;
  text-decoration: none;
  background: var(--tx-divider);
  position: relative;
}
.tx-hero__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--tx-coral);
  color: #fff;
  font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  line-height: 1.2;
  z-index: 1;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.tx-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.tx-hero:hover .tx-hero__image { transform: scale(1.02); }

.tx-hero__body {
  display: flex;
  flex-direction: column;
  padding: 22px 26px;
  gap: 10px;
  min-width: 0;
}

.tx-hero__title {
  font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.015em !important;
  text-transform: none !important;
  color: var(--tx-text) !important;
  margin: 0 !important;
}
.tx-hero__title a {
  color: inherit !important;
  text-decoration: none !important;
}
.tx-hero__title a:hover { text-decoration: underline !important; }

.tx-hero__date-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tx-hero__date {
  font-size: 15px;
  font-weight: 600;
  color: var(--tx-text);
}
.tx-hero__next {
  font-size: 13px;
  color: var(--tx-muted);
}
.tx-hero__more {
  font-size: 12px;
  color: var(--tx-hint);
  margin-left: 4px;
}

.tx-hero__venue {
  font-size: 13px;
  color: var(--tx-muted);
  line-height: 1.4;
}
.tx-hero__venue .fptype::before {
  content: ' \B7 ';
  opacity: 0.5;
}

/* HTML description from BOM — neutralize inline styles like we do on
   the event detail page so dark theme works. */
.tx-hero__desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--tx-muted);
  max-height: 6em; /* roughly 4 lines, prevents runaway descriptions */
  overflow: hidden;
  position: relative;
}
.tx-hero__desc *,
.tx-hero__desc div,
.tx-hero__desc span,
.tx-hero__desc p,
.tx-hero__desc td,
.tx-hero__desc table {
  background: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
}
.tx-hero__desc img {
  max-width: 100%;
  height: auto;
}
.tx-hero__desc a { color: var(--tx-coral); }

.tx-hero__cta-row {
  display: flex;
  margin-top: auto;
  padding-top: 8px;
}
.tx-hero__cta {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 11px 28px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  background: var(--tx-cta-bg) !important;
  color: var(--tx-cta-text) !important;
  border-radius: var(--tx-radius-btn) !important;
  border: none !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.15s;
  margin: 0 !important;
}
.tx-hero__cta:hover {
  background: var(--tx-cta-bg-hover) !important;
  text-decoration: none !important;
}

/* Mobile: stack image on top, body below; full container width */
@media (max-width: 768px) {
  .tx-hero {
    grid-template-columns: 1fr;
    width: 100%;
    max-height: none;
    margin-bottom: 16px;
  }
  .tx-hero__img-link { aspect-ratio: 16/10; }
  .tx-hero__body { padding: 22px 18px; gap: 10px; }
  .tx-hero__title { font-size: 22px !important; }
  .tx-hero__desc { max-height: 6em; }
}

/* ----------------------------------------------------------
   WAITING LIST MODAL — used on Schedule, Calendar, b_otix
   Trigger: any [data-waitlist] element with data-perf-id, data-event-title,
   data-perf-label attributes. Modal markup lives in waitlist_modal.asp.
   ---------------------------------------------------------- */
.tx-wl-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.tx-wl-modal.is-open { opacity: 1; }
.tx-wl-modal[hidden] { display: none; }

.tx-wl-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  cursor: pointer;
}
body.tx-wl-open { overflow: hidden; }

.tx-wl-modal__panel {
  position: relative;
  background: var(--tx-card-bg);
  color: var(--tx-text);
  border-radius: var(--tx-radius-card);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px 28px 24px;
  box-sizing: border-box;
  transform: translateY(8px);
  transition: transform 0.2s ease;
}
.tx-wl-modal.is-open .tx-wl-modal__panel { transform: translateY(0); }

.tx-wl-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: var(--tx-muted);
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.15s;
}
.tx-wl-modal__close:hover { background: var(--tx-divider); color: var(--tx-text); }

.tx-wl-modal__title {
  font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--tx-text) !important;
  margin: 0 0 6px !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
}
.tx-wl-modal__subtitle {
  font-size: 14px;
  line-height: 1.45;
  color: var(--tx-muted);
  margin: 0 0 14px;
}
.tx-wl-modal__subtitle .tx-wl-modal__event-title {
  color: var(--tx-text);
  font-weight: 600;
}
.tx-wl-modal__intro {
  font-size: 13px;
  line-height: 1.5;
  color: var(--tx-muted);
  margin: 0 0 18px;
  padding: 10px 12px;
  background: var(--tx-dropdown-hover);
  border-radius: 8px;
}

.tx-wl-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tx-wl-form__row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.tx-wl-form__row--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.tx-wl-form__row--split > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tx-wl-form__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--tx-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tx-wl-form__input {
  font-family: inherit;
  font-size: 14px;
  padding: 9px 12px;
  border: 1px solid var(--tx-border-mid);
  border-radius: var(--tx-radius-sm);
  /* !important on bg and color defends against main.css's
     `input[type='text'] { color: #333; }` rule which otherwise wins on
     specificity and produces a light-on-dark mismatch in dark mode. */
  background: var(--tx-card-bg) !important;
  color: var(--tx-text) !important;
  transition: border-color 0.15s;
  box-sizing: border-box;
  width: 100%;
  height: auto !important; /* main.css sets input[type=text] height: 34px */
}
.tx-wl-form__input:focus {
  border-color: var(--tx-text);
  outline: none;
}
.tx-wl-form__textarea {
  resize: vertical;
  min-height: 56px;
}

.tx-wl-form__error {
  font-size: 13px;
  color: var(--tx-avail-out);
  background: rgba(231, 111, 81, 0.08);
  padding: 8px 12px;
  border-radius: 6px;
}

.tx-wl-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}
.tx-wl-form__actions--center {
  justify-content: center;
}
.tx-wl-form__cancel,
.tx-wl-form__submit {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: var(--tx-radius-btn);
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.tx-wl-form__cancel {
  background: transparent;
  color: var(--tx-muted);
}
.tx-wl-form__cancel:hover { color: var(--tx-text); background: var(--tx-divider); }
.tx-wl-form__submit {
  background: var(--tx-cta-bg);
  color: var(--tx-cta-text);
}
.tx-wl-form__submit:hover { background: var(--tx-cta-bg-hover); }
.tx-wl-form__submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* Success view */
.tx-wl-modal__view--success { text-align: center; padding: 8px 4px; }
.tx-wl-modal__success-icon {
  width: 56px;
  height: 56px;
  margin: 8px auto 16px;
  background: rgba(0, 168, 132, 0.12);
  color: #1F9D78;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.tx-wl-modal__success-msg {
  font-size: 14px;
  line-height: 1.5;
  color: var(--tx-muted);
  margin: 0 0 20px;
}
.tx-wl-modal__success-msg .tx-wl-modal__event-title {
  color: var(--tx-text);
  font-weight: 600;
}

/* Mobile */
@media (max-width: 540px) {
  .tx-wl-modal { padding: 0; align-items: flex-end; }
  .tx-wl-modal__panel {
    max-width: none;
    max-height: 92vh;
    border-radius: 16px 16px 0 0;
    padding: 28px 20px 20px;
  }
  .tx-wl-form__row--split {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* Waiting List trigger button — appears next to a sold-out CTA */
.tx-wl-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--tx-radius-btn);
  border: 1px solid var(--tx-border-mid);
  background: transparent;
  color: var(--tx-text);
  cursor: pointer;
  text-decoration: none !important;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.tx-wl-trigger:hover {
  background: var(--tx-divider);
  border-color: var(--tx-text);
}

/* ----------------------------------------------------------
   Floorplan page (Seat_Based_floorplan.asp) — themed components
   Page-specific classes prefixed .tx-fp- to avoid colliding with the
   floorplan's own legacy classes (.perf-info, .selected-seats, etc.).
   ---------------------------------------------------------- */

/* Add to Cart button — same coral filled CTA pattern as Buy tickets */
.tx-fp-cta,
a.tx-fp-cta,
a.tx-fp-cta:link,
a.tx-fp-cta:visited,
a.tx-fp-cta:focus,
a.tx-fp-cta:active {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 9px 22px !important;
  font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  background: var(--tx-cta-bg) !important;
  color: var(--tx-cta-text) !important;
  border-radius: var(--tx-radius-btn) !important;
  border: none !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.15s;
  cursor: pointer;
  margin: 0 !important;
  text-indent: 0 !important;
  text-shadow: none !important;
}
.tx-fp-cta:hover,
a.tx-fp-cta:hover {
  background: var(--tx-cta-bg-hover) !important;
  color: var(--tx-cta-text) !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

/* Selected Seats counter — readonly input as themed pill */
.tx-fp-count {
  background: var(--tx-dropdown-hover) !important;
  color: var(--tx-text) !important;
  border: 1px solid var(--tx-border) !important;
  border-radius: 8px !important;
  height: auto !important;
  cursor: default;
}
.tx-fp-count:focus {
  outline: none;
  border-color: var(--tx-border-mid) !important;
}

/* Floorplan venue image — the BOM-uploaded layout drawing is typically
   a near-white background with dark stage and section labels. In dark
   mode, partial inversion (0.86) flips the white to a tone matching
   the page bg, while keeping enough contrast on the dark stage/labels
   for them to remain visible. The SVG seat circles overlaid on top are
   unaffected — they're sibling elements, not children of #imgFloorplan. */
body.theme-dark #imgFloorplan {
  filter: invert(0.86) hue-rotate(180deg);
}

/* ----------------------------------------------------------
   Themed Colorbox modal — applied via className: 'tx-cbox' on the
   colorbox call (Seat_Based_floorplan launching the price code popup).
   Other Colorbox usages elsewhere on the site keep their default look
   until those flows are redone.
   ---------------------------------------------------------- */

/* Modal frame surfaces */
#colorbox.tx-cbox,
#colorbox.tx-cbox #cboxWrapper,
#colorbox.tx-cbox #cboxContent,
#colorbox.tx-cbox #cboxLoadedContent {
  background: var(--tx-card-bg) !important;
  color: var(--tx-text);
}

/* The 1px borders Colorbox draws around the wrapper */
#colorbox.tx-cbox #cboxTopLeft,
#colorbox.tx-cbox #cboxTopCenter,
#colorbox.tx-cbox #cboxTopRight,
#colorbox.tx-cbox #cboxBottomLeft,
#colorbox.tx-cbox #cboxBottomCenter,
#colorbox.tx-cbox #cboxBottomRight,
#colorbox.tx-cbox #cboxMiddleLeft,
#colorbox.tx-cbox #cboxMiddleRight {
  background: var(--tx-card-bg) !important;
}

/* Loaded content scroll fix — let the iframe fill */
#colorbox.tx-cbox #cboxLoadedContent iframe {
  background: var(--tx-card-bg);
}

/* Title bar — themed */
#colorbox.tx-cbox #cboxTitle {
  color: var(--tx-text) !important;
  font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Close button — themed circle */
#colorbox.tx-cbox #cboxClose {
  color: var(--tx-text) !important;
  background: var(--tx-card-bg);
  text-indent: 0;
  font-size: 0;
  width: 36px;
  height: 36px;
  right: 8px;
  top: 8px;
  border-radius: 50%;
  border: 1px solid var(--tx-border);
  transition: background 0.15s, border-color 0.15s;
}
#colorbox.tx-cbox #cboxClose::before {
  content: "×";
  font-size: 22px;
  line-height: 1;
  color: var(--tx-text);
  display: block;
  text-align: center;
  padding-top: 4px;
}
#colorbox.tx-cbox #cboxClose:hover {
  background: var(--tx-dropdown-hover);
  border-color: var(--tx-border-mid);
}
   Applied via customClass keys on the Swal.fire call so only OUR popup
   picks up these styles — other Swal popups elsewhere on the site
   (cart/checkout) keep their default look until we redo those pages.
   ---------------------------------------------------------- */

/* Backdrop — needs to be darker than the page so the panel reads as
   "lifted above" rather than "merged into" the page. SweetAlert's container
   is .swal2-container, which is the dimmed overlay element. */
.swal2-container.swal2-backdrop-show:has(.tx-swal-popup),
.swal2-container:has(.tx-swal-popup) {
  background-color: rgba(0, 0, 0, 0.78) !important;
}

.swal2-popup.tx-swal-popup {
  /* Use the brightest themed surface (dropdown/raised) for the panel
     so it stands clearly above the page bg AND against the backdrop. */
  background: var(--tx-dropdown-bg) !important;
  color: var(--tx-text) !important;
  border: 1px solid var(--tx-border-mid) !important;
  border-radius: var(--tx-radius-card);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  padding: 36px 32px 28px;
  font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.swal2-popup.tx-swal-popup .swal2-html-container,
.swal2-popup.tx-swal-popup .tx-swal-html {
  font-size: 16px !important;
  line-height: 1.55 !important;
  color: var(--tx-text) !important;
  text-align: left;
  opacity: 1 !important;
}
.swal2-popup.tx-swal-popup .swal2-html-container *,
.swal2-popup.tx-swal-popup .tx-swal-html * {
  color: var(--tx-text) !important;
  opacity: 1 !important;
}

/* Close button (top-right) */
.swal2-close.tx-swal-close {
  color: var(--tx-text) !important;
  font-size: 28px !important;
  width: 36px;
  height: 36px;
  line-height: 1;
  border-radius: 50%;
  transition: background 0.15s, color 0.15s;
}
.swal2-close.tx-swal-close:hover {
  color: var(--tx-text) !important;
  background: var(--tx-divider) !important;
}
.swal2-close.tx-swal-close:focus {
  box-shadow: none !important;
  outline: none;
}

/* OK / confirm button — themed CTA */
.swal2-confirm.tx-swal-confirm {
  background: var(--tx-cta-bg) !important;
  color: var(--tx-cta-text) !important;
  border: none !important;
  border-radius: var(--tx-radius-btn) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 10px 28px !important;
  box-shadow: none !important;
  transition: background 0.15s;
}
.swal2-confirm.tx-swal-confirm:hover {
  background: var(--tx-cta-bg-hover) !important;
}
.swal2-confirm.tx-swal-confirm:focus {
  box-shadow: none !important;
  outline: none;
}

/* Trigger warning / content advisory — opt-in disclosure with spoilers
   hidden by default. Native <details>/<summary> for accessibility (keyboard
   + screen reader work for free). Sits between hero and info card on
   b_otix; styled like a card so it visually belongs in the same column. */
.tx-trigger-warning {
  background: var(--tx-card-bg);
  border: 1px solid var(--tx-border);
  border-radius: var(--tx-radius-card);
  margin: 0 0 24px;
  overflow: hidden;
}
.tx-trigger-warning__summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.15s;
}
.tx-trigger-warning__summary::-webkit-details-marker { display: none; }
.tx-trigger-warning__summary::marker { content: ''; }
.tx-trigger-warning__summary:hover {
  background: var(--tx-dropdown-hover);
}

.tx-trigger-warning__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(231, 111, 81, 0.14);
  color: var(--tx-coral);
  border-radius: 50%;
  font-size: 14px;
}
.tx-trigger-warning__label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tx-trigger-warning__title {
  font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--tx-text);
  line-height: 1.3;
}
.tx-trigger-warning__hint {
  font-size: 12px;
  color: var(--tx-muted);
  line-height: 1.3;
}
.tx-trigger-warning__chevron {
  flex-shrink: 0;
  color: var(--tx-muted);
  font-size: 12px;
  transition: transform 0.2s ease;
}
.tx-trigger-warning[open] .tx-trigger-warning__chevron {
  transform: rotate(180deg);
}

.tx-trigger-warning__body {
  padding: 4px 18px 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--tx-text);
  border-top: 1px solid var(--tx-border);
  margin-top: -1px; /* visual continuity with summary's bottom edge on open */
}
.tx-trigger-warning[open] .tx-trigger-warning__body {
  padding-top: 16px;
}

/* Info-only events (intGalleryListing = 1): shown in listings for promotion
   but not yet on sale. The pill replaces the Buy tickets CTA and carries
   the message text from vcGalleryListing (e.g. "Tickets on sale May 10th").

   Translucent coral background + coral text — visually distinct from the
   filled coral CTAs (which use solid bg + white text). Reads as a status
   badge, not a button you can click. Matches the SOLD OUT pill treatment
   on b_otix. */
.tx-info-pill {
  display: inline-flex;
  align-items: center;
  font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 10px;
  background: rgba(231, 111, 81, 0.14);
  color: var(--tx-coral) !important;
  border-radius: 999px;
  line-height: 1.3;
  /* Allow wrap when constrained (e.g. long "Coming soon - Mon, May 18 · 12:00 AM"
     inside a narrow gallery card footer). The pill stretches to a multi-line
     rounded rect rather than overflowing. */
  white-space: normal;
  text-align: center;
  max-width: 100%;
  min-width: 0;
}
/* Larger variant for hero / detail-page contexts where the pill is the
   sole prominent thing in the action area. */
.tx-info-pill--lg {
  font-size: 13px;
  padding: 11px 22px;
}

/* When the WL trigger IS the row's primary CTA (sold-out perf), it inherits
   the filled .btn-primary look from the existing CTA classes. This modifier
   just neutralises the bordered-pill defaults from .tx-wl-trigger above so
   the filled background and white text from .btn-primary win.

   !important and explicit color values defend against the parent <a>'s
   visited/hover/inherit color cascade — the row-link in schedule view sits
   above this element in the DOM and its color rules can otherwise tint the
   button text. */
.tx-wl-trigger--cta {
  border: none !important;
  background: var(--tx-cta-bg) !important;
  color: var(--tx-cta-text) !important;
  opacity: 1 !important;
}
.tx-wl-trigger--cta:hover,
.tx-wl-trigger--cta:visited,
.tx-wl-trigger--cta:focus,
a.tx-wl-trigger--cta,
a.tx-wl-trigger--cta:hover,
a.tx-wl-trigger--cta:visited {
  background: var(--tx-cta-bg-hover) !important;
  color: var(--tx-cta-text) !important;
  border-color: transparent;
  opacity: 1 !important;
}

/* ----------------------------------------------------------
   Event Card
   ---------------------------------------------------------- */
.event-card {
  background: var(--tx-card-bg);
  border: 1px solid var(--tx-border);
  border-radius: var(--tx-radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: 0 1px 3px rgba(45, 32, 20, 0.06), 0 6px 16px rgba(45, 32, 20, 0.10);
  min-height: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

/* Dark theme keeps the resting shadow subtle — depth comes from the
   card bg sitting above the page bg, not from a shadow on near-black. */
body.theme-dark .event-card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* Cool theme: same depth, but a cool blue-gray shadow tint so it
   doesn't read warm against the gray page. */
body.theme-cool .event-card {
  box-shadow: 0 1px 3px rgba(20, 24, 40, 0.06), 0 6px 16px rgba(20, 24, 40, 0.10);
}

.event-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--tx-card-hover-shadow);
}

.event-card__img-link {
  display: block;
  overflow: hidden;
  line-height: 0;
  text-decoration: none;
}

/* New: image wrapper that hosts the date badge overlay */
.event-card__img-wrap {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.event-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  max-width: 100%;
  background: var(--tx-divider);
  transition: transform 0.3s ease;
}

.event-card:hover .event-card__image {
  transform: scale(1.03);
}

.event-card__body {
  padding: 16px 18px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: left;
  /* Soft top edge — visible against white images (Wedding Singer poster),
     invisible against dark ones (concert photo). Reads as a subtle seam,
     not a "default UI" divider. */
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06);
}

/* In dark mode, a dark inset shadow disappears. Use a faint light
   edge instead — visible against bright images, invisible against
   dark ones (where the card bg is similar lightness). */
body.theme-dark .event-card__body {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Date block — context, supporting info.
   Lighter than the title so it doesn't compete. */
.event-card__date-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 16px;
}

.event-card__date {
  font-size: 14px;
  font-weight: 500;
  color: var(--tx-text);
  letter-spacing: 0;
  line-height: 1.3;
}

.event-card__next {
  font-size: 13px;
  font-weight: 400;
  color: var(--tx-muted);
  letter-spacing: 0;
  line-height: 1.35;
}

.event-card__more {
  display: inline-block;
  font-size: 12px;
  font-weight: 400;
  color: var(--tx-hint);
  margin-left: 4px;
  letter-spacing: 0;
}

/* Title — top of card body, the dominant element. */
.event-card__title {
  font-size: 24px !important;
  font-weight: 600;
  font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--tx-text);
  margin: 0 0 6px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  white-space: normal;
  overflow: visible;
  text-overflow: initial;
}

/* Availability dot — small status indicator, sits inline next to the date.
   Subtle by design; the title is the headline, this is supporting status. */
.event-card__avail-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: var(--tx-hint);
  box-shadow: 0 0 0 2px var(--tx-divider);
  cursor: help;
  position: relative;
  margin-right: 6px;
  /* Visually align with the cap-height of the 14px date text */
  vertical-align: 1px;
}

.event-card__avail-dot.avail-good    { background: var(--tx-avail-good); }
.event-card__avail-dot.avail-limited { background: var(--tx-avail-low);  }
.event-card__avail-dot.avail-soldout { background: var(--tx-avail-out);  }

/* Tooltip via data-tip attribute */
.event-card__avail-dot::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--tx-text);
  color: var(--tx-page-bg);
  border: 1px solid var(--tx-border-mid);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  padding: 5px 9px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 10;
}
.event-card__avail-dot::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--tx-text);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 10;
}
.event-card__avail-dot:hover::after,
.event-card__avail-dot:hover::before,
.event-card__avail-dot:focus::after,
.event-card__avail-dot:focus::before {
  opacity: 1;
}

/* Pulse animation for limited state — subtle urgency cue */
@keyframes tx-avail-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--tx-divider); }
  50%      { box-shadow: 0 0 0 4px rgba(229, 180, 84, 0.30); }
}
.event-card__avail-dot.avail-limited {
  animation: tx-avail-pulse 1.8s ease-in-out infinite;
}

.event-card__venue {
  font-size: 13px;
  color: var(--tx-muted);
  margin-bottom: 8px;
  line-height: 1.4;
  font-weight: 400;
}

/* fptype lives inside the venue line — uses the line's lighter
   styling, with just a separator before it. */
.event-card__venue .fptype {
  padding-left: 0;
  margin-left: 0;
  font-weight: 400;
}

.event-card__venue .fptype::before {
  content: ' \B7 ';
  position: static;
  display: inline;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  transform: none;
  opacity: 0.5;
}

/* Availability dot+label on gallery card — driven by SP__GetEventAvailabilityAggregate
   (event-level rollup of online-channel availability across all future perfs).
   Pattern mirrors the schedule row's availability indicator for consistency. */
.event-card__avail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
}
.event-card__avail-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--tx-muted);
}
.event-card__avail.avail-good                              { color: var(--tx-avail-good); }
.event-card__avail.avail-good    .event-card__avail-dot    { background: var(--tx-avail-good); }
.event-card__avail.avail-limited                           { color: var(--tx-avail-low); }
.event-card__avail.avail-limited .event-card__avail-dot    { background: var(--tx-avail-low); }
/* Sold out is more prominent — same treatment as the schedule row's
   sold-out label (bolder, uppercase) since it's the *reason* the CTA
   is disabled. */
.event-card__avail.avail-soldout {
  color: var(--tx-avail-out) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.event-card__avail.avail-soldout .event-card__avail-dot {
  background: var(--tx-avail-out);
  width: 8px;
  height: 8px;
}

/* Bottom-pinned meta block — venue, availability, footer all sit here.
   Pushed to the bottom of the card via margin-top: auto so the position
   of these elements doesn't shift based on title height. The title
   absorbs the variable space at the top of the card. */
.event-card__meta {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.event-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  gap: 16px;
}

.event-card__price {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  gap: 2px;
}

.event-card__price-label {
  font-size: 11px;
  font-weight: 400;
  color: var(--tx-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.event-card__price-value {
  font-size: 17px;
  font-weight: 600;
  color: var(--tx-text);
  letter-spacing: -0.01em;
}

/* ----------------------------------------------------------
   Buttons — override main.css a[class^='btn-'] / button[class^='btn-']
   ---------------------------------------------------------- */
.btn-primary,
.btn-ghost {
  display: inline-block;
  font-family: inherit;
  font-size: 13px;
  padding: 9px 18px;
  border-radius: var(--tx-radius-btn) !important;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  border: 1px solid transparent;
  line-height: 1.4;
  margin: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background 0.15s, border-color 0.15s;
  font-weight: 600;
}

.btn-primary {
  background-color: var(--tx-cta-bg) !important;
  color: var(--tx-cta-text) !important;
  border-color: var(--tx-cta-bg) !important;
  font-weight: 600;
}

.btn-primary:hover {
  background-color: var(--tx-cta-bg-hover) !important;
  border-color: var(--tx-cta-bg-hover) !important;
  color: var(--tx-cta-text) !important;
  text-decoration: none;
  box-shadow: none !important;
}

/* Disabled / sold-out CTA */
.btn-primary.is-disabled,
.btn-primary.is-disabled:hover {
  background-color: transparent !important;
  border-color: var(--tx-border-mid) !important;
  color: var(--tx-muted) !important;
  cursor: not-allowed;
  pointer-events: none;
  font-weight: 500;
}

.btn-ghost {
  background-color: transparent !important;
  color: var(--tx-text) !important;
  border-color: var(--tx-border-mid) !important;
}

.btn-ghost:hover {
  background-color: var(--tx-page-bg) !important;
  border-color: var(--tx-navy) !important;
  color: var(--tx-navy) !important;
  text-decoration: none;
  box-shadow: none !important;
}

/* ----------------------------------------------------------
   Streaming icon
   ---------------------------------------------------------- */
.stream-icon {
  display: inline-block;
  font-size: 12px;
  color: var(--tx-hint);
  margin-right: 4px;
  vertical-align: middle;
}

/* ----------------------------------------------------------
   Utility
   ---------------------------------------------------------- */
.hidden { display: none !important; }

/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */
@media (max-width: 900px) {
  #divlistStyle.content { padding: 12px 8px 24px; }
  .tx-filter-bar  { padding: 10px 14px; }
  .tx-chips       { padding: 8px 14px; }
  .event-container { padding: 8px 4px 20px; }
}

@media (max-width: 768px) {
  .tx-filter-divider       { display: none; }
  .tx-search-wrap          { flex-basis: 100%; min-width: 100%; }
  .tx-filter-bar select    { flex: 1 1 0; min-width: 140px; max-width: none; width: auto; }
  .tx-view-toggle          { margin-left: 0; }
}

@media (max-width: 480px) {
  /* Reduced padding on the event grid container */
  .event-container { padding: 8px 4px 20px; }

  /* Card fills the full column on mobile — the 320px cap is for desktop
     grid aesthetics; on narrow viewports it just creates wasted right-side
     gutter. */
  .event-item {
    max-width: none !important;
    width: 100% !important;
  }

  /* Chips wrap to multiple rows on mobile (more discoverable than
     horizontal scroll) and shrink to a smaller size. */
  .tx-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 14px 14px;
  }
  .tx-chip {
    font-size: 11px;
    padding: 4px 10px;
    flex-shrink: 0;
  }

  /* Card body should size to content on mobile single-column,
     not stretch to fill the row */
  .event-card {
    height: auto;
  }
  .event-card__body {
    flex: 0 0 auto;
  }
}

/* ----------------------------------------------------------
   b_otix.asp — Event detail page
   ---------------------------------------------------------- */

/* Replace old card-item shadow/border with new aesthetic */
.card-item {
  background: var(--tx-card-bg);
  border-radius: var(--tx-radius-card);
  border: 1px solid var(--tx-border);
  box-shadow: none;
  padding: 20px 24px;
  margin: 16px 0;
}

/* Event title on detail page */
.card-item h1 {
  font-family: 'DM Sans', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--tx-navy);
  float: none !important;
  margin: 0 0 8px;
}

/* Fix colour gap below footer — body bg must extend fully */
html, body {
  background-color: var(--tx-page-bg);
  min-height: 100%;
}

.wrap, .aside-bg, .col-nav-body {
  background-color: var(--tx-page-bg) !important;
}

/* ----------------------------------------------------------
   Page layout — full height so footer sits at bottom
   ---------------------------------------------------------- */
html { height: 100%; }

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.grid.aside-bg {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: var(--tx-page-bg) !important;
}

.col-nav-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

section.col-body {
  flex: 1;
}

/* Kill the dark bleed-through colour from .aside-bg */
.aside-bg {
  background-color: var(--tx-page-bg) !important;
}

/* ----------------------------------------------------------
   b_otix — event detail page
   ---------------------------------------------------------- */
.content h1,
.card-item h1 {
  font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--tx-navy);
  margin: 0 0 8px;
  float: none !important;
}

/* Layout: title left, button right inside first card */
.card-item table {
  border-collapse: collapse;
}

/* Tone down the orange accessible seating text */
.card-item font[face="verdana"] {
  color: var(--tx-muted) !important;
  font-size: 13px !important;
}

/* Multiple dates label */
.card-item span[style*='color:red'] {
  color: var(--tx-coral) !important;
  font-size: 12px !important;
}

/* ==========================================================
   THEME OVERRIDES — main.css legacy rules
   These ensure non-listing surfaces (nav rail, wrappers) follow
   the active theme too.
   ========================================================== */

/* Anything still relying on main.css colors gets pulled into the theme */
.col-nav,
.col-nav-body,
.logo-wrap {
  background-color: var(--tx-page-bg) !important;
}

/* main.css link color (#a6093d) should follow theme accent */
body.theme-dark a:not(.btn-primary):not(.btn-ghost):not(.event-card__title a):not(.tx-chip):not(.dropdown-content a):not(.navbar-menu a):not(.icon-btn):not(.login-btn):not(.logo):not(.footer-links a) {
  color: var(--tx-coral);
}

/* Ensure section.col-body actually shows the theme bg even if main.css's
   #fff rule loads later in some include sequence */
section.col-body {
  background-color: var(--tx-page-bg) !important;
}

/* (Card titles and prices now use --tx-text directly; theme-specific
   overrides removed for simplicity. Old logic preserved in git history.) */

/* Detail-page card */
body.theme-dark .card-item h1 {
  color: var(--tx-text);
}

/* Heading colors in dark mode */
body.theme-dark h1, body.theme-dark h2, body.theme-dark h3 {
  color: var(--tx-text);
}

/* ----------------------------------------------------------
   COOL THEME — slate-blue header + footer
   The navbar/footer bg lives in external CSS (navbar.css/main.css)
   as a near-black shared by all themes. Override here for Cool only,
   with id/!important so it wins regardless of external load order.
   ---------------------------------------------------------- */
body.theme-cool .navbar {
  background-color: #2E4860 !important;
}
body.theme-cool .navbar.is-scrolled {
  background-color: rgba(46, 72, 96, 0.92) !important;
}
body.theme-cool footer {
  background-color: #2E4860 !important;
}
/* Keep footer text/links legible on the slate bar */
body.theme-cool footer,
body.theme-cool footer .footer-copyright,
body.theme-cool footer .footer-links a {
  color: rgba(255, 255, 255, 0.85) !important;
}
body.theme-cool footer .footer-links a:hover {
  color: #FFFFFF !important;
}

/* ----------------------------------------------------------
   PLUM THEME — plum header + footer (gold link accents)
   ---------------------------------------------------------- */
body.theme-plum .navbar {
  background-color: #5B2333 !important;
}
body.theme-plum .navbar.is-scrolled {
  background-color: rgba(91, 35, 51, 0.92) !important;
}
body.theme-plum footer {
  background-color: #5B2333 !important;
}
body.theme-plum footer,
body.theme-plum footer .footer-copyright,
body.theme-plum footer .footer-links a {
  color: rgba(255, 255, 255, 0.82) !important;
}
body.theme-plum footer .footer-links a:hover {
  color: #C9A227 !important;
}