/* events.css */

/**
 * Events CSS - Rave Essentials
 *
 * Follows patterns from blog.css
 * 1. General Layout
 * 2. Filters
 * 3. Event Cards
 * 4. Pagination
 * 5. Empty State & Attribution
 * 6. Responsive
 */

/* 1. General Layout */
.events-container {
    padding-top: 80px;
    padding-bottom: 3rem;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

.events-title {
    font-size: 3rem;
    text-shadow: 0 0 10px var(--neon-pink, #ff00ff), 0 0 20px var(--neon-cyan, #00ffff), 0 0 30px var(--neon-pink, #ff00ff);
    animation: events-neon-glow 1.5s ease-in-out infinite alternate;
    font-family: 'Orbitron', sans-serif;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.events-description {
    color: #fff;
    font-size: 1.3rem;
    text-align: center;
    font-family: 'Arial', sans-serif;
    max-width: 100%;
    margin: 0 auto;
}

@keyframes events-neon-glow {
    from {
        text-shadow: 0 0 10px #ff00ff, 0 0 20px #00ffff, 0 0 30px #ff00ff;
    }
    to {
        text-shadow: 0 0 15px #ff00ff, 0 0 25px #00ffff, 0 0 35px #ff00ff;
    }
}

/* 2. Filters */
.events-filters {
    background: rgba(20, 0, 40, 0.7);
    border: 1px solid rgba(255, 0, 255, 0.3);
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
}

.events-filters .form-label {
    color: #fff;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.4rem;
}

.events-filters .form-select {
    background-color: rgba(20, 0, 30, 0.8);
    border: 1px solid rgba(255, 0, 255, 0.3);
    color: #fff;
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    font-family: 'Arial', sans-serif;
}

.events-filters .form-control {
    background-color: rgba(20, 0, 30, 0.8);
    border: 1px solid rgba(255, 0, 255, 0.3);
    color: #fff;
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    font-family: 'Arial', sans-serif;
}

.events-filters .form-control::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.events-filters .form-control:focus {
    border-color: #ff00ff;
    box-shadow: 0 0 8px rgba(255, 0, 255, 0.5);
    outline: none;
    background-color: rgba(20, 0, 30, 0.8);
    color: #fff;
}

.events-filters .form-select:focus {
    border-color: #ff00ff;
    box-shadow: 0 0 8px rgba(255, 0, 255, 0.5);
    outline: none;
}

.events-filters .form-select option {
    background-color: #1a0032;
    color: #fff;
}

.btn-filter {
    background: linear-gradient(45deg, #ff00ff, #9900ff);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.55rem 1.8rem;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.4);
    height: calc(1.5em + 1.2rem + 2px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.btn-filter:hover,
.btn-filter:focus {
    background: linear-gradient(45deg, #ff33ff, #bb33ff);
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.7);
    color: #fff;
    outline: none;
    transform: translateY(-1px);
}

/* 3. Event Cards */
.events-grid .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.events-grid .row > [class*="col"] {
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
}

.events-grid .event-card {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
}

.event-thumbnail {
    height: 200px;
    width: 100%;
    object-fit: cover;
    flex-shrink: 0;
}

.event-thumbnail-placeholder {
    height: 200px;
    width: 100%;
    background: linear-gradient(135deg, rgba(50, 0, 100, 0.6), rgba(100, 0, 50, 0.6));
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.4);
    font-family: 'Arial', sans-serif;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.event-card-body {
    padding: 1.25rem;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.event-venue,
.event-date {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.85rem;
    font-family: 'Arial', sans-serif;
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.event-venue svg,
.event-date svg {
    flex-shrink: 0;
    color: #ff00ff;
}

.btn-tickets {
    position: relative;
    z-index: 2;
    background: linear-gradient(45deg, #ff00ff, #cc00cc);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.6rem 1.2rem;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    justify-content: center;
    margin-top: auto;
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.3);
}

.btn-tickets:hover,
.btn-tickets:focus {
    background: linear-gradient(45deg, #ff33ff, #dd33dd);
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.6);
    color: #fff;
    transform: translateY(-1px);
    outline: none;
    text-decoration: none;
}

.btn-tickets svg {
    flex-shrink: 0;
}

/* 4. Pagination */
.events-pagination .pagination {
    gap: 0.3rem;
}

.events-pagination .page-link {
    background: rgba(20, 0, 30, 0.6);
    border: 1px solid rgba(255, 0, 255, 0.3);
    color: #fff;
    font-family: 'Arial', sans-serif;
    transition: all 0.3s ease;
    border-radius: 8px;
}

.events-pagination .page-link:hover,
.events-pagination .page-link:focus {
    background: rgba(255, 0, 255, 0.2);
    border-color: #ff00ff;
    color: #fff;
    box-shadow: 0 0 8px rgba(255, 0, 255, 0.4);
    outline: none;
}

.events-pagination .page-item.active .page-link {
    background: linear-gradient(45deg, #ff00ff, #9900ff);
    border-color: #ff00ff;
    color: #fff;
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
}

/* 5. Empty State & Attribution */
.events-empty .card {
    background: rgba(20, 0, 30, 0.6);
    border: 1px solid rgba(255, 0, 255, 0.3);
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.5);
}

.events-empty h3 {
    font-family: 'Orbitron', sans-serif;
    color: #fff;
    text-shadow: 0 0 10px #ff00ff, 0 0 15px #00ffff;
    animation: events-neon-glow 1.5s ease-in-out infinite alternate;
}

.events-empty p {
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Arial', sans-serif;
}

.events-attribution {
    padding: 1rem 0;
}

.events-attribution p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    font-family: 'Arial', sans-serif;
}

.events-attribution a {
    color: #ff00ff;
    text-decoration: none;
    transition: all 0.3s ease;
}

.events-attribution a:hover,
.events-attribution a:focus {
    color: #00ffff;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.7);
    outline: none;
}

/* Promoter recruitment CTA — shown on affiliate/scraped event pages to
   funnel borrowed traffic into first-party listings. Ghost button so it
   reads as secondary to the primary Get Tickets action. */
.promoter-cta {
    max-width: 540px;
    margin: 2.5rem auto 0;
    padding: 1.6rem 1.25rem;
    text-align: center;
    background: rgba(255, 0, 255, 0.045);
    border: 1px solid rgba(255, 0, 255, 0.28);
    border-radius: 14px;
}

.promoter-cta__label {
    color: #fff;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.05rem;
    letter-spacing: 0.5px;
    margin: 0 0 0.4rem;
}

.promoter-cta__sub {
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Arial', sans-serif;
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0 auto 1.2rem;
    max-width: 42ch;
}

.promoter-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.75rem 1.6rem;
    background: transparent;
    color: #ff00ff;
    border: 1px solid #ff00ff;
    border-radius: 8px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.promoter-cta__btn:hover,
.promoter-cta__btn:focus {
    background: linear-gradient(45deg, #ff00ff, #cc00cc);
    color: #fff;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.5);
    transform: translateY(-1px);
    outline: none;
    text-decoration: none;
}

.event-title a.stretched-link::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

/* Event count */
.events-count {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    font-family: 'Arial', sans-serif;
}

/* 6. Event Detail Page */
.event-detail-container {
    padding-top: 80px;
    padding-bottom: 3rem;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* Breadcrumbs (matching blog.css pattern) */
.event-detail-container .breadcrumb {
    background-color: rgba(20, 0, 40, 0.5);
    padding: 1.2rem 0.5rem;
    border-radius: 10px;
    margin-bottom: 2.5rem;
    border: 1px solid rgba(255, 0, 255, 0.2);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
}

.event-detail-container .breadcrumb-item {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    font-weight: 500;
    font-family: 'Arial', sans-serif;
}

.event-detail-container .breadcrumb-item.active {
    color: #00ffff;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.7);
}

.event-detail-container .breadcrumb-item a {
    color: #ff80ff;
    text-decoration: none;
    text-shadow: 0 0 5px rgba(255, 0, 255, 0.3);
    transition: all 0.3s ease;
}

.event-detail-container .breadcrumb-item a:hover,
.event-detail-container .breadcrumb-item a:focus {
    color: #ff00ff;
    text-shadow: 0 0 8px rgba(255, 0, 255, 0.7);
    outline: none;
}

.event-detail-container .breadcrumb-item + .breadcrumb-item::before {
    color: #ff00ff;
    text-shadow: 0 0 5px rgba(255, 0, 255, 0.7);
    opacity: 1;
    font-weight: bold;
}

/* Event Detail Header */
.event-detail-header {
    text-align: center;
    padding: 2.5rem 0.5rem;
    margin-bottom: 2rem;
    background: rgba(20, 0, 30, 0.6);
    border-radius: 15px;
    box-shadow: 0 0 30px rgba(255, 0, 255, 0.5);
    border: 1px solid rgba(255, 0, 255, 0.3);
    position: relative;
    overflow: hidden;
}

.event-detail-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(255, 0, 255, 0.2) 0%, transparent 70%);
    z-index: 0;
}

.event-detail-header > * {
    position: relative;
    z-index: 1;
}

.event-detail-title {
    font-size: 2.5rem;
    margin: 1rem 0;
    text-shadow: 0 0 10px #ff00ff, 0 0 20px #00ffff, 0 0 30px #ff00ff;
    animation: events-neon-glow 1.5s ease-in-out infinite alternate;
    font-family: 'Orbitron', sans-serif;
    word-wrap: break-word;
    overflow-wrap: break-word;
    letter-spacing: 2px;
    line-height: 1.2;
}

.event-detail-meta {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Arial', sans-serif;
}

.event-detail-meta .separator {
    margin: 0 0.5rem;
    color: #ff00ff;
    text-shadow: 0 0 5px rgba(255, 0, 255, 0.7);
    font-weight: bold;
}

.event-detail-image-container {
    margin: 0 auto 2rem;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.5);
    border: 2px solid rgba(255, 0, 255, 0.3);
}

.event-detail-image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    display: block;
    background: var(--rave-dark, #1a0033);
}

/* Event Detail Image Placeholder (no image available) */
.event-detail-image-placeholder {
    margin: 0 auto 2rem;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.3);
    border: 2px solid rgba(255, 0, 255, 0.2);
    background: linear-gradient(135deg,
        rgba(20, 0, 40, 0.9) 0%,
        rgba(60, 0, 80, 0.8) 25%,
        rgba(20, 0, 50, 0.9) 50%,
        rgba(80, 0, 100, 0.7) 75%,
        rgba(20, 0, 40, 0.9) 100%);
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.event-detail-image-placeholder .placeholder-icon {
    color: rgba(255, 0, 255, 0.5);
    text-align: center;
}

/* Ticket panel empty states (Coming Soon / Sales Ended / Sold Out) */
.ticket-empty-state {
    text-align: center;
    padding: 1rem 0;
}

.ticket-empty-state__icon {
    color: #ff00ff;
    margin-bottom: 0.75rem;
    opacity: 0.8;
}

.ticket-empty-state__headline {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #ff00ff;
    text-shadow: 0 0 8px rgba(255, 0, 255, 0.5);
    margin-bottom: 0.5rem;
}

.ticket-empty-state--ended .ticket-empty-state__icon,
.ticket-empty-state--ended .ticket-empty-state__headline {
    color: #00ffff;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.45);
}

/* A sprite icon takes no text-shadow: the same glow as a drop-shadow, whose
   blur is a standard deviation, half the text-shadow's radius. */
.ticket-empty-state--ended .ticket-empty-state__icon .icon {
    filter: drop-shadow(0 0 4px rgba(0, 255, 255, 0.45));
}

.ticket-empty-state__sub {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 1rem;
}

/* The 410 page for a cancelled event. Its body copy is the body font: the page
   would otherwise inherit Orbitron, and the headline and buttons set Orbitron
   themselves. */
.event-cancelled-page {
    font-family: var(--font-body);
}

/* Live countdown chip on the coming-soon panel. Cyan reads as "imminent /
   live" (matching the --ended cyan and the SEO live indicators). min-height
   reserves vertical space so the 60s JS textContent tick can't shift layout. */
.ticket-empty-state__countdown-chip {
    display: inline-block;
    min-height: 1.6rem;
    margin: 0 auto 0.75rem;
    padding: 0.3rem 0.85rem;
    border: 1px solid var(--rave-cyan-glow-soft);
    border-radius: 999px;
    background: rgba(0, 255, 255, 0.08);
    color: var(--rave-secondary);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-shadow: 0 0 6px var(--rave-cyan-glow-soft);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.12);
}

/* Sold-out headline glitch — subtle, runs once on load + on intersection. */
.ticket-empty-state__headline--glitch {
    position: relative;
    color: #ff5252;
    text-shadow: 0 0 8px rgba(255, 82, 82, 0.55);
    animation: ticket-empty-glitch 4s steps(1) infinite;
}

.ticket-empty-state__headline--glitch::before,
.ticket-empty-state__headline--glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    pointer-events: none;
}

.ticket-empty-state__headline--glitch::before {
    color: #ff00ff;
    clip-path: inset(0 0 60% 0);
    transform: translate(-1px, 0);
    opacity: 0.7;
}

.ticket-empty-state__headline--glitch::after {
    color: #00ffff;
    clip-path: inset(55% 0 0 0);
    transform: translate(1px, 0);
    opacity: 0.5;
}

@keyframes ticket-empty-glitch {
    0%, 92%, 100% { transform: translate(0, 0); }
    93% { transform: translate(-1px, 0); }
    95% { transform: translate(1px, 0); }
    97% { transform: translate(-1px, 0); }
    99% { transform: translate(0, 0); }
}

/* Sales-ended headline — scan-line sweep on load + slow flicker.
   Past tense state, so the motion is muted compared to the sold-out glitch.
   Headline size matches the other empty-state panels for hierarchy parity. */
.ticket-empty-state__headline--scanline {
    position: relative;
    overflow: hidden;
    color: var(--rave-secondary);
    text-shadow: 0 0 10px var(--rave-cyan-glow-medium);
    animation: ticket-empty-flicker 6s ease-in-out infinite;
}

.ticket-empty-state__headline--scanline::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent 45%,
        var(--rave-cyan-glow-soft) 50%,
        transparent 55%
    );
    animation: ticket-empty-scanline 1.2s ease-out 1;
    pointer-events: none;
}

@keyframes ticket-empty-flicker {
    0%, 100% { opacity: 0.88; }
    50% { opacity: 1; }
}

@keyframes ticket-empty-scanline {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

.ticket-empty-state__tertiary {
    display: inline-block;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: rgba(0, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s ease;
}

.ticket-empty-state__tertiary:hover {
    color: var(--rave-primary);
}

.ticket-empty-state__tier-list-label {
    margin: var(--spacing-lg) 0 calc(-1 * var(--spacing-sm));
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    text-align: left;
}

@media (prefers-reduced-motion: reduce) {
    .ticket-empty-state__headline--glitch,
    .ticket-empty-state__headline--glitch::before,
    .ticket-empty-state__headline--glitch::after,
    .ticket-empty-state__headline--scanline,
    .ticket-empty-state__headline--scanline::after {
        animation: none;
    }
    /* Existing infinite-loop neon-glow animations also pause for users who prefer reduced motion. */
    .events-title,
    .events-empty h3,
    .event-detail-title {
        animation: none;
    }
}

/* Tier list shown inside the three empty-state hero panels.
   Per-row pill is derived from `tt.public_status` in the view; never
   echoes raw `sale_start` (the hero headline already names the next
   sale date, and past dates leak when a tier flips to sales-ended). */
.ticket-empty-state__tier-list {
    list-style: none;
    margin: var(--spacing-lg) 0 0;
    padding: var(--spacing-md) 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    font-family: var(--font-body);
    text-align: left;
}

/* In the narrow sidebar empty-state, badge text ("ON SALE SOON", "SALES ENDED")
   steals too much width from the name column. Stack: name+price on row 1, badge on row 2. */
.ticket-empty-state__tier-list .ticket-tier {
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "name price"
        "status status";
    row-gap: 0.35rem;
}
.ticket-empty-state__tier-list .ticket-tier__name  { grid-area: name; }
.ticket-empty-state__tier-list .ticket-tier__price { grid-area: price; text-align: right; }
.ticket-empty-state__tier-list .ticket-tier__status { grid-area: status; justify-self: start; }

.ticket-tier {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 0.75rem;
    padding: var(--spacing-sm) 0.75rem;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.85rem;
}

.ticket-tier__name {
    color: #ffffff;
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
}

.ticket-tier__price {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ticket-tier__status {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    padding: var(--spacing-xs) 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1;
}

.ticket-tier__status--on_sale {
    background: rgba(0, 230, 118, 0.12);
    color: #00e676;
    border: 1px solid rgba(0, 230, 118, 0.35);
}

.ticket-tier__status--pre_sale {
    /* Lighter magenta keeps text contrast >=4.5:1 (WCAG AA) on the
       translucent magenta background; --rave-primary (#ff00ff) would
       drop the ratio below 4:1 for this small pill text. */
    background: rgba(255, 0, 255, 0.12);
    color: #ff5cf7;
    border: 1px solid var(--rave-glow-soft);
}

.ticket-tier__status--sold_out {
    background: rgba(255, 82, 82, 0.12);
    color: #ff7d7d;
    border: 1px solid rgba(255, 82, 82, 0.35);
}

.ticket-tier__status--sales_ended {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.ticket-tier--pre_sale .ticket-tier__name,
.ticket-tier--sold_out .ticket-tier__name,
.ticket-tier--sales_ended .ticket-tier__name {
    color: rgba(255, 255, 255, 0.7);
}

.ticket-tier--pre_sale .ticket-tier__price,
.ticket-tier--sold_out .ticket-tier__price,
.ticket-tier--sales_ended .ticket-tier__price {
    color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 480px) {
    .ticket-tier {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name price"
            "status status";
        row-gap: var(--spacing-sm);
    }
    .ticket-tier__name { grid-area: name; }
    .ticket-tier__price { grid-area: price; text-align: right; }
    .ticket-tier__status { grid-area: status; justify-self: start; }
}

/* Event Detail Info */
.event-detail-info {
    width: 100%;
}

.event-detail-description {
    background: rgba(20, 0, 30, 0.6);
    border: 1px solid rgba(255, 0, 255, 0.3);
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.5);
    position: relative;
    overflow: hidden;
}

.event-detail-description::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(255, 0, 255, 0.2) 0%, transparent 70%);
    z-index: 0;
}

.event-detail-description > * {
    position: relative;
    z-index: 1;
}

.event-detail-description h2 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    font-family: 'Orbitron', sans-serif;
    color: #fff;
    text-shadow: 0 0 8px rgba(255, 0, 255, 0.7);
    position: relative;
    padding-bottom: 0.5rem;
}

.event-detail-description h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 80px;
    background: linear-gradient(to right, #ff00ff, transparent);
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.7);
}

.event-description-text {
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.8;
    font-size: 1.1rem;
    font-family: 'Arial', sans-serif;
}

/* Event Detail Sidebar */
.event-detail-sidebar {
    background: rgba(20, 0, 30, 0.6);
    border: 1px solid rgba(255, 0, 255, 0.3);
    border-radius: 15px;
    padding: 1.5rem;
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.5);
    position: relative;
    overflow: hidden;
}

