/*
 * Final cross-site lightbox navigation contract.
 * This file must stay after page-specific lightbox styles.
 */
.lightbox .lightbox-nav {
    box-sizing: border-box !important;
    position: absolute !important;
    top: var(--lightbox-artwork-center-y, 50%) !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    background: rgba(20, 20, 20, 0.44) !important;
    border: 1px solid rgba(255, 255, 255, 0.58) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.24) !important;
    opacity: 0.96 !important;
    cursor: pointer !important;
    transform: translateY(-50%) !important;
    transition:
        transform 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        opacity 180ms ease !important;
    z-index: 10040 !important;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.lightbox .lightbox-prev {
    left: max(12px, env(safe-area-inset-left)) !important;
    right: auto !important;
}

.lightbox .lightbox-next {
    right: max(12px, env(safe-area-inset-right)) !important;
    left: auto !important;
}

/* Use one CSS-drawn chevron on every page, regardless of legacy SVG markup. */
.lightbox .lightbox-nav > svg,
.lightbox .lightbox-nav > img {
    display: none !important;
}

.lightbox .lightbox-nav::before {
    content: "";
    display: block;
    box-sizing: border-box;
    width: 11px;
    height: 11px;
    border: 0 solid currentColor;
    border-left-width: 2px;
    border-bottom-width: 2px;
    transform: translateX(2px) rotate(45deg);
}

.lightbox .lightbox-next::before {
    transform: translateX(-2px) rotate(225deg);
}

@media (hover: hover) and (pointer: fine) {
    .lightbox .lightbox-nav:hover {
        color: #fff !important;
        background: rgba(20, 20, 20, 0.68) !important;
        border-color: rgba(255, 255, 255, 0.88) !important;
        opacity: 1 !important;
        transform: translateY(-50%) scale(1.05) !important;
    }
}

.lightbox .lightbox-nav:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.96) !important;
    outline-offset: 3px !important;
}

.lightbox .lightbox-nav:active {
    transform: translateY(-50%) scale(0.97) !important;
}

.lightbox .lightbox-nav:disabled,
.lightbox .lightbox-nav[aria-disabled="true"] {
    opacity: 0.34 !important;
    cursor: default !important;
}

.lightbox.video-mode .lightbox-nav {
    display: none !important;
}

.lightbox .lightbox-nav[hidden],
.lightbox .lightbox-nav.is-hidden {
    display: none !important;
}

@media (max-width: 768px) {
    .lightbox .lightbox-nav {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .lightbox .lightbox-prev {
        left: max(8px, env(safe-area-inset-left)) !important;
    }

    .lightbox .lightbox-next {
        right: max(8px, env(safe-area-inset-right)) !important;
    }

    .lightbox .lightbox-nav::before {
        width: 10px;
        height: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lightbox .lightbox-nav {
        transition: none !important;
    }
}