/* Product image lightbox (see public/js/storefront-product-lightbox.js). */

/* ---- Trigger on the product page ---- */
.sf-lb-trigger { cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
.sf-lb-trigger:focus-visible { outline: 3px solid var(--brand-500, #22c55e); outline-offset: 3px; }

.sf-lb-hint {
    position: absolute;
    inset-inline-end: .85rem;
    bottom: .85rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .75rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, .62);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: opacity .2s ease;
}
.sf-lb-hint svg { width: 1rem; height: 1rem; }
@media (hover: hover) { .sf-lb-hint { opacity: 0; } .sf-lb-trigger:hover .sf-lb-hint, .sf-lb-trigger:focus-visible .sf-lb-hint { opacity: 1; } }

/* ---- Viewer ---- */
html.sf-lb-open { overflow: hidden; }

.sf-lb {
    --sf-lb-dim: 1;
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    background: rgba(8, 12, 18, calc(.96 * var(--sf-lb-dim)));
    color: #fff;
    opacity: 0;
    transition: opacity .18s ease;
    overscroll-behavior: contain;
    user-select: none;
    -webkit-user-select: none;
}
.sf-lb[hidden] { display: none; }
.sf-lb.is-visible { opacity: 1; }

.sf-lb__bar {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: max(.75rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) .5rem max(1rem, env(safe-area-inset-left));
}
.sf-lb__counter { font-size: .95rem; font-weight: 700; letter-spacing: .04em; opacity: .85; font-variant-numeric: tabular-nums; }
.sf-lb__tools { display: flex; align-items: center; gap: .4rem; margin-inline-start: auto; }

.sf-lb__btn,
.sf-lb__nav {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease, opacity .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.sf-lb__btn:hover:not(:disabled),
.sf-lb__nav:hover { background: rgba(255, 255, 255, .24); }
.sf-lb__btn:active:not(:disabled),
.sf-lb__nav:active { transform: scale(.94); }
.sf-lb__btn:disabled { opacity: .3; cursor: default; }
.sf-lb__btn:focus-visible,
.sf-lb__nav:focus-visible,
.sf-lb__thumb:focus-visible { outline: 3px solid var(--brand-500, #22c55e); outline-offset: 2px; }
.sf-lb__btn svg,
.sf-lb__nav svg { width: 22px; height: 22px; }
.sf-lb__btn--close { background: rgba(255, 255, 255, .2); }

.sf-lb__stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    touch-action: none;
    cursor: zoom-in;
}
.sf-lb.is-zoomed .sf-lb__stage { cursor: grab; }
.sf-lb__stage.is-grabbing { cursor: grabbing; }

.sf-lb__figure {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: 50% 50%;
    will-change: transform;
}
.sf-lb__img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    pointer-events: none;
    -webkit-user-drag: none;
    opacity: 1;
    transition: opacity .18s ease;
}
.sf-lb.is-loading .sf-lb__img { opacity: .15; }

.sf-lb__spinner {
    position: absolute;
    top: 50%;
    inset-inline-start: 50%;
    width: 38px;
    height: 38px;
    margin: -19px 0 0 -19px;
    border: 3px solid rgba(255, 255, 255, .25);
    border-top-color: #fff;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    animation: sf-lb-spin .8s linear infinite;
}
html[dir="rtl"] .sf-lb__spinner { margin: -19px -19px 0 0; }
.sf-lb.is-loading .sf-lb__spinner { opacity: 1; }
@keyframes sf-lb-spin { to { transform: rotate(360deg); } }

/* Previous / next arrows */
.sf-lb__nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 52px;
    height: 52px;
    margin-top: -26px;
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.sf-lb__nav--start { inset-inline-start: max(.75rem, env(safe-area-inset-left)); }
.sf-lb__nav--end { inset-inline-end: max(.75rem, env(safe-area-inset-right)); }
.sf-lb.is-single .sf-lb__nav,
.sf-lb.is-single .sf-lb__thumbs { display: none; }
.sf-lb.is-zoomed .sf-lb__nav { opacity: 0; pointer-events: none; }

/* Thumbnails strip */
.sf-lb__thumbs {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    display: flex;
    gap: .6rem;
    justify-content: safe center;
    overflow-x: auto;
    padding: .6rem 1rem max(.85rem, env(safe-area-inset-bottom));
    scrollbar-width: none;
}
.sf-lb__thumbs::-webkit-scrollbar { display: none; }
.sf-lb__thumb {
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 12px;
    background: rgba(255, 255, 255, .08);
    opacity: .6;
    cursor: pointer;
    transition: opacity .15s ease, border-color .15s ease, transform .15s ease;
}
.sf-lb__thumb:hover { opacity: .9; }
.sf-lb__thumb.is-active { opacity: 1; border-color: #fff; transform: translateY(-2px); }
.sf-lb__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

.sf-lb__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 640px) {
    .sf-lb__nav { width: 44px; height: 44px; margin-top: -22px; }
    .sf-lb__thumb { width: 52px; height: 52px; border-radius: 10px; }
    /* On touch phones, zoom is done with pinch / double-tap. */
    .sf-lb__btn[aria-label="تصغير"],
    .sf-lb__btn[aria-label="تكبير"] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sf-lb, .sf-lb__img, .sf-lb__btn, .sf-lb__nav, .sf-lb__thumb, .sf-lb-hint { transition: none; }
    .sf-lb__spinner { animation-duration: 1.6s; }
}