/**
 * Gallery — generic, plugin-wide structural CSS for Gallery_cl.
 *
 * Contains the layout/positioning primitives needed for `.cl_gallery`
 * markup to render correctly anywhere it's embedded (product page,
 * product quickview, reviewlist media, future custom-blocks images).
 *
 * Theming (colors, fonts, padding, custom backgrounds, etc.) lives in
 * each consumer's per-instance generated_css — e.g. the product gallery's
 * comps/product/backend/views/global_settings/blocks/gallery/v1/generated_css.php
 * outputs admin-controlled values inline via `<style>` blocks. Because
 * inline `<style>` cascades AFTER external stylesheets, those per-instance
 * rules naturally win where they overlap with this baseline.
 *
 * Consumers that DON'T have per-instance generated CSS (reviewlist media)
 * still get a usable gallery from these baseline rules alone.
 */

/* ============================================ */
/* BASE GALLERY LAYOUT                          */
/* ============================================ */

.cl_gallery {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Slides viewport — non-scrolling positioning context wrapping the scroll
   track + the arrows. Gives the arrows (position:absolute; top:50%) a height
   equal to the SLIDES only, so they don't center against slides+thumbnails. */
.cl-slides-viewport {
    position: relative;
    width: 100%;
    min-width: 0;
}

/* Slides Container — main image area */
.cl-slides-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 0;
}

/* Each slide — only the .active one is visible (rest are display:none) */
.cl-gallery-slide {
    display: none;
    height: 100%;
    position: relative;
}

.cl-gallery-slide.active {
    display: flex;
    justify-content: center;
}

.cl-gallery-slide img {
    width: auto;
    height: auto;
    max-height: 95vh;
    vertical-align: middle;
    cursor: grab;
}

.cl-gallery-slide img:active {
    cursor: grabbing;
}

/* Video iframe (loaded inside the slide when lightbox plays a video) */
.cl-video-iframe {
    border: none;
}

/* ============================================ */
/* CAROUSEL MODE (horizontal track + peek)      */
/* ============================================ */
/* Opt-in via the .cl-gallery-carousel class (added by the consumer's
   frontend view when gallery_layout === 'carousel'). Slides sit on a
   horizontal scroll-snap track; the peek comes from --cl-gallery-cols
   (1.5 = one full slide + half the next). Mobile reads
   --cl-gallery-cols-mobile. Gated entirely by the class + vars so
   single-image consumers (quickview, reviewlist media) are never
   affected. */

.cl_gallery.cl-gallery-carousel .cl-slides-container {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;              /* native scrollbar hidden — nav provided separately */
    gap: var(--cl-gallery-track-gap, 6px);
}
.cl_gallery.cl-gallery-carousel .cl-slides-container::-webkit-scrollbar {
    display: none;
}

/* Each slide sized so --cl-gallery-cols of them fit the viewport. The
   per-cell gap is subtracted so the peek lands cleanly at the container
   edge. display:flex overrides the single-mode .cl-gallery-slide
   { display:none } rule (only .active shows there). */
.cl_gallery.cl-gallery-carousel .cl-gallery-slide {
    display: flex;
    flex: 0 0 calc(
        (100% - (var(--cl-gallery-track-gap, 6px) * (var(--cl-gallery-cols, 1) - 1)))
        / var(--cl-gallery-cols, 1)
    );
    scroll-snap-align: start;
    height: auto;
}

/* Fixed-ratio crop so mixed-dimension images form a uniform track. The
   slide box height comes from the per-instance generated_css
   aspect-ratio/height on .cl-gallery-slide img; object-fit:cover crops
   the natural image into that box. Higher specificity than generated_css
   so cover wins in carousel mode. */
.cl_gallery.cl-gallery-carousel .cl-gallery-slide img {
    width: 100%;
    object-fit: cover;
}

@media (max-width: 767px) {
    .cl_gallery.cl-gallery-carousel .cl-gallery-slide {
        flex-basis: calc(
            (100% - (var(--cl-gallery-track-gap, 6px) * (var(--cl-gallery-cols-mobile, 1) - 1)))
            / var(--cl-gallery-cols-mobile, 1)
        );
    }
}

/* Lightbox in carousel mode reverts to single-image fullscreen: drop the
   track, show only the .active slide, don't crop. */
.cl_gallery.cl-gallery-carousel.lightbox-active .cl-slides-container {
    overflow: visible;
    scroll-snap-type: none;
    gap: 0;
}
.cl_gallery.cl-gallery-carousel.lightbox-active .cl-gallery-slide {
    flex: 1 1 auto;
    display: none;
    scroll-snap-align: none;
}
.cl_gallery.cl-gallery-carousel.lightbox-active .cl-gallery-slide.active {
    display: flex;
}
.cl_gallery.cl-gallery-carousel.lightbox-active .cl-gallery-slide img {
    object-fit: contain;
    height: auto;
}