.event-detail-sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(255, 0, 255, 0.15) 0%, transparent 70%);
    z-index: 0;
}

.event-detail-sidebar > * {
    position: relative;
    z-index: 1;
}

.sidebar-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 0, 255, 0.2);
}

.sidebar-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.sidebar-section h3 {
    font-size: 0.85rem;
    font-family: 'Orbitron', sans-serif;
    color: #ff00ff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.75rem;
    text-shadow: 0 0 5px rgba(255, 0, 255, 0.5);
}

.sidebar-section .venue-name {
    color: #fff;
    font-size: 1.1rem;
    font-weight: bold;
    font-family: 'Arial', sans-serif;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
}

.sidebar-section .venue-name svg {
    color: #ff00ff;
    flex-shrink: 0;
}

.sidebar-section .venue-name-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 0, 255, 0.4);
    transition: border-color 0.15s ease, color 0.15s ease;
}

.sidebar-section .venue-name-link:hover,
.sidebar-section .venue-name-link:focus-visible {
    color: #ff00ff;
    border-bottom-color: #ff00ff;
}

.sidebar-section .promoter-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-section .promoter-name {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    font-family: 'Arial', sans-serif;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

.sidebar-section .promoter-name:last-child {
    margin-bottom: 0;
}

.sidebar-section .promoter-name-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 0, 255, 0.4);
    transition: border-color 0.15s ease, color 0.15s ease;
    word-break: break-word;
}

