/* CF7 Popup UX
 * Estilos del overlay + loader, el mensaje de éxito y el ocultamiento del
 * spinner nativo de CF7 para formularios dentro de modales de Popup Maker.
 * Usa las variables del tema (definidas en css/copec-custom-styles.css).
 */

/* El contenedor del formulario CF7 debe posicionar el overlay. */
.wpcf7 {
    position: relative;
}

/* --- Overlay + loader --- */
.cf7pux-overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.75);
    z-index: 10;
    border-radius: inherit;
}

.cf7pux-loading .cf7pux-overlay {
    display: flex;
}

.cf7pux-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(12, 71, 157, 0.2);
    border-top-color: var(--texto-titulo);
    border-radius: 50%;
    animation: cf7pux-spin 0.8s linear infinite;
}

@keyframes cf7pux-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Ocultar el spinner nativo de CF7 mientras se muestra el loader propio. */
.cf7pux-loading .wpcf7-spinner {
    display: none !important;
}

/* --- Mensaje de éxito --- */
.cf7pux-success {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 24px;
    gap: 12px;
    animation: cf7pux-fade-in 0.3s ease;
}

.cf7pux-success.is-visible {
    display: flex;
}

.cf7pux-success__icon {
    font-size: 56px;
    line-height: 1;
    color: var(--texto-titulo);
    margin-bottom: 4px;
}

.cf7pux-success__title {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: var(--font-size-subtitle1);
    color: var(--texto-titulo);
    margin: 0;
}

.cf7pux-success__text {
    font-family: var(--primary-font);
    font-weight: 400;
    font-size: var(--font-size-body1);
    color: var(--texto-parrafo);
    margin: 0;
}

@keyframes cf7pux-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cf7pux-spinner {
        animation-duration: 1.5s;
    }
    .cf7pux-success {
        animation: none;
    }
}

/* --- Mensajes de respuesta de CF7 (acotado a modales de Popup Maker) ---
 * Se usa !important y mayor especificidad para ganar al CSS por defecto del
 * plugin Contact Form 7 (que aplica borde y padding propios y puede cargarse
 * después de este archivo). */
.pum .wpcf7 .wpcf7-response-output,
.popmake .wpcf7 .wpcf7-response-output {
    margin: 20px 0 0 !important;
    padding: 15px !important;
    border: 1px solid var(--secondary-300-normal) !important;
    border-radius: 10px;
    font-family: var(--primary-font);
    font-size: var(--font-size-body2);
    font-weight: 500;
    line-height: 1.4;
    /* Estado por defecto (validación/errores): rojo del tema con opacidad. */
    color: #8f2417;
    background: rgba(205, 59, 37, 0.1);
    animation: cf7pux-fade-in 0.3s ease;
}

/* Error de validación / spam / fallo de correo: rojo. */
.pum .wpcf7 form.invalid .wpcf7-response-output,
.pum .wpcf7 form.spam .wpcf7-response-output,
.pum .wpcf7 form.unaccepted .wpcf7-response-output,
.pum .wpcf7 form.payment-required .wpcf7-response-output,
.pum .wpcf7 form.failed .wpcf7-response-output,
.popmake .wpcf7 form.invalid .wpcf7-response-output,
.popmake .wpcf7 form.spam .wpcf7-response-output,
.popmake .wpcf7 form.unaccepted .wpcf7-response-output,
.popmake .wpcf7 form.payment-required .wpcf7-response-output,
.popmake .wpcf7 form.failed .wpcf7-response-output {
    color: #8f2417;
    border: 1px solid var(--secondary-300-normal) !important;
    background: rgba(205, 59, 37, 0.1);
}

/* Envío exitoso: verde (por si se muestra antes del mensaje de éxito propio). */
.pum .wpcf7 form.sent .wpcf7-response-output,
.popmake .wpcf7 form.sent .wpcf7-response-output {
    color: #1b6b3a;
    border: 1px solid #2e9e5b !important;
    background: rgba(46, 158, 91, 0.12);
}

/* Sugerencias de validación por campo. */
.pum .wpcf7-not-valid-tip,
.popmake .wpcf7-not-valid-tip {
    font-family: var(--primary-font);
    font-size: 12px;
    font-weight: 500;
    color: var(--secondary-300-normal);
    margin-top: 6px;
}