/* ============================================ */
/* NAVIGATION INDICATORS (dots/dash/.../scrollbar) */
/* ============================================ */
/* Gallery-owned namespace mirroring the carousel indicator vocabulary.
   Built + synced by Gallery_cl (buildIndicator / updateIndicator). Colors
   come from the consumer's per-instance generated_css; these are structural
   defaults so reviewlist media etc. get a usable indicator with no theming.

   IMPORTANT — every item selector is scoped under `.cl_gallery `. The dot /
   dash / number items are <button> elements; themes ship a button reset like
   `[type="button"], button { width:auto; border-radius:3px }` at specificity
   (0,1,1) that loads AFTER this file. A bare `.cl-gallery-dot` (0,1,0) loses
   that cascade and the dots render as theme-styled rectangles. Scoping under
   `.cl_gallery` raises us to (0,2,0)/(0,2,1) so we win. The carousel block
   (`.cl_container.cl_carousel .cl_carousel_dot`) scopes for the same reason.
   `appearance:none` neutralizes the remaining native button chrome. */

.cl_gallery .cl-gallery-indicator {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 0;
}

/* Shared button reset for the clickable indicator items. */
.cl_gallery .cl-gallery-dot,
.cl_gallery .cl-gallery-dash,
.cl_gallery .cl-gallery-number {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    line-height: 1;
    transition: all 0.2s ease;
}

/* --- Dots --- */
.cl_gallery .cl-gallery-dot {
    width: 8px;
    height: 8px;
    min-width: 0;
    border-radius: 50%;
    background-color: #ddd;
}
.cl_gallery .cl-gallery-dot.active {
    background-color: #333;
    transform: scale(1.3);
}

/* --- Dash --- */
.cl_gallery .cl-gallery-dash {
    width: 24px;
    height: 3px;
    min-width: 0;
    border-radius: 2px;
    background-color: #ddd;
}
.cl_gallery .cl-gallery-dash.active {
    background-color: #333;
    width: 36px;
}

/* --- Fraction --- */
.cl_gallery .cl-gallery-fraction {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    user-select: none;
}
.cl_gallery .cl-gallery-fraction-separator {
    opacity: 0.5;
    margin: 0 1px;
}

