/**
 * Manual Seats - Concert Seating Plan Interface
 * ShadCN-inspired Dark/Light Mode with Red Highlights
 */

/* ============================================
   DESIGN TOKENS - Light Mode (Default)
   ============================================ */
:root {
    --ms-bg: #ffffff;
    --ms-bg-alt: #f8f9fa;
    --ms-bg-muted: #f1f5f9;
    --ms-bg-card: #ffffff;
    --ms-bg-overlay: rgba(0, 0, 0, 0.5);
    --ms-fg: #0f172a;
    --ms-fg-secondary: #374151;
    --ms-fg-muted: #6b7280;
    --ms-fg-faint: #9ca3af;
    --ms-border: #e2e8f0;
    --ms-border-light: #e9ecef;
    --ms-primary: #dc2626;
    --ms-primary-hover: #b91c1c;
    --ms-primary-dark: #991b1b;
    --ms-primary-light: rgba(220, 38, 38, 0.1);
    --ms-primary-gradient: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    --ms-primary-gradient-hover: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
    --ms-success: #22c55e;
    --ms-warning: #d97706;
    --ms-warning-bg: #fef3cd;
    --ms-danger: #dc2626;
    --ms-danger-bg: #fee2e2;
    --ms-info: #3b82f6;
    --ms-toast-bg: #28a745;
    --ms-zone-available: #3b82f6;
    --ms-zone-unavailable: #d1d5db;
    --ms-seat-selected: #22c55e;
    --ms-seat-hover: #2563eb;
    --ms-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --ms-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
    --ms-shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.15);
    --ms-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.05);
    --ms-shadow-btn: 0 4px 12px rgba(220, 38, 38, 0.3);
    --ms-map-bg: #eef2f5;
    --ms-countdown-bg: rgb(246, 246, 246);
    --ms-countdown-border: rgba(0, 0, 0, 0.3);
    --ms-countdown-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --ms-countdown-line: rgba(0, 0, 0, 0.2);
    --ms-zoom-bg: white;
    --ms-zoom-color: #4b5563;
    --ms-zoom-hover-bg: #f9fafb;
    --ms-zoom-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --ms-minimap-bg: white;
    --ms-modal-bg: white;
    --ms-tooltip-label: #3b82f6;
    --ms-seat-card-icon-bg: rgba(0, 0, 0, 0.04);
    --ms-cart-icon-fill: #dc2626;
    /* Pretix base layout overrides */
    --ms-body-bg: #f5f5f5;
    --ms-main-box-bg: #ffffff;
    --ms-panel-bg: #ffffff;
    --ms-panel-border: #ddd;
    --ms-panel-heading: #f5f5f5;
    --ms-input-bg: #ffffff;
    --ms-input-border: #ccc;
    --ms-input-color: #555;
    --ms-footer-color: #6b7280;
    --ms-link-color: #dc2626;
}

/* ============================================
   DESIGN TOKENS - Dark Mode
   ============================================ */
[data-theme="dark"] {
    --ms-bg: #0a0a0a;
    --ms-bg-alt: #111113;
    --ms-bg-muted: #1c1c1e;
    --ms-bg-card: #18181b;
    --ms-bg-overlay: rgba(0, 0, 0, 0.7);
    --ms-fg: #fafafa;
    --ms-fg-secondary: #d4d4d8;
    --ms-fg-muted: #a1a1aa;
    --ms-fg-faint: #71717a;
    --ms-border: #27272a;
    --ms-border-light: #3f3f46;
    --ms-primary: #ef4444;
    --ms-primary-hover: #dc2626;
    --ms-primary-dark: #b91c1c;
    --ms-primary-light: rgba(239, 68, 68, 0.15);
    --ms-primary-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    --ms-primary-gradient-hover: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    --ms-success: #22c55e;
    --ms-warning: #f59e0b;
    --ms-warning-bg: rgba(245, 158, 11, 0.15);
    --ms-danger: #ef4444;
    --ms-danger-bg: rgba(239, 68, 68, 0.15);
    --ms-info: #60a5fa;
    --ms-toast-bg: #16a34a;
    --ms-zone-available: #60a5fa;
    --ms-zone-unavailable: #3f3f46;
    --ms-seat-selected: #22c55e;
    --ms-seat-hover: #3b82f6;
    --ms-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --ms-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --ms-shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.5);
    --ms-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);
    --ms-shadow-btn: 0 4px 12px rgba(239, 68, 68, 0.3);
    --ms-map-bg: #111113;
    --ms-countdown-bg: #18181b;
    --ms-countdown-border: rgba(255, 255, 255, 0.1);
    --ms-countdown-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    --ms-countdown-line: rgba(255, 255, 255, 0.08);
    --ms-zoom-bg: #18181b;
    --ms-zoom-color: #a1a1aa;
    --ms-zoom-hover-bg: #27272a;
    --ms-zoom-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    --ms-minimap-bg: #18181b;
    --ms-modal-bg: #18181b;
    --ms-tooltip-label: #ef4444;
    --ms-seat-card-icon-bg: rgba(255, 255, 255, 0.06);
    --ms-cart-icon-fill: #ef4444;
    --ms-body-bg: #0a0a0a;
    --ms-main-box-bg: #0f0f12;
    --ms-panel-bg: #18181b;
    --ms-panel-border: #27272a;
    --ms-panel-heading: #1c1c1e;
    --ms-input-bg: #18181b;
    --ms-input-border: #3f3f46;
    --ms-input-color: #d4d4d8;
    --ms-footer-color: #71717a;
    --ms-link-color: #ef4444;
}

