/**
 * inloff — Signup popup styles (v2.1 CRO-optimized + Flatsome-resistant)
 *
 * Mobile-first: bottom sheet < 768px, center modal ≥ 768px.
 * Two-step funnel: intent → email → success.
 *
 * IMPORTANTE — Specificity strategy:
 *   Flatsome 3.20.6 tiene reglas CSS bastante específicas para
 *   button/input/.button que machacaban nuestros estilos. Para vencer:
 *     1. Todos los selectores van prefijados con `.inloff-popup` (idx 0,1,0)
 *     2. Buttons y inputs usan `all: revert; ` + reset manual de campos
 *        que Flatsome cambia (font-family, line-height, padding, etc.).
 *     3. Z-index 999999 para asegurar que se ponga encima de cualquier
 *        elemento del theme.
 *     4. Background-color usa !important SOLO en CTAs primarios (caso
 *        crítico — perder la heart color = popup feo).
 *
 * Paleta:
 *   --navy        #1B2540    headings, primary CTA bg alt
 *   --cream       #FBF6EB    bg neutro
 *   --cream-light #F2E8D5    decorative
 *   --heart       #C5A184    accent dorado, CTA primario
 *   --text        #1A1612    body copy
 *   --muted       #5F5E5A    legal small
 *   --border      #E5E0D5    dividers
 *   --error       #A32D2D    inline errors
 */

/* ============================================================ */
/*  Tokens — scoped al popup                                     */
/* ============================================================ */
.inloff-popup {
    --inloff-popup-navy: #1B2540;
    --inloff-popup-cream: #FBF6EB;
    --inloff-popup-cream-light: #F2E8D5;
    --inloff-popup-heart: #C5A184;
    --inloff-popup-heart-dark: #A8865F;
    --inloff-popup-text: #1A1612;
    --inloff-popup-muted: #5F5E5A;
    --inloff-popup-border: #E5E0D5;
    --inloff-popup-error: #A32D2D;
    --inloff-popup-success: #2D7A4A;

    --inloff-popup-radius: 16px;
    --inloff-popup-shadow: 0 24px 64px -16px rgba(27, 37, 64, 0.32);
    --inloff-popup-z: 999999;
    --inloff-popup-transition: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================ */
/*  Overlay (full-screen container)                              */
/* ============================================================ */
.inloff-popup {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.28s var(--inloff-popup-transition);
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.inloff-popup.is-open {
    pointer-events: auto;
    opacity: 1;
}

.inloff-popup .inloff-popup__backdrop {
    position: absolute;
    inset: 0;
    /* Antes: backdrop-filter: blur(4px) sobre el viewport completo → coste de GPU alto
       en scroll/animación (jank device-dependent en retina/4K/GPU integrada). El popup
       salta al 50% de scroll, justo cuando el usuario scrollea. Un overlay sólido algo
       más opaco da el mismo efecto de "fondo atenuado" sin recomponer un blur por frame. */
    background: rgba(27, 37, 64, 0.72);
    cursor: pointer;
}

body.inloff-popup-open {
    overflow: hidden;
}

/* ============================================================ */
/*  Dialog — mobile (bottom sheet)                              */
/* ============================================================ */
.inloff-popup .inloff-popup__dialog {
    position: relative;
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    background: var(--inloff-popup-cream);
    border-radius: var(--inloff-popup-radius) var(--inloff-popup-radius) 0 0;
    box-shadow: var(--inloff-popup-shadow);
    transform: translateY(40px);
    opacity: 0;
    transition:
        transform 0.42s var(--inloff-popup-transition),
        opacity 0.28s ease-out;
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-sizing: border-box;
}

.inloff-popup.is-open .inloff-popup__dialog {
    transform: translateY(0);
    opacity: 1;
}

/* Drag handle mobile */
.inloff-popup .inloff-popup__dialog::before {
    content: '';
    position: sticky;
    top: 0;
    display: block;
    width: 40px;
    height: 4px;
    margin: 8px auto 0;
    background: rgba(27, 37, 64, 0.18);
    border-radius: 2px;
    z-index: 2;
}

/* Desktop center modal */
@media (min-width: 768px) {
    .inloff-popup {
        align-items: center;
    }
    .inloff-popup .inloff-popup__dialog {
        max-width: 480px;
        max-height: 90vh;
        border-radius: var(--inloff-popup-radius);
        transform: translateY(0) scale(0.94);
    }
    .inloff-popup.is-open .inloff-popup__dialog {
        transform: translateY(0) scale(1);
    }
    .inloff-popup .inloff-popup__dialog::before {
        display: none;
    }
}

/* ============================================================ */
/*  Close button                                                 */
/* ============================================================ */
.inloff-popup .inloff-popup__close {
    /* Reset Flatsome button styles */
    all: unset;
    -webkit-appearance: none;
    appearance: none;

    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.86);
    border-radius: 50%;
    color: var(--inloff-popup-navy);
    cursor: pointer;
    z-index: 3;
    transition: background 0.18s ease, transform 0.18s ease;
    backdrop-filter: blur(4px);
    box-sizing: border-box;
}

.inloff-popup .inloff-popup__close:hover,
.inloff-popup .inloff-popup__close:focus-visible {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.05);
    outline: none;
}

