/* Overlay de fundo escuro */
.cookie-overlay {
    position: fixed;                    /* Fixa na tela */
    top: 0;                            /* Alinha ao topo */
    left: 0;                           /* Alinha à esquerda */
    width: 100%;                       /* Largura total */
    height: 100%;                      /* Altura total */
    background: rgba(0, 0, 0, 0.5);    /* Fundo semi-transparente */
    z-index: 99998;                    /* Um nível abaixo do pop-up */
    display: none;                     /* Inicialmente oculto */
}

/* Container principal do pop-up */
.cookie-consent {
    position: fixed;                    /* Fixa na tela */
    top: 50%;                          /* Centraliza verticalmente */
    left: 50%;                         /* Centraliza horizontalmente */
    transform: translate(-50%, -50%);   /* Ajuste fino da centralização */
    width: 90%;                        /* Largura responsiva */
    max-width: 500px;                  /* Largura máxima */
    background: #ffffff;               /* Fundo branco */
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);  /* Sombra mais pronunciada */
    border-radius: 8px;                /* Bordas arredondadas */
    padding: 24px;                     /* Espaçamento interno */
    z-index: 99999;                    /* Sempre na frente de tudo */
    display: none;                     /* Inicialmente oculto */
}

/* Título do pop-up */
.cookie-title {
    color: #ff6b00;                    /* Cor laranja da IDAL */
    font-size: 1.5rem;                 /* Tamanho do título */
    font-weight: 600;                  /* Peso da fonte */
    margin-bottom: 1rem;               /* Espaço abaixo */
}

/* Texto do pop-up */
.cookie-text {
    color: #333;                       /* Cor do texto */
    font-size: 0.95rem;                /* Tamanho do texto */
    line-height: 1.5;                  /* Altura da linha */
    margin-bottom: 1.5rem;             /* Espaço abaixo */
}

/* Container das opções */
.cookie-options {
    margin-bottom: 1.5rem;             /* Espaço abaixo */
}

/* Cada opção individual */
.cookie-option {
    background: #f5f5f5;               /* Fundo claro */
    padding: 12px;                     /* Espaçamento interno */
    margin-bottom: 8px;                /* Espaço entre opções */
    border-radius: 6px;                /* Bordas arredondadas */
}

/* Checkboxes personalizados */
.cookie-option input[type="checkbox"] {
    margin-right: 8px;                 /* Espaço após checkbox */
}

/* Container dos botões */
.cookie-buttons {
    display: flex;                     /* Layout flexível */
    justify-content: flex-end;         /* Alinha à direita */
    gap: 12px;                         /* Espaço entre botões */
}

/* Estilo base dos botões */
.cookie-button {
    padding: 10px 20px;                /* Espaçamento interno */
    border: none;                      /* Remove borda */
    border-radius: 4px;                /* Bordas arredondadas */
    font-weight: 500;                  /* Peso da fonte */
    cursor: pointer;                   /* Cursor pointer */
    transition: all 0.2s;              /* Transição suave */
}

/* Botão de aceitar */
.cookie-accept {
    background: #ff6b00;               /* Cor laranja da IDAL */
    color: white;                      /* Texto branco */
}

.cookie-accept:hover {
    background: #ff8533;               /* Cor mais clara no hover */
}

/* Botões secundários */
.cookie-reject,
.cookie-manage {
    background: #e0e0e0;               /* Cor de fundo discreta */
    color: #333;                       /* Cor do texto */
}

.cookie-reject:hover,
.cookie-manage:hover {
    background: #d0d0d0;               /* Cor mais escura no hover */
}

/* Responsividade */
@media (max-width: 768px) {
    .cookie-consent {
        width: 95%;                    /* Mais largura em telas pequenas */
        max-height: 90vh;              /* Altura máxima */
        overflow-y: auto;              /* Permite rolagem */
    }

    .cookie-buttons {
        flex-direction: column;        /* Botões em coluna */
    }

    .cookie-button {
        width: 100%;                   /* Largura total */
        margin-bottom: 8px;            /* Espaço entre botões */
    }
}