/* ============================================================================
 * dg-lightbox.css — image lightbox overlay.
 *
 * Lives ALONGSIDE the existing .modal-overlay scaffolding from account.css —
 * we override what we need (display, padding, background, z-index) and pile
 * the lightbox layout on top. The image fades in via @keyframes when .open
 * lands, so back-to-back nav clicks still feel smooth.
 * ============================================================================ */

.modal-overlay.dg-lightbox {
    /* Self-contained positioning so the lightbox works on pages that don't
       load account.css (e.g. /wish/<slug>/). On account pages we override
       the base .modal-overlay scaffolding here too — same end result. */
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(15, 10, 30, 0.92);
    z-index: 9999;
    padding: 0;
    /* If account.css's .modal-overlay rule loads, it ships
       `opacity: 0; pointer-events: none`. We flip these immediately so the
       overlay isn't invisible while we're trying to use it. */
    opacity: 1;
    pointer-events: none;
    transition: none;
}
.modal-overlay.dg-lightbox.open {
    display: flex;
    pointer-events: auto;
}

.dg-lightbox__img {
    max-width: 90vw;
    max-height: 85vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);
    /* Smooth fade between adjacent images on next/prev. The OPEN keyframe
       below uses its own fade-in for the initial reveal. */
    transition: opacity 0.18s ease;
    background: rgba(0, 0, 0, 0.2);
    opacity: 1;
}
/* While probing the new src after a nav click, the JS toggles this class
   to fade the previous frame out before the swap. */
.dg-lightbox__img.is-loading { opacity: 0; }

.modal-overlay.dg-lightbox.open .dg-lightbox__img {
    /* `forwards` keeps the end-state (opacity 1, scale 1) — without it the
       img would snap back to the keyframe's `from` opacity:0 after the
       animation ends. */
    animation: dgLightboxFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes dgLightboxFadeIn {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1); }
}

/* ── Close + nav buttons — shared style ───────────────────────────────── */
.dg-lightbox__close,
.dg-lightbox__nav {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
    z-index: 2;
}
.dg-lightbox__close:hover,
.dg-lightbox__nav:hover {
    background: rgba(0, 0, 0, 0.75);
    transform: scale(1.1);
}
.dg-lightbox__close:focus-visible,
.dg-lightbox__nav:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}
.dg-lightbox__close { top: 1rem; right: 1rem; }
.dg-lightbox__nav--prev { left: 1.5rem; top: 50%; transform: translateY(-50%); }
.dg-lightbox__nav--next { right: 1.5rem; top: 50%; transform: translateY(-50%); }
.dg-lightbox__nav--prev:hover { transform: translateY(-50%) scale(1.1); }
.dg-lightbox__nav--next:hover { transform: translateY(-50%) scale(1.1); }

/* Single-image view: hide the cycling arrows. */
.dg-lightbox.dg-lightbox--single .dg-lightbox__nav { display: none; }

/* ── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .dg-lightbox__img {
        max-width: 95vw;
        max-height: 70vh;
    }
    /* Drop arrows below the image so they don't overlap content. */
    .dg-lightbox__nav--prev,
    .dg-lightbox__nav--next {
        top: auto;
        bottom: 1.25rem;
        transform: none;
        width: 40px;
        height: 40px;
    }
    .dg-lightbox__nav--prev { left: calc(50% - 56px); }
    .dg-lightbox__nav--next { right: calc(50% - 56px); }
    .dg-lightbox__nav--prev:hover,
    .dg-lightbox__nav--next:hover { transform: scale(1.1); }
    .dg-lightbox__close { top: 0.75rem; right: 0.75rem; width: 40px; height: 40px; }
}

/* ── RTL — flip the prev/next arrow positions to match reading direction ── */
[dir="rtl"] .dg-lightbox__nav--prev { left: auto; right: 1.5rem; }
[dir="rtl"] .dg-lightbox__nav--next { right: auto; left: 1.5rem; }
@media (max-width: 720px) {
    [dir="rtl"] .dg-lightbox__nav--prev { left: auto; right: calc(50% - 56px); }
    [dir="rtl"] .dg-lightbox__nav--next { right: auto; left: calc(50% - 56px); }
}