/* Base Container */
.manualseats-container {
    font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--ms-bg);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--ms-shadow-sm);
    margin: 20px 0;
    color: var(--ms-fg);
}

/* Event Info Banner */
/* Event Info Banner */
/* Event Info Banner */
.event-info-banner {
    background: none;
    color: var(--ms-fg);
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.event-countdown {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.countdown-timer {
    display: inline-flex;
    gap: 8px;
}

.countdown-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.countdown-card {
    background: var(--ms-countdown-bg);
    color: var(--ms-fg);
    font-weight: 700;
    font-size: 8rem;
    font-family: 'Roboto Mono', monospace;
    line-height: 1;
    padding: 10px 8px;
    min-width: 48px;
    text-align: center;
    border-radius: 6px;
    box-shadow: var(--ms-countdown-shadow);
    border: 1px solid var(--ms-countdown-border);
    position: relative;
    overflow: hidden;
}

/* Simulated flip-card split line */
.countdown-card::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--ms-countdown-line);
    transform: translateY(-50%);
}

.countdown-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--ms-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Tab Navigation */
.seating-tabs {
    display: flex;
    gap: 0;
    background: var(--ms-bg-alt);
    border-bottom: 1px solid var(--ms-border-light);
    padding: 0 20px;
}

.tab-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    background: transparent;
    border: none;
    color: var(--ms-fg-muted);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
}

.tab-btn:hover {
    color: var(--ms-primary);
}

.tab-btn.active {
    color: var(--ms-primary);
    border-bottom-color: var(--ms-primary);
    background: var(--ms-bg);
}

.tab-icon {
    width: 16px;
    height: 16px;
}

/* Main Content Layout */
.seating-content {
    display: flex;
    min-height: 500px;
}

/* Map Panel (75%) */
.map-panel {
    flex: 0 0 75%;
    position: relative;
    background: var(--ms-map-bg);
    padding: 20px;
    overflow: hidden;
}

/* Zoom Controls */
/* Zoom Controls */
.zoom-controls {
    position: relative;
    top: 50px;
    left: 80%;
    display: flex;
    flex-direction: row;
    gap: 8px;
    /* Better spacing */
    z-index: 100;
}

.zoom-btn {
    width: 40px;
    height: 40px;
    background: var(--ms-zoom-bg);
    border: 1px solid transparent;
    /* Prepare for border transition */
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--ms-zoom-shadow);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--ms-zoom-color);
}

