/**
 * ET Wiki v3.5 – Lightbox Styles (HTML <dialog>)
 *
 * Uses the native <dialog> element. The browser renders it in
 * the "top layer" which is ABOVE all CSS z-index stacking
 * contexts. No z-index conflicts possible.
 *
 * ::backdrop is the native dark overlay — no custom div needed.
 * When dialog.close() runs, the element exits the top layer
 * instantly with zero side effects on the page.
 */

/* The dialog element itself — centered in viewport by browser */
.etw-lb-dialog {
    border: none;
    background: transparent;
    padding: 0;
    margin: auto;
    max-width: 95vw;
    max-height: 95vh;
    overflow: visible;
    outline: none;
}

/* Native backdrop — the dark overlay behind the dialog */
.etw-lb-dialog::backdrop {
    background: rgba(0, 0, 0, 0.93);
    cursor: zoom-out;
}

/* Inner container */
.etw-lb-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The image */
.etw-lb-img {
    max-width: 92vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 6px 40px rgba(0,0,0,0.5);
    user-select: none;
    display: block;
}

/* Close button */
.etw-lb-x {
    position: fixed;
    top: 18px; right: 22px;
    background: rgba(0,0,0,0.5);
    border: none; color: #fff;
    font-size: 34px; font-weight: 300; line-height: 1;
    cursor: pointer; opacity: 0.9;
    padding: 4px 12px; border-radius: 6px;
    transition: opacity 0.2s;
}
.etw-lb-x:hover { opacity: 1; background: rgba(0,0,0,0.7); }

/* Nav arrows */
.etw-lb-p, .etw-lb-n {
    position: fixed;
    top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,0.15);
    border: none; color: #fff;
    font-size: 30px; width: 52px; height: 52px;
    border-radius: 50%;
    cursor: pointer; opacity: 0.75;
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.2s, background 0.2s;
}
.etw-lb-p { left: 18px; }
.etw-lb-n { right: 18px; }
.etw-lb-p:hover, .etw-lb-n:hover { opacity: 1; background: rgba(255,255,255,0.28); }

/* Counter */
.etw-lb-c {
    position: fixed;
    bottom: 18px; left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,0.75);
    font-size: 15px;
}

@media (max-width: 600px) {
    .etw-lb-p, .etw-lb-n { width: 42px; height: 42px; font-size: 24px; }
    .etw-lb-p { left: 10px; }
    .etw-lb-n { right: 10px; }
    .etw-lb-x { top: 12px; right: 14px; font-size: 28px; }
}