/* =====================================================================================================================
   TEPTIX dark mode. Active when <html data-theme="dark"> (toggle in the header; choice kept in localStorage).
   Everything is scoped under html[data-theme="dark"], so the normal (light) site is untouched.
   ===================================================================================================================== */
html[data-theme="dark"] {
    color-scheme: dark;
    --dk-bg: #0b0d14;
    --dk-surface: #141824;
    --dk-surface2: #1b2030;
    --dk-line: rgba(255, 255, 255, .12);
    --dk-ink: #eef1f7;
    --dk-text: #cfd6e6;
    --dk-muted: #9aa4b8;
}
html[data-theme="dark"] body { background: var(--dk-bg); color: var(--dk-text); }
html { transition: background-color .25s ease; }
html[data-theme="dark"] body, html[data-theme="dark"] .tx-header, html[data-theme="dark"] .tx-card { transition: background-color .25s ease, color .25s ease; }

/* ---------- header ---------- */
html[data-theme="dark"] .tx-header { --tx-ink: var(--dk-ink); --tx-muted: var(--dk-muted); --tx-line: var(--dk-line); background: rgba(11, 13, 20, .92); }
html[data-theme="dark"] .tx-header.is-scrolled { background: rgba(11, 13, 20, .97); box-shadow: 0 6px 24px rgba(0, 0, 0, .45); }
html[data-theme="dark"] .tx-link, html[data-theme="dark"] .tx-dd-btn, html[data-theme="dark"] .tx-cat-item,
html[data-theme="dark"] .tx-menu-item, html[data-theme="dark"] .tx-drawer-link { color: var(--dk-text); }
html[data-theme="dark"] .tx-link--organizer { color: var(--dk-ink); }
html[data-theme="dark"] .tx-link:hover, html[data-theme="dark"] .tx-dd-btn:hover, html[data-theme="dark"] .tx-link.is-active,
html[data-theme="dark"] .tx-dd-btn.is-active, html[data-theme="dark"] .tx-cat-item:hover, html[data-theme="dark"] .tx-cat-item.is-active,
html[data-theme="dark"] .tx-menu-item:hover, html[data-theme="dark"] .tx-drawer-link:hover, html[data-theme="dark"] .tx-drawer-link.is-active { color: var(--tx-accent); }
html[data-theme="dark"] .tx-card, html[data-theme="dark"] .tx-drawer { background: var(--dk-surface); border-color: var(--dk-line); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
html[data-theme="dark"] .tx-icon-btn, html[data-theme="dark"] .tx-btn--ghost, html[data-theme="dark"] .tx-user-btn { background: var(--dk-surface2); color: var(--dk-ink) !important; border-color: var(--dk-line); }
html[data-theme="dark"] .tx-icon-btn:hover { color: var(--tx-accent) !important; }
html[data-theme="dark"] .tx-search-inline input, html[data-theme="dark"] .tx-searchbar input, html[data-theme="dark"] .tx-drawer-search input { background: var(--dk-surface2); color: var(--dk-ink); border-color: var(--dk-line); }
html[data-theme="dark"] .tx-search-inline input:focus, html[data-theme="dark"] .tx-searchbar input:focus, html[data-theme="dark"] .tx-drawer-search input:focus { background: var(--dk-surface); }
html[data-theme="dark"] .tx-searchbar { background: var(--dk-surface); border-color: var(--dk-line); }
html[data-theme="dark"] .tx-drawer-close, html[data-theme="dark"] .tx-drawer-user { background: var(--dk-surface2); color: var(--dk-ink); border-color: var(--dk-line); }
html[data-theme="dark"] .tx-burger span { background: var(--dk-ink); }
html[data-theme="dark"] .tx-user-head, html[data-theme="dark"] .tx-user-head b { color: var(--dk-ink); }
html[data-theme="dark"] .tx-logo img, html[data-theme="dark"] .tx-drawer-head img { filter: invert(1) hue-rotate(180deg); }
html[data-theme="dark"] .tx-logo { mix-blend-mode: screen; }

/* the toggle itself: moon in light mode, sun in dark mode */
.tx-theme-toggle .tx-ic-sun { display: none; }
html[data-theme="dark"] .tx-theme-toggle .tx-ic-sun { display: inline-block; }
html[data-theme="dark"] .tx-theme-toggle .tx-ic-moon { display: none; }
.tx-theme-toggle i { transition: transform .35s ease; }
.tx-theme-toggle:hover i { transform: rotate(-18deg) scale(1.1); }

/* ---------- Tailwind utilities used across the pages ---------- */
html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-white-light { background-color: var(--dk-surface); }
html[data-theme="dark"] .bg-gray-50, html[data-theme="dark"] .bg-gray-100 { background-color: var(--dk-surface2); }
html[data-theme="dark"] .text-black, html[data-theme="dark"] .text-black-100, html[data-theme="dark"] .text-gray,
html[data-theme="dark"] .text-gray-900, html[data-theme="dark"] .text-gray-800, html[data-theme="dark"] .text-gray-700 { color: var(--dk-ink) !important; }
html[data-theme="dark"] .text-gray-100, html[data-theme="dark"] .text-gray-200, html[data-theme="dark"] .text-gray-300,
html[data-theme="dark"] .text-gray-600, html[data-theme="dark"] .text-gray-500, html[data-theme="dark"] .text-gray-400 { color: var(--dk-muted) !important; }
html[data-theme="dark"] .border-gray-light, html[data-theme="dark"] .border-gray-100, html[data-theme="dark"] .border-gray-200,
html[data-theme="dark"] .border-gray-300 { border-color: var(--dk-line); }
html[data-theme="dark"] .shadow-2xl, html[data-theme="dark"] .shadow-lg { box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .75); }
html[data-theme="dark"] hr { border-color: var(--dk-line); }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea {
    background-color: var(--dk-surface2); color: var(--dk-ink); border-color: var(--dk-line); }
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #6f7890; }
html[data-theme="dark"] select option { background: #fff; color: #111; }
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-dropdown { background: var(--dk-surface2); border-color: var(--dk-line); }
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--dk-ink); }
html[data-theme="dark"] .select2-results__option { color: var(--dk-text); }
html[data-theme="dark"] .flatpickr-calendar { background: var(--dk-surface); color: var(--dk-ink); border-color: var(--dk-line); }
html[data-theme="dark"] .swal2-popup { background: var(--dk-surface); color: var(--dk-text); }
html[data-theme="dark"] .swal2-title, html[data-theme="dark"] .swal2-html-container { color: var(--dk-ink); }

