/* ----------------------------------------------------
   CLEAN PREMIUM FRAME WITHOUT TOUCHING IMAGE CONTENT
   - No stretch
   - No blur on image
   - No overlay on top of image
   - Only outer frame styling
---------------------------------------------------- */

/* Outer photo window frame */
.swiper-slide .image {
    position: relative !important;
    padding: 14px !important;              /* Creates the outer border gap */
    background: #141414 !important;        /* Dark matte background */
    border-radius: 20px !important;        /* Softer rounded corners */
    box-shadow:
        0 8px 20px rgba(0,0,0,0.55),
        0 0 25px rgba(0, 170, 255, 0.18) !important;
    transition: box-shadow 0.3s ease, transform 0.2s ease !important;
}

/* Neon glow (OUTSIDE only) on hover */
.swiper-slide .image:hover {
    transform: translateY(-4px) !important;
    box-shadow:
        0 12px 30px rgba(0,0,0,0.65),
        0 0 25px rgba(0, 170, 255, 0.55),
        0 0 45px rgba(0, 170, 255, 0.35) !important;
}

/* Outer border color (change color here) */
.swiper-slide .image::before {
    content: "" !important;
    position: absolute !important;
    inset: 0;
    border-radius: 20px !important;
    border: 2px solid rgba(0, 170, 255, 0.35) !important; /* blue neon feel */
    pointer-events: none !important;
    z-index: 2 !important;
}

/* IMAGE ITSELF — UNTOUCHED */
.swiper-slide .image img {
    width: 100% !important;
    height: auto !important;  /* no stretch */
    object-fit: contain !important; /* shows full vertical face images */
    border-radius: 14px !important; /* inner radius so it looks nice */
    position: relative !important;
    z-index: 3 !important;
}

/* ----------------------------------------------------
   THUMBNAILS (outer frame only)
---------------------------------------------------- */

.gallery.thumb .image {
    padding: 6px !important;
    border-radius: 12px !important;
    background: #141414 !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.45) !important;
    transition: 0.2s ease !important;
}

.gallery.thumb .image:hover {
    box-shadow:
        0 0 12px rgba(0, 170, 255, 0.6),
        0 0 20px rgba(0, 170, 255, 0.35) !important;
}

/* No dark overlay inside */
.swiper-slide .image::after,
.gallery.thumb .image::after {
    display: none !important;
}

/* No inner overlays */
.swiper-slide .image .overlay,
.gallery.thumb .image .overlay {
    background: transparent !important;
}

/* --- MAKE SURE IMAGES NEVER GO OUTSIDE THE BOX --- */

.swiper-slide .image {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important;        /* prevents content overflow */
}

.swiper-slide .image img {
    max-width: 100% !important;         /* prevent width overflow */
    max-height: 100% !important;        /* prevent height overflow */
    object-fit: contain !important;     /* show full face properly */
    height: auto !important;
    width: auto !important;
}

/* -----------------------------------------------
   MAROON NEON GLOW — Outer Frame Only
----------------------------------------------- */

.swiper-slide .image {
    box-shadow:
        0 8px 20px rgba(0,0,0,0.55),
        0 0 25px rgba(180, 0, 60, 0.18) !important;
}

.swiper-slide .image:hover {
    box-shadow:
        0 12px 32px rgba(0,0,0,0.65),
        0 0 25px rgba(180, 0, 60, 0.55),
        0 0 45px rgba(180, 0, 60, 0.35) !important;
}

.swiper-slide .image::before {
    border: 2px solid rgba(180, 0, 60, 0.40) !important;
    box-shadow:
        0 0 15px rgba(180, 0, 60, 0.55),
        0 0 30px rgba(180, 0, 60, 0.40) !important;
}

/* Maroon neon for thumbnails */
.gallery.thumb .image:hover {
    box-shadow:
        0 0 12px rgba(180, 0, 60, 0.6),
        0 0 22px rgba(180, 0, 60, 0.35) !important;
}

/* Swiper arrows glow */
.swiper-next-button:hover em,
.swiper-prev-button:hover em {
    color: rgb(180, 0, 60) !important;
    text-shadow: 0 0 12px rgba(180, 0, 60, 0.6) !important;
}

/* ------------------------------------------
   PAGE BACKGROUND – PREMIUM WHITISH GREY
------------------------------------------- */

body,
#bodyid,
html {
    background: #574949 !important;   /* soft grey */
}

/* Background behind the gallery container */
.gallery-wrapper,
#gallery-wrapper-id,
.content,
.swiper-container,
.gallery.full,
.gallery.thumb {
    background: #574949 !important;
}