.zoom-btn:hover {
    background: var(--ms-zoom-hover-bg);
    color: var(--ms-fg);
    transform: translateY(-1px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.zoom-btn:active {
    transform: translateY(0);
    background: var(--ms-bg-muted);
}

.zoom-btn svg {
    width: 20px;
    height: 20px;
    stroke-width: 2;
    transition: all 0.2s ease;
}

.zoom-btn.active {
    background: var(--ms-primary-light);
    color: var(--ms-primary);
    border-color: var(--ms-primary);
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}

/* Mini-map */
.mini-map {
    position: absolute;
    top: 20px;
    right: 70px;
    width: 180px;
    height: 130px;
    background: var(--ms-minimap-bg);
    border: 1px solid var(--ms-border);
    border-radius: 8px;
    overflow: hidden;
    z-index: 10;
    box-shadow: var(--ms-shadow-sm);
}

.mini-map-svg {
    width: 100%;
    height: 100%;
}

/* Back to Map Button */
.back-to-map-btn {
    position: relative;
    top: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--ms-zoom-bg);
    border: 1px solid var(--ms-border);
    border-radius: 6px;
    color: var(--ms-fg-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
}

.back-to-map-btn:hover {
    background: var(--ms-primary);
    color: white;
    border-color: var(--ms-primary);
}

.back-to-map-btn svg {
    width: 16px;
    height: 16px;
}

/* Loading State */
.seating-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    color: var(--ms-fg-muted);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* SVG Maps */
.seating-plan-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Zone Styles (Overview) */
.zone-polygon {
    cursor: pointer;
    transition: all 0.2s ease;
}

.zone-polygon:hover {
    filter: brightness(1.1);
    stroke: #ffffff;
    stroke-width: 2;
}

.zone-polygon.available {
    fill: var(--ms-zone-available);
}

.zone-polygon.limited {
    fill: #a3a3a3;
}

.zone-polygon.unavailable {
    fill: var(--ms-zone-unavailable);
}

.zone-label {
    font-size: 120px;
    font-weight: 700;
    fill: var(--ms-fg);
    pointer-events: none;
    text-anchor: middle;
    dominant-baseline: central;
    /* text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); */
}

.stage-rect {
    fill: var(--ms-primary-dark);
}

.stage-label {
    font-size: 16px;
    font-weight: 600;
    fill: white;
    text-anchor: middle;
    dominant-baseline: central;
}

/* Zone Tooltip - Fixed position (CSP-compliant, no inline styles) */
.zone-tooltip {
    position: absolute;
    top: 80px;
    left: 20px;
    background: var(--ms-bg-card);
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: var(--ms-shadow-lg);
    z-index: 100;
    min-width: 180px;
    pointer-events: none;
    display: none;
    border: 1px solid var(--ms-border);
}

.zone-tooltip.is-active {
    display: block;
}

.tooltip-header {
    font-weight: 600;
    font-size: 14px;
    color: var(--ms-fg);
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ms-border);
}

.tooltip-body {
    font-size: 13px;
    color: var(--ms-fg-muted);
}

.tooltip-body .available-count {
    color: var(--ms-success);
    font-weight: 600;
}

/* Seat Styles (Detailed View) */
.seat-circle {
    cursor: pointer;
    transition: all 0.15s ease;
}

/* Seat circle base styles for correct scaling */
.seat-circle {
    transform-box: fill-box;
    transform-origin: center;
    transition: all 0.2s ease;
}

.seat-circle.available:hover {
    fill: var(--ms-seat-hover);
    r: 9;
}

.seat-circle.unavailable {
    fill: var(--ms-zone-unavailable);
    cursor: not-allowed;
}

.seat-circle.selected {
    fill: var(--ms-seat-selected);
    stroke: var(--ms-bg);
    stroke-width: 2;
}

.seat-checkmark {
    stroke: white;
    stroke-width: 2;
    fill: none;
    pointer-events: none;
}


/* Selected seat styling - slight scale to show selection */
.seat-selected-group .seat-circle.selected {
    transform: scale(1.15);
    stroke: #fff;
    stroke-width: 2;
    filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.6));
}


/* SVG Text Elements (CSP-compliant - no inline attributes) */
.zone-header-text {
    font-size: 24px;
    font-weight: 600;
    fill: var(--ms-fg);
    text-anchor: middle;
}

.row-label-text {
    font-size: 12px;
    fill: var(--ms-fg-muted);
}

/* Mini-map styles */
.minimap-zone {
    fill: var(--ms-fg-faint);
}

.minimap-zone.active {
    fill: var(--ms-zone-available);
    stroke: var(--ms-primary);
    stroke-width: 3;
}

.minimap-label {
    text-anchor: middle;
    font-size: 10px;
    font-weight: 600;
    fill: white;
}

.minimap-stage {
    fill: var(--ms-primary-dark);
}

.minimap-stage-label {
    text-anchor: middle;
    font-size: 10px;
    fill: white;
}

/* Filter Sidebar (25%) */
.filter-sidebar {
    flex: 0 0 25%;
    background: var(--ms-bg);
    border-left: 1px solid var(--ms-border-light);
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.filter-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ms-fg-secondary);
    margin-bottom: 16px;
}

.filter-header svg {
    color: var(--ms-fg-muted);
}

.filter-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.filter-dropdown {
    position: relative;
}

.filter-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--ms-bg);
    border: 1px solid var(--ms-border);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ms-fg-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-btn:hover {
    border-color: #9ca3af;
}

.filter-btn.dark {
    background: var(--ms-fg);
    color: var(--ms-bg);
    border-color: var(--ms-fg);
}

.filter-btn.dark:hover {
    background: var(--ms-fg-secondary);
}

.filter-btn svg {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
}

.filter-btn.open svg {
    transform: rotate(180deg);
}

/* Dropdown Content - Hidden by default */
.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    background: var(--ms-bg-card);
    border: 1px solid var(--ms-border);
    border-radius: 12px;
    padding: 16px;
    min-width: 220px;
    box-shadow: var(--ms-shadow-md);
    z-index: 50;
}

.dropdown-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ms-fg);
    margin-bottom: 12px;
}

