/* ============================================================
   GLIGHTBOX — TEMA PREMIUM NWR&V
   File dedicato per tutte le pagine che usano il carosello
============================================================ */

/* ============================
   OVERLAY PREMIUM
============================ */

.glightbox-container {
    background: radial-gradient(circle at center,
            rgba(0, 0, 0, 0.85) 0%,
            rgba(0, 0, 0, 0.95) 100%) !important;
    backdrop-filter: blur(12px);
    animation: glx-fadeIn 0.35s ease forwards;
}

@keyframes glx-fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ============================
   IMMAGINI — FIX UNIVERSALE
============================ */

.glightbox-container .gslide-media img,
.glightbox-container .gslide-image img,
.glightbox-container .ginner-container img {
    max-height: 80vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

.glightbox-container .gslide-media,
.glightbox-container .gslide-inner,
.glightbox-container .ginner-container {
    max-height: 85vh !important;
    overflow: hidden !important;
}

/* Fix immagini verticali estreme */
.glightbox-container .gslide-media img {
    max-width: 95vw !important;
}

/* ============================
   ANIMAZIONE IMMAGINE
============================ */

.glightbox-container .gslide-media img {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

body.glightbox-open .gslide-media img {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* ============================
   FRECCE — RESTYLING PREMIUM
============================ */

.glightbox-container .gprev,
.glightbox-container .gnext {
    width: 52px !important;
    height: 52px !important;
    background: rgba(77, 121, 139, 0.25) !important;
    /* colore tema */
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    transition: all 0.25s ease !important;
    backdrop-filter: blur(6px);
}

/* Hover elegante */
.glightbox-container .gprev:hover,
.glightbox-container .gnext:hover {
    background: rgba(77, 121, 139, 0.45) !important;
    transform: translateY(-50%) scale(1.12) !important;
}

/* Icone frecce */
.glightbox-container .gprev svg,
.glightbox-container .gnext svg {
    width: 22px !important;
    height: 22px !important;
    stroke: #fff !important;
    stroke-width: 2.5 !important;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6));
}

/* Freccia quasi invisibile (prima/ultima slide) */
.glightbox-container .gbtn.hidden-arrow {
    opacity: 0.12 !important;
    transform: translateY(-50%) scale(0.55) !important;
}

/* ============================
   PULSANTE CHIUDI PREMIUM
============================ */

.glightbox-container .gclose {
    top: 25px !important;
    right: 25px !important;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    width: 45px;
    height: 45px;
    transition: background 0.25s ease, transform 0.25s ease;
}

.glightbox-container .gclose:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.12);
}

/* ============================
   ANIMAZIONE CHIUSURA
============================ */

.glightbox-container.glightbox-closing {
    animation: glx-fadeOut 0.35s ease forwards;
}

@keyframes glx-fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* ============================
   FIX VARI
============================ */

/* Nasconde descrizione */
.glightbox-container .gslide-description {
    display: none !important;
}

/* Evita overflow del body */
body.glightbox-open {
    height: 100vh;
}

/* Fade premium tra le slide */
.glightbox-container .gslide {
    opacity: 0;
    transition: opacity 0.45s ease;
}

.glightbox-container .gslide.current {
    opacity: 1 !important;
}

/* Contenitore immagine con glassmorphism premium */
.glightbox-container .gslide-inner {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    border-radius: 18px;
    padding: 12px;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.25),
        0 12px 32px rgba(0, 0, 0, 0.35),
        inset 0 0 18px rgba(255, 255, 255, 0.25);
    transition: transform 0.35s ease;
}

/* Zoom leggero all’apertura */
body.glightbox-open .gslide-inner {
    transform: scale(1.02);
}

/* Bordo sfumato premium */
.glightbox-container .gslide-inner {
    border: 2px solid transparent;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)),
        linear-gradient(135deg, #4d798b, #355866);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

/* Ombra premium sulle frecce */
.glightbox-container .gprev,
.glightbox-container .gnext {
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.25),
        inset 0 0 8px rgba(255, 255, 255, 0.25);
}

/* Glow premium */
.glightbox-container .gprev:hover,
.glightbox-container .gnext:hover {
    box-shadow:
        0 0 12px #4d798b,
        0 0 24px #4d798b80;
}

/* Fade premium del background */
.glightbox-container {
    animation: glx-bgFade 0.45s ease forwards;
}

@keyframes glx-bgFade {
    from {
        background: rgba(0, 0, 0, 0.6);
    }

    to {
        background: rgba(0, 0, 0, 0.95);
    }
}