:root {
    /* Indigo & Slate — modern, clean, professional (SaaS / Linear-grade) */
    --th-primary: #4f46e5;          /* indigo-600 — brand & trust */
    --th-primary-dark: #4338ca;     /* indigo-700 — hover/active */
    --th-primary-soft: #eef2ff;     /* indigo-50 */
    --th-secondary: #7c6bff;        /* bright violet — highlights & gradients */
    --th-secondary-soft: #f0eefe;
    --th-accent: #7c3aed;           /* violet-600 — CTA energy */
    --th-accent-soft: #f3edff;
    --th-accent-dark: #6d28d9;      /* violet-700 */
    --th-gold: #c9a961;             /* champagne — premium badges only */
    --th-gold-dark: #a07f3a;
    --th-ink: #0f172a;              /* slate-900 */
    --th-ink-soft: #1e293b;         /* slate-800 */
    --th-muted: #64748b;            /* slate-500 */
    --th-muted-light: #94a3b8;      /* slate-400 */
    --th-soft: #f8fafc;             /* slate-50 */
    --th-soft-2: #f1f5f9;           /* slate-100 */
    --th-border: #e2e8f0;           /* slate-200 */
    --th-border-soft: #eef2f7;
    --th-success: #10b981;
    --th-success-soft: #d1fae5;
    --th-danger: #ef4444;
    --th-shadow-xs: 0 1px 2px rgba(15,23,42,.04);
    --th-shadow-sm: 0 2px 6px rgba(15,23,42,.05), 0 1px 1px rgba(15,23,42,.04);
    --th-shadow-md: 0 10px 28px -10px rgba(15,23,42,.12), 0 3px 6px -3px rgba(15,23,42,.06);
    --th-shadow-lg: 0 26px 56px -14px rgba(30,27,75,.22);
    --th-shadow-coral: 0 8px 22px -8px rgba(124,58,237,.45);   /* violet CTA glow */
    --th-shadow-navy: 0 10px 26px -8px rgba(79,70,229,.40);     /* indigo glow */
}

* { scroll-behavior: smooth; }

body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--th-ink);
    background: var(--th-soft);
    font-feature-settings: 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 { color: var(--th-ink); letter-spacing: -.025em; font-weight: 800; }