.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 14px;
    color: var(--ms-fg-secondary);
    cursor: pointer;
}

.filter-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid var(--ms-border);
    accent-color: var(--ms-primary);
}

.filter-checkbox.main-option {
    font-weight: 500;
}

.filter-checkbox.sub-option {
    padding-left: 28px;
}

.checkbox-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--ms-zone-unavailable);
}

.checkbox-dot.active {
    background: var(--ms-zone-available);
}

.info-icon {
    width: 14px;
    height: 14px;
    color: var(--ms-fg-faint);
    margin-left: 4px;
}

/* Cart/Selection Area */
.selection-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.empty-cart {
    text-align: center;
    padding: 40px 20px;
}

.cart-icon {
    margin-bottom: 16px;
}

.cart-icon svg {
    opacity: 0.8;
}

.cart-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ms-fg);
    margin: 0 0 8px 0;
}

.cart-subtitle {
    font-size: 13px;
    color: var(--ms-fg-faint);
    margin: 0;
}

/* Selected Seats List */
.selected-seats h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--ms-fg);
    margin: 0 0 12px 0;
}

.selected-seats-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
    max-height: 200px;
    overflow-y: auto;
}

.selected-seats-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--ms-bg-muted);
    border-radius: 8px;
    border-left: 3px solid var(--ms-primary);
}

.seat-info {
    flex: 1;
}

.seat-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ms-fg);
}

.seat-price {
    font-size: 12px;
    color: var(--ms-fg-muted);
}

.remove-seat {
    width: 24px;
    height: 24px;
    border: none;
    background: var(--ms-danger-bg);
    color: var(--ms-danger);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.remove-seat:hover {
    background: #fecaca;
}

.lock-timer {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ms-fg-muted);
    padding: 10px;
    background: var(--ms-warning-bg);
    border-radius: 6px;
}

.lock-timer svg {
    color: var(--ms-warning);
}

.timer {
    font-weight: 700;
    font-family: 'Roboto Mono', monospace;
    color: var(--ms-warning);
}

/* Legend */
.seating-legend {
    display: flex;
    flex-direction: column;
    padding: 12px 20px;
    background: var(--ms-bg-alt);
    border-top: 1px solid var(--ms-border-light);
    gap: 6px;
}

.price-list-header {
    font-size: 13px;
    font-weight: 700;
    color: var(--ms-fg);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.price-list-items {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
}

.price-list-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ms-fg-secondary);
}

.price-list-dot {
    display: inline-block;
    width: 16px;
    height: 16px;
    min-width: 16px;
    border-radius: 3px;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1);
}

.price-list-name {
    color: var(--ms-fg-secondary);
}

.price-list-price {
    font-weight: 600;
    color: var(--ms-fg);
}

/* Hidden form inputs */
.seat-form-inputs {
    display: none;
}

/* Responsive Design */
@media (max-width: 992px) {
    .seating-content {
        flex-direction: column;
    }

    .map-panel {
        flex: 1;
        min-height: 400px;
    }

    .filter-sidebar {
        flex: none;
        border-left: none;
        border-top: 1px solid var(--ms-border-light);
    }

    .mini-map {
        width: 140px;
        height: 100px;
        right: 60px;
    }
}

@media (max-width: 576px) {
    .seating-tabs {
        padding: 0 12px;
    }

    .tab-btn {
        padding: 12px 14px;
        font-size: 13px;
    }

    .map-panel {
        padding: 15px;
    }

    .filter-sidebar {
        padding: 15px;
    }

    .filter-buttons {
        flex-direction: column;
    }

    .mini-map {
        display: none;
    }
}

/* ===========================================
   CSP-Compliant Utility Classes 
   (Avoid inline styles for CSP compliance)
   =========================================== */

/* Visibility utilities */
.is-hidden {
    display: none !important;
}

.is-visible {
    display: block !important;
}

.is-visible-flex {
    display: flex !important;
}

/* Cursor utilities */
.cursor-pointer {
    cursor: pointer;
}

.cursor-default {
    cursor: default;
}

/* Dropdown state */
.dropdown-content.is-open,
.dropdown-content.show {
    display: block;
}

/* Tooltip positioning classes */
.zone-tooltip.is-active {
    display: block;
}

/* View state classes - Overview */
.manualseats-container.view-overview #overview-svg {
    display: block;
}

.manualseats-container.view-overview #detailed-svg {
    display: none;
}

.manualseats-container.view-overview #back-to-map {
    display: none;
}

.manualseats-container.view-overview #mini-map {
    display: none;
}

/* View state classes - Detailed */
.manualseats-container.view-detailed #overview-svg {
    display: none;
}

.manualseats-container.view-detailed #detailed-svg {
    display: block;
}

.manualseats-container.view-detailed #back-to-map {
    display: flex;
}