.sidebar-section .promoter-name-link:hover,
.sidebar-section .promoter-name-link:focus-visible {
    color: #ff00ff;
    border-bottom-color: #ff00ff;
}

.sidebar-section .promoter-list-more {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
    font-family: 'Arial', sans-serif;
    margin-top: 0.5rem;
    margin-bottom: 0;
    padding-left: 1.25rem;
}

.sidebar-section .venue-address,
.sidebar-section .venue-city {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
    font-family: 'Arial', sans-serif;
    margin-bottom: 0.2rem;
    padding-left: 1.25rem;
}

.sidebar-section .detail-date,
.sidebar-section .detail-time {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    font-family: 'Arial', sans-serif;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
}

.sidebar-section .detail-date svg,
.sidebar-section .detail-time svg {
    color: #ff00ff;
    flex-shrink: 0;
}

.sidebar-section .detail-price {
    color: #00ffff;
    font-size: 1.3rem;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
    font-family: 'Arial', sans-serif;
    margin-bottom: 0;
}

.sidebar-section .detail-age {
    color: #fff;
    font-size: 1.1rem;
    font-family: 'Arial', sans-serif;
    margin-bottom: 0;
}

.sidebar-section .detail-age-note {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    font-family: 'Arial', sans-serif;
    margin: 0.25rem 0 0;
}