/* Headings inside dark banners/heroes stay white (the ink rule above would win otherwise) */
.text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5,
.text-white .h1, .text-white .h2, .text-white .h3 { color: #fff; }
section.text-white h1 { text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
h6 { letter-spacing: -.01em; font-weight: 700; }

a { text-decoration: none; transition: color .15s ease; }

/* Bootstrap colour overrides */
.btn { border-radius: .65rem; font-weight: 600; padding-inline: 1.1rem; transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease; }
.btn:active { transform: translateY(1px); }
.btn-lg { padding: .75rem 1.5rem; font-size: 1rem; }
.btn-sm { padding: .35rem .8rem; }

.btn-primary {
    --bs-btn-bg: var(--th-primary);
    --bs-btn-border-color: var(--th-primary);
    --bs-btn-hover-bg: var(--th-primary-dark);
    --bs-btn-hover-border-color: var(--th-primary-dark);
    --bs-btn-active-bg: var(--th-primary-dark);
}
.btn-primary:hover { box-shadow: var(--th-shadow-navy); }

.btn-accent {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--th-accent);
    --bs-btn-border-color: var(--th-accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--th-accent-dark);
    --bs-btn-hover-border-color: var(--th-accent-dark);
}
.btn-accent:hover { box-shadow: var(--th-shadow-coral); transform: translateY(-1px); }

.btn-outline-primary {
    --bs-btn-color: var(--th-primary);
    --bs-btn-border-color: var(--th-primary);
    --bs-btn-hover-bg: var(--th-primary);
    --bs-btn-hover-border-color: var(--th-primary);
}
.btn-dark { --bs-btn-bg: var(--th-ink); --bs-btn-border-color: var(--th-ink); --bs-btn-hover-bg: var(--th-ink-soft); }

.text-primary { color: var(--th-primary) !important; }
.link-primary { color: var(--th-primary); }
.bg-ink { background-color: var(--th-ink) !important; }
.bg-light { background-color: var(--th-soft-2) !important; }

/* Glass-morphism navbar */
.th-navbar {
    background: rgba(255,255,255,.78);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border-bottom: 1px solid rgba(231,229,228,.7);
    box-shadow: 0 1px 0 rgba(10,10,10,.02);
}
.th-logo { font-weight: 800; letter-spacing: -.035em; font-size: 1.45rem; color: var(--th-ink); }
.th-logo .dot { color: var(--th-accent); }
.navbar-nav .nav-link { font-weight: 500; color: var(--th-ink-soft); }
.navbar-nav .nav-link:hover { color: var(--th-primary); }

/* Right-side mobile nav drawer (the hamburger menu) */
.navbar-toggler:focus-visible { box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.35); outline: none; }
.navbar-toggler:focus { box-shadow: none; }
@media (max-width: 991.98px) {
    .th-navdrawer { width: 320px; max-width: 86vw; }
    .th-navdrawer .offcanvas-body { display: flex; flex-direction: column; gap: .15rem; }
    .th-navdrawer .navbar-nav .nav-link { padding: .7rem .15rem; font-size: 1.05rem; }
    .th-navdrawer .navbar-nav .nav-link::after { display: none; }        /* drop hover underline in drawer */
    .th-navdrawer .th-search { order: -1; min-width: 100% !important; margin: .25rem 0 .85rem; }  /* search on top */
    .th-navdrawer .th-search .form-control { font-size: 1rem; padding: .6rem .9rem; }
    .th-navdrawer .dropdown-menu { border: 0; box-shadow: none; padding-left: .75rem; }
    .th-navdrawer .offcanvas-body > ul:last-child { border-top: 1px solid var(--th-border); margin-top: .6rem; padding-top: .6rem; }
}

/* Premium hero — Stripe-style deep navy with coral glow */
.th-hero {
    position: relative;
    background:
        radial-gradient(60% 80% at 85% 15%, rgba(124,107,255,.36), transparent 65%),
        radial-gradient(50% 70% at 15% 90%, rgba(99,91,255,.28), transparent 65%),
        linear-gradient(135deg, #1e1b4b 0%, #312e81 55%, #4338ca 100%);
    color: #fff;
    border-radius: 0 0 2rem 2rem;
    overflow: hidden;
}
.th-hero::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(2px 2px at 24% 38%, rgba(255,255,255,.22), transparent 60%),
        radial-gradient(1.5px 1.5px at 72% 64%, rgba(255,255,255,.15), transparent 60%),
        radial-gradient(1.5px 1.5px at 88% 28%, rgba(255,255,255,.18), transparent 60%);
    pointer-events: none;
}
.th-hero h1 { color: #fff; letter-spacing: -.03em; position: relative; }
.th-hero p.lead { color: rgba(255,255,255,.78); }
.th-hero > .container { position: relative; z-index: 1; }
.th-hero .badge.bg-white { background: rgba(255,255,255,.96) !important; box-shadow: 0 8px 24px -10px rgba(0,0,0,.35); }

/* Search */
.th-search { position: relative; }
.th-search .form-control { border-radius: 999px; }
.th-suggest {
    position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + .5rem);
    background: #fff; border: 1px solid var(--th-border); border-radius: 1rem;
    box-shadow: 0 20px 45px rgba(15,23,42,.15); overflow: hidden; display: none;
}
.th-suggest a { display: flex; gap: .75rem; padding: .65rem .9rem; color: var(--th-ink); align-items: center; }
.th-suggest a:hover { background: var(--th-soft); }
.th-suggest img { width: 46px; height: 46px; object-fit: cover; border-radius: .5rem; }

