/*------------------------------------------------------------------*\
    COMPONENT — Elementor Popup Modal (glassmorphism)

    Frosted-glass treatment for the Elementor popup content box
    (.elementor-popup-modal .elementor). These are Elementor-generated
    classes, so we override them directly.

    Reuses the shared "Glass" material tokens from helpers/vars.css
    (--glass-frost / --glass-border / --glass-shadow) so the effect
    stays consistent with the rest of the UI.

    Mobile-first: base styles target small screens, min-width queries
    scale the blur/padding up. The effect no-ops gracefully where
    backdrop-filter is unsupported (see @supports fallback below).
\*------------------------------------------------------------------*/

/* The outer .elementor-popup-modal is the full-screen overlay layer.
   We only style the inner content box (.elementor — the popup body). */
.popup-form .elementor {
    position: relative;

    /* Semi-transparent surface so the backdrop shows through.
       color-mix keeps it tied to the white surface token; the alpha
       gives the frosted tint. */
    background-color: color-mix(in srgb, var(--color-bg-white) 55%, transparent);

    /* Depth: lit rim + soft cast shadow from the shared glass token. */
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    box-shadow: var(--glass-shadow);

    /* Comfortable internal spacing (Elementor's own padding may be 0). */
    padding: var(--space-lg);

    /* Clip the blurred backdrop to the rounded corners. */
    overflow: hidden;

    /* Keep transitions smooth if Elementor animates the popup in. */
    transition: var(--transition-base);
}

/* Frosted backdrop. Declared separately so we can wrap it in @supports
   and provide an opaque fallback for browsers without backdrop-filter. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .popup-form .elementor {
        -webkit-backdrop-filter: var(--glass-frost);
        backdrop-filter: var(--glass-frost);
    }
}

/* Fallback for browsers without backdrop-filter support: bump the
   surface opacity so text stays readable over a busy page behind it. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .popup-form .elementor {
        background-color: color-mix(in srgb, var(--color-bg-white) 92%, transparent);
    }
}

/* Scale the frost and padding up on larger viewports for more presence. */
@media (min-width: 1024px) {
    @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
        .popup-form .elementor {
            -webkit-backdrop-filter: blur(12px) saturate(180%);
            backdrop-filter: blur(12px) saturate(180%);
        }
    }
}

/* Respect users who prefer reduced motion: disable the entrance/exit
   transition (the static glass look is preserved). */
@media (prefers-reduced-motion: reduce) {
    .popup-form .elementor {
        transition: none;
    }
}