/* 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);
}

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

/* 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;
}

/* 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 0.9rem;
        padding-right: 2rem;
    }

    .product-slide-banner .banner-close {
        top: 0.2rem;
        right: 0.4rem;
        font-size: 1.1rem;
    }

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

    .product-slide-banner .banner-shop-btn {
        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;
    }
}

/* 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;
    }
}