@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');

.mt-seating-engine {
    background: #f8fafc;
    border-radius: 32px;
    padding: 30px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.12);
    font-family: 'Inter', sans-serif;
    max-width: 1000px;
    margin: 40px auto;
    border: 1px solid rgba(255,255,255,0.8);
}
.mt-seating-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 0 15px;
}
.mt-seating-header h3 {
    font-size: 24px;
    font-weight: 800;
    color: #1e293b;
    margin: 0;
}
.mt-legend { 
    display: flex; 
    gap: 20px; 
    font-size: 13px; 
    font-weight: 600;
    color: #64748b;
    background: rgba(255,255,255,0.6);
    padding: 10px 20px;
    border-radius: 50px;
    backdrop-filter: blur(5px);
    border: 1px solid #e2e8f0;
}
.legend-item { display: flex; align-items: center; gap: 8px; }
.dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.dot.available { background: linear-gradient(135deg, #38bdf8, #0284c7); }
.dot.selected { background: linear-gradient(135deg, #fbbf24, #d97706); }
.dot.sold { background: #cbd5e1; }

.mt-seating-viewport {
    overflow: auto;
    cursor: grab;
    background: #ffffff;
    background-image: 
        radial-gradient(circle at 2px 2px, #f1f5f9 1px, transparent 0);
    background-size: 32px 32px;
    border-radius: 24px;
    height: 750px;
    border: 1px solid #e2e8f0;
    display: flex;
    justify-content: center;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.02);
}
.mt-seating-canvas {
    padding: 80px;
    transform-origin: center top;
}
.mt-seating-footer {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    background: #1e293b;
    color: white;
    border-radius: 24px;
    box-shadow: 0 15px 30px rgba(30, 41, 59, 0.2);
}
.mt-selection-info { font-weight: 600; font-size: 15px; }
.mt-btn-primary {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: white;
    border: none;
    padding: 14px 35px;
    border-radius: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3);
}
.mt-btn-primary:disabled { background: #475569; opacity: 0.6; cursor: not-allowed; box-shadow: none; }
.mt-btn-primary:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(99, 102, 241, 0.4); }

/* SVG Styles */
.mt-table-body { fill: #fff; stroke: #cbd5e1; stroke-width: 1.5; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.05)); }
.mt-table-label { font-size: 12px; font-weight: 800; fill: #475569; pointer-events: none; }
.mt-seat { 
    cursor: pointer; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    transform-origin: center;
    transform-box: fill-box;
}
.mt-seat.available { 
    fill: url(#grad-available); 
    stroke: rgba(255,255,255,0.8); 
    stroke-width: 2;
}
.mt-seat.available:hover { transform: scale(1.3); filter: brightness(1.1); }
.mt-seat.selected { 
    fill: url(#grad-selected); 
    stroke: #fff; 
    stroke-width: 3; 
    transform: scale(1.15);
    filter: drop-shadow(0 5px 15px rgba(245, 158, 11, 0.4));
}
.mt-seat.sold {
    fill: #991b1b !important;
    stroke: #7f1d1d !important;
    cursor: not-allowed;
    opacity: 1 !important;
}

.stage-box { fill: #1e293b; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.2)); }