.btn-tickets-lg {
    padding: 0.8rem 1.5rem;
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

/* Swipe hint - hidden on desktop, shown on mobile */
.scroll-hint {
    display: none;
}

/* Similar Events Section */
.similar-events {
    background: rgba(20, 0, 30, 0.6);
    border: 1px solid rgba(255, 0, 255, 0.3);
    border-radius: 15px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.5);
}

.similar-events::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(255, 0, 255, 0.2) 0%, transparent 70%);
    z-index: 0;
}

.similar-events > * {
    position: relative;
    z-index: 1;
}

.similar-events .section-title {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    text-shadow: 0 0 10px #ff00ff, 0 0 15px #00ffff;
    font-family: 'Orbitron', sans-serif;
    position: relative;
    padding-bottom: 0.8rem;
}

.similar-events .section-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100px;
    background: linear-gradient(to right, #ff00ff, transparent);
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.7);
}

.similar-events .row {
    display: flex;
    justify-content: center;
}

.similar-events .row > [class*="col"] {
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
}

.similar-events .event-card {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
}

/* Cross-sell Section */
.event-cross-sell {
    background: rgba(20, 0, 30, 0.6);
    border: 1px solid rgba(255, 0, 255, 0.3);
    border-radius: 15px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.5);
}

.event-cross-sell::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(255, 0, 255, 0.2) 0%, transparent 70%);
    z-index: 0;
}

.event-cross-sell > * {
    position: relative;
    z-index: 1;
}

.event-cross-sell .section-title {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    text-shadow: 0 0 10px #ff00ff, 0 0 15px #00ffff;
    font-family: 'Orbitron', sans-serif;
    position: relative;
    padding-bottom: 0.8rem;
}

.event-cross-sell .section-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100px;
    background: linear-gradient(to right, #ff00ff, transparent);
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.7);
}

.event-cross-sell .product-card {
    background: rgba(20, 0, 40, 0.8);
    border: 1px solid rgba(255, 0, 255, 0.3);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
}

.event-cross-sell .product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.5);
    border-color: rgba(255, 0, 255, 0.7);
}

.event-cross-sell .product-card .card-img-top {
    border-bottom: 1px solid rgba(255, 0, 255, 0.2);
    background: rgba(255, 255, 255, 0.05) !important;
    padding: 1rem !important;
    height: auto;
    max-height: 250px;
    width: 100%;
    object-fit: contain;
}

.event-cross-sell .product-card .card-body {
    padding: 1.5rem;
    background: rgba(20, 0, 40, 0.9);
}

.event-cross-sell .product-card .card-title {
    font-size: 1.4rem;
    font-family: 'Orbitron', sans-serif;
    color: #fff;
    text-shadow: 0 0 5px rgba(255, 0, 255, 0.5);
}

.event-cross-sell .product-card .price {
    color: #00ffff;
    font-size: 1.4rem;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.7);
    margin: 0.75rem 0;
}

.event-cross-sell .product-card .btn-rave {
    background: #bd00ff;
    padding: 0.7rem 0;
    text-transform: uppercase;
    width: 100%;
    max-width: 90%;
    margin: 0 auto;
    display: block;
}

.event-cross-sell .product-card .btn-rave:hover {
    background: #ff00ff;
}

.event-cross-sell .row {
    display: flex;
    justify-content: center;
}

/* Product Strip (inline, between filters and event grid) */
.events-product-strip {
    background: rgba(20, 0, 30, 0.5);
    border: 1px solid rgba(255, 0, 255, 0.2);
    border-radius: 12px;
    padding: 1.2rem 1.5rem;
    margin-bottom: 1.5rem;
}

.events-product-strip .strip-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.95rem;
    color: #fff;
    text-shadow: 0 0 8px rgba(255, 0, 255, 0.5);
    margin-bottom: 1rem;
    position: relative;
    padding-bottom: 0.5rem;
}

.events-product-strip .strip-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 50px;
    background: linear-gradient(to right, #ff00ff, #00ffff, transparent);
    box-shadow: 0 0 6px rgba(255, 0, 255, 0.5);
}

/* Desktop: 3 products side-by-side */
.events-product-strip .strip-products {
    display: flex;
    gap: 1rem;
}

.events-product-strip .strip-product {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.75rem;
    background: rgba(20, 0, 40, 0.6);
    border: 1px solid rgba(255, 0, 255, 0.15);
    border-radius: 10px;
    text-decoration: none;
    color: #fff;
    transition: all 0.25s ease;
    box-shadow: 0 0 8px rgba(255, 0, 255, 0.15);
}

.events-product-strip .strip-product:hover {
    border-color: rgba(255, 0, 255, 0.5);
    box-shadow: 0 0 12px rgba(255, 0, 255, 0.3);
    transform: translateY(-2px);
    color: #fff;
    text-decoration: none;
}

.events-product-strip .strip-product-img {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px;
    max-width: 80px;
    min-height: 80px;
    max-height: 80px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.events-product-strip .strip-product-img img {
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    object-fit: contain;
}

.events-product-strip .strip-product-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    flex: 1;
}

.events-product-strip .strip-product-name {
    font-size: 0.95rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.events-product-strip .strip-product-price {
    font-size: 0.95rem;
    color: #00ffff;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.4);
}

/* Arrow indicator on each product card */
.events-product-strip .strip-product::after {
    content: '\203A';
    font-size: 1.4rem;
    color: rgba(255, 0, 255, 0.4);
    flex-shrink: 0;
    margin-left: auto;
    transition: color 0.2s ease, transform 0.2s ease;
}

.events-product-strip .strip-product:hover::after {
    color: #ff00ff;
    transform: translateX(3px);
}

/* Swipe hint for product strip - hidden on desktop */
.strip-scroll-hint {
    display: none;
}

/* Sidebar Products (event detail page) */
.sidebar-products {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 0, 255, 0.2);
}

.sidebar-products .sidebar-products-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 0, 255, 0.7);
    margin-bottom: 1.2rem;
    position: relative;
    padding-bottom: 0.5rem;
}

.sidebar-products .sidebar-products-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 60px;
    background: linear-gradient(to right, #ff00ff, #00ffff, transparent);
    box-shadow: 0 0 8px rgba(255, 0, 255, 0.5);
}

.sidebar-products .sidebar-product-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.8rem;
    background: rgba(20, 0, 40, 0.6);
    border: 1px solid rgba(255, 0, 255, 0.15);
    border-radius: 10px;
    margin-bottom: 0.8rem;
    text-decoration: none;
    color: #fff;
    transition: all 0.3s ease;
}

.sidebar-products .sidebar-product-card:hover {
    transform: translateX(3px);
    border-color: rgba(255, 0, 255, 0.5);
    box-shadow: 0 0 12px rgba(255, 0, 255, 0.3);
    color: #fff;
    text-decoration: none;
}

.sidebar-products .sidebar-product-img-wrap {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar-products .sidebar-product-img-wrap img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.sidebar-products .sidebar-product-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    flex: 1;
}

