/* Shared body-region chrome rendered on every page via base.html: the
   keyboard skip-link, the ticket-reservation countdown banner, and the
   flash-message toasts. Dark/neon storefront aesthetic. */
        .skip-link:focus {
            position: fixed; top: 0; left: 0; z-index: 10000;
            padding: 0.75rem 1.25rem; background: #ff00ff; color: #fff;
            font-family: Arial, sans-serif; font-weight: 600;
            text-decoration: none; box-shadow: 0 0 10px rgba(255, 0, 255, 0.7);
        }
        .reservation-banner {
            position: relative;
            background: linear-gradient(135deg, rgba(20, 0, 40, 0.98), rgba(40, 0, 60, 0.98));
            border-style: solid;
            border-width: 0 0 2px 0;
            border-image: linear-gradient(90deg, rgba(255, 0, 255, 0.6), rgba(0, 255, 255, 0.4), rgba(255, 0, 255, 0.6)) 1;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
        }
        .reservation-banner-link {
            display: block;
            text-decoration: none;
            padding: 0.55rem 1.25rem;
            transition: background 0.2s ease;
        }
        .reservation-banner-link:hover {
            background: rgba(255, 0, 255, 0.08);
        }
        .reservation-banner-inner {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            font-family: Arial, sans-serif;
            font-size: 0.85rem;
            color: rgba(255, 255, 255, 0.85);
        }
        .reservation-banner-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #ff00ff;
            flex-shrink: 0;
            animation: dot-pulse 2s ease-in-out infinite;
            box-shadow: 0 0 6px rgba(255, 0, 255, 0.6);
        }
        @keyframes dot-pulse {
            0%, 100% { box-shadow: 0 0 6px rgba(255, 0, 255, 0.6); }
            50% { box-shadow: 0 0 12px rgba(255, 0, 255, 0.3), 0 0 4px rgba(255, 0, 255, 0.8); }
        }
        .reservation-banner-text {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .reservation-banner-text-mobile {
            display: none;
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.75rem;
            white-space: nowrap;
        }
        .reservation-banner-timer {
            font-family: 'Orbitron', sans-serif;
            font-weight: 700;
            font-size: 0.95rem;
            color: #00ffff;
            letter-spacing: 1px;
            flex-shrink: 0;
            text-shadow: 0 0 8px rgba(0, 255, 255, 0.4);
        }
        .reservation-banner-cta {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            color: #fff;
            font-weight: 600;
            font-size: 0.78rem;
            white-space: nowrap;
            flex-shrink: 0;
            background: linear-gradient(135deg, #5e00ff, #ff00c3);
            padding: 0.3rem 0.85rem;
            border-radius: 20px;
            transition: opacity 0.2s ease;
        }
        .reservation-banner-link:hover .reservation-banner-cta {
            opacity: 0.9;
        }
        .reservation-banner-cta i {
            font-size: 0.6rem;
        }
        .reservation-banner.timer-warning .reservation-banner-timer {
            color: #ffa726;
            text-shadow: 0 0 8px rgba(255, 167, 38, 0.4);
        }
        .reservation-banner.timer-warning .reservation-banner-dot {
            background: #ffa726;
            box-shadow: 0 0 6px rgba(255, 167, 38, 0.6);
        }
        @keyframes dot-pulse-warn {
            0%, 100% { box-shadow: 0 0 6px rgba(255, 167, 38, 0.6); }
            50% { box-shadow: 0 0 12px rgba(255, 167, 38, 0.3), 0 0 4px rgba(255, 167, 38, 0.8); }
        }
        .reservation-banner.timer-warning .reservation-banner-dot { animation-name: dot-pulse-warn; }
        .reservation-banner.timer-warning {
            border-image: linear-gradient(90deg, rgba(255, 167, 38, 0.6), rgba(255, 167, 38, 0.3), rgba(255, 167, 38, 0.6)) 1;
        }
        .reservation-banner.timer-critical .reservation-banner-timer {
            color: #ff5252;
            text-shadow: 0 0 8px rgba(255, 82, 82, 0.5);
            animation: blink 1s step-end infinite;
        }
        .reservation-banner.timer-critical .reservation-banner-dot {
            background: #ff5252;
            box-shadow: 0 0 6px rgba(255, 82, 82, 0.6);
        }
        .reservation-banner.timer-critical {
            border-image: linear-gradient(90deg, rgba(255, 82, 82, 0.6), rgba(255, 82, 82, 0.3), rgba(255, 82, 82, 0.6)) 1;
            background: linear-gradient(135deg, rgba(40, 0, 10, 0.98), rgba(50, 0, 15, 0.98));
        }
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.3; }
        }
        @media (max-width: 768px) {
            .reservation-banner-link { padding: 0.45rem 0.75rem; }
            .reservation-banner-inner { font-size: 0.8rem; gap: 0.5rem; }
            .reservation-banner-text { display: none; }
            .reservation-banner-text-mobile { display: inline; }
            .reservation-banner-cta { font-size: 0.72rem; padding: 0.25rem 0.7rem; }
            .reservation-banner + main,
            .reservation-banner + .container,
            .reservation-banner + div {
                padding-top: 0.5rem;
            }
        }
    .rave-flash-container { width: 100%; margin: 1rem 0 1.25rem; scroll-margin-top: 120px; }
    @media (max-width: 768px) { .rave-flash-container { margin: 0.75rem 0 1rem; scroll-margin-top: 90px; } }
    .rave-flash-msg {
        background: linear-gradient(135deg, rgba(94,0,255,0.25) 0%, rgba(255,0,195,0.2) 50%, rgba(94,0,255,0.25) 100%);
        color: #fff;
        border: 1px solid rgba(187,134,252,0.4);
        border-radius: 12px;
        padding: 1rem 2.5rem 1rem 1.25rem;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 0.95rem;
        text-align: center;
        position: relative;
        box-shadow: 0 0 20px rgba(94,0,255,0.15), inset 0 0 30px rgba(255,0,195,0.05);
        margin-bottom: 0.5rem;
    }
    .rave-flash-msg.flash-success { border-color: rgba(187,134,252,0.5); }
    .rave-flash-msg.flash-error { background: linear-gradient(135deg, rgba(255,50,50,0.25) 0%, rgba(180,0,80,0.2) 50%, rgba(255,50,50,0.25) 100%); border-color: rgba(255,100,100,0.5); box-shadow: 0 0 20px rgba(255,50,50,0.15), inset 0 0 30px rgba(180,0,0,0.05); }
    .rave-flash-msg .flash-icon { margin-right: 8px; color: rgba(255,255,255,0.85); }
    .rave-flash-msg.flash-success .flash-icon { color: rgba(255,255,255,0.9); }
    .rave-flash-msg.flash-error .flash-icon { color: #ffaaaa; }
    .rave-flash-msg .flash-link { color: #ff00ff; text-decoration: none; font-weight: bold; }
    .rave-flash-msg .flash-link:hover { color: #ff66ff; }
    .rave-flash-msg .flash-close {
        position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
        background: none; border: none; font-size: 20px;
        color: rgba(255, 255, 255, 0.6); cursor: pointer; padding: 0; line-height: 1;
    }
    .rave-flash-msg .flash-close:hover { color: #fff; }