/* =========================================
   1. CONTROLE DE EXIBIÇÃO DA MODAL
========================================= */
._modal_calendar {
    display: none;
}

/* Quando o JS adicionar a classe, usamos FLEX para centralizar na tela */
._modal_calendar--show {
    display: flex !important;
}

/* =========================================
   2. FUNDO DA TELA (VIDRO ESCURO)
========================================= */
#modal-seletor-data {
    /* Fixed prende a modal na tela, ignorando o scroll do site */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    overflow: hidden !important;
    
    /* Centraliza tudo no meio da tela */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    /* Fundo escuro com desfoque para destacar a caixa central */
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    
    margin: 0;
    padding: 20px;
    box-sizing: border-box; /* Evita barra de rolagem horizontal */
}

#modal-seletor-data ~ .app-container{
    overflow: hidden !important;
}

/* =========================================
   3. CAIXA CENTRAL E GRUPOS (FLEX)
========================================= */
.calendar_container {
    display: flex;
    flex-wrap: wrap; /* Quebra linha no celular automaticamente */
    gap: 15px;       /* Espaço perfeito entre os grupos */
    justify-content: center;
    align-items: center;
    
    /* Efeito de Vidro na caixa */
    background: rgba(255, 255, 255, 0.1);
    padding: 30px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    
    margin-bottom: 25px; /* Espaço entre a caixa e os botões */
    max-width: 100%;
}

/* Grupo que alinha o Label e o Select juntos na vertical */
.select-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px; 
}

/* =========================================
   4. ESTILIZAÇÃO DOS LABELS E SELECTS
========================================= */
#modal-seletor-data label {
    color: #ffffff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
    cursor: pointer;
    transition: color 0.3s ease;
}

#modal-seletor-data label:hover {
    color: #a8d5ff;
}

#modal-seletor-data select {
    width: 100px;
    height: 64px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    padding: 0.5em;
    cursor: pointer;
    outline: none;
    
    /* Contraste: Fundo escuro semitransparente */
    background: rgba(0, 0, 0, 0.4); 
    color: #ffffff;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    
    transition: all 0.3s ease;
    
    /* Remove a setinha nativa */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* Oculta scrollbar no Firefox */
    scrollbar-width: none; 
}

/* Oculta scrollbar no Chrome, Edge, Safari e Opera */
#modal-seletor-data select::-webkit-scrollbar {
    display: none; 
    width: 0;
    height: 0; 
}
#modal-seletor-data select::-webkit-scrollbar-track {
    background: transparent; 
}
#modal-seletor-data select::-webkit-scrollbar-thumb {
    background: transparent; 
}

/* Interação ao passar o mouse ou clicar */
#modal-seletor-data select:hover,
#modal-seletor-data select:focus {
    background: rgba(0, 0, 0, 0.6);
    border-color: #ffffff;
    transform: translateY(-2px);
}

/* A lista que abre ao clicar */
#modal-seletor-data select option {
    background-color: #2c3e50; 
    color: white;
    font-size: 18px;
    text-shadow: none; 
}

/* =========================================
   5. BOTÕES (CONFIRMAR E X)
========================================= */
.botoes_container {
    display: flex;
    gap: 20px; 
}

#modal-seletor-data .botoes_container span a {
    display: inline-block;
    padding: 12px 30px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    color: #ffffff;
    
    /* Design de vidro arredondado */
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 50px; 
    
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

#modal-seletor-data .botoes_container span a:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

/* Botão X (Vermelho transparente) */
#modal-seletor-data .botoes_container span:last-child a {
    background: rgba(220, 53, 69, 0.4);
    padding: 12px 20px; 
}

#modal-seletor-data .botoes_container span:last-child a:hover {
    background: rgba(220, 53, 69, 0.8);
}

/* =========================================
   6. RESPONSIVIDADE (MEDIA QUERIES)
========================================= */

/* Para telas muito pequenas (Celulares estreitos - até 380px) */
@media (max-width: 380px) {
    .calendar_container {
        padding: 15px; 
        gap: 10px;     
    }

    #modal-seletor-data select {
        width: 70px;     
        height: 50px;
        font-size: 18px; 
        padding: 0.2em;
    }

    #modal-seletor-data label {
        font-size: 12px;
    }

    #modal-seletor-data .botoes_container span a {
        padding: 10px 20px;
        font-size: 14px; 
    }
}

/* Para telas pequenas normais (Celulares modernos em pé - até 600px) */
@media (max-width: 600px) {
    .calendar_container {
        width: 95%; 
        padding: 20px;
    }

    #modal-seletor-data select {
        width: 80px; 
        height: 55px;
        font-size: 20px; 
    }
}

/* Para Telas Gigantes (Smart TVs 4K, Monitores Ultrawide - acima de 1920px) */
@media (min-width: 1920px) {
    .calendar_container {
        padding: 60px; 
        gap: 30px;
        border-radius: 30px;
    }

    #modal-seletor-data select {
        width: 150px;    
        height: 90px;
        font-size: 36px; 
        border-radius: 20px;
    }

    #modal-seletor-data label {
        font-size: 22px;
    }

    #modal-seletor-data .botoes_container span a {
        padding: 20px 50px;
        font-size: 24px; 
        border-radius: 60px;
    }
}



/* =========================================
   6. RESPONSIVIDADE (MEDIA QUERIES)
========================================= */

