/**
 * WOA Popup v3.1
 *
 * ARCHITECTURE PRINCIPLE
 * ──────────────────────
 * This file controls ONLY popup behaviour:
 *   • overlay / backdrop / show-hide animation
 *   • dialog sizing per type and breakpoint
 *   • mobile responsive strategies
 *
 * It knows NOTHING about what lives inside a popup.
 * All content design (card appearance, typography, form layout)
 * belongs in FSE-editable blocks or theme CSS files.
 *
 * Three popup types:
 *   overlay  —  full-screen dark backdrop, large centred dialog   (search, video)
 *   modal    —  brand-tinted backdrop, medium centred dialog       (character info, forms)
 *   card     —  no backdrop, small floating panel                  (language selector)
 *
 * Desktop  > 1024px
 * Tablet   641px – 1024px
 * Mobile   ≤ 640px  (two selectable strategies — see below)
 *
 * Mobile strategies (set via CSS class on .wpp-popup-content in FSE):
 *   default               — fluid-width card, content reflows naturally
 *   .wpp-mobile-fullscreen — full viewport (100vw × 100dvh), like WP Overlay Menu
 */


/* ===================================================================
   FSE TEMPLATE HIDING
   Keeps popup content invisible in the normal page flow until
   the JS moves it into .wpp-wrapper. Removed by JS on init.
=================================================================== */
.wpp-hidden {
    display: none !important;
}


/* ===================================================================
   BODY SCROLL LOCK
=================================================================== */
body.wpp-noscroll {
    overflow: hidden;
}


/* ===================================================================
   WRAPPER
   Fixed full-screen container. Hidden via opacity + visibility so
   CSS transitions work. Centred flex by default (card overrides).
=================================================================== */
.wpp-wrapper {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.wpp-wrapper.wpp-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* ===================================================================
   INSIDE — scrollable dialog container
   Type-specific widths set below. Entrance spring animation here.
=================================================================== */
.wpp-inside {
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    transform: scale(0.96) translateY(6px);
    transition: transform 0.28s cubic-bezier(0.34, 1.36, 0.64, 1);
}

.wpp-inside::-webkit-scrollbar {
    display: none;
}

.wpp-wrapper.wpp-open .wpp-inside {
    transform: scale(1) translateY(0);
}


/* ===================================================================
   BACKDROP
   Sits behind .wpp-inside. Overlay = dark blur. Modal = brand tint.
   Card has no backdrop.
=================================================================== */
.wpp-backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition: background 0.28s ease, backdrop-filter 0.28s ease, -webkit-backdrop-filter 0.28s ease;
}

.wpp-wrapper.wpp-open .wpp-backdrop {
    background: rgba(0, 0, 0, 0.52);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Modal: brand-tinted backdrop */
.wpp-wrapper--modal .wpp-backdrop {
    background: rgba(0, 0, 0, 0);
}

.wpp-wrapper--modal.wpp-open .wpp-backdrop {
    background: rgba(105, 73, 115, 0.40);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}


/* ===================================================================
   POPUP CONTENT BLOCK
   The synced WP block inside .wpp-inside. Must fill its container.
=================================================================== */
.wpp-wrapper .wpp-popup-content,
.wpp-wrapper .wpp-popup-content.wp-block-group {
    width: 100% !important;
    max-width: 100% !important;
}


/* ===================================================================
   TYPE: OVERLAY
   Full dark backdrop. Large centred dialog.
   Desktop  > 1024px  →  760px
   Tablet   641–1024  →  calc(100vw - 40px)
   Mobile   ≤ 640px   →  see Mobile Strategies below
=================================================================== */
.wpp-wrapper--overlay .wpp-inside {
    width: 760px;
    max-width: calc(100vw - 40px);
}

@media (max-width: 1024px) {
    .wpp-wrapper--overlay .wpp-inside {
        width: calc(100vw - 40px);
        max-width: calc(100vw - 40px);
    }
}


/* ===================================================================
   TYPE: MODAL
   Brand-tinted backdrop. Medium centred dialog.
   Desktop  > 1024px  →  640px
   Tablet   641–1024  →  580px
   Mobile   ≤ 640px   →  see Mobile Strategies below
=================================================================== */
.wpp-wrapper--modal .wpp-inside {
    width: 640px;
    max-width: calc(100vw - 40px);
}

@media (max-width: 1024px) {
    .wpp-wrapper--modal .wpp-inside {
        width: 580px;
        max-width: calc(100vw - 40px);
    }
}


/* ===================================================================
   TYPE: CARD
   No backdrop. Compact floating panel anchored top-right.
   Ideal for: language selector, quick-info panels.
=================================================================== */
.wpp-wrapper--card {
    align-items: flex-start;
    justify-content: flex-end;
    padding-top: 80px;
    padding-right: 20px;
}

.wpp-wrapper--card .wpp-inside {
    width: 300px;
    max-width: calc(100vw - 40px);
    border-radius: 14px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.10);
    overflow: hidden;
    transform: scale(0.98) translateY(-8px);
}

.wpp-wrapper--card.wpp-open .wpp-inside {
    transform: scale(1) translateY(0);
}

@media (max-width: 640px) {
    .wpp-wrapper--card {
        justify-content: center;
        padding-top: 70px;
        padding-right: 0;
    }

    .wpp-wrapper--card .wpp-inside {
        width: calc(100vw - 32px);
    }
}


/* ===================================================================
   MOBILE STRATEGIES  (overlay + modal types only)

   Strategy 1 — DEFAULT: fluid-width floating card
   The card sits centred in the viewport. Width fills screen minus
   a small margin. FSE block content reflows naturally inside.

   Strategy 2 — FULLSCREEN: add class `wpp-mobile-fullscreen`
   to the .wpp-popup-content element in the FSE block editor.
   The dialog expands edge-to-edge and full height, like the
   WordPress Overlay Menu pattern. Blocks stack vertically.
=================================================================== */

/* Strategy 1 — fluid card (default for overlay + modal) */
@media (max-width: 640px) {
    .wpp-wrapper--overlay .wpp-inside,
    .wpp-wrapper--modal .wpp-inside {
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
        max-height: 90dvh;
    }
}

/* Strategy 2 — full-screen (opt-in via .wpp-mobile-fullscreen on content)
   The .wpp-inside becomes the full viewport. We then stretch the popup
   content's direct child (the FSE-designed card block) to also fill
   100dvh so the card background covers the full screen — matching the
   WP Overlay Menu pattern. The backdrop is hidden since the card fills
   the entire viewport. */
@media (max-width: 640px) {
    .wpp-wrapper:has(.wpp-mobile-fullscreen) {
        align-items: flex-start;
    }

    .wpp-wrapper:has(.wpp-mobile-fullscreen) .wpp-inside {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        overflow-y: auto;
        border-radius: 0 !important;
    }

    /* Stretch the popup-content and its direct child (the FSE card block)
       to fill the full height — content-agnostic structural rule */
    .wpp-wrapper:has(.wpp-mobile-fullscreen) .wpp-popup-content,
    .wpp-wrapper:has(.wpp-mobile-fullscreen) .wpp-popup-content > .wp-block-group {
        flex: 1;
        min-height: 100%;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
    }

    /* Backdrop hidden — the card fills the full screen */
    .wpp-wrapper:has(.wpp-mobile-fullscreen) .wpp-backdrop {
        display: none;
    }
}


/* ===================================================================
   REDUCED MOTION
=================================================================== */
@media (prefers-reduced-motion: reduce) {
    .wpp-wrapper,
    .wpp-backdrop,
    .wpp-inside {
        transition: none !important;
        transform: none !important;
    }
}