/* ---------- Home ---------- */
html[data-theme="dark"] .hm-page { background: var(--dk-bg); color: var(--dk-text); }
html[data-theme="dark"] .hm-section-alt { background: #0f121b; }
html[data-theme="dark"] .hm-search-card, html[data-theme="dark"] .hm-event-card, html[data-theme="dark"] .hm-cat-card,
html[data-theme="dark"] .hm-blog-card { background: var(--dk-surface); border-color: var(--dk-line); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .8); }
html[data-theme="dark"] .hm-search-field label, html[data-theme="dark"] .hm-section-head h2, html[data-theme="dark"] .hm-event-card-body h4,
html[data-theme="dark"] .hm-cat-card h4, html[data-theme="dark"] .hm-blog-card-body h4 { color: var(--dk-ink); }
html[data-theme="dark"] .hm-section-head p, html[data-theme="dark"] .hm-event-card-meta, html[data-theme="dark"] .hm-blog-card-body p,
html[data-theme="dark"] .hm-cat-card span, html[data-theme="dark"] .hm-blog-date, html[data-theme="dark"] .hm-empty,
html[data-theme="dark"] .hm-event-card-seats { color: var(--dk-muted); }
html[data-theme="dark"] .hm-search-field select, html[data-theme="dark"] .hm-search-field input[type="date"] { background: var(--dk-surface2); color: var(--dk-ink); border-color: var(--dk-line); }
html[data-theme="dark"] .hm-cat-card img { border-color: var(--dk-surface2); }
html[data-theme="dark"] .hm-blog-tag { background: rgba(16, 185, 129, .15); color: #6ee7b7; }

/* ---------- Become an organizer ---------- */
html[data-theme="dark"] .bo-page { background: var(--dk-bg); color: var(--dk-text); }
html[data-theme="dark"] .bo-section-alt { background: #0f121b; }
html[data-theme="dark"] .bo-section-head h2, html[data-theme="dark"] .bo-benefit-card h3 { color: var(--dk-ink); }
html[data-theme="dark"] .bo-section-head p, html[data-theme="dark"] .bo-benefit-card p { color: var(--dk-muted); }
html[data-theme="dark"] .bo-benefit-card { background: var(--dk-surface); border-color: var(--dk-line); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .8); }
html[data-theme="dark"] .bo-benefit-card.bo-highlight { background: rgba(220, 38, 38, .1); border-color: rgba(220, 38, 38, .35); }

/* ---------- Event detail ---------- */
html[data-theme="dark"] .tickets-main, html[data-theme="dark"] .tickets-summary-card, html[data-theme="dark"] .info-card {
    background: var(--dk-surface); border-color: var(--dk-line); box-shadow: 0 24px 50px -30px #000; }
html[data-theme="dark"] .tickets-header h2, html[data-theme="dark"] .tickets-summary-head h3, html[data-theme="dark"] .info-card-head h3,
html[data-theme="dark"] .ticket-row-name, html[data-theme="dark"] .ticket-row-price strong, html[data-theme="dark"] .tickets-summary-row span:last-child,
html[data-theme="dark"] .tickets-trust-item strong, html[data-theme="dark"] .ticket-stepper .ticket-qty-value { color: var(--dk-ink); }
html[data-theme="dark"] .tickets-header p, html[data-theme="dark"] .ticket-row-desc, html[data-theme="dark"] .info-card p,
html[data-theme="dark"] .tickets-summary-empty, html[data-theme="dark"] .tickets-trust-item, html[data-theme="dark"] .tickets-summary-row,
html[data-theme="dark"] .tickets-summary-secure, html[data-theme="dark"] .day-pass-label, html[data-theme="dark"] .day-pass-total,
html[data-theme="dark"] .ticket-row-price span, html[data-theme="dark"] .day-chip small { color: var(--dk-muted); }
html[data-theme="dark"] .tickets-trust-strip { border-top-color: var(--dk-line); }
html[data-theme="dark"] .tickets-summary-empty i { color: rgba(255, 255, 255, .14); }
html[data-theme="dark"] .ticket-row { background: rgba(255, 255, 255, .03); border-color: var(--dk-line); }
html[data-theme="dark"] .ticket-row.is-selected { background: rgba(220, 38, 38, .1); }
html[data-theme="dark"] .ticket-row-icon { background: rgba(255, 255, 255, .07); color: var(--dk-text); }
html[data-theme="dark"] .day-pass { border-top-color: var(--dk-line); }
html[data-theme="dark"] .day-pass-note { background: rgba(255, 255, 255, .06); color: var(--dk-text); }
html[data-theme="dark"] .day-chip, html[data-theme="dark"] .ticket-select-btn, html[data-theme="dark"] .ticket-stepper button {
    background: rgba(255, 255, 255, .05); border-color: var(--dk-line); color: var(--dk-ink); }
html[data-theme="dark"] .day-chip.is-on, html[data-theme="dark"] .ticket-select-btn.is-active { background: var(--ed-accent, #dc2626); border-color: var(--ed-accent, #dc2626); color: #fff; }
html[data-theme="dark"] .gallery-tile { background: var(--dk-surface2); }
html[data-theme="dark"] .seat-dropdown { background: var(--dk-surface2); border-color: var(--dk-line); color: var(--dk-ink); }
html[data-theme="dark"] .about-modal-dialog { background: var(--dk-surface); }
html[data-theme="dark"] .about-modal-title { color: var(--dk-ink); }
html[data-theme="dark"] .about-modal-body { color: var(--dk-text); }
html[data-theme="dark"] .about-modal-close, html[data-theme="dark"] .ticket-flow-modal-close { background: rgba(255, 255, 255, .1); color: var(--dk-ink); }
html[data-theme="dark"] .ticket-flow-modal-panel, html[data-theme="dark"] .booking-failed-wrap { background: var(--dk-surface); }
html[data-theme="dark"] .ticket-flow-modal-loading { color: var(--dk-muted); }
html[data-theme="dark"] .ticket-flow-modal-spinner { border-color: rgba(255, 255, 255, .15); border-top-color: var(--ed-accent, #dc2626); }
html[data-theme="dark"] .booking-failed-text { color: var(--dk-muted); }
html[data-theme="dark"] .info-card .bg-gray-50 { background: rgba(255, 255, 255, .92); }

/* ---------- tabs, pills, long-form pages ---------- */
html[data-theme="dark"] .events button, html[data-theme="dark"] .blogs button:not(.bg-primary) { background: var(--dk-surface2) !important; color: var(--dk-muted) !important; }
html[data-theme="dark"] .events button[aria-selected=true] { background: #3B82F6 !important; color: #fff !important; }
html[data-theme="dark"] .bg-success-light { background-color: rgba(34, 197, 94, .16); }
html[data-theme="dark"] .bg-primary-light { background-color: rgba(220, 38, 38, .16); }
html[data-theme="dark"] .close { color: var(--dk-ink); }
html[data-theme="dark"] :is(.bg-scroll, .terms-conditions) :is(p, li, strong, h1, h2, h3, h4, h5, h6):not([class]) { color: var(--dk-text); }
html[data-theme="dark"] .terms-conditions { color: var(--dk-text); }
html[data-theme="dark"] .bg-scroll { background-image: none !important; }

/* ---------- booking pop-up / checkout ---------- */
html[data-theme="dark"] .checkout-coupon-box, html[data-theme="dark"] .checkout-panel, html[data-theme="dark"] .checkout-ticket-row { background: var(--dk-surface); border-color: var(--dk-line); }
html[data-theme="dark"] .checkout-coupon-box { background: var(--dk-surface2); }
html[data-theme="dark"] .bg-green-50 { background-color: rgba(34, 197, 94, .14); }
html[data-theme="dark"] .text-green-700, html[data-theme="dark"] .text-green-600 { color: #86efac !important; }
html[data-theme="dark"] .border-green-100 { border-color: rgba(34, 197, 94, .3); }
html[data-theme="dark"] .bg-red-50 { background-color: rgba(239, 68, 68, .14); }
html[data-theme="dark"] .text-red-800, html[data-theme="dark"] .text-red-700, html[data-theme="dark"] .text-red-600 { color: #fca5a5 !important; }
html[data-theme="dark"] .border-red-100, html[data-theme="dark"] .border-red-200 { border-color: rgba(239, 68, 68, .35); }
html[data-theme="dark"] .bg-amber-50, html[data-theme="dark"] .bg-yellow-50, html[data-theme="dark"] .bg-orange-50 { background-color: rgba(245, 158, 11, .14); }
html[data-theme="dark"] .text-amber-800, html[data-theme="dark"] .text-yellow-800, html[data-theme="dark"] .text-orange-600, html[data-theme="dark"] .text-orange-700 { color: #fcd34d !important; }
html[data-theme="dark"] .bg-blue-50 { background-color: rgba(59, 130, 246, .14); }
html[data-theme="dark"] .text-blue-700, html[data-theme="dark"] .text-blue-600 { color: #93c5fd !important; }
html[data-theme="dark"] .hover\:bg-gray-100:hover { background-color: rgba(255, 255, 255, .08); }
html[data-theme="dark"] .summary-qty, html[data-theme="dark"] #ticketFlowModalBody span:not([class]), html[data-theme="dark"] .checkout-layout span:not([class]) { color: inherit; }
html[data-theme="dark"] [style*="images/events.png"] { background-image: none !important; }
html[data-theme="dark"] iframe[src*="maps.google"], html[data-theme="dark"] iframe[src*="google.com/maps"] { filter: invert(.92) hue-rotate(180deg) saturate(.8); }
html[data-theme="dark"] .gallery-tile img, html[data-theme="dark"] .organizer-logo { filter: none; }
html[data-theme="dark"], html[data-theme="dark"] body { background-color: var(--dk-bg) !important; }
html[data-theme="dark"] .checkout-qty-static strong { background: var(--dk-surface2) !important; color: var(--dk-ink) !important; border-color: var(--dk-line) !important; }
html[data-theme="dark"] .tickets-main .ticket-stepper { background: transparent; border-color: var(--dk-line); }
html[data-theme="dark"] .tickets-main .day-pass-total { background: rgba(255, 255, 255, .06); }
html[data-theme="dark"] .ticket-stepper button { border-color: transparent; }

/* ---------- mobile menu drawer sits outside <header>: give it the same colour variables (Register button was transparent) ---------- */
.tx-drawer { --tx-ink: #0f172a; --tx-muted: #64748b; --tx-line: #e8ecf1; --tx-accent: var(--primary_color, #dc2626); --tx-accent-soft: var(--light_primary_color, rgba(220, 38, 38, .1)); }
html[data-theme="dark"] .tx-drawer { --tx-ink: #eef1f7; --tx-muted: #9aa4b8; --tx-line: rgba(255, 255, 255, .12); }

/* ---------- theme toggle on phones: 44px touch target + a switch row in the menu drawer ---------- */
@media (max-width: 640px) {
    .tx-header .tx-theme-toggle, .tx-header .tx-search-toggle { width: 44px; height: 44px; }
    .tx-header .tx-actions { gap: 6px; }
}
.tx-theme-row { justify-content: flex-start; }
.tx-theme-row .tx-theme-label { flex: 1 1 auto; }
.tx-theme-row .tx-ic-sun { display: none; }
html[data-theme="dark"] .tx-theme-row .tx-ic-sun { display: inline-block; }
html[data-theme="dark"] .tx-theme-row .tx-ic-moon { display: none; }
.tx-switch { position: relative; flex: none; width: 46px; height: 26px; border-radius: 999px; background: #cbd5e1; transition: background .2s ease; }
.tx-switch i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s ease; }
html[data-theme="dark"] .tx-switch { background: var(--tx-accent, #dc2626); }
html[data-theme="dark"] .tx-switch i { transform: translateX(20px); }