/* --- Numbers --- */
.cl_gallery .cl-gallery-number {
    min-width: 28px;
    height: 28px;
    border-radius: 4px;
    background-color: transparent;
    border: 1px solid #ddd;
    font-size: 12px;
    font-weight: 500;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cl_gallery .cl-gallery-number.active {
    background-color: #333;
    border-color: #333;
    color: #fff;
}

/* --- Progress bar --- */
.cl_gallery .cl-gallery-progress-track {
    width: 100%;
    min-width: 80px;
    height: 3px;
    background-color: #ddd;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}
.cl_gallery .cl-gallery-progress-fill {
    height: 100%;
    background-color: #333;
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* --- Scrollbar --- */
.cl_gallery .cl-gallery-scrollbar-track {
    width: 100%;
    min-width: 80px;
    height: 4px;
    background-color: #ddd;
    border-radius: 2px;
    position: relative;
    cursor: pointer;
}
.cl_gallery .cl-gallery-scrollbar-thumb {
    height: 100%;
    background-color: #333;
    border-radius: 2px;
    position: absolute;
    top: 0;
    transition: left 0.2s ease;
}

/* --- Unified nav placement (.cl-gallery-nav--{position} on .cl_gallery) --- */
/* Indicators honor all six placements. Thumbnails use top/bottom/left/right
   via generated_css; overlay_* are indicator-only. */

/* top: indicator before the slides. The base .cl_gallery is flex column;
   ordering the indicator first lifts it above the slides. */
.cl_gallery.cl-gallery-nav--top .cl-gallery-indicator { order: -1; }

/* overlay: float the indicator over the slides area. .cl-slides-container is
   position:relative, but the indicator is a sibling — anchor to .cl_gallery
   (also position:relative). */
.cl_gallery.cl-gallery-nav--overlay-top .cl-gallery-indicator,
.cl_gallery.cl-gallery-nav--overlay-bottom .cl-gallery-indicator {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 26;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);   /* subtle backdrop so dots stay visible on light images */
}
.cl_gallery.cl-gallery-nav--overlay-top .cl-gallery-indicator { top: 12px; }
.cl_gallery.cl-gallery-nav--overlay-bottom .cl-gallery-indicator { bottom: 12px; }

/* left/right: lay the gallery out as a row with the indicator column beside
   the slides. (Mainly meaningful for thumbnails; indicators degrade to a
   vertical stack on the side.) */
.cl_gallery.cl-gallery-nav--left,
.cl_gallery.cl-gallery-nav--right {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
}
.cl_gallery.cl-gallery-nav--left .cl-gallery-indicator,
.cl_gallery.cl-gallery-nav--right .cl-gallery-indicator {
    flex-direction: column;
    flex-wrap: nowrap;
}
.cl_gallery.cl-gallery-nav--left .cl-gallery-indicator { order: -1; }

/* ============================================ */
/* ARROWS                                       */
/* ============================================ */

.cl-arrows-container {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    left: 0;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    padding: 10px;
    pointer-events: none;
    z-index: 25;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    justify-content: space-between;
}

.cl-slide-arrows {
    pointer-events: auto;
    /* Baseline visual — admin's gallery_slide_arrows_style overrides on
       product page via inline generated_css. Reviewlist + other consumers
       inherit this default. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.cl-gallery-arrow-prev:hover,
.cl-gallery-arrow-next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* ============================================ */
/* VIDEO PLAY OVERLAY (on slides + thumbs)      */
/* ============================================ */

.cl-video-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 20;
    opacity: 0.85;
}

/* ============================================ */
/* LIGHTBOX TRIGGER ICON                        */
/* ============================================ */

.cl-lightbox-trigger-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 30;
    cursor: pointer;
    pointer-events: auto;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.2s ease;
    /* Baseline visual — admin's gallery_lightbox_icon_style overrides
       inline. Default chrome so reviewlist+others have a visible icon. */
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border-radius: 50%;
    font-size: 14px;
}

.cl-lightbox-trigger-icon:hover {
    transform: scale(1.1);
}

.cl-lightbox-trigger-icon:active {
    transform: scale(0.95);
}

/* Only show the lightbox icon on the currently active slide */
.cl-gallery-slide:not(.active) .cl-lightbox-trigger-icon {
    display: none;
}

/* ============================================ */
/* LIGHTBOX (FULLSCREEN) MODE                   */
/* ============================================ */
/* Triggered by Gallery_cl when the trigger icon (or main image) is
   clicked — the gallery container itself becomes a fullscreen overlay
   via .lightbox-active. Body also gets .lightbox-active for global
   side-effects (scroll lock — see public/assets/css/public.css). */

.cl_gallery {
    transition: all 0.3s ease-in-out;
}

.cl_gallery.lightbox-active {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    z-index: 100000;
    background: rgba(0, 0, 0, 0.95);
    margin: 0 !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-direction: column !important;
    animation: clGalleryLightboxFadeIn 0.3s ease-in-out;
}

@keyframes clGalleryLightboxFadeIn {
    from {
        opacity: 0;
        transform: scale(0.98);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Slides viewport + container fill the lightbox vertically — needed so the
   slide and its iframe (height: 100%) cascade to a real height. Without this
   the slide collapses to 0 (no parent height), images work by accident via
   intrinsic size + max-height, but iframes have no intrinsic size and end up
   invisible behind the lightbox backdrop. The viewport is the flex child of
   .cl_gallery (flex column), so IT must grow; the container then fills it. */
.cl_gallery.lightbox-active .cl-slides-viewport {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cl_gallery.lightbox-active .cl-slides-container {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cl_gallery.lightbox-active .cl-gallery-slide {
    display: none;
    height: 100%;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.cl_gallery.lightbox-active .cl-gallery-slide.active {
    display: flex;
}

/*.cl_gallery.lightbox-active .cl-gallery-slide img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}*/

/* Video iframe in fullscreen — force explicit viewport sizing instead
   of relying on the % chain (parent → slide → iframe). The inline
   style from gallery.js sets `position:absolute; width:100%; height:100%`
   which works on regular slides where the slide's height cascades
   correctly. In lightbox-active row-reverse layouts (side thumbnails)
   + image-hidden state, the % chain can resolve to 0, leaving the
   iframe present (audio plays) but invisible (0×0 size).

   Solution: switch the iframe to position:relative + viewport units
   so it sits in the slide's flex-column flow and gets centered
   automatically. !important needed because gallery.js writes the
   inline style at append time. */
.cl_gallery.lightbox-active .cl-video-iframe {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 90vw !important;
    height: 80vh !important;
    max-width: 1280px;
    max-height: 720px;
    display: block;
}

/* Hide the lightbox-trigger icon while in fullscreen — it'd be redundant */
.cl_gallery.lightbox-active .cl-lightbox-trigger-icon {
    display: none;
}

/* Thumbnails strip in fullscreen (when consumer renders thumbs) */
.cl_gallery.lightbox-active .cl-thumbnail-container {
    background: rgba(0, 0, 0, 0.7);
    max-height: 25%;
    overflow: auto;
    flex-wrap: wrap;
}

/* ============================================ */
/* LIGHTBOX CLOSE BUTTON                        */
/* ============================================ */
/* Injected dynamically by Gallery_cl on first lightbox open
   (`<span class="cl-lightbox-close">×</span>`). */

.cl-lightbox-close {
    display: none;
    position: fixed;
    top: 20px;
    margin-inline-start: 10px;
    color: #fff;
    border: solid 3px #fff;
    font-size: 30px;
    font-weight: 800;
    cursor: pointer;
    z-index: 100001;
    line-height: 1;
    background: rgba(0, 0, 0, 0.6);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    user-select: none;
}

.cl-lightbox-close:hover {
    background: rgba(0, 0, 0, 0.8);
}

.cl_gallery.lightbox-active .cl-lightbox-close {
    display: flex;
}

@media (max-width: 480px) {
    .cl-lightbox-close {
        margin-inline-start: calc(50% - 25px);
    }
}