/* ============================================================
   WhatsApp Form Interceptor — Modal Styles
   ============================================================ */

:root {
    --wafi-brand:       #2E7D32;
    --wafi-brand-hover: #1B5E20;
    --wafi-radius:      16px;
    --wafi-shadow:      0 8px 40px rgba(0,0,0,.22);
    --wafi-font:        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --wafi-z:           999999;
    --wafi-anim:        .25s cubic-bezier(.4,0,.2,1);
}

/* ── Overlay ──────────────────────────────── */
.wafi-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: var(--wafi-z);
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0 24px 90px;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity var(--wafi-anim);
    font-family: var(--wafi-font);
}
.wafi-overlay.wafi-visible {
    opacity: 1;
}
.wafi-overlay[hidden] {
    display: none !important;
}
.wafi-overlay.wafi-position-left {
    justify-content: flex-start;
    padding: 0 0 90px 24px;
}

/* ── Modal card ───────────────────────────── */
.wafi-modal {
    background: #fff;
    border-radius: var(--wafi-radius);
    box-shadow: var(--wafi-shadow);
    width: 340px;
    max-width: calc(100vw - 32px);
    overflow: hidden;
    transform: translateY(20px) scale(.97);
    transition: transform var(--wafi-anim);
    max-height: 60vh;
    overflow-y: auto;
    scrollbar-width: thin;
}
.wafi-overlay.wafi-visible .wafi-modal {
    transform: translateY(0) scale(1);
}

/* ── Header ───────────────────────────────── */
.wafi-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--wafi-brand);
    color: #fff;
}
.wafi-header__brand {
    display: flex;
    align-items: center;
    gap: 10px;
}
.wafi-logo {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,.3);
}
.wafi-logo-placeholder {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.wafi-logo-placeholder svg {
    width: 26px;
    height: 26px;
}
.wafi-logo-placeholder.sm {
    width: 34px;
    height: 34px;
}
.wafi-logo-placeholder.sm svg {
    width: 20px;
    height: 20px;
}
.wafi-header__text strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}
.wafi-header__text span {
    font-size: 12px;
    opacity: .85;
}
.wafi-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 50%;
    opacity: .8;
    transition: opacity .15s, background .15s;
    flex-shrink: 0;
}
.wafi-close:hover {
    opacity: 1;
    background: rgba(255,255,255,.15);
}

/* ── Chat bubble ──────────────────────────── */
.wafi-bubble-wrap {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 16px 16px 4px;
    background: #e5ddd5;  /* classic WA background */
}
.wafi-bubble-avatar {
    flex-shrink: 0;
}
.wafi-bubble-avatar img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
}
.wafi-bubble {
    background: #fff;
    border-radius: 12px 12px 12px 2px;
    padding: 10px 14px;
    font-size: 14px;
    color: #333;
    line-height: 1.5;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    max-width: calc(100% - 50px);
    /* Respeta los saltos de línea del mensaje (uno o varios seguidos,
       para separar párrafos) sin dejar de ajustar el texto largo al
       ancho de la burbuja. */
    white-space: pre-line;
    word-break: break-word;
}

/* ── Form wrapper ─────────────────────────── */
.wafi-form-wrap {
    padding: 16px 16px 16px;
    background: #f0f0f0;
}

/* Reset WPForms inside modal */
.wafi-form-wrap .wpforms-container {
    margin: 0 !important;
    padding: 0 !important;
}
.wafi-form-wrap .wpforms-form {
    background: transparent !important;
    padding: 0 !important;
}
.wafi-form-wrap .wpforms-field {
    padding: 0 !important;
    margin-bottom: 10px !important;
}
.wafi-form-wrap .wpforms-field input,
.wafi-form-wrap .wpforms-field textarea,
.wafi-form-wrap .wpforms-field select {
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: #fff !important;
    color: #333 !important;
    transition: border-color .2s !important;
    box-shadow: none !important;
}
.wafi-form-wrap .wpforms-field input:focus,
.wafi-form-wrap .wpforms-field textarea:focus {
    border-color: var(--wafi-brand) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wafi-brand) 15%, transparent) !important;
}
/* Ocultar solo el label principal del campo (título del campo),
   pero NO los labels inline de checkboxes/radios */
.wafi-form-wrap .wpforms-field > label,
.wafi-form-wrap .wpforms-field .wpforms-label-hide,
.wafi-form-wrap .wpforms-field fieldset > legend {
    display: none !important;
}
/* El legend de grupos checkbox/radio SÍ se muestra si tiene contenido visible */
.wafi-form-wrap .wpforms-field fieldset > legend.wpforms-field-label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #444 !important;
    margin-bottom: 6px !important;
    padding: 0 !important;
}