.sidebar-products .sidebar-product-name {
    font-size: 0.9rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.sidebar-products .sidebar-product-price {
    font-size: 0.9rem;
    color: #00ffff;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.4);
}

.sidebar-products .sidebar-scroll-hint {
    display: none;
    font-size: 0.75rem;
    color: rgba(255, 0, 255, 0.6);
    letter-spacing: 0.5px;
    font-family: sans-serif;
    font-weight: 400;
    margin-left: 0.5rem;
}

/* Slide-up Product Banner */
/* Desktop: positioned as a toast in bottom-right corner */
.product-slide-banner {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    left: auto;
    z-index: 1050;
    background: rgba(20, 0, 30, 0.97);
    border: 2px solid #ff00ff;
    border-radius: 14px;
    box-shadow: 0 4px 30px rgba(255, 0, 255, 0.35), 0 0 60px rgba(153, 0, 255, 0.15);
    transform: translateY(calc(100% + 2rem));
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 1rem 1.2rem;
    width: 340px;
    visibility: hidden;
}

.product-slide-banner.visible {
    transform: translateY(0);
    visibility: visible;
    animation: banner-border-pulse 1s ease-out;
}

@keyframes banner-border-pulse {
    0% { border-color: #ff00ff; box-shadow: 0 4px 30px rgba(255, 0, 255, 0.35); }
    50% { border-color: #00ffff; box-shadow: 0 4px 40px rgba(0, 255, 255, 0.5); }
    100% { border-color: #ff00ff; box-shadow: 0 4px 30px rgba(255, 0, 255, 0.35); }
}

.product-slide-banner .banner-inner {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.product-slide-banner .banner-close {
    position: absolute;
    top: 0.4rem;
    right: 0.6rem;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    line-height: 1;
    transition: color 0.2s;
}

.product-slide-banner .banner-close:hover {
    color: #ff00ff;
}

.product-slide-banner .banner-product-img {
    width: 65px;
    height: 65px;
    object-fit: contain;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.92);
    flex-shrink: 0;
    padding: 5px;
    box-shadow: 0 0 12px rgba(255, 0, 255, 0.3);
}

.product-slide-banner .banner-product-info {
    flex: 1;
    min-width: 0;
}

.product-slide-banner .banner-product-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
}

.product-slide-banner .banner-product-price {
    font-size: 0.9rem;
    color: #00ffff;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.4);
}

.product-slide-banner .banner-shop-btn {
    flex-shrink: 0;
    background: linear-gradient(45deg, #ff00ff, #9900ff);
    color: #fff;
    border: none;
    padding: 0.55rem 1.2rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.3);
}

.product-slide-banner .banner-shop-btn:hover {
    background: linear-gradient(45deg, #ff33ff, #bb33ff);
    box-shadow: 0 0 18px rgba(255, 0, 255, 0.6);
    color: #fff;
    text-decoration: none;
}

/* Phone ticket bar. Fixed to the foot of the screen below 768px (the markup's
   d-md-none hides it from there up) and hidden until store/js/ticket-bar.js shows
   it: once the event header has scrolled away, never while the ticket box is on
   screen. Hidden with visibility, so its link cannot take focus while hidden. The
   page carries .has-ticket-bar on its root element while the bar is rendered, so
   the page is padded by the bar's height and the bar never covers its end; while
   the bar shows (.ticket-bar-shown) the product banner rises above it. Two short
   lines and a button, so it stays one row high on any phone at the default text
   size; larger text wraps the lines and the bar grows, and ticket-bar.js then sets
   --ticket-bar-offset to its measured height, so the padding and the banner follow.
   The button uses the deep magenta gradient, on which white text keeps at least
   4.5:1 contrast. */
:root {
    --ticket-bar-height: 3.75rem;
    --ticket-bar-offset: calc(var(--ticket-bar-height) + env(safe-area-inset-bottom, 0px));
    /* "Get tickets" and the product banner's "Shop now" above it share one width, so
       the two buttons line up as one column. */
    --ticket-bar-button-width: 9rem;
}

.ticket-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-sticky);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: calc(var(--ticket-bar-height) + env(safe-area-inset-bottom, 0px));
    padding: var(--spacing-sm) var(--spacing-md) calc(var(--spacing-sm) + env(safe-area-inset-bottom, 0px));
    background: rgba(14, 2, 26, 0.94);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255, 0, 255, 0.35);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.5);
    visibility: hidden;
    transform: translateY(100%);
    transition: transform 0.25s ease, visibility 0.25s;
}

.ticket-bar.is-shown {
    visibility: visible;
    transform: none;
}

.ticket-bar__info {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    display: grid;
    line-height: 1.3;
    font-family: var(--font-body);
}

.ticket-bar__price {
    color: var(--rave-secondary);
    font-size: 0.9rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.ticket-bar__when {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.8rem;
}

/* The time is kept whole and the comma rides on the date, so no line of the date
   ever starts with punctuation; the date itself still wraps at its spaces, so it is
   never pushed under the button. */
.ticket-bar__time {
    white-space: nowrap;
}

.ticket-bar .ticket-bar__link {
    flex: none;
    margin: 0;
    min-width: var(--ticket-bar-button-width);
    min-height: 44px;
    padding: var(--spacing-sm) 1.1rem;
    background: var(--gradient-primary-deep);
    font-weight: 700;
}

.ticket-bar .ticket-bar__link:hover,
.ticket-bar .ticket-bar__link:focus {
    background: var(--gradient-primary-deep);
    box-shadow: var(--shadow-glow-lg);
    transform: none;
}

.ticket-bar .ticket-bar__link:focus-visible {
    outline: 3px solid var(--rave-secondary);
    outline-offset: 2px;
}

@media (max-width: 767.98px) {
    html.has-ticket-bar {
        scroll-padding-bottom: var(--ticket-bar-offset);
    }

    .has-ticket-bar body {
        padding-bottom: var(--ticket-bar-offset);
    }

    /* The ticket panel the bar jumps to lands below the fixed header. */
    .has-ticket-bar #tickets {
        scroll-margin-top: 90px;
    }

    /* While the bar shows, the product banner sits on top of it instead of covering
       it, rising and falling with the bar rather than jumping. */
    .has-ticket-bar .product-slide-banner {
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), bottom 0.25s ease;
    }

    .ticket-bar-shown .product-slide-banner {
        bottom: var(--ticket-bar-offset);
    }

    .ticket-bar-shown .product-slide-banner:not(.visible) {
        transform: translateY(calc(100% + var(--spacing-xl) + var(--ticket-bar-offset)));
    }

    /* On a page with the ticket bar the product banner is one short line laid out
       like a phone's "open in the app" banner: the close button at the left, then a
       small picture, the name and price, and "Shop now" at the right, the same size
       as "Get tickets" and on the same right edge, so the two bars read as one panel.
       It still slides up as it does everywhere else. Larger text, or a phone
       narrower than about 330px, wraps the name and price, and then "Shop now",
       which drops to sit directly above "Get tickets", rather than clipping them.
       The 44px sizes are set here as well as in the phone block below, because this
       block's breakpoint (767.98px, as d-md-none uses) is a fraction wider. */
    .has-ticket-bar .product-slide-banner {
        display: flex;
        align-items: flex-start;
        padding: var(--spacing-xs) var(--spacing-md) var(--spacing-xs) 0;
        border-top-width: 2px;
    }

    /* In the flow, so it stays level with the first line when larger text wraps. */
    .has-ticket-bar .product-slide-banner .banner-close {
        position: static;
        flex: none;
        transform: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
    }

    .has-ticket-bar .product-slide-banner .banner-inner {
        flex: 1;
        flex-wrap: wrap;
        min-width: 0;
        gap: var(--spacing-sm);
    }

    .has-ticket-bar .product-slide-banner .banner-product-img {
        width: 36px;
        height: 36px;
        padding: 3px;
        border-radius: 6px;
    }

    .has-ticket-bar .product-slide-banner .banner-product-info {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: var(--spacing-sm);
    }

    .has-ticket-bar .product-slide-banner .banner-product-name,
    .has-ticket-bar .product-slide-banner .banner-product-price {
        font-size: 0.85rem;
    }

    .has-ticket-bar .product-slide-banner .banner-shop-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: var(--ticket-bar-button-width);
        min-height: 44px;
        margin-left: auto;
        padding: var(--spacing-sm) 1.1rem;
        border-radius: var(--radius-md);
        font-family: var(--font-primary);
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 1px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ticket-bar {
        transition: none;
    }

    .has-ticket-bar .product-slide-banner {
        transition-property: transform;
    }
}