.manualseats-container.view-detailed #mini-map {
    display: block;
}

/* Cart state classes */
.selection-area.has-items #empty-cart {
    display: none;
}

.selection-area.has-items #selected-seats {
    display: block;
}

.selection-area:not(.has-items) #empty-cart {
    display: block;
}

.selection-area:not(.has-items) #selected-seats {
    display: none;
}

/* Loading state */
.manualseats-container.is-loading #seating-loading {
    display: flex;
}

.manualseats-container:not(.is-loading) #seating-loading {
    display: none;
}

/* Selected seats header with clear button */
.selected-seats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ms-border-light);
}

.selected-seats-header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ms-fg);
}

.clear-link {
    background: none;
    border: none;
    color: var(--ms-fg-muted);
    font-size: 12px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.clear-link:hover {
    color: var(--ms-primary);
    background: var(--ms-primary-light);
}

/* Selected items list */
.selected-items-list {
    /* max-height: 200px; */
    overflow-y: auto;
    margin-bottom: 16px;
}

.selected-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--ms-bg-alt);
    border-radius: 8px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.selected-item:hover {
    background: var(--ms-bg-muted);
}

.item-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.item-zone {
    font-size: 12px;
    color: var(--ms-fg-muted);
}

.item-seat {
    font-size: 14px;
    font-weight: 500;
    color: var(--ms-fg);
}

.remove-item {
    background: none;
    border: none;
    color: var(--ms-fg-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    line-height: 1;
    transition: all 0.2s ease;
}

.remove-item:hover {
    color: var(--ms-primary);
    background: var(--ms-primary-light);
}

/* Cart actions */
.cart-actions {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--ms-border-light);
}

.add-to-cart-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    background: var(--ms-primary-gradient);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.add-to-cart-btn:hover:not(:disabled) {
    background: var(--ms-primary-gradient-hover);
    transform: translateY(-1px);
    box-shadow: var(--ms-shadow-btn);
}

.add-to-cart-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.add-to-cart-btn svg {
    width: 18px;
    height: 18px;
}

/* Hide cart actions when no items */
.selection-area:not(.has-items) .cart-actions {
    display: none;
}

.selection-area.has-items .cart-actions {
    display: block;
}

/* Toast notification */
.cart-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--ms-toast-bg);
    color: white;
    padding: 14px 24px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: var(--ms-shadow-lg);
    z-index: 10000;
    opacity: 0;
    transition: all 0.3s ease;
}

.cart-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.cart-toast svg {
    flex-shrink: 0;
}

/* Spinner animation for buttons */
.spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Legend unavailable dot */
.legend-dot.unavailable {
    background-color: var(--ms-fg-faint);
}

/* Cart badge update animation */
.cart-updated {
    animation: cartPop 0.3s ease;
}

@keyframes cartPop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

/* Updated Selection List Styles */
/* Sidebar Layout */
/* Sidebar Layout */
.filter-sidebar {
    width: 340px;
    display: flex;
    flex-direction: column;
    padding: 10px;
    background: var(--ms-bg);
    border-left: 1px solid var(--ms-border);
    flex-shrink: 0;
}

.selection-area {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    /* For inner scrolling */
    min-height: 200px;
    /* Ensure space for list */
}

.selected-seats {
    flex: 1;
    overflow-y: auto;
    padding: 5px 2px;
    /* Slight padding for shadows */
}

/* Updated Selection Card Styles */
.selected-seat-card {
    display: flex;
    align-items: center;
    padding: 12px;
    margin-bottom: 10px;
    background: var(--ms-bg-card);
    border-radius: 12px;
    box-shadow: var(--ms-shadow-card);
    border: 1px solid var(--ms-border);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.selected-seat-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.seat-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--ms-seat-card-icon-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.seat-card-details {
    flex: 1;
    min-width: 0;
}

.seat-card-product {
    font-weight: 700;
    font-size: 14px;
    color: var(--ms-fg);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.seat-card-loc {
    font-size: 12px;
    color: var(--ms-fg-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.seat-card-remove {
    background: none;
    border: none;
    color: var(--ms-fg-faint);
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    margin-left: 8px;
    transition: all 0.2s;
    display: flex;
}

.seat-card-remove:hover {
    background: var(--ms-danger-bg);
    color: var(--ms-danger);
}

/* Sticky Footer Actions */
.cart-actions {
    margin-top: auto;
    background: var(--ms-bg);
    padding: 16px;
    border-radius: 16px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--ms-border);
    position: sticky;
    bottom: 0;
    z-index: 10;
}

.add-to-cart-btn {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 50px;
    /* Fully rounded */
    background: var(--ms-primary);
    /* Dark red */
    border: none;
    margin-bottom: 12px;
}

.add-to-cart-btn:hover:not(:disabled) {
    background: var(--ms-primary-hover);
}

.cart-total-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
}

.total-label {
    font-weight: 700;
    color: var(--ms-fg);
}

.total-amount {
    font-weight: 800;
    color: var(--ms-fg);
    margin-left: auto;
    margin-right: 4px;
}

.total-currency {
    font-weight: 700;
    color: var(--ms-fg);
    font-size: 16px;
}

/* Detailed Seat Tooltip */
.seat-tooltip {
    position: absolute;
    background: var(--ms-bg-card);
    border-radius: 8px;
    box-shadow: var(--ms-shadow-lg);
    z-index: 200;
    min-width: 220px;
    pointer-events: none;
    display: none;
    border: 1px solid var(--ms-border);
}

.row-label-text {
    font-size: 14px;
    font-weight: 700;
    fill: var(--ms-fg-muted);
    pointer-events: none;
    dominant-baseline: middle;
}

.tooltip-grid {
    display: flex;
    padding: 12px;
}

.tooltip-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
}

.tooltip-col.border-left {
    border-left: 1px solid var(--ms-border);
}

.tooltip-label {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--ms-tooltip-label);
    font-weight: 700;
    margin-bottom: 2px;
}