.inloff-popup .inloff-popup__close svg {
    display: block;
}

/* ============================================================ */
/*  Hero image                                                   */
/* ============================================================ */
.inloff-popup .inloff-popup__hero {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--inloff-popup-cream-light);
}

.inloff-popup .inloff-popup__hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.02);
    transition: transform 8s ease-out;
}

.inloff-popup.is-open .inloff-popup__hero img {
    transform: scale(1.08);
}

/* Hasta que se abre por primera vez, la foto ni se pide ni se pinta. Cerrado, el popup ocupa la pantalla con opacidad
   0, así que su foto diferida entraba en ella: cada visita a la portada, la búsqueda o una página la bajaba (unos
   100 KB) y Chrome podía darla como el LCP de la página (en la búsqueda, 7,5 s en vez de 3,7; 15-oct-2026). */
.inloff-popup:not(.was-opened) .inloff-popup__hero img {
    display: none;
}

.inloff-popup .inloff-popup__hero-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(27, 37, 64, 0) 60%,
        rgba(251, 246, 235, 0.95) 100%
    );
    pointer-events: none;
}

/* ============================================================ */
/*  Body                                                         */
/* ============================================================ */
.inloff-popup .inloff-popup__body {
    padding: 28px 24px 32px;
    color: var(--inloff-popup-text);
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .inloff-popup .inloff-popup__body {
        padding: 32px 36px 36px;
    }
}

.inloff-popup .inloff-popup__step {
    animation: inloffFadeIn 0.36s var(--inloff-popup-transition);
}

@keyframes inloffFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================ */
/*  Eyebrow + Title + Description                                */
/* ============================================================ */
.inloff-popup .inloff-popup__eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--inloff-bronze-text, #7E5E3B);
    margin-bottom: 12px;
    line-height: 1.4;
}

.inloff-popup .inloff-popup__title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 26px;
    line-height: 1.18;
    color: var(--inloff-popup-navy);
    margin: 0 0 12px;
    letter-spacing: -0.01em;
    font-weight: 400;
}

@media (min-width: 768px) {
    .inloff-popup .inloff-popup__title {
        font-size: 30px;
    }
}

.inloff-popup .inloff-popup__desc {
    font-size: 15px;
    line-height: 1.55;
    color: var(--inloff-popup-text);
    margin: 0 0 22px;
}

.inloff-popup .inloff-popup__desc strong {
    color: var(--inloff-popup-navy);
    font-weight: 600;
}

/* ============================================================ */
/*  CTAs — full button reset + custom styles                     */
/* ============================================================ */
.inloff-popup .inloff-popup__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

.inloff-popup .inloff-popup__cta {
    /* Hard reset de cualquier estilo de botón heredado (Flatsome, WP) */
    all: unset;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 54px;
    padding: 14px 22px;
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition:
        transform 0.16s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}