/* ── Checkboxes y Radios ──────────────────── */
/* Restablecer estilos de lista */
.wafi-form-wrap .wpforms-field ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.wafi-form-wrap .wpforms-field ul li {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
    padding: 0 !important;
}
/* El input checkbox/radio no debe heredar el ancho 100% ni el padding de los text inputs */
.wafi-form-wrap .wpforms-field input[type="checkbox"],
.wafi-form-wrap .wpforms-field input[type="radio"] {
    width: 16px !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #bbb !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    accent-color: var(--wafi-brand) !important;
}
.wafi-form-wrap .wpforms-field input[type="radio"] {
    border-radius: 50% !important;
}
/* Label inline (texto al lado del checkbox/radio) — debe mostrarse */
.wafi-form-wrap .wpforms-field label.wpforms-field-label-inline {
    display: inline !important;
    font-size: 14px !important;
    color: #333 !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
}
.wafi-form-wrap .wpforms-field input::placeholder,
.wafi-form-wrap .wpforms-field textarea::placeholder {
    color: #999 !important;
}

/* Submit button */
.wafi-form-wrap .wpforms-submit-container {
    padding: 0 !important;
    margin: 4px 0 0 !important;
    text-align: center !important;
}
.wafi-form-wrap .wpforms-submit,
.wafi-form-wrap button[type="submit"] {
    background: var(--wafi-brand) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 24px !important;
    padding: 11px 32px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    width: 100% !important;
    transition: background .2s, transform .1s !important;
    letter-spacing: .3px !important;
}
.wafi-form-wrap .wpforms-submit:hover,
.wafi-form-wrap button[type="submit"]:hover {
    background: var(--wafi-brand-hover) !important;
    transform: translateY(-1px) !important;
}
.wafi-form-wrap .wpforms-submit:active {
    transform: translateY(0) !important;
}

/* Hide WPForms' own confirmation msg; we show ours */
.wafi-form-wrap .wpforms-confirmation-container {
    display: none !important;
}
/* Hide errors that look weird in modal */
.wafi-form-wrap .wpforms-error-container {
    border-radius: 8px !important;
    font-size: 13px !important;
}

/* ── Success state ────────────────────────── */
.wafi-success {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    text-align: center;
    gap: 12px;
    background: #f9f9f9;
}
.wafi-success[hidden] {
    display: none !important;
}
.wafi-success svg {
    width: 56px;
    height: 56px;
}
.wafi-success p {
    margin: 0;
    font-size: 15px;
    color: var(--wafi-brand);
    font-weight: 600;
    white-space: pre-line;
}

/* ── Phone flag (WPForms smart phone) ─────── */
/*
 * WPForms usa intl-tel-input, que agrega un selector de bandera/prefijo
 * posicionado absolutamente a la izquierda del input y compensa con un
 * padding-left inline en el <input>. Nuestro reset global
 * "padding: 10px 14px !important" mata ese padding-left, dejando el
 * placeholder y el texto escrito debajo del ícono.
 * Las reglas siguientes restauran el comportamiento correcto SIN tocar
 * campos que no son de teléfono.
 */

/* Contenedor intl-tel-input debe ocupar todo el ancho disponible */
.wafi-form-wrap .iti,
.wafi-form-wrap .wpforms-smart-phone-field {
    display: block !important;
    width: 100% !important;
}