.tooltip-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--ms-fg);
}

.tooltip-divider {
    height: 1px;
    background: var(--ms-border);
    width: 100%;
}

.tooltip-product-row {
    padding: 12px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.tooltip-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-top: 2px;
    flex-shrink: 0;
}

.tooltip-info {
    display: flex;
    flex-direction: column;
}

.tooltip-product {
    font-size: 14px;
    font-weight: 700;
    color: var(--ms-fg);
    margin-bottom: 2px;
}

.tooltip-price {
    font-size: 13px;
    color: var(--ms-fg-secondary);
}

/* Ensure seat interactions work reliably */
.seat-group {
    cursor: default;
}

.seat-circle {
    pointer-events: all;
    transition: r 0.2s ease, stroke-width 0.2s ease;
}

.seat-circle:hover {
    stroke: rgba(0, 0, 0, 0.5);
    stroke-width: 2px;
}

.seat-group.cursor-pointer {
    cursor: pointer;
}

/* Filtered state */
.seat-group.filtered,
.seat-circle.filtered {
    opacity: 0.1;
    pointer-events: none;
    filter: grayscale(100%);
}

/* Product Info Modal */
.product-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--ms-bg-overlay);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.product-modal-content {
    background: var(--ms-modal-bg);
    padding: 24px;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    position: relative;
    box-shadow: var(--ms-shadow-lg);
    animation: modalSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid var(--ms-border);
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.product-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: var(--ms-fg-muted);
    padding: 4px;
    border-radius: 4px;
    transition: background 0.2s;
}

.product-modal-close:hover {
    background: var(--ms-bg-muted);
    color: var(--ms-fg);
}

.product-modal-header {
    margin-bottom: 16px;
    padding-right: 24px;
}

.product-modal-header h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ms-fg);
}

.product-modal-body {
    color: var(--ms-fg-secondary);
    line-height: 1.5;
}

#modal-product-description {
    margin-bottom: 20px;
}

.product-modal-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ms-primary);
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--ms-border);
}

/* Seat Card Price */
.seat-card-price {
    font-weight: 600;
    color: var(--ms-primary);
    margin-top: 4px;
    font-size: 0.9rem;
}

/* Seat Card Variation Dropdown */
.seat-card-variation {
    width: 100%;
    padding: 6px 10px;
    margin-top: 6px;
    border: 1px solid var(--ms-border);
    border-radius: 6px;
    background: var(--ms-bg-card);
    color: var(--ms-text-primary);
    font-size: 0.82rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    appearance: auto;
    -webkit-appearance: auto;
}

.seat-card-variation:hover {
    border-color: var(--ms-primary);
}

.seat-card-variation:focus {
    outline: none;
    border-color: var(--ms-primary);
    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.15);
}

/* ============================================
   THEME TOGGLE BUTTON
   ============================================ */
.theme-toggle-btn {
    background: var(--ms-bg-card);
    border: 1px solid var(--ms-border);
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: var(--ms-fg-muted);
    box-shadow: var(--ms-shadow-sm);
    margin-left: 12px;
}

.theme-toggle-btn:hover {
    background: var(--ms-bg-muted);
    color: var(--ms-primary);
    border-color: var(--ms-primary);
}

.theme-toggle-btn svg {
    width: 18px;
    height: 18px;
}

.theme-toggle-btn .icon-moon {
    display: block;
}

.theme-toggle-btn .icon-sun {
    display: none;
}

[data-theme="dark"] .theme-toggle-btn .icon-moon {
    display: none;
}