/* 7. Responsive */
@media (max-width: 767px) {
    .events-container {
        padding-top: 60px;
    }

    .event-detail-container {
        padding-top: 60px;
    }

    .events-title {
        font-size: 2rem;
    }

    .events-description {
        font-size: 1.1rem;
    }

    /* Mobile filters — full-width stacked inputs */
    .events-filters {
        padding: 1rem;
    }

    .events-filters .row > [class*="col"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .events-filters .form-label {
        font-size: 0.7rem;
    }

    /* Force identical image dimensions with explicit height.
       aspect-ratio does NOT work on <img> elements — once images load,
       the browser uses the image's intrinsic ratio instead of CSS aspect-ratio.
       Explicit height + object-fit: cover is the only reliable approach. */
    .event-thumbnail,
    .event-thumbnail-placeholder {
        height: 180px !important;
        min-height: 180px !important;
        max-height: 180px !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
    }

    /* Detail page mobile */
    .event-detail-title {
        font-size: 2rem;
    }

    .event-detail-header {
        padding: 1.5rem;
    }

    .event-detail-description {
        padding: 1.5rem;
    }

    .event-detail-sidebar {
        margin-top: 1.5rem;
    }

    /* Swipe hint visible on mobile */
    .scroll-hint {
        display: block !important;
        text-align: right;
        font-size: 0.8rem;
        color: rgba(255, 0, 255, 0.6);
        margin-bottom: 0.5rem;
        letter-spacing: 0.5px;
    }

    /* Horizontal scroll similar events on mobile */
    .similar-events .row {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        justify-content: flex-start !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding-bottom: 0.75rem;
        margin: 0 !important;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 0, 255, 0.4) rgba(255, 0, 255, 0.1);
    }

    /* Each card is the scroller's width less a 2rem peek of the next one, so
       the card in view always fits whole (75vw was wider than the scroller
       inside the section's padding and cut the titles off at the right). */
    .similar-events .row > [class*="col"] {
        flex: 0 0 calc(100% - 2rem) !important;
        max-width: calc(100% - 2rem) !important;
        scroll-snap-align: start;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .similar-events .row > [class*="col"]:first-child {
        padding-left: 0 !important;
    }

    .similar-events .row > [class*="col"]:last-child {
        scroll-snap-align: end;
        padding-right: 0 !important;
    }

    /* Thin scrollbar */
    .similar-events .row::-webkit-scrollbar {
        height: 4px;
    }

    .similar-events .row::-webkit-scrollbar-track {
        background: rgba(255, 0, 255, 0.1);
        border-radius: 2px;
    }

    .similar-events .row::-webkit-scrollbar-thumb {
        background: rgba(255, 0, 255, 0.4);
        border-radius: 2px;
    }

    .similar-events .section-title {
        font-size: 1.6rem;
    }

    /* Gradient fade on right edge of similar events */
    .similar-events::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 40px;
        background: linear-gradient(to right, transparent, rgba(20, 0, 30, 0.85));
        pointer-events: none;
        z-index: 2;
        border-radius: 0 15px 15px 0;
    }

    /* Horizontal scroll cross-sell products on mobile */
    .event-cross-sell .cross-sell-scroll {
        position: relative;
    }

    .event-cross-sell .cross-sell-scroll::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 40px;
        height: 100%;
        background: linear-gradient(to right, transparent, rgba(20, 0, 30, 0.85));
        pointer-events: none;
        z-index: 2;
    }

    .event-cross-sell .cross-sell-scroll .row {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        justify-content: flex-start !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding-bottom: 0.75rem;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 0, 255, 0.4) rgba(255, 0, 255, 0.1);
        margin: 0 !important;
    }

    .event-cross-sell .cross-sell-scroll .row > [class*="col"] {
        flex: 0 0 70vw !important;
        max-width: 70vw !important;
        scroll-snap-align: start;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .event-cross-sell .cross-sell-scroll .row > [class*="col"]:first-child {
        padding-left: 0 !important;
    }

    .event-cross-sell .cross-sell-scroll .row > [class*="col"]:last-child {
        scroll-snap-align: end;
        padding-right: 0 !important;
    }

    .event-cross-sell .cross-sell-scroll .row::-webkit-scrollbar {
        height: 4px;
    }

    .event-cross-sell .cross-sell-scroll .row::-webkit-scrollbar-track {
        background: rgba(255, 0, 255, 0.1);
        border-radius: 2px;
    }

    .event-cross-sell .cross-sell-scroll .row::-webkit-scrollbar-thumb {
        background: rgba(255, 0, 255, 0.4);
        border-radius: 2px;
    }

    .event-cross-sell .section-title {
        font-size: 1.6rem;
    }

    .event-cross-sell .product-card {
        max-width: none;
    }

    /* Product strip mobile — horizontal scroll */
    .events-product-strip {
        padding: 0.8rem 1rem;
    }

    .events-product-strip .strip-title {
        font-size: 0.85rem;
        margin-bottom: 0.3rem;
    }

    .events-product-strip .strip-title {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    .events-product-strip .strip-title::after {
        display: none;
    }

    .strip-scroll-hint {
        display: inline !important;
        font-size: 0.75rem;
        color: rgba(255, 0, 255, 0.6);
        letter-spacing: 0.5px;
        font-family: sans-serif;
        font-weight: 400;
        margin-left: auto;
        text-align: right;
        flex-shrink: 1;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .events-product-strip .strip-products {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding-bottom: 4px;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 0, 255, 0.3) rgba(255, 0, 255, 0.1);
    }

    .events-product-strip .strip-products::-webkit-scrollbar {
        height: 2px;
    }

    .events-product-strip .strip-products::-webkit-scrollbar-track {
        background: rgba(255, 0, 255, 0.1);
    }

    .events-product-strip .strip-products::-webkit-scrollbar-thumb {
        background: rgba(255, 0, 255, 0.3);
    }

    .events-product-strip .strip-product {
        flex: 0 0 auto;
        width: 70vw;
        scroll-snap-align: start;
        padding: 0.7rem;
        gap: 0.8rem;
    }

    .events-product-strip .strip-product-img {
        width: 80px !important;
        height: 80px !important;
        min-width: 80px;
        max-width: 80px;
        min-height: 80px;
        max-height: 80px;
        border-radius: 10px;
    }

    .events-product-strip .strip-product-img img {
        width: 64px !important;
        height: 64px !important;
        max-width: 64px !important;
        max-height: 64px !important;
    }

    .events-product-strip .strip-product-name {
        font-size: 0.9rem;
    }

    .events-product-strip .strip-product-price {
        font-size: 0.9rem;
    }

    .events-product-strip .strip-product::after {
        display: none;
    }

    /* Sidebar products mobile — horizontal scrollable strip */
    .sidebar-products {
        margin-top: 1.2rem;
        padding-top: 1.2rem;
    }

    .sidebar-products .sidebar-products-inner {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 0.8rem;
        padding-bottom: 4px;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 0, 255, 0.3) rgba(255, 0, 255, 0.1);
    }

    .sidebar-products .sidebar-products-inner::-webkit-scrollbar {
        height: 2px;
    }

    .sidebar-products .sidebar-products-inner::-webkit-scrollbar-track {
        background: rgba(255, 0, 255, 0.1);
    }

    .sidebar-products .sidebar-products-inner::-webkit-scrollbar-thumb {
        background: rgba(255, 0, 255, 0.3);
    }

    .sidebar-products .sidebar-product-card {
        flex: 0 0 auto;
        width: 70vw;
        scroll-snap-align: start;
        margin-bottom: 0;
    }

    .sidebar-products .sidebar-product-img-wrap {
        width: 80px;
        height: 80px;
    }

    .sidebar-products .sidebar-product-img-wrap img {
        width: 64px;
        height: 64px;
    }

    .sidebar-products .sidebar-scroll-hint {
        display: inline !important;
    }

    /* Slide-up banner mobile — full-width bar at bottom */
    .product-slide-banner {
        bottom: 0;
        right: 0;
        left: 0;
        width: auto;
        border-radius: 0;
        border: none;
        border-top: 3px solid #ff00ff;
        box-shadow: 0 -4px 25px rgba(255, 0, 255, 0.4);
        padding: 0.8rem max(2.75rem, 44px) 0.8rem 0.9rem;
    }

    /* A full 44px tap target, centred on the banner's right edge. */
    .product-slide-banner .banner-close {
        top: 50%;
        right: 0;
        width: 44px;
        height: 44px;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
    }

    /* With larger text the shop link drops below the name and price rather than
       covering them. */
    .product-slide-banner .banner-inner {
        flex-wrap: wrap;
    }

    .product-slide-banner .banner-product-info {
        flex: 1 1 4.5rem;
    }

    .product-slide-banner .banner-product-name {
        overflow-wrap: anywhere;
    }

    .product-slide-banner .banner-product-img {
        width: 50px;
        height: 50px;
    }

    /* A full 44px tap target; margin-left: auto keeps it to the right when larger
       text wraps it below the name and price. */
    .product-slide-banner .banner-shop-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        margin-left: auto;
        padding: 0.45rem 0.8rem;
        font-size: 0.75rem;
    }

    /* Mutual exclusion with the CRM click-out panel: on mobile they share the
       bottom-0 slot, so hide the product banner while the newsletter panel is
       open. The body class is set/cleared by clickout-capture.js. !important
       overrides .product-slide-banner.visible; if the banner was already up it
       slides away while the panel is open and returns when the class is removed.
       Desktop is unaffected (this is inside the mobile media query). */
    body.clickout-panel-open .product-slide-banner {
        visibility: hidden !important;
        transform: translateY(calc(100% + 2rem)) !important;
    }
}