/* Para telas de celulares modernos e tablets (até 600px) */
@media (max-width: 600px) {
    #modal-seletor-data {
        justify-content: flex-start; /* Alinha o conteúdo no topo para permitir scroll natural */
        overflow-y: auto !important; /* Ativa a rolagem vertical se a tela for muito baixa */
        padding: 10px;
    }

    .calendar_container {
        width: 100%;             /* Ocupa a largura disponível com segurança */
        flex-direction: column;  /* Mantém um embaixo do outro */
        gap: 12px;               /* Diminui o espaço entre os blocos para compactar */
        padding: 15px;
        margin-top: 10px;        /* Afasta levemente do topo da tela */
        margin-bottom: 15px;     /* Espaço antes dos botões */
    }

    .select-group {
        width: 100%;
        flex-direction: column;  /* Força o Label a ficar ACIMA do Select */
        gap: 4px;                /* Cola o texto mais perto do select */
    }

    #modal-seletor-data select {
        width: 100%;             /* O select se adapta à largura do container */
        max-width: 140px;        /* Limita a largura máxima para não ficar esticado demais */
        height: 48px;            /* Altura compacta ideal para mobile */
        font-size: 20px; 
        padding: 0.2em;
    }

    #modal-seletor-data select[name="ano"] {
        width: 100%;
        max-width: 140px;        /* Mantém o mesmo tamanho padrão dos outros */
    }
    
    #modal-seletor-data label {
        font-size: 12px;         /* Texto ligeiramente menor e discreto */
        letter-spacing: 0.5px;
    }

    .botoes_container {
        width: 100%;
        justify-content: center;
        gap: 15px;
        padding-bottom: 20px;    /* Garante que os botões não colem no final da tela */
    }

    #modal-seletor-data .botoes_container span a {
        padding: 10px 24px;
        font-size: 14px;
    }
}

/* Para telas extremamente pequenas (Celulares antigos ou telas muito baixas - até 380px) */
@media (max-width: 380px) {
    .calendar_container {
        padding: 10px; 
        gap: 8px;     
    }

    #modal-seletor-data select {
        max-width: 120px;     
        height: 42px;
        font-size: 18px; 
    }

    #modal-seletor-data label {
        font-size: 11px;
    }
}

/* Para Telas Gigantes (Smart TVs 4K, Monitores Ultrawide - acima de 1920px) */
@media (min-width: 1920px) {
    .calendar_container {
        padding: 60px; 
        gap: 30px;
        border-radius: 30px;
    }

    #modal-seletor-data select {
        width: 150px;    
        height: 90px;
        font-size: 36px; 
        border-radius: 20px;
    }

    #modal-seletor-data label {
        font-size: 22px;
    }

    #modal-seletor-data .botoes_container span a {
        padding: 20px 50px;
        font-size: 24px; 
        border-radius: 60px;
    }
}



/* =========================================
   6. RESPONSIVIDADE (MEDIA QUERIES)
========================================= */

/* Para telas de celulares modernos e tablets (até 600px) */
@media (max-width: 600px) {
    #modal-seletor-data {
        justify-content: center; 
        overflow-y: auto !important; 
        padding: 15px;
    }

    .calendar_container {
        width: 100%;             /* Ocupa a largura máxima do mobile */
        max-width: 340px;        /* Limita para a caixinha não ficar muito larga */
        display: grid;           /* Mudamos para Grid para controlar as colunas */
        grid-template-columns: repeat(2, 1fr); /* Cria exatamente 2 colunas iguais */
        gap: 15px 20px;          /* Espaçamento: 15px vertical, 20px horizontal */
        padding: 20px;
        margin-bottom: 20px;
    }

    .select-group {
        width: 100%;
        flex-direction: column;  /* Mantém o Label acima do Select */
        gap: 4px;
    }

    /* Força o campo do ANO a ocupar uma linha inteira se quiser, ou mantém no fluxo.
       Para um grid perfeito de 2 colunas, os elementos vão se encaixar sozinhos:
       Coluna 1: Dia    | Coluna 2: Hora
       Coluna 1: Mês    | Coluna 2: Minuto
       Coluna 1: Ano    | Coluna 2: (Vazio/Alinhado) */

    #modal-seletor-data select {
        width: 100%;             /* Ocupa todo o espaço da sua coluna */
        height: 52px;            /* Altura confortável para o toque */
        font-size: 20px; 
        padding: 0.2em;
    }

    #modal-seletor-data select[name="ano"] {
        width: 100%;             /* Mantém o ano responsivo dentro da coluna dele */
    }
    
    #modal-seletor-data label {
        font-size: 12px;
        letter-spacing: 0.5px;
    }

    .botoes_container {
        width: 100%;
        justify-content: center;
        gap: 15px;
    }

    #modal-seletor-data .botoes_container span a {
        padding: 10px 26px;
        font-size: 14px;
    }
}

/* Para telas extremamente pequenas (Celulares antigos - até 380px) */
@media (max-width: 380px) {
    .calendar_container {
        max-width: 290px;
        padding: 15px; 
        gap: 10px 15px;     
    }

    #modal-seletor-data select {
        height: 46px;
        font-size: 18px; 
    }
}

/* Para Telas Gigantes (Smart TVs 4K, Monitores Ultrawide - acima de 1920px) */
@media (min-width: 1920px) {
    .calendar_container {
        padding: 60px; 
        gap: 30px;
        border-radius: 30px;
    }

    #modal-seletor-data select {
        width: 150px;    
        height: 90px;
        font-size: 36px; 
        border-radius: 20px;
    }

    #modal-seletor-data label {
        font-size: 22px;
    }

    #modal-seletor-data .botoes_container span a {
        padding: 20px 50px;
        font-size: 24px; 
        border-radius: 60px;
    }
}