/* =========================================================
   ARYAE UNIVERSAL LIGHTBOX
========================================================= */

/* Overlay Window Base */
.aryae-lightbox-overlay{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.95);
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    visibility:hidden;
    transition:all 0.35s ease;
    z-index:999999;
    padding:40px;
}

/* Active Open Toggle */
.aryae-lightbox-overlay.active{
    opacity:1;
    visibility:visible;
}

/* Base cursor triggers */
.aryae-lightbox img{
    cursor:zoom-in;
}

/* Inside Lightbox Layout Bounds */
.aryae-lightbox-full-image{
    width:auto;
    height:auto;
    max-width:92vw;
    max-height:92vh;
    object-fit:contain;
    display:block;
    margin:auto;
    object-position:center center;
    border-radius: var(--radius-lg);
}

.aryae-lightbox-swiper{
    width:100%;
    height:100%;
    pointer-events:auto;
}

.aryae-lightbox-swiper .swiper-slide{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:100%;
}

/* =========================================================
   SCOPED LIGHTBOX NAVIGATION BUTTONS 
========================================================= */
.aryae-lightbox-overlay .swiper-button-next, 
.aryae-lightbox-overlay .swiper-button-prev {  
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px !important;
    height: 35px !important;
    padding: 0;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    background-color: var(--color-off-white-1);
    color: #000000;
    transition: all 0.3s ease;
}

.aryae-lightbox-overlay .swiper-button-next::after,
.aryae-lightbox-overlay .swiper-button-prev::after {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: var(--color-dark-brown-1);
}

.aryae-lightbox-overlay .swiper-button-next:hover,
.aryae-lightbox-overlay .swiper-button-prev:hover {
    background-color: var(--color-sand-1);
}

/* =========================================================
   LIGHTBOX CLOSE BUTTON
========================================================= */
.aryae-lightbox-close{
    position:absolute;
    top:24px;
    right:24px;
    z-index:99999;
    width:30px;
    height:30px;
    min-width:30px;
    min-height:30px;
    padding:0;
    border:none;
    border-radius:50%;
    background: var(--color-off-white-1);
    color: var(--color-dark-brown-1);
    font-size:24px;
    line-height:1;
    cursor:pointer;
    display:flex;
    justify-content:center;
    align-items:center;
    transition:all 0.25s ease;
    user-select:none;
}

.aryae-lightbox-close:hover{
    transform:scale(1.06);
    background: var(--color-sand-1);
    color: var(--color-dark-brown-1);
}

.aryae-lightbox-close:active{
    transform:scale(0.96);
}

/* =========================================================
   ARYAE LIGHTBOX INTELLIGENT CURSOR STATES
========================================================= */

/* 1. Force zoom-out cursor on the overlay mask AND all empty swiper background tracks */
.aryae-lightbox-overlay,
.aryae-lightbox-swiper,
.aryae-lightbox-swiper .swiper-wrapper,
.aryae-lightbox-swiper .swiper-slide,
.aryae-lightbox-swiper .swiper-zoom-container {
    cursor: zoom-out !important;
}

/* 2. Protect the image itself so it doesn't look like it will close when clicked */
.aryae-lightbox-full-image {
    cursor: grab !important; /* Shows a panning hand because the user can drag/swipe the image */
}

/* When active swiper dragging happens, update to grabbing state */
.aryae-lightbox-swiper .swiper-slide-active .aryae-lightbox-full-image:active {
    cursor: grabbing !important;
}

/* 3. Protect UI Navigation Buttons (Should always remain traditional click pointers) */
.aryae-lightbox-close,
.aryae-lightbox-overlay .swiper-button-next,
.aryae-lightbox-overlay .swiper-button-prev {
    cursor: pointer !important;
}