/* ============================================================
   LIGHTBOX OVERLAY  —  Global Modal Layer
   ============================================================ */

.lightbox {
    position: fixed;
    inset: 0; /* top:0; left:0; right:0; bottom:0; */
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-lightbox-bg-light);
    /* must be default hidden state */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 999999; /* highest element across entire app */
    transition: opacity .3s ease-in-out, visibility .3s ease-in-out;
    padding:1.5rem;
}

/* Activated / shown state */
.lightbox.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Fade helpers used by Blazor component */
.lightbox.fade-in {
    opacity: 1;
    pointer-events: auto;
}

.lightbox.fade-out {
    opacity: 0;
    pointer-events: none;
}

/* ============================================================
   LIGHTBOX INNER STRUCTURE
   ============================================================ */

.lightbox-content-wrapper {
    position: relative;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    padding: 0;
    box-sizing: border-box;
}

/* Scrollable content */
.lightbox-content {
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 16px;
    box-sizing: border-box;
}

/* ============================================================
   CLOSE BUTTON
   ============================================================ */
.lightbox-close {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e0dd82;
    color: #111;
    font-family: 'Suez One';
    font-size: 20px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 4px 1px rgba(0,0,0,0.2);
    z-index: 20;
}
#lightboxout {
    position: absolute;
    top: -15px;
    right: -15px;
    background: #e0dd82;
    font-size: 20px;
    text-align: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    padding: 12px 7px 7px 8px;
    box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    color: #111;
    font-family: 'Suez One';
    z-index: 10;
}

/* Hover effect */
.lightbox-close:hover {
    color: var(--color-highlight);
}

#lightbox-content {
    position: relative; /* required for correct close button positioning */
}
/* ============================================================
   UTILITY CLASSES
   ============================================================ */

body.lightbox-active {
    overflow: hidden; /* disables scroll behind modal */
}


.fade-in {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.fade-out {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}