@media (max-width: 576px) {
    .events-container {
        padding-top: 50px;
    }

    .events-title {
        font-size: 1.7rem;
    }

    .events-description {
        font-size: 1rem;
    }

    .event-thumbnail,
    .event-thumbnail-placeholder {
        height: 160px !important;
        min-height: 160px !important;
        max-height: 160px !important;
    }

    .event-card-body {
        padding: 1rem;
    }

    /* Detail page small mobile */
    .event-detail-container {
        padding-top: 50px;
    }

    .event-detail-title {
        font-size: 1.7rem;
    }

    .event-detail-description {
        padding: 1.2rem;
    }

    .similar-events {
        padding: 1.5rem;
    }

    .similar-events .section-title {
        font-size: 1.4rem;
    }

    .event-cross-sell {
        padding: 1.5rem;
    }

    .event-cross-sell .section-title {
        font-size: 1.4rem;
    }
}

@media (max-width: 430px) {
    .events-container {
        padding-top: 40px;
    }

    .events-title {
        font-size: 1.5rem;
    }

    .event-thumbnail,
    .event-thumbnail-placeholder {
        height: 150px !important;
        min-height: 150px !important;
        max-height: 150px !important;
    }

    /* Detail page extra small */
    .event-detail-container {
        padding-top: 40px;
    }

    .event-detail-title {
        font-size: 1.5rem;
    }

    .event-detail-image {
        max-height: 300px;
    }

}


/* ─── Platform Ticketing ─────────────────────────────────────────── */

.ticket-purchase-section {
    border: 2px solid rgba(255, 0, 255, 0.4);
    border-radius: 8px;
    padding: 1rem;
    background: rgba(20, 0, 40, 0.6);
}

/* Default state: dead tier (not on sale). Muted neutral surface, no magenta
   tint, cursor signals non-interactivity. `.is-buyable` (added by the view
   when tt.is_on_sale) re-applies the magenta affordance + restores
   interactivity. Compensating padding-left keeps total row height matched
   when the 3px accent border swaps in. */
.ticket-type-option {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    cursor: not-allowed;
    pointer-events: none;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, opacity 0.2s;
    background: rgba(20, 20, 30, 0.3);
    opacity: 0.45;
}

.ticket-type-option.is-buyable {
    border: 1px solid rgba(255, 0, 255, 0.5);
    border-left: 3px solid var(--rave-primary);
    padding-left: calc(0.75rem - 2px);
    background: rgba(30, 0, 50, 0.5);
    box-shadow: 0 0 12px rgba(255, 0, 255, 0.15);
    cursor: pointer;
    pointer-events: auto;
    opacity: 1;
}

.ticket-type-option.is-buyable.selected {
    background: rgba(255, 0, 255, 0.15);
    box-shadow: 0 0 16px rgba(255, 0, 255, 0.3);
    border-color: #ff00ff;
}

.ticket-type-option.is-buyable:hover {
    border-color: rgba(255, 0, 255, 0.8);
}

.ticket-purchase-section .ticket-type-option:not(.is-buyable) .ticket-type-avail {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid currentColor;
    font-size: 0.75rem;
}

.ticket-type-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    column-gap: 0.75rem;
}

/* When the name and price no longer fit side by side, the price drops to its
   own line (right-aligned) instead of running over the name or out of the
   card. Words are never split mid-word unless a single word is wider than the
   whole card. */
.ticket-type-header label {
    cursor: pointer;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
}

.ticket-type-header label .ticket-type-name {
    overflow-wrap: break-word;
    min-width: 0;
}

.ticket-type-header input[type="radio"] {
    accent-color: #ff00ff;
}

.ticket-type-name {
    font-weight: 600;
    color: #fff;
}

.ticket-type-price {
    flex: 0 0 auto;
    margin-left: auto;
    white-space: nowrap;
    font-weight: bold;
    color: #00ffff;
    font-size: 1.1rem;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
}

