/**
 * Seatmap Styles
 */

/* Container principal */
.concert-seatmap-wrapper {
    width: 100%;
}

/* Conteneur du SVG */
.seatmap-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.seatmap-container svg {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

/* Zones cliquables */
[data-zone] {
    cursor: pointer;
    transition: all 0.15s ease;
}

[data-zone]:hover {
    fill-opacity: 0.5 !important;
    stroke-width: 2 !important;
}

[data-zone]:focus {
    outline: none;
    stroke-width: 3 !important;
}

[data-zone][data-status="soldout"] {
    cursor: not-allowed;
}

[data-zone][data-status="soldout"]:hover {
    fill-opacity: 0.35 !important;
}

/* Zone sélectionnée */
[data-zone].selected {
    fill: #111827 !important;
    fill-opacity: 0.7 !important;
    stroke: #111827 !important;
    stroke-width: 2 !important;
}

/* Animation pulse pour les zones avec peu de places */
[data-zone][data-status="low"] {
    animation: seatmap-pulse 2s ease infinite;
}

@keyframes seatmap-pulse {
    0%, 100% {
        fill-opacity: 0.3;
    }
    50% {
        fill-opacity: 0.5;
    }
}

/* Boutons de zoom */
.seatmap-zoom-in,
.seatmap-zoom-out,
.seatmap-zoom-fit {
    font-family: system-ui, -apple-system, sans-serif;
    border: none;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.seatmap-zoom-in:hover,
.seatmap-zoom-out:hover,
.seatmap-zoom-fit:hover {
    background: #f9fafb;
}

.seatmap-zoom-in:active,
.seatmap-zoom-out:active,
.seatmap-zoom-fit:active {
    transform: scale(0.95);
}

/* Modal */
#seatmap-modal {
    transition: opacity 0.2s ease;
}

#seatmap-modal [data-modal-content] {
    animation: seatmap-modal-in 0.2s ease;
}

@keyframes seatmap-modal-in {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Boutons quantité du modal */
.seatmap-qty-decrease,
.seatmap-qty-increase {
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: system-ui, -apple-system, sans-serif;
}

.seatmap-qty-decrease:disabled,
.seatmap-qty-increase:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Responsive */
@media (max-width: 768px) {
    .seatmap-container svg {
        transform-origin: center center;
    }
    
    #seatmap-modal [data-modal-content] {
        margin: 1rem;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }
}

/* Pattern hachuré pour les zones épuisées */
.seatmap-hatch-pattern {
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 4px,
        #9CA3AF 4px,
        #9CA3AF 5px
    );
}