[data-theme="dark"] .theme-toggle-btn .icon-sun {
    display: block;
}

/* ============================================
   PRETIX BASE LAYOUT - Dark Mode Overrides
   These override the compiled pretix SCSS
   ============================================ */
[data-theme="dark"] body {
    background-color: var(--ms-body-bg) !important;
    color: var(--ms-fg) !important;
}

[data-theme="dark"] .main-box {
    background: var(--ms-main-box-bg) !important;
    border-color: var(--ms-panel-border) !important;
}

[data-theme="dark"] .page-header,
[data-theme="dark"] .page-header h1,
[data-theme="dark"] .page-header h2 {
    color: var(--ms-fg) !important;
    border-color: var(--ms-panel-border) !important;
}

[data-theme="dark"] .panel,
[data-theme="dark"] .panel-default {
    background-color: var(--ms-panel-bg) !important;
    border-color: var(--ms-panel-border) !important;
}

[data-theme="dark"] .panel-heading {
    background-color: var(--ms-panel-heading) !important;
    border-color: var(--ms-panel-border) !important;
    color: var(--ms-fg) !important;
}

[data-theme="dark"] .panel-body {
    color: var(--ms-fg-secondary) !important;
}

[data-theme="dark"] .panel-footer {
    background-color: var(--ms-panel-heading) !important;
    border-color: var(--ms-panel-border) !important;
}

[data-theme="dark"] a {
    color: var(--ms-link-color);
}

[data-theme="dark"] a:hover,
[data-theme="dark"] a:focus {
    color: var(--ms-primary-hover);
}

/* Forms */
[data-theme="dark"] .form-control {
    background-color: var(--ms-input-bg) !important;
    border-color: var(--ms-input-border) !important;
    color: var(--ms-input-color) !important;
}

[data-theme="dark"] .form-control:focus {
    border-color: var(--ms-primary) !important;
    box-shadow: 0 0 0 2px var(--ms-primary-light) !important;
}

[data-theme="dark"] label,
[data-theme="dark"] .control-label {
    color: var(--ms-fg-secondary) !important;
}

[data-theme="dark"] select.form-control {
    background-color: var(--ms-input-bg) !important;
    color: var(--ms-input-color) !important;
}

/* Buttons */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-primary:focus {
    background-color: var(--ms-primary) !important;
    border-color: var(--ms-primary-dark) !important;
}

[data-theme="dark"] .btn-primary:hover {
    background-color: var(--ms-primary-hover) !important;
    border-color: var(--ms-primary-dark) !important;
}

[data-theme="dark"] .btn-default {
    background-color: var(--ms-bg-muted) !important;
    border-color: var(--ms-border) !important;
    color: var(--ms-fg) !important;
}

[data-theme="dark"] .btn-default:hover {
    background-color: var(--ms-border) !important;
    color: var(--ms-fg) !important;
}

/* Tables */
[data-theme="dark"] .table,
[data-theme="dark"] .table>thead>tr>th,
[data-theme="dark"] .table>tbody>tr>td {
    border-color: var(--ms-panel-border) !important;
    color: var(--ms-fg-secondary) !important;
}

[data-theme="dark"] .table>thead>tr>th {
    background-color: var(--ms-panel-heading) !important;
    color: var(--ms-fg) !important;
}

[data-theme="dark"] .table-striped>tbody>tr:nth-of-type(odd) {
    background-color: var(--ms-bg-muted) !important;
}

/* Alerts */
[data-theme="dark"] .alert-info {
    background-color: rgba(96, 165, 250, 0.1) !important;
    border-color: rgba(96, 165, 250, 0.2) !important;
    color: var(--ms-info) !important;
}

[data-theme="dark"] .alert-warning {
    background-color: var(--ms-warning-bg) !important;
    border-color: rgba(245, 158, 11, 0.2) !important;
    color: var(--ms-warning) !important;
}

[data-theme="dark"] .alert-danger {
    background-color: var(--ms-danger-bg) !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
    color: var(--ms-danger) !important;
}

/* Footer */
[data-theme="dark"] footer,
[data-theme="dark"] .footer,
[data-theme="dark"] .powered-by {
    color: var(--ms-footer-color) !important;
}

[data-theme="dark"] footer a {
    color: var(--ms-fg-faint) !important;
}

[data-theme="dark"] footer a:hover {
    color: var(--ms-primary) !important;
}

/* Navbar / Header */
[data-theme="dark"] .navbar,
[data-theme="dark"] .navbar-default {
    background-color: var(--ms-bg-card) !important;
    border-color: var(--ms-panel-border) !important;
}

[data-theme="dark"] .navbar-default .navbar-nav>li>a {
    color: var(--ms-fg-secondary) !important;
}

