/**
 * 🎯 CSS OTIMIZADO PARA MOBILE - Carrossel de Loterias
 * ====================================================
 * 
 * Ajusta as dimensões das caixas para eliminar área vazia excessiva
 */

/* ⚡ REMOVIDO: transform scale que estava causando problemas */

/* Media Query para Tablets e Mobile */
@media (max-width: 768px) {
    .carousel-wrapper {
        padding: 10px;
        margin: 5px;
    }
    
    .carousel-slides {
        gap: 12px;
        padding: 10px 0;
    }
    
    .carousel-slide {
        min-width: 100px; /* ⚡ REDUZIDO: 140px → 100px para evitar overflow */
        max-width: 120px; /* ⚡ NOVO: Largura máxima */
        height: 140px; /* ⚡ AUMENTADO: 120px → 140px para mais espaço */
        padding: 10px; /* ⚡ REDUZIDO: 15px → 10px */
        border-radius: 12px;
        flex-shrink: 1; /* ⚡ NOVO: Permite encolher se necessário */
    }
    
    .main-value {
        font-size: 18px; /* ⚡ REDUZIDO: 36px → 18px */
        line-height: 1.2;
    }
    
    .unit {
        font-size: 10px; /* ⚡ REDUZIDO: 14px → 10px */
    }
    
    .slide-name {
        font-size: 10px; /* ⚡ REDUZIDO: 12px → 10px */
        padding: 6px; /* ⚡ REDUZIDO: 8px → 6px */
        margin-bottom: 4px;
    }
    
    .slide-label {
        font-size: 8px; /* ⚡ REDUZIDO: 10px → 8px */
        padding: 4px 8px; /* ⚡ REDUZIDO: 6px → 4px */
        margin-top: 4px;
        margin-bottom: 12px; /* ⚡ AUMENTADO: 8px → 12px para valores acumulados */
    }
    
    .slide-value {
        margin: 4px 0; /* ⚡ REDUZIDO: 2px → 4px */
    }
}

/* Media Query para Mobile Pequeno */
@media (max-width: 480px) {
    .carousel-wrapper {
        /* Scale removido para evitar problemas visuais */
    }
    
    .carousel-slide {
        min-width: 90px; /* ⚡ REDUZIDO: 120px → 90px para mobile pequeno */
        max-width: 110px; /* ⚡ NOVO: Largura máxima */
        height: 120px; /* ⚡ AUMENTADO: 100px → 120px para mais espaço */
        padding: 8px; /* ⚡ REDUZIDO: 12px → 8px */
        border-radius: 10px;
        flex-shrink: 1; /* ⚡ NOVO: Permite encolher se necessário */
    }
    
    .main-value {
        font-size: 16px; /* ⚡ REDUZIDO: 32px → 16px */
    }
    
    .unit {
        font-size: 9px; /* ⚡ REDUZIDO: 10px → 9px */
    }
    
    .slide-name {
        font-size: 9px; /* ⚡ REDUZIDO: 10px → 9px */
        padding: 5px; /* ⚡ REDUZIDO: 6px → 5px */
    }
    
    .slide-label {
        font-size: 7px; /* ⚡ REDUZIDO: 8px → 7px */
        padding: 3px 6px; /* ⚡ REDUZIDO: 4px → 3px */
        margin-bottom: 10px; /* ⚡ ADICIONADO: folga para valores acumulados */
    }
    
    .carousel-slides {
        gap: 10px;
        padding: 8px 0;
    }
}

/* Media Query para Mobile Muito Pequeno */
@media (max-width: 360px) {
    .carousel-wrapper {
        /* Scale removido para evitar problemas visuais */
    }
    
    .carousel-slide {
        min-width: 80px; /* ⚡ REDUZIDO: 100px → 80px para mobile muito pequeno */
        max-width: 100px; /* ⚡ NOVO: Largura máxima */
        height: 110px; /* ⚡ AUMENTADO: 90px → 110px para mais espaço */
        padding: 6px; /* ⚡ REDUZIDO: 8px → 6px */
        flex-shrink: 1; /* ⚡ NOVO: Permite encolher se necessário */
    }
    
    .main-value {
        font-size: 14px; /* ⚡ REDUZIDO: 16px → 14px */
    }
    
    .slide-name {
        font-size: 8px; /* ⚡ REDUZIDO: 9px → 8px */
        padding: 4px; /* ⚡ REDUZIDO: 5px → 4px */
    }
    
    .slide-label {
        font-size: 6px; /* ⚡ REDUZIDO: 7px → 6px */
        padding: 2px 5px; /* ⚡ REDUZIDO: 3px → 2px */
        margin-bottom: 8px; /* ⚡ ADICIONADO: folga para valores acumulados */
    }
}

/* Otimizações específicas para eliminar área vazia */
@media (max-width: 768px) {
    .slide-content {
        gap: 2px; /* ⚡ REDUZIDO: menos espaçamento entre elementos */
        justify-content: space-between; /* ⚡ OTIMIZADO: distribui melhor o espaço */
    }
    
    .carousel-slide {
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* ⚡ OTIMIZADO: elimina área vazia */
        align-items: center;
    }
    
    /* ⚡ AUMENTADO: Folga na borda inferior para todos os labels */
    .slide-label {
        margin-bottom: 12px !important; /* ⚡ AUMENTADO: 8px → 12px para valores acumulados */
    }
}

/* ⚡ AUMENTADO: Folga geral para mobile pequeno */
@media (max-width: 480px) {
    .slide-label {
        margin-bottom: 10px !important; /* ⚡ AUMENTADO: 6px → 10px */
    }
}

/* ⚡ AUMENTADO: Folga geral para mobile muito pequeno */
@media (max-width: 360px) {
    .slide-label {
        margin-bottom: 8px !important; /* ⚡ AUMENTADO: 5px → 8px */
    }
}

/* ⚡ NOVO: Regra específica para valores acumulados (mais longos) */
@media (max-width: 768px) {
    .slide-label:has(+ .slide-value:contains("milhões")) {
        margin-bottom: 16px !important; /* ⚡ FOLGA EXTRA para valores em milhões */
    }
    
    .slide-label:has(+ .slide-value:contains("R$")) {
        margin-bottom: 14px !important; /* ⚡ FOLGA EXTRA para valores monetários */
    }
}

/* ⚡ NOVO: Ajuste dinâmico baseado no conteúdo */
@media (max-width: 768px) {
    .carousel-slide {
        padding-bottom: 15px; /* ⚡ AUMENTADO: padding inferior para garantir folga */
    }
    
    .slide-content {
        padding-bottom: 8px; /* ⚡ ADICIONADO: padding inferior no conteúdo */
    }
}