/* Premium event cards */
.th-card {
    background: #fff;
    border: 1px solid var(--th-border);
    border-radius: 1.25rem;
    overflow: hidden;
    transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s cubic-bezier(.4,0,.2,1), border-color .2s;
    height: 100%;
}
.th-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--th-shadow-lg);
    border-color: rgba(49,46,129,.25);
}
.th-card .th-card-img { aspect-ratio: 16/11; object-fit: cover; width: 100%; transition: transform .4s ease; }
.th-card:hover .th-card-img { transform: scale(1.04); }
.th-card .th-date-badge { background: var(--th-ink); color: #fff; border-radius: .65rem; padding: .4rem .6rem; line-height: 1; text-align: center; min-width: 46px; }
.th-card .th-date-badge .d { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }
.th-card .th-date-badge .m { font-size: .65rem; text-transform: uppercase; letter-spacing: .1em; opacity: .85; }

/* Premium pill */
.th-cat-pill {
    border: 1px solid var(--th-border);
    border-radius: 999px;
    padding: .55rem 1.1rem;
    color: var(--th-ink);
    font-weight: 600;
    font-size: .9rem;
    transition: all .2s cubic-bezier(.4,0,.2,1);
    display: inline-flex; gap: .5rem; align-items: center;
    background: #fff;
}
.th-cat-pill:hover {
    border-color: var(--th-primary);
    color: var(--th-primary);
    background: var(--th-primary-soft);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -8px rgba(49,46,129,.25);
}

/* Premium category tiles */
.th-cat-tile { border-radius: 1.25rem; overflow: hidden; position: relative; aspect-ratio: 4/3; color: #fff; display: flex; align-items: end; padding: 1.1rem; font-weight: 700; transition: transform .25s ease, box-shadow .25s ease; }
.th-cat-tile:hover { transform: translateY(-3px); box-shadow: var(--th-shadow-lg); }
.th-cat-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,0), rgba(10,10,10,.78)); }
.th-cat-tile span { position: relative; z-index: 2; font-size: 1.2rem; letter-spacing: -.01em; }