.inloff-popup .inloff-popup__cta--primary {
    /* !important porque Flatsome puede sobrescribir bg color en buttons */
    background-color: var(--inloff-navy, #1B2540) !important;
    color: var(--inloff-cream-light, #FDFBF7) !important;
    box-shadow: 0 4px 14px -4px rgba(27, 37, 64, 0.45);
    border: 0;
}

.inloff-popup .inloff-popup__cta--primary:hover,
.inloff-popup .inloff-popup__cta--primary:focus-visible {
    background-color: var(--inloff-navy-deep, #131A2E) !important;
    box-shadow: 0 6px 20px -4px rgba(27, 37, 64, 0.55);
    transform: translateY(-1px);
    outline: none;
}

.inloff-popup .inloff-popup__cta--primary:active {
    transform: translateY(0);
}

.inloff-popup .inloff-popup__cta--ghost {
    background-color: transparent !important;
    color: var(--inloff-popup-muted) !important;
    border: 1px solid var(--inloff-popup-border);
}

.inloff-popup .inloff-popup__cta--ghost:hover,
.inloff-popup .inloff-popup__cta--ghost:focus-visible {
    color: var(--inloff-popup-navy) !important;
    background-color: rgba(27, 37, 64, 0.04) !important;
    border-color: rgba(27, 37, 64, 0.18);
    outline: none;
}

/* ============================================================ */
/*  Trust badge                                                  */
/* ============================================================ */
.inloff-popup .inloff-popup__trust {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 18px;
    border-top: 1px solid var(--inloff-popup-border);
    gap: 4px;
}

.inloff-popup .inloff-popup__trust-num {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--inloff-popup-navy);
    line-height: 1;
}

.inloff-popup .inloff-popup__trust-text {
    font-size: 12px;
    color: var(--inloff-popup-muted);
    line-height: 1.4;
}

/* ============================================================ */
/*  Form (Step 2)                                                */
/* ============================================================ */
.inloff-popup .inloff-popup__form {
    margin-bottom: 14px;
}

.inloff-popup .inloff-popup__input {
    /* Reset Flatsome input styles */
    all: unset;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;

    display: block;
    width: 100%;
    min-height: 52px;
    padding: 14px 16px;
    font-family: inherit;
    font-size: 16px;
    color: var(--inloff-popup-text);
    background: #FFFFFF;
    border: 1.5px solid var(--inloff-popup-border);
    border-radius: 10px;
    margin-bottom: 12px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.inloff-popup .inloff-popup__input::placeholder {
    color: rgba(95, 94, 90, 0.6);
}

.inloff-popup .inloff-popup__input:focus,
.inloff-popup .inloff-popup__input:focus-visible {
    border-color: var(--inloff-popup-heart);
    box-shadow: 0 0 0 4px rgba(197, 161, 132, 0.18);
    outline: none;
}

.inloff-popup .inloff-popup__input.has-error {
    border-color: var(--inloff-popup-error);
    box-shadow: 0 0 0 4px rgba(163, 45, 45, 0.12);
}

.inloff-popup .inloff-popup__honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.inloff-popup .inloff-popup__submit {
    position: relative;
}

.inloff-popup .inloff-popup__submit-spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: inloffSpin 0.6s linear infinite;
}

.inloff-popup .inloff-popup__submit.is-loading .inloff-popup__submit-label {
    opacity: 0.7;
}

.inloff-popup .inloff-popup__submit.is-loading .inloff-popup__submit-spinner {
    display: inline-block;
}

@keyframes inloffSpin {
    to { transform: rotate(360deg); }
}

/* ============================================================ */
/*  Error inline                                                 */
/* ============================================================ */
.inloff-popup .inloff-popup__error {
    font-size: 13px;
    color: var(--inloff-popup-error);
    margin: 8px 0 0;
    padding: 8px 12px;
    background: rgba(163, 45, 45, 0.06);
    border-radius: 6px;
    border-left: 3px solid var(--inloff-popup-error);
}

/* ============================================================ */
/*  Legal small print                                            */
/* ============================================================ */
.inloff-popup .inloff-popup__legal {
    font-size: 11px;
    line-height: 1.55;
    color: var(--inloff-popup-muted);
    margin: 14px 0 0;
    text-align: center;
}

.inloff-popup .inloff-popup__legal a {
    color: var(--inloff-popup-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.inloff-popup .inloff-popup__legal a:hover {
    color: var(--inloff-popup-navy);
}

/* ============================================================ */
/*  Success / Returning step                                     */
/* ============================================================ */
.inloff-popup .inloff-popup__step--success,
.inloff-popup .inloff-popup__step--returning {
    text-align: center;
}

.inloff-popup .inloff-popup__success-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    background: rgba(45, 122, 74, 0.12);
    color: var(--inloff-popup-success);
    border-radius: 50%;
    animation: inloffScaleIn 0.42s var(--inloff-popup-transition);
}

@keyframes inloffScaleIn {
    from { transform: scale(0.6); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.inloff-popup .inloff-popup__success-title {
    margin-bottom: 8px;
}

.inloff-popup .inloff-popup__success-msg {
    font-size: 14px;
    color: var(--inloff-popup-text);
    margin: 0 0 22px;
    line-height: 1.55;
}

.inloff-popup .inloff-popup__coupon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 16px;
    background: #FFFFFF;
    border: 1.5px dashed var(--inloff-popup-heart);
    border-radius: 12px;
    margin-bottom: 12px;
    text-align: left;
}

.inloff-popup .inloff-popup__coupon-label {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--inloff-popup-muted);
    line-height: 1.2;
}

.inloff-popup .inloff-popup__coupon-code {
    flex: 1;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 18px;
    font-weight: 700;
    color: var(--inloff-popup-navy);
    letter-spacing: 0.04em;
    text-align: center;
    word-break: break-all;
}

.inloff-popup .inloff-popup__coupon-copy {
    all: unset;
    -webkit-appearance: none;
    box-sizing: border-box;
    flex-shrink: 0;
    padding: 8px 14px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--inloff-popup-navy) !important;
    background: var(--inloff-popup-cream-light) !important;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.18s ease;
}

.inloff-popup .inloff-popup__coupon-copy:hover,
.inloff-popup .inloff-popup__coupon-copy:focus-visible {
    background: var(--inloff-popup-heart) !important;
    color: #FFFFFF !important;
    outline: none;
}

.inloff-popup .inloff-popup__coupon-copy.is-copied {
    background: var(--inloff-popup-success) !important;
    color: #FFFFFF !important;
}

.inloff-popup .inloff-popup__success-hint {
    font-size: 12px;
    color: var(--inloff-popup-muted);
    margin: 0 0 20px;
    line-height: 1.5;
}

.inloff-popup .inloff-popup__success-cta {
    margin-top: 4px;
}

/* ============================================================ */
/*  Accessibility                                                */
/* ============================================================ */
.screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    white-space: nowrap !important;
}

@media (prefers-reduced-motion: reduce) {
    .inloff-popup,
    .inloff-popup .inloff-popup__dialog,
    .inloff-popup .inloff-popup__step,
    .inloff-popup .inloff-popup__hero img,
    .inloff-popup .inloff-popup__success-check {
        animation: none !important;
        transition: opacity 0.18s ease, transform 0.18s ease !important;
    }
}

/* ============================================================ */
/*  Inline shortcode form (footer/sidebar)                       */
/* ============================================================ */
.inloff-signup-inline {
    background: #F2E8D5;
    padding: 20px;
    border-radius: 10px;
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
}

.inloff-signup-inline__title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
    color: #1B2540;
}

.inloff-signup-inline__form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.inloff-signup-inline--stacked .inloff-signup-inline__form {
    flex-direction: column;
}

.inloff-signup-inline__input {
    flex: 1;
    min-width: 200px;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid #E5E0D5;
    border-radius: 8px;
    background: #FFFFFF;
    font-size: 14px;
    font-family: inherit;
}

.inloff-signup-inline__input:focus {
    outline: none;
    border-color: #C5A184;
    box-shadow: 0 0 0 3px rgba(197, 161, 132, 0.18);
}

.inloff-signup-inline__submit {
    padding: 10px 22px;
    background: #1B2540;
    color: #FBF6EB;
    border: 0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease;
}

.inloff-signup-inline__submit:hover {
    background: #2A3656;
}

.inloff-signup-inline__msg {
    margin: 10px 0 0;
    font-size: 13px;
    color: #1B2540;
}

.inloff-signup-inline__msg--error {
    color: #A32D2D;
}