/**
 * Componente: Modal Shell (Base)
 * @version 2.2.0 - ARQUITETURA FINAL PARA ANIMAÇÃO GENIE
 *
 * RESPONSABILIDADE: Definir a estrutura, aparência estática e posicionamento
 * de todos os modais do sistema.
 *
 * - REMOVIDO: As propriedades `transform` e `opacity` foram completamente removidas do estado base
 *   do modal para evitar conflitos com o sistema de animação. A centralização agora é
 *   iniciada aqui (com `top: 50%` e `left: 50%`) e finalizada pelo motor de animação
 *   em `_modal-animations.css`, que aplica o `transform: translate(-50%, -50%)`.
 */

/* ========================================================================
   1. CONTROLE DO BODY E OVERLAY
   ======================================================================== */

/**
 * Impede a rolagem da página de fundo quando um modal está ativo,
 * prevenindo o "scroll-chaining" e melhorando a experiência do usuário.
 */
body.locamais-modal-is-open {
    overflow: hidden;
}

/**
 * O overlay que escurece e desfoca o fundo da página.
 * A animação de opacidade é controlada separadamente em `_modal-animations.css`.
 */
.locamais-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.45); /* Azul escuro semi-transparente para um look profissional */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9998;
}

/* ========================================================================
   2. ESTRUTURA BASE DO MODAL (A "CASCA")
   ======================================================================== */

.locamais-modal {
    /*
     * Define a âncora de posicionamento no centro da tela.
     * A centralização final é completada com `transform: translate(-50%, -50%)`
     * no arquivo de animações para garantir o funcionamento correto do efeito "Genie".
     * A visibilidade e opacidade também são controladas pela animação.
     */
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 9999;
    
    /* Dimensões Padrão (podem ser sobrescritas por modais específicos) */
    width: 90%; 
    max-width: 500px; /* Largura padrão para modais de confirmação ou simples */
    max-height: 90vh; /* Altura máxima para evitar que o modal saia da tela */

    /* Estilo Visual Base */
    background: var(--lm-background-main, #FFFFFF);
    border-radius: 12px;
    box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.25);
    border: 1px solid var(--lm-border, #E5E7EB);
    
    /* Layout Interno Flexível */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Essencial para que o .modal__body possa ter scroll interno */
}

/* ========================================================================
   3. ESTRUTURA INTERNA DO MODAL (HEADER, BODY, FOOTER)
   ======================================================================== */

.locamais-modal__content {
    display: flex;
    flex-direction: column;
    height: 100%; /* Garante que o layout flex funcione corretamente */
}

/* Cabeçalho do Modal */
.locamais-modal__header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--lm-border-light, #E2E8F0);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0; /* Impede que o header encolha se o conteúdo for grande */
}

.locamais-modal-title-text {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--lm-dark, #1F2937);
}

.locamais-modal-close-button {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--lm-text-muted, #9CA3AF);
    padding: 0.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.locamais-modal-close-button:hover {
    background-color: var(--lm-lighter, #F3F4F6);
    color: var(--lm-dark, #1F2937);
    transform: rotate(90deg);
}

/* Corpo do Modal (área de conteúdo principal) */
.locamais-modal__body {
    padding: 1.5rem;
    overflow-y: auto; /* Adiciona scroll vertical APENAS se o conteúdo exceder a altura */
    flex-grow: 1;     /* Faz o corpo ocupar todo o espaço vertical disponível */
}

/* Rodapé do Modal */
.locamais-modal__footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--lm-border-light, #E2E8F0);
    background-color: var(--lm-bg-subtle, #f8fafc);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-shrink: 0; /* Impede que o rodapé encolha */
}