/* Premium badges */
.badge-super { background: linear-gradient(120deg, var(--th-gold), var(--th-gold-dark)); color: #fff; box-shadow: 0 4px 12px -2px rgba(160,127,58,.30); padding: .35rem .7rem; border-radius: .5rem; font-weight: 700; letter-spacing: .01em; }
.badge-instant { background: var(--th-success-soft); color: var(--th-success); border: 1px solid #6ee7b7; padding: .3rem .6rem; border-radius: .5rem; font-weight: 600; }
.badge-verified { background: var(--th-primary-soft); color: var(--th-primary); border: 1px solid #bcd1ea; padding: .3rem .6rem; border-radius: .5rem; font-weight: 600; }
.badge.bg-danger { background: var(--th-accent) !important; }
.badge.bg-success-subtle { background: var(--th-success-soft) !important; }
.badge.text-success { color: var(--th-success) !important; }
.badge.bg-primary { background: var(--th-primary) !important; }
.badge.bg-accent, .badge.bg-coral { background: var(--th-accent) !important; }

/* Listing rows (3rd-party marketplace) */
.th-listing {
    border: 1px solid var(--th-border);
    border-radius: 1rem;
    transition: border-color .15s, box-shadow .15s, transform .15s;
    background: #fff;
}
.th-listing:hover { border-color: var(--th-primary); box-shadow: 0 14px 36px rgba(79,70,229,.13); transform: translateY(-1px); }
.th-listing-seller {
    border-right: 1px solid var(--th-border);
    padding-right: 1rem;
    min-width: 170px;
}
@media (max-width: 767px) {
    .th-listing-seller { border-right: 0; border-bottom: 1px solid var(--th-border); padding-bottom: .75rem; padding-right: 0; }
}
.th-seller-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(135deg, var(--th-primary), var(--th-secondary));
    color: #fff; font-weight: 800; font-size: .85rem;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 6px 16px -4px rgba(79,70,229,.32);
    letter-spacing: .02em;
    object-fit: cover;        /* keep <img> avatars circular and uncropped */
}
.th-seller-avatar.is-super {
    background: linear-gradient(135deg, var(--th-gold), var(--th-gold-dark));
    box-shadow: 0 6px 16px -4px rgba(160,127,58,.40);
    position: relative;
}
.th-seller-avatar.is-super::after {
    content: '★'; position: absolute; bottom: -3px; right: -3px;
    width: 16px; height: 16px; background: #facc15; color: #78350f;
    border-radius: 50%; font-size: .65rem; display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
}

/* Seat map */
.th-seatmap { background: var(--th-soft); border-radius: 1rem; padding: 1rem; }
.th-seatmap svg { width: 100%; height: auto; }
.th-seatmap .sec { cursor: pointer; transition: opacity .15s, stroke-width .15s; stroke: #fff; stroke-width: 1.5; }
.th-seatmap .sec:hover { opacity: .85; stroke-width: 3; stroke: var(--th-ink); }
.th-seatmap .sec.active { stroke: var(--th-ink); stroke-width: 3; }
.th-seatmap .stage { fill: var(--th-ink); }
.th-seatmap .stage-label { fill: #fff; font-size: 13px; font-weight: 700; }

/* Dashboard shell */
.th-sidebar { background: var(--th-ink); color: #cbd5e1; min-height: 100%; }
.th-sidebar a { color: #cbd5e1; border-radius: .6rem; padding: .6rem .85rem; display: flex; gap: .65rem; align-items: center; font-weight: 500; }
.th-sidebar a:hover { background: rgba(255,255,255,.08); color: #fff; }
.th-sidebar a.active { background: var(--th-primary); color: #fff; box-shadow: 0 6px 16px -6px rgba(79,70,229,.6); }

/* Desktop: keep the nav in view while the content scrolls */
@media (min-width: 992px) {
    .th-sidebar-sticky { position: sticky; top: 78px; }
}

/* Mobile dashboard header (Menu button + page title) */
.th-dash-bar { display: flex; align-items: center; gap: .75rem; padding-bottom: .85rem; border-bottom: 1px solid var(--th-border); }
.th-dash-bar .btn { border-radius: .6rem; }
.th-dash-title { font-size: 1.2rem; font-weight: 800; color: var(--th-ink); letter-spacing: -.02em; }

/* Slide-in dashboard nav drawer (mobile) — reuses the .th-sidebar look */
.th-dash-offcanvas { width: 290px; max-width: 84vw; }
.th-dash-offcanvas .offcanvas-body { overflow-y: auto; }

.th-stat { border: 1px solid var(--th-border); border-radius: 1rem; padding: 1.1rem 1.25rem; }
.th-stat .v { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.th-stat .l { color: var(--th-muted); font-size: .85rem; }

/* Tighter stat cards on phones so KPI rows don't overflow */
@media (max-width: 575.98px) {
    .th-stat { padding: .8rem .9rem; border-radius: .85rem; }
    .th-stat .v { font-size: 1.25rem; }
    .th-stat .l { font-size: .78rem; }
}

/* Premium footer */
.th-footer {
    background: linear-gradient(180deg, var(--th-ink) 0%, #050505 100%);
    color: #a1a1aa;
    margin-top: 4rem;
    position: relative;
}
.th-footer::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(194,136,42,.4), transparent);
}
.th-footer h6 { color: #fff; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 1rem; }
.th-footer a { color: #d4d4d8; font-size: .9rem; transition: color .15s ease; }
.th-footer a:hover { color: var(--th-accent); }
.th-footer .th-logo { color: #fff; }
.th-footer .th-logo .dot { color: var(--th-accent); }
.th-footer hr { opacity: .15; }

.th-trust i { color: var(--th-accent-dark); }

.object-cover { object-fit: cover; }
.cursor-pointer { cursor: pointer; }

/* Premium form inputs */
.form-control, .form-select {
    border-radius: .65rem;
    border-color: var(--th-border);
    padding: .55rem .8rem;
    font-size: .95rem;
    transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-select:focus {
    border-color: var(--th-primary);
    box-shadow: 0 0 0 .2rem rgba(49,46,129,.12);
}
.form-control-lg { padding: .8rem 1rem; font-size: 1rem; }

/* Premium accordion */
.accordion-item { border-color: var(--th-border); border-radius: .85rem !important; margin-bottom: .5rem; overflow: hidden; }
.accordion-button { font-weight: 600; padding: 1.1rem 1.25rem; }
.accordion-button:not(.collapsed) { color: var(--th-primary); background: var(--th-primary-soft); }
.accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(49,46,129,.10); border-color: var(--th-primary); }

/* Premium tables */
.table > :not(caption) > * > * { padding: 1rem .85rem; }
.table-light { --bs-table-bg: var(--th-soft-2); }

/* Smooth section dividers */
.border, .rounded-4 { border-color: var(--th-border) !important; }
.rounded-4 { border-radius: 1.25rem !important; }
.rounded-3 { border-radius: .85rem !important; }

/* Better text colours */
.text-muted { color: var(--th-muted) !important; }
.text-success { color: var(--th-success) !important; }

/* Marketing page cards — subtle lift on hover */
.hover-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.hover-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15,23,42,.10); border-color: var(--th-primary) !important; }

/* Interactive stadium bowl */
.th-bowl { width: 100%; height: auto; }
.th-bowl .sec {
    cursor: pointer;
    transform-box: fill-box; transform-origin: center;
    transition: fill-opacity .12s, stroke-width .12s, transform .22s cubic-bezier(.34,1.56,.64,1), filter .22s ease;
}
.th-bowl .sec:hover {
    fill-opacity: 1 !important; stroke: #0f172a; stroke-width: 2.5;
    transform: scale(1.05);
    filter: brightness(1.12) drop-shadow(0 6px 14px rgba(10,37,64,.35));
}
.th-bowl .sec.active {
    stroke: #0f172a; stroke-width: 3; fill-opacity: 1 !important;
    animation: th-sec-pulse 1.8s ease-in-out infinite;
}
@keyframes th-sec-pulse {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(79,70,229,.55)); }
    50%      { filter: drop-shadow(0 0 14px rgba(79,70,229,.95)) brightness(1.08); }
}

/* ---- Stadium entrance: the bowl "builds itself" section by section ----
   app.js adds .reveal to [data-reveal] containers, then .in on scroll into
   view. Without JS (or with reduced motion) nothing is ever hidden.       */
@keyframes th-sec-build { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }
@keyframes th-pitch-in  { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
[data-stadium].reveal .th-bowl .sec,
[data-stadium].reveal .th-bowl text,
[data-stadium].reveal .th-bowl g { opacity: 0; }
[data-stadium].reveal.in .th-bowl g {
    transform-box: fill-box; transform-origin: center;
    animation: th-pitch-in .8s cubic-bezier(.22,.61,.36,1) both .08s;
}
[data-stadium].reveal.in .th-bowl .sec {
    animation: th-sec-build .5s cubic-bezier(.34,1.56,.64,1) both;
    animation-delay: calc(var(--i, 0) * 16ms + .3s);
}
[data-stadium].reveal.in .th-bowl text {
    animation: th-fade-in .45s ease both;
    animation-delay: calc(var(--i, 0) * 16ms + .55s);
}

/* Concert / theater zone map gets the same cascade + lively hover */
[data-seatmap] .sec { transform-box: fill-box; transform-origin: center; transition: transform .2s cubic-bezier(.34,1.56,.64,1), filter .2s ease, opacity .15s, stroke-width .15s; }
[data-seatmap] .sec:hover { transform: scale(1.07); filter: brightness(1.12) drop-shadow(0 5px 10px rgba(15,23,42,.3)); }
[data-seatmap] .stage { filter: drop-shadow(0 0 0 rgba(79,70,229,0)); }
[data-seatmap].reveal .sec, [data-seatmap].reveal .stage, [data-seatmap].reveal text { opacity: 0; }
[data-seatmap].reveal.in .stage { animation: th-zoom-in .5s ease both .05s; }
[data-seatmap].reveal.in .sec { animation: th-sec-build .45s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(var(--i, 0) * 70ms + .2s); }
[data-seatmap].reveal.in text { animation: th-fade-in .4s ease both; animation-delay: calc(var(--i, 0) * 70ms + .35s); }

/* 3D "view from your seat" — floodlit night-stadium backdrop */
.sv-stage {
    position: relative; aspect-ratio: 560/340; isolation: isolate;
    background:
        radial-gradient(90% 70% at 20% 0%, rgba(99,91,255,.28) 0%, transparent 55%),
        radial-gradient(90% 70% at 80% 0%, rgba(14,165,233,.22) 0%, transparent 55%),
        radial-gradient(120% 100% at 50% 100%, #16233c 0%, #0b1220 55%, #070c16 100%);
    box-shadow: inset 0 0 0 1px rgba(148,163,184,.14), 0 26px 60px -34px rgba(2,6,23,.95);
}
/* Cinematic depth: a soft top light + a bottom vignette layered over the canvas. */
.sv-stage::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 4; border-radius: inherit;
    background:
        radial-gradient(120% 80% at 50% -12%, rgba(255,255,255,.10), transparent 42%),
        radial-gradient(140% 130% at 50% 122%, rgba(3,7,18,.60), transparent 55%);
}
.sv-view, .sv-view svg, .sv-view canvas { width: 100%; height: 100%; display: block; }
/* Small glass "Interactive 360°" tag on the inline preview. */
.sv-tag {
    position: absolute; top: .6rem; left: .6rem; z-index: 5;
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .65rem; border-radius: 999px; font-size: .72rem; font-weight: 700;
    letter-spacing: .3px; color: #e2e8f0;
    background: rgba(15,23,42,.55); border: 1px solid rgba(255,255,255,.14);
    -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
}
.sv-tag i { color: var(--th-accent, #7c3aed); }
.sv-hint {
    position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; gap: .5rem;
    align-items: center; justify-content: center; text-align: center; color: #cbd5e1;
    padding: 1rem; font-weight: 500;
}
/* Branded loader while the WebGL engine streams in */
.sv-loader {
    width: 100%; height: 100%; display: flex; flex-direction: column; gap: .95rem;
    align-items: center; justify-content: center; color: #cbd5e1;
    background: radial-gradient(120% 100% at 50% 120%, #16233c, #0b1220 60%, #070d18);
}
.sv-loader-ring {
    width: 46px; height: 46px; border-radius: 50%;
    border: 3px solid rgba(148,163,184,.25); border-top-color: var(--th-accent, #7c3aed);
    box-shadow: 0 0 26px -6px rgba(124,58,237,.65); animation: th-spin .8s linear infinite;
}
.sv-loader-txt { font-size: .84rem; font-weight: 600; letter-spacing: .3px; }
@keyframes th-spin { to { transform: rotate(360deg); } }
.sv-hint i {
    font-size: 1.9rem; color: #fff;
    width: 58px; height: 58px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: linear-gradient(135deg, var(--th-secondary), var(--th-primary));
    box-shadow: 0 10px 30px -8px rgba(99,91,255,.65);
    animation: th-hint-float 2.8s ease-in-out infinite;
}
@keyframes th-hint-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.sv-svg { display: block; }

/* Immersive "Your seats" modal */
.sm-content {
    background: radial-gradient(120% 85% at 50% -5%, #16233c 0%, #0f172a 45%, #0b1120 100%);
    box-shadow: 0 40px 90px -30px rgba(0,0,0,.75);
}
.sm-stage {
    position: relative; aspect-ratio: 16 / 9; min-height: 320px;
    background: radial-gradient(120% 100% at 50% 120%, #16233c, #0b1220 60%, #070d18);
    box-shadow: inset 0 0 0 1px rgba(148,163,184,.12);
}
/* subtle top light + bottom vignette above the canvas for depth */
.sm-stage::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3; border-radius: inherit;
    background:
        radial-gradient(120% 75% at 50% -14%, rgba(255,255,255,.09), transparent 44%),
        radial-gradient(140% 130% at 50% 124%, rgba(3,7,18,.55), transparent 55%);
}
#sm-slide-3d, #sm-slide-map { position: absolute; inset: 0; }
.sm-3d-view { width: 100%; height: 100%; cursor: grab; touch-action: none; }
.sm-3d-view.grabbing { cursor: grabbing; }
.sm-3d-view svg, .sm-map svg, .sm-3d-view canvas { width: 100%; height: 100%; display: block; }
.sm-badge, .sm-counter, .sm-arrow {
    -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
    border: 1px solid rgba(255,255,255,.14);
}
.sm-badge { position: absolute; top: .65rem; left: .65rem; z-index: 4; background: rgba(15,23,42,.5); color: #fff; padding: .34rem .75rem; border-radius: 999px; font-size: .78rem; font-weight: 600; pointer-events: none; }
.sm-counter { position: absolute; top: .65rem; right: .65rem; z-index: 4; background: rgba(15,23,42,.5); color: #fff; padding: .24rem .58rem; border-radius: .6rem; font-size: .78rem; font-weight: 600; }
.sm-arrow { position: absolute; top: 50%; z-index: 4; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(15,23,42,.5); color: #fff; display: flex; align-items: center; justify-content: center; transition: background-color .15s ease, transform .15s ease; }
.sm-arrow:hover { background: rgba(15,23,42,.82); transform: translateY(-50%) scale(1.08); }
.sm-arrow.start { left: .65rem; } .sm-arrow.end { right: .65rem; }
.sm-thumb { border: 2px solid transparent; border-radius: .7rem; background: #1e293b; color: #cbd5e1; padding: .5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; font-size: .72rem; aspect-ratio: 1; transition: border-color .15s ease, transform .15s ease; }
.sm-thumb:hover { transform: translateY(-2px); }
.sm-thumb.active { border-color: #6366f1; color: #fff; }
.sm-thumb i { font-size: 1.35rem; }

/* Row picker (inside the immersive seat modal) */
.sm-rowpicker { animation: th-fade-in .35s ease both; }
.sm-rows {
    display: flex; gap: .4rem; overflow-x: auto; padding: .15rem .1rem .5rem;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.3) transparent;
    scroll-behavior: smooth;
}
.sm-rows::-webkit-scrollbar { height: 6px; }
.sm-rows::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 999px; }
.sm-row {
    flex: 0 0 auto; min-width: 40px; height: 40px; padding: 0 .35rem;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.05); color: #cbd5e1;
    border-radius: .65rem; font-weight: 700; font-size: .85rem;
    transition: transform .14s ease, background-color .14s ease, box-shadow .14s ease, color .14s ease;
}
.sm-row:hover { background: rgba(255,255,255,.14); color: #fff; transform: translateY(-2px); }
.sm-row.active {
    background: linear-gradient(135deg, var(--th-accent), var(--th-accent-dark));
    border-color: transparent; color: #fff;
    box-shadow: 0 8px 18px -5px rgba(124,58,237,.6);
    transform: translateY(-2px);
}

/* =========================================================================
   MODERN MOTION LAYER — site-wide animations & micro-interactions
   (purely additive; gracefully disabled under prefers-reduced-motion)
   ========================================================================= */
@keyframes th-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes th-fade-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes th-fade-down { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes th-zoom-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes th-float { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(2%, -3%) scale(1.06); } }
@keyframes th-sheen { from { transform: translateX(-130%) skewX(-18deg); } to { transform: translateX(230%) skewX(-18deg); } }
@keyframes th-gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes th-pop-badge { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes th-spin { to { transform: rotate(360deg); } }

/* Entrance on page load for the navbar + hero copy */
.th-navbar { animation: th-fade-down .5s ease both; transition: box-shadow .25s ease, background-color .25s ease; }
.th-navbar.is-stuck { box-shadow: 0 8px 30px -12px rgba(30,27,75,.28); background: rgba(255,255,255,.9); }
.th-hero h1 { animation: th-fade-up .6s .05s ease both; }
.th-hero p.lead { animation: th-fade-up .6s .16s ease both; }
.th-hero form, .th-hero .th-search { animation: th-fade-up .6s .26s ease both; }
.th-hero .mt-3 { animation: th-fade-up .6s .36s ease both; }

/* Living hero — slow gradient drift + floating coral/violet glow */
.th-hero {
    background-size: 160% 160%;
    animation: th-gradient 18s ease infinite;
}
.th-hero::after {
    content: '';
    position: absolute; inset: -20%;
    background:
        radial-gradient(40% 40% at 80% 20%, rgba(124,58,237,.26), transparent 70%),
        radial-gradient(38% 38% at 18% 85%, rgba(99,91,255,.22), transparent 70%);
    pointer-events: none;
    animation: th-float 14s ease-in-out infinite;
    z-index: 0;
}

/* Scroll-reveal — JS adds .reveal then .in when the element enters the viewport */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
.reveal-zoom { transform: scale(.95); }
.reveal-zoom.in { transform: none; }
/* Stagger helpers for grids/rows */
.reveal.d-1 { transition-delay: .06s; }
.reveal.d-2 { transition-delay: .12s; }
.reveal.d-3 { transition-delay: .18s; }
.reveal.d-4 { transition-delay: .24s; }
.reveal.d-5 { transition-delay: .3s; }

/* Buttons: subtle lift + animated sheen sweep on hover */
.btn-primary, .btn-accent, .btn-dark {
    position: relative; overflow: hidden;
}
.btn-primary::after, .btn-accent::after, .btn-dark::after {
    content: ''; position: absolute; top: 0; left: 0; width: 45%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    transform: translateX(-130%) skewX(-18deg); pointer-events: none;
}
.btn-primary:hover::after, .btn-accent:hover::after, .btn-dark:hover::after { animation: th-sheen .8s ease; }
.btn-primary:hover, .btn-accent:hover, .btn-dark:hover { transform: translateY(-1px); }

/* Gradient accent CTA (opt-in) */
.btn-gradient {
    --bs-btn-color: #fff; --bs-btn-hover-color: #fff;
    color: #fff; border: 0;
    background: linear-gradient(120deg, var(--th-secondary), var(--th-accent));
    background-size: 180% 180%;
    transition: background-position .4s ease, box-shadow .2s ease, transform .12s ease;
}
.btn-gradient:hover { color: #fff; background-position: 100% 0; box-shadow: 0 12px 26px -8px rgba(99,91,255,.5); transform: translateY(-1px); }

/* Gradient text utility */
.text-gradient {
    background: linear-gradient(120deg, var(--th-secondary), var(--th-accent) 70%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* Animated underline for nav links */
.navbar-nav .nav-link { position: relative; }
.navbar-nav .nav-link::after {
    content: ''; position: absolute; left: .5rem; right: .5rem; bottom: .2rem; height: 2px;
    background: linear-gradient(90deg, var(--th-accent), var(--th-secondary));
    border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.navbar-nav .nav-link:hover::after { transform: scaleX(1); }
.navbar-nav .nav-link.dropdown-toggle::after { display: none; }

/* Cards: smoother media zoom + sheen on image */
.th-card .th-card-img { transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.th-card:hover .th-card-img { transform: scale(1.06); }

/* Category tile shine sweep on hover */
.th-cat-tile::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.28) 50%, transparent 60%);
    transform: translateX(-120%); transition: transform .6s ease;
}
.th-cat-tile:hover::before { transform: translateX(120%); }
.th-cat-tile span { transition: transform .25s ease; }
.th-cat-tile:hover span { transform: translateY(-3px); }

/* Badge pop-in */
.badge-super, .badge-instant, .badge-verified { animation: th-pop-badge .35s cubic-bezier(.34,1.56,.64,1) both; }

/* Listing rows lift a touch more crisply */
.th-listing { will-change: transform; }

/* Stat tiles count-up feel */
.th-stat { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.th-stat:hover { transform: translateY(-3px); box-shadow: var(--th-shadow-md); border-color: var(--th-primary); }

/* Loading spinner accent */
.spinner-border { color: var(--th-secondary); }

/* Honour user motion preferences — disable all the flourish */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    .reveal { opacity: 1 !important; transform: none !important; }
    .th-hero { animation: none; }
    .th-hero::after { animation: none; }
}