/* ==========================================================================
   Newsletter Popup (Klaviyo Embed)
   Content managed via ACF: Theme Settings > Popup Settings
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&family=Poppins:wght@400;700&display=swap');

:root {
    --bcoop-popup-blue: #10069f;
    --bcoop-popup-text: #1a1a1a;
    --bcoop-popup-muted: #444;
}

/* Hidden by default; JS adds .is-open to reveal. */
.bcoop-popup {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
}

.bcoop-popup.is-open {
    display: flex !important;
}

.bcoop-popup__overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(10, 12, 30, 0.55) !important;
    cursor: pointer !important;
}

.bcoop-popup__dialog {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    width: 100% !important;
    max-width: 760px !important;
    background: #fff !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
    animation: bcoop-popup-in 0.25s ease !important;
}

@keyframes bcoop-popup-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Left media column — Figma image is 299 x 444 (ratio ~0.673) */
.bcoop-popup__media {
    flex: 0 0 299px !important;
    max-width: 299px !important;
    background: #f2f2f2 !important;
    aspect-ratio: 299 / 444 !important;
}

.bcoop-popup__media img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Right content column */
.bcoop-popup__content {
    flex: 1 1 auto !important;
    padding: 48px 44px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.bcoop-popup__heading {
    color: #10069F !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 42px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 42px !important; /* 100% */
    letter-spacing: -1.26px !important;
    margin: 0 0 16px !important;
}

.bcoop-popup__subtext {
    color: #333 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: normal !important;
    margin: 0 0 22px !important;
}

/* Klaviyo embed lives here.
   Klaviyo renders with inline styles + scoped hashed classes, so overrides
   below use !important and target Klaviyo's stable class hooks only.
   Layout goal: email input on top, full-width blue button beneath. */
.bcoop-popup__form {
    margin-bottom: 8px !important;
}

/* Outer form wrappers: full width, stacked, transparent */
.bcoop-popup__form .klaviyo-form {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

/* The email + button row -> stack vertically */
.bcoop-popup__form [data-testid="form-row"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
}

/* Each field/button component takes full width, no Klaviyo padding */
.bcoop-popup__form [data-testid="form-component"],
.bcoop-popup__form .klaviyo-emailinput {
    width: 100% !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
}

/* Email input (with envelope icon on the left) */
.bcoop-popup__form input[type="email"],
.bcoop-popup__form input[type="text"] {
    width: 100% !important;
    box-sizing: border-box !important;
    height: auto !important;
    padding: 14px 18px 14px 52px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    color: #1a1a1a !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M22%208V13.6C22%2015.8402%2022%2016.9603%2021.564%2017.816C21.1805%2018.5686%2020.5686%2019.1805%2019.816%2019.564C18.9603%2020%2017.8402%2020%2015.6%2020H8C6.13623%2020%205.20435%2020%204.46927%2019.6955C3.48915%2019.2895%202.71046%2018.5108%202.30448%2017.5307C2%2016.7956%202%2015.8638%202%2014V8M22%208L12.8232%2013.5061C12.5239%2013.6857%2012.3742%2013.7755%2012.2145%2013.8105C12.0732%2013.8416%2011.9268%2013.8416%2011.7855%2013.8105C11.6258%2013.7755%2011.4761%2013.6857%2011.1768%2013.5061L2%208M22%208C22%205.79086%2020.2091%204%2018%204H6C3.79086%204%202%205.79086%202%208%22%20stroke%3D%22%23949494%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 16px center !important;
    background-size: 20px 20px !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 5px !important;
    box-shadow: none !important;
}

.bcoop-popup__form input[type="email"]::placeholder {
    color: #8a8a8a !important;
    opacity: 1 !important;
}

.bcoop-popup__form input[type="email"]:focus {
    border-color: var(--bcoop-popup-blue) !important;
    outline: none !important;
}

/* Subscribe / Sign Up button */
.bcoop-popup__form .klaviyo-form-button,
.bcoop-popup__form button[type="submit"] {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 14px 18px !important;
    text-align: center !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: #fff !important;
    background: #10069F !important;
    border: 0 !important;
    border-radius: 5px !important;
    cursor: pointer !important;
}

.bcoop-popup__form .klaviyo-form-button:hover,
.bcoop-popup__form button[type="submit"]:hover {
    filter: brightness(1.08) !important;
}

/* Validation / success messages from Klaviyo */
.bcoop-popup__form [class*="form-error"],
.bcoop-popup__form [role="alert"]:not([data-testid="submit-announcer"]) {
    font-size: 14px !important;
    margin-top: 6px !important;
}

/* Post-submit "Thanks for subscribing" rich-text — fix overlap/spacing */
.bcoop-popup__form .klaviyo-form-richtext h1,
.bcoop-popup__form .klaviyo-form-richtext h2,
.bcoop-popup__form .klaviyo-form-richtext p {
    margin: 0 0 10px !important;
    line-height: 1.3 !important;
}

.bcoop-popup__form .klaviyo-form-richtext h1 span,
.bcoop-popup__form .klaviyo-form-richtext h2 span,
.bcoop-popup__form .klaviyo-form-richtext p span {
    line-height: 1.3 !important;
    display: inline-block !important;
}

.bcoop-popup__form .klaviyo-form-richtext {
    padding: 4px 0 !important;
}

/* ==========================================================================
   Klaviyo "Interests" checkbox group
   Overrides Klaviyo's inline + hashed-class styles so the checkbox list
   matches the rest of the popup:
   - compact vertical stack, one interest per line
   - small square checkboxes with the brand navy tick when checked
   - Poppins body text at ~15px, matches the subtext & button family
   - Tight, consistent spacing — no runaway Klaviyo defaults

   Specificity note: Klaviyo renders text in a hashed class with
   .goXXXXXXXXXX.goXXXXXXXXXX.goXXXXXXXXXX (triple-chained for weight).
   Those hashes rotate on redeploys, so we don't target them directly.
   Instead we lean on !important + a reasonably specific descendant chain
   that stays stable (klaviyo-checkboxes > fieldset > role=group > label).
   ========================================================================== */

/* Fieldset reset — remove browser default border/margin */
.bcoop-popup__form .klaviyo-checkboxes fieldset {
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
}

/* "Interests" legend heading */
.bcoop-popup__form .klaviyo-checkboxes fieldset legend {
    display: block !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    color: var(--bcoop-popup-text) !important;
    margin: 2px 0 10px !important;
    padding: 0 !important;
    text-transform: none !important;
}

/* Group container — stack vertically with a tight gap */
.bcoop-popup__form .klaviyo-checkboxes fieldset [role="group"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Each row = hidden input + its label. Label wraps the checkbox SVGs + text. */
.bcoop-popup__form .klaviyo-checkboxes fieldset [role="group"] label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 2px 0 !important;
    cursor: pointer !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    color: var(--bcoop-popup-text) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    position: relative !important;
    top: 0 !important;
}

.bcoop-popup__form .klaviyo-checkboxes fieldset [role="group"] label:hover {
    opacity: 0.85 !important;
}

/* Shrink Klaviyo's 20px checkbox SVGs to a 16px square. We intentionally
   do NOT force `display:block` here — Klaviyo relies on the second SVG
   (the tick overlay) being hidden by default via its own display rules;
   overriding that caused every checkbox to render as permanently ticked
   (reported 19 Oct 2026). We handle the show/hide ourselves below via
   the :checked state, so Klaviyo's own display rules can co-exist. */
.bcoop-popup__form .klaviyo-checkboxes fieldset [role="group"] label svg {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    flex: 0 0 16px !important;
    margin: 0 !important;
}

/* Tick overlay (second SVG inside the label) — hide by default. */
.bcoop-popup__form .klaviyo-checkboxes fieldset [role="group"] label svg + svg {
    opacity: 0 !important;
    transition: opacity 0.1s ease !important;
}

/* Reveal the tick when the preceding sibling checkbox is actually checked. */
.bcoop-popup__form .klaviyo-checkboxes fieldset [role="group"] input[type="checkbox"]:checked + label svg + svg {
    opacity: 1 !important;
}

/* The text wrapper inside each label — this is Klaviyo's .goXXXXX div.
   Override its font-size/family/colour/margin so it stops rendering at
   20px Nunito Sans and sits inline with the checkbox. */
.bcoop-popup__form .klaviyo-checkboxes fieldset [role="group"] label > div {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    top: auto !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    color: var(--bcoop-popup-text) !important;
    white-space: normal !important;
}

/* Brand-colour the "checked" tick overlay so it matches the Subscribe button.
   Klaviyo renders two stacked SVGs per label — an outline rect (unchecked
   background) and a tick polygon (shown when checked). Colour the inner
   checked group so the tick reads navy, matching the heading and button. */
.bcoop-popup__form .klaviyo-checkboxes fieldset [role="group"] label svg g[fill],
.bcoop-popup__form .klaviyo-checkboxes fieldset [role="group"] label svg polygon {
    fill: var(--bcoop-popup-blue) !important;
}

/* Give the unchecked box a subtle brand-friendly border instead of a flat
   #000 rect. Klaviyo uses stroke on the outer rect for the box outline. */
.bcoop-popup__form .klaviyo-checkboxes fieldset [role="group"] label svg rect {
    stroke: #B5B9C7 !important;
    stroke-width: 1px !important;
    rx: 3 !important;
    ry: 3 !important;
}

/* Close (X) button */
.bcoop-popup__close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    z-index: 2 !important;
    width: 40px !important;
    height: 40px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #eee !important;
    color: #222 !important;
    font-size: 22px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.15s ease !important;
}

.bcoop-popup__close:hover {
    background: #ddd !important;
}

/* "No, thanks" dismiss link */
.bcoop-popup__dismiss {
    display: block !important;
    background: none !important;
    border: 0 !important;
    padding: 8px 0 0 !important;
    margin: 12px auto 0 !important;
    color: #333 !important;
    text-align: center !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: normal !important;
    text-decoration-line: underline !important;
    text-decoration-style: solid !important;
    text-decoration-skip-ink: auto !important;
    text-decoration-thickness: auto !important;
    text-underline-offset: auto !important;
    text-underline-position: from-font !important;
    cursor: pointer !important;
}

/* Override theme button hover/focus styles on the dismiss link */
.bcoop-popup__dismiss:hover,
.bcoop-popup__dismiss:focus,
.bcoop-popup__dismiss:active {
    color: #333 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Prevent body scroll when open */
body.bcoop-popup-open {
    overflow: hidden !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 782px) {
    .bcoop-popup__dialog {
        flex-direction: column !important;
        max-width: 420px !important;
        max-height: 92vh !important;
        overflow-y: auto !important;
    }

    .bcoop-popup__media {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 180px !important;
        aspect-ratio: auto !important;
        overflow: hidden !important;
    }

    .bcoop-popup__media img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .bcoop-popup__content {
        padding: 28px 24px !important;
    }

    .bcoop-popup__heading {
        font-size: 30px !important;
    }

    .bcoop-popup__subtext {
        font-size: 16px !important;
    }
}