/**
 * EEP Modal System CSS - Estilos Universais para Modais
 * Baseado nos modais superiores do AnotaAI Grid
 *
 * @package Expresso_Extra_Product
 * @since 8.2.0
 */

/* Variáveis para modais */
:root {
    --eep-modal-overlay: rgba(0, 0, 0, 0.5);
    --eep-modal-bg: #ffffff;
    --eep-modal-border: #e5e7eb;
    --eep-modal-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    --eep-modal-radius: 12px;
    --eep-modal-primary: #1095F3;
    --eep-modal-primary-hover: #0d7bd9;
    --eep-modal-secondary: #6b7280;
    --eep-modal-secondary-hover: #4b5563;
    --eep-modal-text: #111827;
    --eep-modal-text-secondary: #6b7280;
    --eep-modal-spacing: 1.5rem;
}

/* Base do modal - Overlay */
.eep-modal-confirmation,
.eep-modal-alert {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--eep-modal-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--eep-z-modal);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    padding: 1rem;
    box-sizing: border-box;
}

/* Estado visível */
.eep-modal-confirmation.eep-modal-show,
.eep-modal-alert.eep-modal-show {
    opacity: 1;
    visibility: visible;
}

/* Conteúdo do modal - CORRIGIDO para melhor responsividade */
.eep-modal-content {
    background: var(--eep-modal-bg);
    border-radius: var(--eep-modal-radius);
    box-shadow: var(--eep-modal-shadow);
    max-width: 480px; /* Reduzido de 500px para ser menos largo */
    width: 100%;
    max-height: 85vh; /* Reduzido de 90vh */
    overflow-y: auto;
    transform: translateY(-20px);
    transition: transform 0.3s ease;
    border: 1px solid var(--eep-modal-border);
    margin: 0 auto; /* Centralizaçao melhorada */
}

/* Animação de entrada */
.eep-modal-show .eep-modal-content {
    transform: translateY(0);
}

/* Cabeçalho do modal */
.eep-modal-header {
    padding: var(--eep-modal-spacing) var(--eep-modal-spacing) 1rem;
    border-bottom: 1px solid var(--eep-modal-border);
}

.eep-modal-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--eep-modal-text);
    line-height: 1.3;
}

/* Corpo do modal */
.eep-modal-body {
    padding: var(--eep-modal-spacing);
}

.eep-modal-message {
    margin: 0;
    color: var(--eep-modal-text-secondary);
    line-height: 1.6;
    font-size: 0.9375rem;
}

/* Resumo de seleções */
.eep-modal-selection-summary {
    margin-top: 1rem;
    border: 1px solid var(--eep-modal-border);
    border-radius: 12px;
    padding: 1rem;
    background: #f9fafb;
    max-height: 400px;
    overflow-y: auto;
}

.eep-selection-summary {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.eep-selection-item {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Reduzido de 1rem para menos espaçamento */
    padding: 0.75rem; /* Reduzido de 1rem */
    background: var(--eep-modal-bg);
    border: 1px solid var(--eep-modal-border);
    border-radius: 10px; /* Reduzido de 12px */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Sombra mais sutil */
    transition: all 0.2s ease;
    max-width: 100%; /* Prevenir cards muito largos */
}

.eep-selection-item:hover {
    border-color: var(--eep-modal-primary);
    box-shadow: 0 4px 8px rgba(16, 149, 243, 0.1);
}

.eep-selection-image {
    width: 48px; /* Reduzido de 56px */
    height: 48px; /* Reduzido de 56px */
    object-fit: cover;
    border-radius: 8px; /* Reduzido de 10px */
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08); /* Sombra mais sutil */
}

.eep-selection-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.eep-selection-name {
    font-weight: 600;
    color: var(--eep-modal-text);
    font-size: 0.9375rem;
    line-height: 1.4;
    margin: 0;
}