[data-theme="dark"] .navbar-default .navbar-nav>li>a:hover {
    color: var(--ms-primary) !important;
}

/* Well/Container */
[data-theme="dark"] .well {
    background-color: var(--ms-bg-muted) !important;
    border-color: var(--ms-panel-border) !important;
    color: var(--ms-fg-secondary) !important;
}

/* Breadcrumbs */
[data-theme="dark"] .breadcrumb {
    background-color: var(--ms-bg-muted) !important;
}

[data-theme="dark"] .breadcrumb>li,
[data-theme="dark"] .breadcrumb>.active {
    color: var(--ms-fg-muted) !important;
}

/* Badges & Labels */
[data-theme="dark"] .badge {
    background-color: var(--ms-primary) !important;
}

[data-theme="dark"] .label-default {
    background-color: var(--ms-fg-faint) !important;
}

/* Help text */
[data-theme="dark"] .help-block {
    color: var(--ms-fg-faint) !important;
}

/* Horizontal rules */
[data-theme="dark"] hr {
    border-color: var(--ms-panel-border) !important;
}

/* List groups */
[data-theme="dark"] .list-group-item {
    background-color: var(--ms-panel-bg) !important;
    border-color: var(--ms-panel-border) !important;
    color: var(--ms-fg-secondary) !important;
}

[data-theme="dark"] .list-group-item:hover {
    background-color: var(--ms-bg-muted) !important;
}

/* Pretix event header / page-header */
[data-theme="dark"] .event-header,
[data-theme="dark"] #event-header {
    color: var(--ms-fg) !important;
}

/* Cart icon in seating */
[data-theme="dark"] .cart-icon svg path[fill] {
    fill: var(--ms-cart-icon-fill);
}

/* Voucher Modal - Identical to Product Modal */
#voucher-modal.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--ms-bg-overlay);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

#voucher-modal .modal-content {
    background: var(--ms-modal-bg);
    padding: 24px;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    position: relative;
    box-shadow: var(--ms-shadow-lg);
    animation: modalSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid var(--ms-border);
    display: flex;
    flex-direction: column;
}

#voucher-modal .modal-header {
    margin-bottom: 16px;
    padding-right: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#voucher-modal .modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ms-fg);
}

#voucher-modal .modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: var(--ms-fg-muted);
    padding: 4px;
    border-radius: 4px;
    transition: background 0.2s;
    background: transparent;
    border: none;
}

#voucher-modal .modal-close:hover {
    background: var(--ms-bg-muted);
    color: var(--ms-fg);
}

#voucher-modal .modal-body {
    color: var(--ms-fg-secondary);
    line-height: 1.5;
    margin-bottom: 20px;
}

#voucher-modal .form-group {
    margin-bottom: 0;
}

#voucher-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--ms-border);
}

/* Re-use existing btn classes but ensure specific overrides if needed */
#voucher-modal .btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

/* Filtered Map Styles */
.seat.filtered-out,
.zone-group.filtered-out {
    opacity: 0.1 !important;
    pointer-events: none !important;
    filter: grayscale(100%);
}

.seat.voucher-highlight {
    opacity: 1 !important;
    stroke: var(--ms-success-fg) !important;
    stroke-width: 2px !important;
    r: 6px !important;
    /* Make slightly larger if circle */
    transition: all 0.3s ease;
}

/* Ensure selected seats stay visible */
.seat.selected {
    opacity: 1 !important;
    pointer-events: auto !important;
    filter: none !important;
}

/* Voucher Success Modal */
#voucher-success-modal.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--ms-bg-overlay);
    z-index: 2100;
    /* Higher than voucher modal */
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

#voucher-success-modal .modal-content {
    background: var(--ms-modal-bg);
    padding: 24px;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: var(--ms-shadow-lg);
    border: 1px solid var(--ms-success-border);
}

#voucher-success-modal h3 {
    color: var(--ms-success-fg);
    margin-top: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

#voucher-success-modal ul {
    margin: 15px 0;
    padding-left: 20px;
    color: var(--ms-fg);
}

#voucher-success-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

/* Sidebar Voucher Code */
.seat-card-voucher {
    font-size: 0.85rem;
    color: var(--ms-success-fg);
    margin-top: 4px;
    padding: 2px 0;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.seat-card-voucher i {
    font-size: 0.8rem;
    opacity: 0.8;
}

/* Filtered out seats */
.cursor-pointer.filtered-out,
.zone-polygon.filtered-out {
    opacity: 0.1 !important;
    pointer-events: none !important;
    filter: grayscale(100%);
}

/* Highlighted voucher seats */
.cursor-pointer.voucher-highlight {
    opacity: 1 !important;
    filter: drop-shadow(0 0 4px var(--ms-primary));
    z-index: 100;
}