/* 
 * Gatepass - CSS para Mapa de Assentos
 * Componente para seleção de assentos em eventos com lugares marcados
 * v1.1 - Corrigido para evitar duplicação de elementos
 */

/* ==========================================
   CONTAINER DO MAPA DE ASSENTOS
   ========================================== */
.seat-map-container {
    position: relative;
    width: 100%;
    overflow-x: auto;
    padding: 10px 0;
}

/* Palco/Tela */
.stage {
    background-color: var(--mt-color-primary);
    color: #fff;
    text-align: center;
    padding: 8px;
    margin-bottom: 20px;
    border-radius: var(--mt-border-radius);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Container do mapa */
.seat-map {
    display: grid;
    grid-gap: 5px;
    margin-bottom: 15px;
    min-width: 280px;
    position: relative; /* Garante contexto para posicionamento */
    z-index: 1; /* Controle de camada */
}

/* Linha de assentos */
.seat-row {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

/* Identificador da fileira */
.seat-row-label {
    width: 20px;
    text-align: center;
    font-weight: bold;
    font-size: 0.8rem;
    margin-right: 10px;
    color: var(--mt-text-muted);
}

/* Assento individual */
.seat {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    margin: 2px;
    cursor: pointer;
    transition: var(--mt-transition);
}

/* Estados dos assentos */
.seat-available {
    background-color: rgba(45, 42, 110, 0.2); /* --mt-color-primary com opacidade */
    border: 1px solid var(--mt-color-primary);
}

.seat-selected {
    background-color: var(--mt-color-hover);
    border: 1px solid var(--mt-color-hover);
}

.seat-sold {
    background-color: #e0e0e0;
    border: 1px solid #ccc;
    cursor: not-allowed;
    opacity: 0.7;
}

.seat-vip {
    background-color: rgba(138, 43, 226, 0.3); /* Roxo/Violeta para VIP */
    border: 1px solid blueviolet;
}

.seat:hover:not(.seat-sold) {
    transform: scale(1.1);
}

/* ==========================================
   LEGENDA DE ASSENTOS
   ========================================== */
.seat-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 15px;
    padding: 10px;
    border-top: 1px solid #eee;
}

.legend-item {
    display: flex;
    align-items: center;
    font-size: 0.8rem;
}

.legend-seat {
    width: 15px;
    height: 15px;
    margin-right: 5px;
    cursor: default;
}

.legend-seat:hover {
    transform: none;
}

/* ==========================================
   RESUMO DA COMPRA
   ========================================== */
.purchase-summary {
    background-color: #f9f9f9;
    border-radius: var(--mt-border-radius);
    padding: 10px;
    font-size: 0.9rem;
}

.selected-seats p, .selected-tickets p {
    margin-bottom: 0.3rem;
}

#selected-seats-list, #selected-seats-total, [id^="general-total-"] {
    font-weight: bold;
    color: var(--mt-color-primary);
}

/* ==========================================
   SELETOR DE QUANTIDADE (PISTA)
   ========================================== */
.quantity-selector {
    background-color: #f9f9f9;
    border-radius: var(--mt-border-radius);
    padding: 10px;
}

.ticket-quantity {
    min-width: 40px;
}

/* ==========================================
   RESPONSIVIDADE
   ========================================== */
@media (max-width: 768px) {
    .seat-map-container {
        padding: 5px;
    }
    
    .seat {
        width: 18px;
        height: 18px;
    }
    
    .seat-row-label {
        font-size: 0.7rem;
        width: 15px;
        margin-right: 5px;
    }
    
    .legend-item {
        font-size: 0.7rem;
    }
}