/* -------------------------------------------
   ESTILOS DO MODAL LEGAL (SIDEDRAWER)
------------------------------------------- */

.legal-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    /* Alto z-index para garantir que fique por cima de tudo */
    background-color: rgba(0, 0, 0, 0);
    /* Fundo inicialmente transparente */
    visibility: hidden;
    opacity: 0;
    transition: background-color 0.4s, opacity 0s 0.4s, visibility 0s 0.4s;
}


/* Estado Ativo: Visível e com fundo transparente preto */

.legal-modal.active {
    background-color: rgba(0, 0, 0, 0.7);
    /* Fundo Preto Transparente */
    visibility: visible;
    opacity: 1;
    transition: background-color 0.4s, opacity 0s 0s, visibility 0s 0s;
}


/* O conteúdo principal que desliza */

.legal-modal-content {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 600px;
    /* LARGURA FIXA DE DESKTOP */
    background-color: #ffffff;
    /* Propriedades de transição e ocultação */
    transform: translateX(100%);
    /* Escondido fora da tela, à direita */
    transition: transform 0.4s ease-in-out;
    /* Layout interno: cabeçalho, corpo com scroll, e botão no fim */
    display: flex;
    flex-direction: column;
}


/* O conteúdo desliza para dentro */

.legal-modal.active .legal-modal-content {
    transform: translateX(0);
}


/* Cabeçalho */

.legal-modal-header {
    padding: 20px;
    border-bottom: 1px solid #ddd;
    flex-shrink: 0;
    /* Impede que encolha */
}

.legal-modal-header h2 {
    margin: 0;
    font-size: 1.8em;
    color: #007bff;
}


/* Corpo do Modal (com scroll) */

.legal-modal-body {
    padding: 20px;
    overflow-y: auto;
    /* Permite scroll se o conteúdo for longo */
    flex-grow: 1;
    /* Permite que o corpo ocupe o espaço restante */
    text-align: justify;
    /* Justifica o texto legal */
}


/* Botão de Fechar no FIM (Desktop) */

.close-btn-desktop {
    background-color: #333;
    color: white;
    padding: 15px;
    border: none;
    cursor: pointer;
    font-size: 1.1em;
    flex-shrink: 0;
    transition: background-color 0.3s;
}

.close-btn-desktop:hover {
    background-color: #007bff;
}


/* Botão de Fechar no Topo (Mobile) - Escondido no Desktop */

.close-btn-mobile {
    display: none;
    /* Escondido no Desktop */
}


/* -------------------------------------------
   RESPONSIVIDADE (MOBILE)
------------------------------------------- */

@media (max-width: 650px) {
    .legal-modal-content {
        /* Ocupa a largura total da tela no mobile */
        width: 100%;
    }
    /* 1. Botão de Fechar Fixo no Topo */
    .legal-modal-header {
        padding-top: 50px;
        /* Adiciona espaço para o botão 'X' */
        position: relative;
    }
    .close-btn-mobile {
        display: block;
        /* Mostra o botão 'X' */
        position: absolute;
        top: 0;
        right: 0;
        background-color: #007bff;
        color: white;
        font-size: 2em;
        padding: 10px 15px;
        cursor: pointer;
        z-index: 10;
        line-height: 1;
        border-bottom-left-radius: 5px;
    }
    /* 2. Botão de Fechar do Desktop fica escondido */
    .close-btn-desktop {
        display: none;
    }
}