/* --------------------------------------------------------
    MARK: DIALOG MODAL & MEDIA
-------------------------------------------------------- */

.lightbox-dialog {
    border: none;
    border-radius: 8px;
    padding: 0;
    max-width: 95vw;
    max-height: 95vh;
    background: transparent;
    
    /* 1. THE FIX: Unlock the Y-axis and enable momentum scrolling on iOS */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; 
}

#lightbox-close {
    position: fixed;
    top: 0px;
    right: 0px;
    background: rgba(0, 0, 0, 0);
    border: none; 
    font-size: 24px;
    cursor: pointer;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    z-index: 10;
}

#lightbox-close span {
    color: white;
}

#lightbox-close:hover {
    background: rgba(0, 0, 0, 0.3);
}

#lightbox-close:hover span {
    color: white;
}

#lightbox-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    
    /* 2. THE FIX: Allow the wrapper to expand past the viewport if the content demands it */
    min-height: 100%; 
    max-width: 1200px;
    
    /* 3. Adds breathing room at the top/bottom so scrolling content doesn't hit the screen edge */
    padding: 40px 0; 
    margin: auto;
    overscroll-behavior: contain;
}

#lightbox-content {
    overscroll-behavior: contain;
}


/* Fluid Media Resizing */
#lightbox-content [data-pops] {
    display: block;
    max-width: 100%;
    max-height: 95vh;
    border-radius: 4px;
}

#lightbox-content .is-modal img,
#lightbox-content .is-modal video,
#lightbox-content .is-modal iframe {
    max-height: unset;
    border-radius: 4px;
}



/* Force 16:9 for videos and iframes */

#lightbox-content iframe,
#lightbox-content video {
    width: 90vw;
    max-width: 1200px;
    aspect-ratio: 16 / 9;
    border: none;
    background: #000;
}

/* Inline Dialog Formatting */
#lightbox-content .inline-payload {
    background: #1a1a1a;
    padding: 30px;
    border-radius: 8px;
    width: 90vw;
    color: var(--text-color);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#lightbox-content .inline-payload[data-theme="light"] {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

#lightbox-content .inline-payload[data-theme="dark"] {
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.1);
}


@media only screen and (max-width: 800px) {
    #lightbox-content .inline-payload { padding: 0px; }
}    

/* --------------------------------------------------------
    MARK: HIDE BODY SCROLLBAR (MODAL ACTIVE ONLY)
-------------------------------------------------------- */

html {
    scrollbar-gutter: stable;
}

body.lightbox-active {
    /* 1. Firefox */
    scrollbar-width: none; 
    
    /* 2. Legacy Internet Explorer & Edge */
    -ms-overflow-style: none; 
    overflow: hidden;
}

/* 3. WebKit (Chrome, Safari, Opera, Modern Edge) */
body.lightbox-active::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* --------------------------------------------------------
    MARK: ANIMATIONS
-------------------------------------------------------- */
.lightbox-dialog[open] {
    animation: blowUpEnter 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.lightbox-dialog[open]::backdrop {
    animation: lightbox-fadeIn 0.4s ease forwards;
}

.lightbox-dialog.closing {
    animation: blowUpExit 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.lightbox-dialog.closing::backdrop {
    animation: lightbox-fadeOut 0.3s ease forwards;
}

@keyframes blowUpEnter {
    0% { opacity: 0; transform: scale(0.85) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes blowUpExit {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.95); }
}

@keyframes lightbox-fadeIn {
    0% { background: rgba(0, 0, 0, 0); backdrop-filter: blur(0px); }
    100% { background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(8px); }
}

@keyframes lightbox-fadeOut {
    0% { background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(8px); }
    100% { background: rgba(0, 0, 0, 0); backdrop-filter: blur(0px); }
}