/**
 * Mobile fix for Avada/Fusion iLightBox iframe lightboxes
 *
 * On small screens, the default iLightBox layout (1280x720 iframe with white
 * overlay) becomes unusable: the iframe is clipped, the toolbar/close button
 * is too small to tap, and the modal does not feel like a dialog.
 *
 * This stylesheet makes the lightbox feel like a proper mobile dialog:
 * - dark backdrop so the page behind is visible but dimmed
 * - rounded modal with a comfortable margin
 * - large close button placed above the modal, outside its rounded frame
 * - hides non-essential controls (fullscreen, slideshow, prev/next)
 *
 * Targets every link with target="lightbox" globally (e.g. "Où l'acheter" CTA).
 */

@media (max-width: 768px) {

    /* Dark backdrop — overrides the default white "metro-white" overlay */
    .ilightbox-overlay {
        background: #000 !important;
        opacity: 0.7 !important;
    }

    /* Modal: leaves room at top for the floating close button and 12px margins */
    .ilightbox-holder {
        top: 56px !important;
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
        width: auto !important;
        max-width: calc(100vw - 24px) !important;
        height: auto !important;
        max-height: calc(100dvh - 68px) !important;
        transform: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
        background: #fff !important;
    }

    .ilightbox-holder .ilightbox-container {
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
    }

    .ilightbox-holder .ilightbox-container > iframe {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        border: 0 !important;
        background: #fff !important;
    }

    /* Toolbar pinned to viewport top-right, ABOVE the rounded modal */
    .ilightbox-toolbar {
        position: fixed !important;
        top: max(8px, env(safe-area-inset-top)) !important;
        right: 12px !important;
        left: auto !important;
        bottom: auto !important;
        z-index: 100012 !important;
        background: transparent !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        margin: 0 !important;
        opacity: 1 !important;
        display: block !important;
    }

    .ilightbox-toolbar .ilightbox-fullscreen,
    .ilightbox-toolbar .ilightbox-play,
    .ilightbox-toolbar .ilightbox-playpause {
        display: none !important;
    }

    /* Replace the native sprite icon with a clean white pill containing an X */
    .ilightbox-toolbar .ilightbox-close {
        position: relative !important;
        display: block !important;
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        background-image: none !important;
        background-color: #fff !important;
        border-radius: 999px !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
    }

    .ilightbox-toolbar .ilightbox-close::before,
    .ilightbox-toolbar .ilightbox-close::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 16px;
        height: 2px;
        background: #222;
        border-radius: 2px;
    }

    .ilightbox-toolbar .ilightbox-close::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .ilightbox-toolbar .ilightbox-close::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    /* Single-iframe lightboxes don't need navigation arrows */
    .ilightbox-prev,
    .ilightbox-next {
        display: none !important;
    }
}