/*
 * Model-page lightbox (LBX-6286), companion of static/js/model-lightbox.js.
 *
 * Section 1 gives every a.lbx-trigger the box that the <img> or <button> it
 * replaces had before, so the closed page keeps its layout; only the cursor
 * and the focus ring are new. Skin rules are twinned here, never edited in
 * the skin stylesheets.
 */

/* 1. Triggers ------------------------------------------------------------ */

a.lbx-trigger {
    cursor: zoom-in;
    color: inherit;
    text-decoration: none;
}

a.lbx-trigger:focus-visible {
    outline: 3px solid #11161a;
    outline-offset: 3px;
}

/* xcmg-cn.kz: hero figure is a flex box that sized the bare <img>. */
.xp-figure > a.lbx-trigger {
    display: block;
    max-width: 100%;
}

/* xcmg-cn.kz: twins of the .xp-gallery button rules in xcmg-css/product.css. */
.xp-gallery a.lbx-trigger {
    display: block;
    padding: 0;
    border: 1px solid var(--xp-line);
    background: #fff;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    transition: var(--xcmg-transition, all .25s ease);
    border-radius: var(--lx-radius, 3px) !important;
}

.xp-gallery a.lbx-trigger:hover {
    border-color: var(--xp-blue);
}

.xp-gallery a.lbx-trigger:hover img {
    transform: scale(1.05);
}

/* xcmg-cn.kz: twin of the .xp-drawing button rule. */
.xp-drawing a.lbx-trigger {
    display: block;
    width: 100%;
    padding: 14px;
    border: 1px solid var(--xp-line);
    background: #fff;
}

/* tabys-km.kz: hero stage is a flex box whose <img> filled it (100% / 100%). */
.product-hero__image-stage > a.lbx-trigger {
    display: block;
    width: 100%;
    height: 100%;
}

/* tabys-km.kz: twins of the .product-gallery__grid button rules in site-polish.css. */
.product-gallery__grid a.lbx-trigger {
    display: block;
    aspect-ratio: 4 / 3;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 17px;
    background: #e6e9eb;
}

.product-gallery__grid a.lbx-trigger:hover img,
.product-gallery__grid a.lbx-trigger:focus-visible img {
    transform: scale(1.04);
}

/* tabys-km.kz: additional equipment photo; the media box clips (overflow: hidden),
   so its focus ring is drawn inside the image. */
.product-additional-equipment__media > a.lbx-trigger {
    display: block;
    width: 100%;
    height: 100%;
}

.product-additional-equipment__media > a.lbx-trigger:focus-visible {
    outline-offset: -3px;
}

/* 2. Open lightbox ------------------------------------------------------- */

/* tabys-km.kz: the fixed .site-navbar (tkm-css/site-polish.css) computes to
   z-index 9999, above Bootstrap's modal (1055) and backdrop (1050), and hid the
   counter and the close button. The modal is a direct child of <body> with no
   stacking-context ancestor, so a z-index lifts it, and its own full-viewport
   layer becomes the overlay that dims the header as well. */
#lightboxModal {
    z-index: 10001;
}

#lightboxModal.show {
    background-color: rgba(10, 12, 14, .9);
}

/* Bootstrap's backdrop stays under the header, so while the lightbox is shown
   the overlay above is the only dimming layer: header and page dim alike. */
body:has(#lightboxModal.show) > .modal-backdrop {
    opacity: 0;
}

.lbx-stage {
    touch-action: pan-y pinch-zoom;
    -webkit-user-select: none;
    user-select: none;
}

.lbx-stage img {
    transition: opacity .15s ease;
}

.lbx-stage.lbx-is-loading img {
    opacity: .55;
}

.lbx-stage.lbx-is-error {
    min-height: 160px;
}

.lbx-nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(17, 22, 26, .72);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .35);
}

.lbx-nav--prev {
    left: 8px;
}

.lbx-nav--next {
    right: 8px;
}

.lbx-nav:hover {
    background: rgba(17, 22, 26, .92);
    box-shadow: 0 0 0 2px #fff;
}

/* two-tone ring: white inside, dark outside, visible on light and dark images.
   !important because xcmg-css/style.css sets button:focus-visible with
   !important (gold outline, no shadow, 2px radius); this selector is more
   specific, so it wins there, and the 50% keeps the button round. */
.lbx-nav:focus-visible {
    outline: 2px solid #fff !important;
    outline-offset: 0 !important;
    box-shadow: 0 0 0 5px #11161a !important;
    border-radius: 50%;
}

.lbx-nav svg {
    display: block;
    pointer-events: none;
}

.lbx-counter {
    position: absolute;
    top: 10px;
    left: 12px;
    z-index: 3;
    margin: 0;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(17, 22, 26, .72);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

/* 3. Lightbox presence (RULING-LBX-B2-GATE) ------------------------------
   Scoped to #lightboxModal. xcmg-cn.kz (.xp-lightbox) keeps the chrome and
   sizing of xcmg-css/product.css: it is excluded from the layout rules. */

/* X in the header is the single close on every skin. */
#lightboxModal .modal-footer {
    display: none;
}

/* Vertically centred on every width (Bootstrap's own margins: .5rem, then
   1.75rem from 576px). */
#lightboxModal:not(.xp-lightbox) .modal-dialog {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
}

#lightboxModal:not(.xp-lightbox) .lbx-stage img {
    display: block;
    width: 100%;
    height: auto;
    max-height: min(85vh, calc(100vh - 8rem));
    object-fit: contain;
}

@media (min-width: 576px) {
    #lightboxModal:not(.xp-lightbox) .modal-dialog {
        min-height: calc(100% - 3.5rem);
    }
}

@media (min-width: 992px) {
    #lightboxModal:not(.xp-lightbox) .modal-dialog {
        max-width: min(90vw, 1600px);
    }
}

/* Below 992px prev/next sit in a row under the image, never on the subject. */
@media (max-width: 991.98px) {
    #lightboxModal:not(.xp-lightbox) .modal-content:has(> .lbx-nav) {
        padding-bottom: 60px;
    }

    #lightboxModal:not(.xp-lightbox) .lbx-nav {
        top: auto;
        bottom: 8px;
        margin-top: 0;
    }

    #lightboxModal:not(.xp-lightbox) .lbx-nav--prev {
        left: calc(50% - 56px);
    }

    #lightboxModal:not(.xp-lightbox) .lbx-nav--next {
        right: calc(50% - 56px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lbx-stage img {
        transition: none;
    }
}