.ticket-type-desc {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
    margin: 0.25rem 0 0 1.5rem;
}

.ticket-type-avail {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0.25rem 0 0 1.5rem;
}

.ticket-quantity-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ticket-quantity-row label {
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.ticket-quantity-row select {
    width: 80px;
    background: rgba(20, 0, 40, 0.8);
    color: #fff;
    border: 1px solid rgba(255, 0, 255, 0.3);
    border-radius: 4px;
}

.ticket-email-row label {
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.25rem;
    display: block;
    font-size: 0.9rem;
}

.ticket-email-row input[type="email"],
.ticket-name-row input[type="text"] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(255, 0, 255, 0.3);
    border-radius: 4px;
    background: rgba(20, 0, 40, 0.8);
    color: #fff;
    font-size: 0.9rem;
    font-family: Arial, Helvetica, sans-serif;
    outline: none;
    transition: border-color 0.2s;
}

.ticket-email-row input[type="email"]:focus,
.ticket-name-row input[type="text"]:focus {
    border-color: #ff00ff;
}

.ticket-email-row input[type="email"]::placeholder,
.ticket-name-row input[type="text"]::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.ticket-email-row small,
.ticket-name-row small {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
}

.ticket-name-row label {
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.25rem;
    display: block;
    font-size: 0.9rem;
}

.ticket-purchase-note {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    margin-bottom: 0;
}


/* ─── Lineup ─────────────────────────────────────────────────────── */

.event-lineup {
    background: rgba(20, 0, 40, 0.6);
    border: 1px solid rgba(255, 0, 255, 0.2);
    border-radius: 15px;
    padding: 1.5rem;
}

.event-lineup h2 {
    font-family: 'Orbitron', sans-serif;
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(255, 0, 255, 0.4);
}

.lineup-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.lineup-artist {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.3s ease;
    color: inherit;
    text-decoration: none;
}

.lineup-artist:hover,
.lineup-artist:focus {
    background: rgba(255, 0, 255, 0.06);
    border-color: rgba(255, 0, 255, 0.15);
    color: inherit;
    text-decoration: none;
}

.lineup-headliner {
    background: rgba(255, 0, 255, 0.08);
    border-color: rgba(255, 0, 255, 0.25);
    padding: 0.85rem 1rem;
}

.lineup-headliner:hover {
    background: rgba(255, 0, 255, 0.12);
    border-color: rgba(255, 0, 255, 0.35);
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.15);
}

.lineup-artist-img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.lineup-headliner .lineup-artist-img {
    width: 52px;
    height: 52px;
    border-color: rgba(255, 0, 255, 0.4);
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.3);
}

.lineup-artist-info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    font-family: 'Arial', sans-serif;
}

.lineup-artist-name {
    font-weight: 700;
    color: #fff;
    font-size: 0.95rem;
    font-family: 'Arial', sans-serif;
    letter-spacing: 0.3px;
}

.lineup-headliner .lineup-artist-name {
    font-size: 1.1rem;
    color: #ff00ff;
    text-shadow: 0 0 8px rgba(255, 0, 255, 0.4);
}

.badge-headliner {
    background: linear-gradient(135deg, #ff00ff, #8b00ff);
    color: #fff;
    font-size: 0.65rem;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    font-family: 'Arial', sans-serif;
    box-shadow: 0 0 8px rgba(255, 0, 255, 0.4);
}

.lineup-set-time {
    font-size: 0.8rem;
    color: rgba(0, 255, 255, 0.7);
    font-family: 'Arial', sans-serif;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.3);
}


/* ─── Interest Buttons ───────────────────────────────────────────── */

.event-interest-buttons {
    display: flex;
    gap: 0.75rem;
}

.btn-interest {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
    font-size: 0.9rem;
    font-family: 'Arial', sans-serif;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-interest:hover {
    border-color: rgba(255, 0, 255, 0.4);
    color: #ff00ff;
    background: rgba(255, 0, 255, 0.08);
}

.btn-interest.active {
    border-color: #ff00ff;
    background: rgba(255, 0, 255, 0.15);
    color: #ff00ff;
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.2);
}

.btn-interest.active svg {
    stroke: #ff00ff;
}

.interest-count {
    font-weight: normal;
    font-size: 0.85rem;
}

.btn-interest:disabled,
.btn-interest[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.5);
}

.btn-interest:disabled:hover,
.btn-interest[aria-disabled="true"]:hover {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.5);
}

/* ─── Past Event Banner ──────────────────────────────────────────── */

.past-event-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, rgba(94, 0, 255, 0.2) 0%, rgba(255, 0, 195, 0.18) 100%);
    border: 1px solid rgba(187, 134, 252, 0.45);
    border-radius: 12px;
    font-family: Arial, Helvetica, sans-serif;
    color: rgba(255, 255, 255, 0.92);
}

.past-event-banner__icon {
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
}

.past-event-banner__copy {
    flex: 1 1 200px;
    min-width: 0;
}

.past-event-banner__title {
    display: block;
    font-size: 1rem;
    margin-bottom: 0.15rem;
}

.past-event-banner__detail {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.7);
}

.past-event-banner__cta {
    padding: 0.5rem 1.25rem;
    background: linear-gradient(135deg, #5e00ff 0%, #ff00c3 100%);
    color: #fff;
    border-radius: 22px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.past-event-banner__cta:hover {
    color: #fff;
    opacity: 0.9;
}

@media (max-width: 575.98px) {
    .past-event-banner {
        gap: 0.75rem;
    }

    .past-event-banner__cta {
        flex-basis: 100%;
        text-align: center;
    }
}

/* The banner on a listing taken off the site: its one link meets the 44px
   tap target (the past-event banner's link is left as it is). */
.past-event-banner--unlisted .past-event-banner__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
}

/* The 410 page for a night that has been and gone. Its body copy is Arial:
   the page would otherwise inherit Orbitron, and the headline, buttons and
   section title set Orbitron themselves. The way-on links meet the 44px tap
   target and wrap a long venue name inside the button. */
.event-gone-page {
    font-family: var(--font-body);
}

.event-gone-page .ticket-empty-state__sub {
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}

/* The way-on links are one size: stacked on phones, side by side from tablet
   width, each as tall as the tallest when a long venue name wraps (the shared
   button's auto top margin would otherwise sink a one-line button). */
.event-gone-links {
    display: grid;
    grid-template-columns: minmax(0, 20rem);
    justify-content: center;
    align-items: stretch;
    gap: 1rem;
}

@media (min-width: 768px) {
    .event-gone-links {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 15rem);
    }
}

/* The past-event and cancelled-event pages give their buttons one width, stacked
   on a phone and side by side from 768px. */
.event-gone-page .btn-tickets,
.event-cancelled-page .btn-tickets {
    min-height: 44px;
    margin-top: 0;
    width: 100%;
    justify-content: center;
    text-align: center;
    overflow-wrap: anywhere;
}

/* Below 360px a Similar Events card was too narrow for a title word such as
   "Announced", which broke mid-word. Less section padding and a smaller peek
   give the card in view the room; titles still wrap between words. */
@media (max-width: 359.98px) {
    .similar-events {
        padding: 1rem;
    }

    .similar-events .row > [class*="col"] {
        flex-basis: calc(100% - 1.25rem) !important;
        max-width: calc(100% - 1.25rem) !important;
    }
}