/**
 * WhitePointerNet - CookieYes Global Presentation Overrides
 *
 * Version: 1.4
 * Date: 2026-09-29
 *
 * Production policy:
 *
 * MOBILE <= 768px
 * - CookieYes retains its native behaviour.
 * - WPN only prevents invalid/transient CookieYes states.
 * - WPN centres the actual visible consent banner.
 * - No WPN JavaScript behaviour runs on mobile.
 *
 * DESKTOP >= 769px
 * - Preserve approved WPN centred presentation.
 * - Preserve preference modal containment.
 * - Preserve blocked-media positioning.
 * - Preserve hardened scroll-lock support.
 *
 * CookieYes remains the sole owner of consent decisions.
 */


/* =========================================================
   1. GLOBAL CLOSED-STATE SAFETY
   ========================================================= */

/*
 * A CLOSED preference modal must never be rendered.
 *
 * This is the safeguard that removed the huge
 * "Customise Consent Preferences" text flash.
 */
.cky-modal:not(.cky-modal-open) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/*
 * Respect CookieYes' own hidden state completely.
 */
.cky-consent-container.cky-hide,
.cky-overlay.cky-hide {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* =========================================================
   2. COOKIEYES ATTRIBUTION
   ========================================================= */

[data-cky-tag="powered-by"],
[data-cky-tag="detail-powered-by"],
[data-cky-tag="optout-powered-by"] {
    display: none !important;
}


/* =========================================================
   3. MOBILE
   ========================================================= */

@media (max-width: 768px) {


    /* -----------------------------------------------------
       MOBILE CONSENT BANNER
       -----------------------------------------------------
       CookieYes still controls whether the banner exists.

       WPN only centres the banner that CookieYes has already
       decided should be visible.
       ----------------------------------------------------- */

    .cky-consent-container:not(.cky-hide) {
        position: fixed !important;

        top: 50% !important;
        left: 50% !important;

        right: auto !important;
        bottom: auto !important;

        -webkit-transform: translate(-50%, -50%) !important;
        -moz-transform: translate(-50%, -50%) !important;
        -ms-transform: translate(-50%, -50%) !important;
        -o-transform: translate(-50%, -50%) !important;
        transform: translate(-50%, -50%) !important;

        width: calc(100vw - 24px) !important;
        max-width: 440px !important;

        max-height: calc(100vh - 24px) !important;
        max-height: calc(100dvh - 24px) !important;

        margin: 0 !important;

        box-sizing: border-box !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;

        z-index: 9999999 !important;
    }


    /*
     * Neutralise CookieYes' top/bottom/left/right positioning
     * classes without changing its actual banner content.
     */
    .cky-consent-container:not(.cky-hide).cky-box-bottom-left,
    .cky-consent-container:not(.cky-hide).cky-box-bottom-right,
    .cky-consent-container:not(.cky-hide).cky-box-top-left,
    .cky-consent-container:not(.cky-hide).cky-box-top-right {
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
    }


    /*
     * Keep the actual consent card contained inside the
     * centred shell.
     */
    .cky-consent-container:not(.cky-hide) .cky-consent-bar {
        width: 100% !important;
        max-width: 100% !important;

        box-sizing: border-box !important;

        border-radius: 8px !important;
        overflow: hidden !important;
    }


    /*
     * Keep CookieYes' own button/content arrangement.
     *
     * We deliberately do NOT restyle:
     * - title
     * - description
     * - buttons
     * - button ordering
     * - colours
     *
     * CookieYes remains responsible for its responsive
     * internal layout.
     */


    /* -----------------------------------------------------
       MOBILE PREFERENCE MODAL
       -----------------------------------------------------
       CookieYes owns its native OPEN preference interface.

       We deliberately do not reposition it here.
       ----------------------------------------------------- */

    .cky-modal.cky-modal-open {
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100vh - 16px) !important;
        max-height: calc(100dvh - 16px) !important;

        box-sizing: border-box !important;
    }


    .cky-modal.cky-modal-open .cky-preference-center {
        max-width: 100% !important;

        max-height: calc(100vh - 16px) !important;
        max-height: calc(100dvh - 16px) !important;

        box-sizing: border-box !important;
    }


    .cky-modal.cky-modal-open .cky-preference-body-wrapper {
        overflow-y: auto !important;

        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
}


/* =========================================================
   4. MOBILE STARTUP-JUNK SUPPRESSION
   =========================================================
   CSS only.

   While CookieYes still has an unresolved visible consent
   container, there is no reason to display its revisit
   control or blocked-media warning underneath the banner.

   Once the visitor makes a choice and CookieYes hides its
   consent container, these rules naturally stop matching.
   ========================================================= */

@supports selector(html:has(body)) {

    @media (max-width: 768px) {


        /*
         * Suppress premature top-left revisit icon while
         * the first consent decision is unresolved.
         */

        html:has(.cky-consent-container:not(.cky-hide))
        .cky-btn-revisit-wrapper,

        html:has(.cky-consent-container:not(.cky-hide))
        [data-cky-tag="revisit-consent"] {
            visibility: hidden !important;
            opacity: 0 !important;
            pointer-events: none !important;
        }


        /*
         * Suppress blocked-media puzzle treatment while the
         * initial consent banner is itself visible.
         */

        html:has(.cky-consent-container:not(.cky-hide))
        .video-placeholder-normal {
            background-image: none !important;
        }


        html:has(.cky-consent-container:not(.cky-hide))
        .video-placeholder-text-normal {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
        }
    }
}


/* =========================================================
   5. DESKTOP CONSENT POPUP
   ========================================================= */

@media (min-width: 769px) {

    .cky-consent-container:not(.cky-hide) {
        position: fixed !important;

        top: 50% !important;
        left: 50% !important;

        right: auto !important;
        bottom: auto !important;

        -webkit-transform: translate(-50%, -50%) !important;
        -moz-transform: translate(-50%, -50%) !important;
        -ms-transform: translate(-50%, -50%) !important;
        -o-transform: translate(-50%, -50%) !important;
        transform: translate(-50%, -50%) !important;

        width: 440px !important;
        max-width: calc(100vw - 24px) !important;

        max-height: calc(100vh - 24px) !important;
        max-height: calc(100dvh - 24px) !important;

        margin: 0 !important;

        box-sizing: border-box !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }


    .cky-consent-container:not(.cky-hide) .cky-consent-bar {
        width: 100% !important;
        max-width: 100% !important;

        box-sizing: border-box !important;
    }


    .cky-consent-container:not(.cky-hide).cky-box-bottom-left,
    .cky-consent-container:not(.cky-hide).cky-box-bottom-right,
    .cky-consent-container:not(.cky-hide).cky-box-top-left,
    .cky-consent-container:not(.cky-hide).cky-box-top-right {
        top: 50% !important;
        left: 50% !important;

        right: auto !important;
        bottom: auto !important;
    }
}


/* =========================================================
   6. DESKTOP PREFERENCE MODAL
   ========================================================= */

@media (min-width: 769px) {

    .cky-modal.cky-modal-open {
        display: flex !important;

        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;

        position: fixed !important;

        top: 50% !important;
        left: 50% !important;

        right: auto !important;
        bottom: auto !important;

        -webkit-transform: translate(-50%, -50%) !important;
        -moz-transform: translate(-50%, -50%) !important;
        -ms-transform: translate(-50%, -50%) !important;
        -o-transform: translate(-50%, -50%) !important;
        transform: translate(-50%, -50%) !important;

        margin: 0 !important;

        max-width: calc(100vw - 24px) !important;

        max-height: calc(100vh - 24px) !important;
        max-height: calc(100dvh - 24px) !important;

        box-sizing: border-box !important;
    }


    .cky-modal.cky-modal-open .cky-preference-center {
        display: flex !important;
        flex-direction: column !important;

        width: 845px !important;
        max-width: 100% !important;

        height: auto !important;

        max-height: calc(100vh - 24px) !important;
        max-height: calc(100dvh - 24px) !important;

        overflow: hidden !important;

        box-sizing: border-box !important;

        flex: 1 1 auto !important;
    }


    .cky-modal.cky-modal-open .cky-preference-body-wrapper {
        min-height: 0 !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }


    .cky-modal.cky-modal-open .cky-preference-header,
    .cky-modal.cky-modal-open .cky-footer-wrapper {
        flex: 0 0 auto !important;
    }
}


/* =========================================================
   7. SHORT DESKTOP VIEWPORTS
   ========================================================= */

@media (min-width: 769px) and (max-height: 576px) {

    .cky-consent-container:not(.cky-hide) {
        max-height: calc(100vh - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
    }


    .cky-modal.cky-modal-open {
        max-height: calc(100vh - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
    }


    .cky-modal.cky-modal-open .cky-preference-center {
        max-height: calc(100vh - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
    }


    .cky-modal.cky-modal-open .cky-preference-body-wrapper {
        overflow-y: auto !important;
    }
}


/* =========================================================
   8. DESKTOP BLOCKED-MEDIA PLACEHOLDER
   ========================================================= */

@media (min-width: 769px) {

    .video-placeholder-normal {
        position: relative !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        background-position: center center !important;
        background-repeat: no-repeat !important;

        overflow: hidden;
    }


    /*
     * Approved default desktop position.
     */

    .video-placeholder-text-normal {
        position: absolute !important;

        top: 50% !important;
        left: 50% !important;

        right: auto !important;
        bottom: auto !important;

        -webkit-transform: translate(-50%, 270px) !important;
        -moz-transform: translate(-50%, 270px) !important;
        -ms-transform: translate(-50%, 270px) !important;
        -o-transform: translate(-50%, 270px) !important;
        transform: translate(-50%, 270px) !important;

        margin: 0 !important;

        width: max-content;
        max-width: calc(100% - 32px) !important;

        box-sizing: border-box !important;

        z-index: 2 !important;
    }
}


/*
 * Short desktop.
 */

@media (min-width: 769px) and (max-height: 720px) {

    .video-placeholder-text-normal {
        -webkit-transform: translate(-50%, 156px) !important;
        -moz-transform: translate(-50%, 156px) !important;
        -ms-transform: translate(-50%, 156px) !important;
        -o-transform: translate(-50%, 156px) !important;
        transform: translate(-50%, 156px) !important;
    }
}


/*
 * Very-short desktop landscape.
 */

@media
    (min-width: 769px)
    and (orientation: landscape)
    and (max-height: 480px) {

    .video-placeholder-text-normal {
        -webkit-transform: translate(-50%, 112px) !important;
        -moz-transform: translate(-50%, 112px) !important;
        -ms-transform: translate(-50%, 112px) !important;
        -o-transform: translate(-50%, 112px) !important;
        transform: translate(-50%, 112px) !important;
    }
}


/* =========================================================
   9. DESKTOP BACKGROUND SCROLL-LOCK FALLBACK
   ========================================================= */

@supports selector(html:has(body)) {

    @media (min-width: 769px) {

        html:has(.cky-consent-container:not(.cky-hide)),
        html:has(.cky-modal.cky-modal-open) {
            overflow: hidden !important;
            overscroll-behavior: none !important;
        }


        html:has(.cky-consent-container:not(.cky-hide)) body,
        html:has(.cky-modal.cky-modal-open) body {
            overflow: hidden !important;
            overscroll-behavior: none !important;
        }
    }
}


/* =========================================================
   10. DESKTOP WPN JS SCROLL-LOCK SUPPORT
   ========================================================= */

@media (min-width: 769px) {

    html.wpn-cookieyes-scroll-lock,
    body.wpn-cookieyes-scroll-lock {
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }
}


/* =========================================================
   11. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .cky-consent-container,
    .cky-modal,
    .cky-overlay,
    .cky-btn-revisit-wrapper {
        transition: none !important;
        animation-duration: 0.001ms !important;
    }
}


/* =========================================================
   END - WPN COOKIEYES OVERRIDES v1.4
   ========================================================= */