/**
 * SUR Configurador — Modal "Enviar PDF por email"
 * Versión: 1.14.0
 *
 * Estética coherente con la pastilla "Configuración guardada" v1.13.9:
 * fondo crema cálido, doble sombra apilada, botón chunky 3D granate.
 *
 * Se enquea tanto en la página del configurador como en el carrito (uploads
 * de wp_enqueue_style con la misma handle ‘sur-email-modal-css’).
 */

/* Overlay full-screen */
.sur-email-modal {
    position: fixed !important;
    inset: 0;
    z-index: 999999;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.sur-email-modal[hidden] { display: none !important; }
.sur-email-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 8, 5, 0.55);
    backdrop-filter: blur(2px);
    cursor: pointer;
}

/* Card crema con doble sombra (mismo lenguaje que la pastilla v1.13.9) */
.sur-email-modal__card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    background: #fcf9f4 !important;
    border: 1px solid rgba(4, 1, 1, 0.18);
    border-radius: 20px;
    padding: 26px 28px 22px;
    box-shadow:
        0 1px 2px rgba(45, 1, 1, 0.06),
        0 18px 48px rgba(45, 1, 1, 0.18);
    color: #2D0101;
    font-family: inherit;
    animation: sur-email-modal-in 0.25s ease-out both;
}
@keyframes sur-email-modal-in {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Cerrar (X arriba a la derecha) — granate sólido con efecto chunky discreto */
.sur-email-modal__close {
    position: absolute !important;
    top: -10px;
    right: -10px;
    width: 36px;
    height: 36px;
    background: #2D0101 !important;
    color: #ffffff !important;
    border: 1px solid #5a1414 !important;
    border-radius: 12px !important;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 3px 0 0 #1a0000, 0 6px 10px rgba(45, 1, 1, 0.25);
    transition: transform 0.08s ease-out, box-shadow 0.08s ease-out;
    padding: 0;
    margin: 0;
}
.sur-email-modal__close:hover {
    background: #3a0202 !important;
}
.sur-email-modal__close:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 0 #1a0000, 0 2px 4px rgba(45, 1, 1, 0.2);
}
.sur-email-modal__close:focus-visible {
    outline: 2px solid #5a1414;
    outline-offset: 2px;
}

/* Título */
.sur-email-modal__title {
    margin: 0 0 18px !important;
    padding: 0 !important;
    font-family: inherit !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #2D0101 !important;
    letter-spacing: 0.2px;
    line-height: 1.3;
}

/* Form layout */
.sur-email-modal__form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}
.sur-email-modal__label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #2D0101 !important;
    letter-spacing: 0.3px;
    margin: 8px 0 4px !important;
    line-height: 1.2;
}
.sur-email-modal__label:first-of-type {
    margin-top: 0 !important;
}

/* Inputs estilo iOS-soft, alineados con la pastilla */
.sur-email-modal__input,
.sur-email-modal__textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 14px !important;
    background: #ffffff !important;
    color: #2D0101 !important;
    border: 1px solid rgba(4, 1, 1, 0.2) !important;
    border-radius: 12px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none !important;
    margin: 0 !important;
}
.sur-email-modal__textarea {
    min-height: 70px;
    resize: vertical;
}
.sur-email-modal__input:focus,
.sur-email-modal__textarea:focus {
    border-color: #5a1414 !important;
    box-shadow: 0 0 0 3px rgba(45, 1, 1, 0.1) !important;
}
.sur-email-modal__input.is-error,
.sur-email-modal__textarea.is-error {
    border-color: #b91c1c !important;
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12) !important;
}

/* Estilos chunky 3D autosuficientes — duplicados de configurador.css porque
   el modal aparece también en el carrito de WC, donde configurador.css NO
   se carga. Si se cambian, mantener sincronizados con la versión de la pastilla
   "Configuración guardada" en configurador.css (v1.13.9 / v1.14.0). */
.sur-email-modal .sur-chunky-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 4px;
    padding: 9px 16px;
    background: #2D0101 !important;
    color: #ffffff !important;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    line-height: 1.2;
    border: 1px solid #5a1414 !important;
    border-radius: 14px !important;
    cursor: pointer;
    box-shadow:
        0 4px 0 0 #1a0000,
        0 6px 8px rgba(45, 1, 1, 0.22) !important;
    transition: background-color 0.15s ease-out, transform 0.08s ease-out, box-shadow 0.08s ease-out;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
}
.sur-email-modal .sur-chunky-btn:hover {
    background: #3a0202 !important;
    color: #ffffff !important;
}
.sur-email-modal .sur-chunky-btn:active {
    transform: translateY(4px);
    box-shadow:
        0 0 0 0 #1a0000,
        0 2px 4px rgba(45, 1, 1, 0.18) !important;
}
.sur-email-modal .sur-chunky-btn:focus-visible {
    outline: 2px solid #5a1414;
    outline-offset: 3px;
}
.sur-email-modal .sur-chunky-btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}
.sur-email-modal .sur-chunky-label {
    position: relative;
    z-index: 1;
    color: #ffffff !important;
    pointer-events: none;
}

/* Botón chunky principal del modal: full width + más padding */
.sur-email-modal__submit {
    margin-top: 14px !important;
    width: 100%;
    padding: 12px 18px !important;
    font-size: 14px !important;
}

/* Feedback (éxito / error) */
.sur-email-modal__feedback {
    margin: 12px 0 0 !important;
    padding: 0 !important;
    font-size: 12px;
    line-height: 1.4;
    min-height: 1.4em;
    text-align: center;
    color: #6b5b4a;
}
.sur-email-modal__feedback.is-success {
    color: #1a6b1a;
    font-weight: 600;
}
.sur-email-modal__feedback.is-error {
    color: #b91c1c;
    font-weight: 600;
}

/* Estado "enviando" */
.sur-email-modal--sending .sur-email-modal__submit,
.sur-email-modal--sending .sur-email-modal__input,
.sur-email-modal--sending .sur-email-modal__textarea {
    opacity: 0.65;
    pointer-events: none;
}

/* Responsive */
@media (max-width: 480px) {
    .sur-email-modal__card {
        padding: 22px 20px 18px;
        border-radius: 18px;
    }
    .sur-email-modal__close {
        top: -8px;
        right: -8px;
        width: 32px;
        height: 32px;
        font-size: 18px;
    }
    .sur-email-modal__title { font-size: 16px !important; }
}