.eep-selection-quantity {
    display: inline-flex;
    align-items: center;
    background: #10b981;
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    width: fit-content;
}

.eep-selection-price {
    color: var(--eep-modal-primary);
    font-weight: 700;
    font-size: 1rem;
    margin-left: auto;
    flex-shrink: 0;
}

.eep-no-selections {
    color: var(--eep-modal-text-secondary);
    font-style: italic;
    text-align: center;
    margin: 0;
}

/* Ações do modal */
.eep-modal-actions {
    padding: 1rem var(--eep-modal-spacing) var(--eep-modal-spacing);
    display: flex;
    gap: 0.75rem;
    border-top: 1px solid var(--eep-modal-border);
}

/* Layout stacked para melhor hierarquia visual */
.eep-modal-actions {
    flex-direction: column;
}

/* Layout único para alertas */
.eep-modal-actions-single {
    flex-direction: row;
    justify-content: center;
}

/* Botões do modal - CORRIGIDOS para tamanhos consistentes */
.eep-modal-btn {
    flex: 1;
    padding: 12px 20px; /* Padding específico e consistente */
    border: none;
    border-radius: 10px; /* Mais arredondado */
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    min-height: 48px; /* Altura mínima maior para melhor toque */
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: none; /* Remove limitação de largura */
}

/* Botão primário */
.eep-modal-btn-primary {
    background: var(--eep-modal-primary);
    color: white;
    order: 1; /* Primeiro no layout stacked */
}

.eep-modal-btn-primary:hover {
    background: var(--eep-modal-primary-hover);
    transform: translateY(-1px);
}

/* Botão secundário */
.eep-modal-btn-secondary {
    background: transparent;
    color: var(--eep-modal-secondary);
    border: 1px solid var(--eep-modal-border);
    order: 2; /* Segundo no layout stacked */
}

.eep-modal-btn-secondary:hover {
    background: #f9fafb;
    color: var(--eep-modal-secondary-hover);
    border-color: var(--eep-modal-secondary);
}

/* Estados de foco para acessibilidade */
.eep-modal-btn:focus {
    outline: 2px solid var(--eep-modal-primary);
    outline-offset: 2px;
}

/* Responsividade MELHORADA */
@media (max-width: 640px) {
    .eep-modal-confirmation,
    .eep-modal-alert {
        padding: 12px;
        align-items: center; /* Centralizado em mobile */
    }

    .eep-modal-content {
        max-width: 100%;
        max-height: 85vh; /* Mais espaço vertical */
        margin: 0;
        border-radius: 16px; /* Bordas arredondadas em todos os lados */
        width: calc(100% - 24px); /* Margem lateral */
    }

    .eep-modal-header {
        padding: 20px 16px 12px;
    }

    .eep-modal-body {
        padding: 16px;
    }

    .eep-modal-actions {
        padding: 12px 16px 20px;
        gap: 10px; /* Espaçamento entre botões */
    }

    .eep-modal-title {
        font-size: 1.25rem; /* Ligeiramente maior em mobile */
        line-height: 1.3;
    }

    .eep-modal-btn {
        padding: 14px 16px; /* Botões maiores para touch */
        font-size: 1rem;
        min-height: 52px; /* Altura maior em mobile */
    }

    /* Cards de seleção menores em mobile */
    .eep-selection-item {
        padding: 12px;
        gap: 12px;
    }

    .eep-selection-image {
        width: 40px;
        height: 40px;
    }

    .eep-selection-name {
        font-size: 0.9375rem;
    }
}

/* Para alertas mais compactos */
.eep-modal-content-alert {
    max-width: 400px;
}

.eep-modal-content-alert .eep-modal-body {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Animações melhoradas */
@keyframes eep-modal-fade-in {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.eep-modal-show .eep-modal-content {
    animation: eep-modal-fade-in 0.3s ease-out;
}

/* Prevenção de scroll no body quando modal aberto */
body.eep-modal-open {
    overflow: hidden;
}