/* El input de teléfono necesita padding-left para no quedar detrás del flag */
.wafi-form-wrap .iti input[type="tel"],
.wafi-form-wrap .iti input[type="text"].wpforms-smart-phone-field-input,
.wafi-form-wrap .wpforms-smart-phone-field input[type="tel"] {
    padding-left: 58px !important; /* ~52px bandera + dial-code + 6px de holgura */
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Cuando el dial code (ej. +502) está visible al lado de la bandera
   el selector puede ser más ancho (~80px) */
.wafi-form-wrap .iti--separate-dial-code input[type="tel"],
.wafi-form-wrap .iti--separate-dial-code input[type="text"].wpforms-smart-phone-field-input {
    padding-left: 88px !important;
}

/* Flag container: asegura posición y z-index correctos dentro del modal */
.wafi-form-wrap .iti__flag-container {
    z-index: 10 !important;
}

/* Dropdown de países: posicionarlo dentro del modal sin quedar oculto */
.wafi-form-wrap .iti__country-list {
    z-index: 1000000 !important;
    max-height: 160px !important; /* limitar altura dentro del modal */
    overflow-y: auto !important;
}

/* ── reCAPTCHA container ──────────────────── */
.wafi-form-wrap .g-recaptcha {
    transform: scale(.88);
    transform-origin: left center;
    margin-bottom: 8px;
}

/* ── Botón del shortcode [wafi_whatsapp_button] ──────────── */
/* Opcional: para usarse en vez del enlace/icono de WhatsApp ya existente. */
.wafi-shortcode-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--wafi-shortcode-brand, #2E7D32);
    color: #fff !important;
    padding: 12px 22px;
    border-radius: 30px;
    font-family: var(--wafi-font);
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.15);
    transition: background .2s, transform .15s;
    cursor: pointer;
    border: none;
}
.wafi-shortcode-btn:hover,
.wafi-shortcode-btn:focus {
    background: var(--wafi-shortcode-brand-hover, #1B5E20);
    transform: translateY(-1px);
    color: #fff !important;
}
.wafi-shortcode-btn svg {
    flex-shrink: 0;
}

/* ── Botón flotante automático (ajuste "auto_float_button") ───────── */
.wafi-float-btn {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: var(--wafi-z);
    width: 65px;
    height: 65px;
    padding: 10px;
    box-sizing: border-box;
    justify-content: center;
    border-radius: 50%;
    /* Verde oficial de WhatsApp, fijo — a diferencia del resto del plugin
       (que usa el color de marca configurado en Ajustes), esta burbuja
       imita el botón flotante estándar de WhatsApp, reconocible por su
       color de siempre sin depender del branding del sitio. */
    background: #25D366 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
.wafi-float-btn:hover,
.wafi-float-btn:focus {
    background: #1EBE57 !important;
}
.wafi-float-btn.wafi-position-left {
    right: auto;
    left: 24px;
}
.wafi-float-btn svg {
    width: 40px;
    height: 40px;
}
/* Texto accesible (nombre del enlace para lectores de pantalla):
   se mantiene en el DOM pero oculto visualmente, la burbuja solo
   muestra el icono. No usar display:none, eso lo sacaría también
   del árbol de accesibilidad. */
.wafi-float-btn span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
@media (max-width: 480px) {
    .wafi-float-btn {
        right: 16px;
        bottom: 16px;
    }
    .wafi-float-btn.wafi-position-left {
        left: 16px;
    }
}

/* ── Responsive ───────────────────────────── */

/* Tablets / phones grandes: modal centrado, sin pegarse a los bordes */
@media (max-width: 600px) {
    .wafi-overlay {
        padding: 0 16px 88px;
    }
    .wafi-modal {
        width: 100%;
        max-width: 380px;
    }
}

/* Móviles: bottom-sheet a ancho completo, alto adaptado al viewport real
   (100dvh evita que la barra de direcciones del navegador móvil recorte
   el modal, con fallback a vh para navegadores sin soporte). */
@media (max-width: 480px) {
    .wafi-overlay {
        padding: 0 0 max(12px, env(safe-area-inset-bottom));
        align-items: flex-end;
        justify-content: center;
    }
    .wafi-modal {
        width: 100%;
        max-width: 100%;
        border-radius: var(--wafi-radius) var(--wafi-radius) 0 0;
        transform: translateY(40px);
        max-height: 85vh;
        max-height: min(85vh, calc(100dvh - 24px));
    }
    .wafi-overlay.wafi-visible .wafi-modal {
        transform: translateY(0);
    }
    .wafi-header {
        padding: 12px 14px;
    }
    .wafi-bubble-wrap {
        padding: 12px 14px 4px;
    }
    .wafi-form-wrap {
        padding: 12px 14px 14px;
    }
    .wafi-form-wrap .wpforms-field {
        margin-bottom: 8px !important;
    }
}

/* Pantallas muy bajas (móvil en horizontal): priorizar que el formulario
   quepa visible en vez de dejar tanto espacio para el chat/branding. */
@media (max-height: 560px) {
    .wafi-modal {
        max-height: min(92vh, calc(100dvh - 16px));
    }
    .wafi-bubble-wrap {
        padding-top: 8px;
        padding-bottom: 0;
    }
    .wafi-bubble {
        padding: 6px 12px;
        font-size: 13px;
    }
}
/* Fix botón cerrar modal WAFI */
.wafi-close {
    background: #e53935 !important;
    border: none !important;
    border-radius: 50% !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    font-size: 22px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    transition: background .15s !important;
    margin-top: -40px;
    margin-right: 8px;
}
.wafi-close:hover {
    background: #c62828 !important;
    opacity: 1 !important;
}

@media (max-width: 768px) {
    .wafi-close {
        margin-top: -15px;
    }
}