/**
 * Padrão de UI: Modal de Confirmação de Pagamento
 * @version 3.0.0 - REATORAÇÃO FINAL: Implementado layout Flexbox com corpo rolável
 *                  e rodapé fixo, eliminando a rolagem do modal em qualquer resolução
 *                  de desktop.
 */

/* ==========================================================
   1. ESTRUTURA E DIMENSÕES DO MODAL - LAYOUT FLEXBOX
   ========================================================== */
#modal-confirmar-pagamento.locamais-modal {
    max-width: 800px !important;
    width: 90vw !important;
    max-height: 90vh; /* Altura máxima para não sair da tela */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Essencial para o layout flex funcionar */
}

/* O contêiner principal do conteúdo agora é um flex container em coluna */
#modal-confirmar-pagamento .locamais-modal__content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0; /* Corrige bugs de overflow em flexbox */
}

#modal-confirmar-pagamento .locamais-modal__header {
    flex-shrink: 0; /* O cabeçalho não encolhe */
    font-size: 1.125rem;
    padding: 1rem 1.5rem;
}

/* ✅ CORREÇÃO CRÍTICA: Faz o corpo do modal crescer e ter sua própria rolagem */
#modal-confirmar-pagamento .locamais-modal__body {
    flex-grow: 1; /* Ocupa todo o espaço vertical disponível */
    overflow-y: auto; /* Adiciona scroll vertical APENAS se o conteúdo interno for maior */
    padding: 1.25rem 1.5rem;
    
    /* Melhora a aparência da barra de rolagem */
    scrollbar-width: thin;
    scrollbar-color: var(--lm-border) transparent;
}
#modal-confirmar-pagamento .locamais-modal__body::-webkit-scrollbar {
    width: 6px;
}
#modal-confirmar-pagamento .locamais-modal__body::-webkit-scrollbar-thumb {
    background-color: var(--lm-border);
    border-radius: 3px;
}

/* ✅ CORREÇÃO: Rodapé agora é um elemento separado e fixo */
#modal-confirmar-pagamento .locamais-modal__footer {
    flex-shrink: 0; /* O rodapé não encolhe */
    background: var(--lm-bg-subtle, #f8fafc);
    border-top: 1px solid var(--lm-border, #e2e8f0);
    padding: 1rem 1.5rem;
    gap: 0.75rem;
}

/* ==========================================================
   2. LAYOUT DO FORMULÁRIO INTERNO - GRID RESPONSIVO
   ========================================================== */
.locamais-payment-modal-form-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: flex-start;
}
@media (min-width: 768px) {
    .locamais-payment-modal-form-body {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
}
.locamais-payment-form-section {
    display: flex;
    flex-direction: column;
    gap: var(--lm-spacing-md);
}

/* ==========================================================
   3. COMPONENTES INTERNOS DO MODAL (Estilos mantidos)
   ========================================================== */
.locamais-saque-valor-display {
    background-color: var(--lm-bg-subtle);
    border: 1px solid var(--lm-border);
    padding: 0.5rem 1rem;
    border-radius: var(--lm-radius-lg);
    text-align: center;
    margin-bottom: 1rem;
}
.saque-valor-label {
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--lm-text-secondary);
}
.saque-valor-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--lm-text-primary);
}
.locamais-banking-preview {
    background: var(--lm-bg-subtle);
    border-radius: var(--lm-radius-lg);
    padding: var(--lm-spacing-md);
    border: 1px solid var(--lm-border);
    display: flex;
    flex-direction: column;
    gap: var(--lm-spacing-sm);
    height: 100%;
}
.locamais-banking-preview-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--lm-text-primary);
    margin: 0;
    padding-bottom: var(--lm-spacing-sm);
    border-bottom: 1px solid var(--lm-border);
}
.locamais-banking-preview .bank-info-content {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex-grow: 1;
}
.locamais-banking-preview .bank-info-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: var(--lm-font-size-xs);
    padding: 0.3rem 0;
    border-bottom: 1px dotted #e5e7eb;
}
.locamais-banking-preview .bank-info-row:last-child {
    border-bottom: none;
}
.locamais-file-upload-label {
    min-height: 100px;
    padding: 1.25rem 1rem;
    border-radius: var(--lm-radius-lg);
}

/* ==========================================================
   4. RESPONSIVIDADE
   ========================================================== */
@media (max-width: 768px) {
    #modal-confirmar-pagamento .locamais-payment-modal-form-body {
        grid-template-columns: 1fr !important;
    }
    #modal-confirmar-pagamento .locamais-modal__body {
        padding: 1rem;
    }
    
    /* Rodapé com botões empilhados */
    #modal-confirmar-pagamento .locamais-modal__footer {
        flex-direction: column-reverse;
        gap: 0.75rem;
        align-items: stretch; /* Faz os botões ocuparem 100% da largura */
    }
    #modal-confirmar-pagamento .locamais-modal__footer .locamais-button {
        width: 100%;
        justify-content: center;
    }
}