/* =============================================================================
   SEVA Product Gallery — Stylesheet
   Version : 1.0.0
   Sections :
     1. CSS Custom Properties
     2. Root wrapper
     3. Desktop — Mosaic cells (shared)
     4. Desktop — Layout variants (1 / 2 / 3 / 4 / 5+ images)
     5. Desktop — Badge & "more" button overlay
     6. Lightbox modal
     7. Mobile — Slider (≤ 768 px)
   ============================================================================= */


/* =============================================================================
   1. CSS Custom Properties
   ============================================================================= */

.seva-pg-root {
    /* Heights — overridable via shortcode inline style */
    --seva-gal-height        : 420px;
    --seva-gal-height-mobile : 400px;

    /* Palette */
    --seva-navy              : #0e2a45;
    --seva-navy-mid          : #1a3a5c;
    --seva-navy-light        : #e8eef5;
    --seva-teal              : #0d7c5f;
    --seva-stone             : #e4e2dc;
    --seva-text              : #1a1a18;
    --seva-text-mid          : #4a4a46;
    --seva-text-muted        : #888880;
    --seva-white             : #ffffff;

    /* Tokens */
    --seva-radius            : 10px;
    --seva-radius-sm         : 6px;
    --seva-gap               : 6px;
    --seva-transition        : transform 0.42s cubic-bezier(.4, 0, .2, 1);
}


/* =============================================================================
   2. Root wrapper
   ============================================================================= */

.seva-pg-root {
    position  : relative;
    width: 1320px!important;
    display   : block;
    font-family: inherit;
    box-sizing: border-box;
}

/* Force mosaic to always fill 100% of the root — no padding/margin that would shrink it */
.seva-pg-root .seva-pg-mosaic,
.seva-pg-root .seva-pg-slider-wrap {
    width: 100%;
}

.seva-pg-root *,
.seva-pg-root *::before,
.seva-pg-root *::after {
    box-sizing: border-box;
}

.seva-pg-error {
    padding    : 1rem;
    color      : #c0392b;
    font-size  : 14px;
    border     : 1px solid #f5c6cb;
    border-radius: var(--seva-radius);
    background : #fff5f5;
}


/* =============================================================================
   3. Desktop — Mosaic cells (shared)
   ============================================================================= */

.seva-pg-mosaic {
    display      : flex;
    height       : var(--seva-gal-height);
    gap          : var(--seva-gap);
    border-radius: 14px;
    overflow     : hidden;
}

/* ── Main (left, always 50 %) ── */
.seva-pg-cell--main {
    flex    : 0 0 50%;
    position: relative;
    overflow: hidden;
    cursor  : pointer;
    background: var(--seva-stone);
}

/* ── Full-width (1 image only) ── */
.seva-pg-cell--full {
    flex    : 1;
    position: relative;
    overflow: hidden;
    cursor  : pointer;
    background: var(--seva-stone);
}

/* ── Right column ── */
.seva-pg-col-right {
    flex          : 0 0 50%;
    display       : flex;
    flex-direction: column;
    gap           : var(--seva-gap);
}

/* ── Small cells inside right column ── */
.seva-pg-cell--sm {
    flex    : 1;
    position: relative;
    overflow: hidden;
    cursor  : pointer;
    background: var(--seva-stone);
}

/* ── Images inside all cell types ── */
.seva-pg-cell--main img,
.seva-pg-cell--full img,
.seva-pg-cell--sm   img {
    width     : 100%;
    height    : 100%;
    object-fit: cover;
    display   : block;
    transition: var(--seva-transition);
}

.seva-pg-cell--main:hover img { transform: scale(1.05); }
.seva-pg-cell--full:hover img { transform: scale(1.04); }
.seva-pg-cell--sm:hover   img { transform: scale(1.07); }


/* =============================================================================
   4. Desktop — Layout variants
   ============================================================================= */

/*
   Layout is driven by JS — no extra CSS classes needed per count.
   The .seva-pg-mosaic flex container + .seva-pg-col-right flex column
   handle all proportions automatically:
     1 image  → .seva-pg-cell--full   (100 %)
     2 images → .seva-pg-cell--main (50 %) + .seva-pg-col-right with 1 cell (50 %)
     3 images → main (50 %) + col-right with 2 cells (25 % each)
     4 images → main (50 %) + col-right with 3 cells (≈ 16.7 % each)
     5+       → same as 4, last small cell shows "+ more" overlay
*/


/* =============================================================================
   5. Desktop — Badge & "more" overlay
   ============================================================================= */

.seva-pg-badge {
    position      : absolute;
    top           : 16px;
    left          : 16px;
    z-index       : 2;
    background    : var(--seva-navy);
    color         : #fff;
    font-size     : 10px;
    font-weight   : 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding       : 5px 11px;
    border-radius : var(--seva-radius-sm);
    pointer-events: none;
    font-family : "Montserrat", Sans-serif;
}

.seva-pg-more {
    position       : absolute;
    inset          : 0;
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    gap            : 8px;
    background     : rgba(14, 42, 69, 0.58);
    border         : none;
    width          : 100%;
    padding        : 0;
    cursor         : pointer;
    transition     : background 0.2s;
    font-family : "Montserrat", Sans-serif;
}

.seva-pg-more:hover {
    background: rgba(14, 42, 69, 0.72);
}

.seva-pg-more__icon {
    width          : 40px;
    height         : 40px;
    border-radius  : 50%;
    border         : 2px solid rgba(255, 255, 255, 0.7);
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.seva-pg-more__icon svg {
    width : 18px;
    color : #fff;
}

.seva-pg-more__label {
    font-size     : 13px;
    color         : #fff;
    font-weight   : 500;
    letter-spacing: 0.03em;
    font-family   : inherit;
}


/* =============================================================================
   6. Lightbox modal
   ============================================================================= */

.seva-pg-modal {
    display        : none;
    position       : fixed;
    inset          : 0;
    z-index        : 99999;
    background     : rgba(6, 14, 24, 0.95);
    align-items    : center;
    justify-content: center;
    flex-direction : column;
}

.seva-pg-modal.is-open {
    display: flex;
}

.seva-pg-modal__inner {
    position : relative;
    max-width: 920px;
    width    : 92vw;
}

/* ── Close button ── */
.seva-pg-modal__close {
    position       : absolute;
    top            : -50px;
    right          : 0;
    display        : flex;
    align-items    : center;
    gap            : 7px;
    background     : none;
    border         : 1px solid rgba(255, 255, 255, 0.28);
    color          : #fff;
    border-radius  : var(--seva-radius-sm);
    padding        : 7px 16px;
    font-size      : 13px;
    cursor         : pointer;
    font-family    : inherit;
    transition     : background 0.15s;
}

.seva-pg-modal__close:hover {
    background: rgba(255, 255, 255, 0.08);
}

.seva-pg-modal__close svg {
    width         : 14px;
    height        : 14px;
    stroke        : #ffffff;
    color         : #ffffff;
    fill          : none;
    stroke-width  : 2;
    display       : block;
    flex-shrink   : 0;
}

.seva-pg-modal__close svg line {
    stroke: #ffffff;
}

/* ── Stage (image + arrows) ── */
.seva-pg-modal__stage {
    position       : relative;
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.seva-pg-modal__img {
    width      : 100%;
    height     : auto;
    max-height : 78vh;
    object-fit : contain;
    border-radius: var(--seva-radius);
    display    : block;
}

/* ── Navigation arrows ── */
.seva-pg-modal__nav {
    position        : absolute;
    top             : 50%;
    transform       : translateY(-50%);
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 52px;
    height          : 52px;
    border-radius   : 50%;
    background      : rgba(255, 255, 255, 0.15) !important;
    border          : 1.5px solid rgba(255, 255, 255, 0.4) !important;
    color           : #ffffff !important;
    fill            : none;
    cursor          : pointer;
    outline         : none;
    -webkit-appearance: none;
    appearance      : none;
    transition      : background 0.15s, border-color 0.15s;
}

.seva-pg-modal__nav:hover {
    background  : rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.4);
}

.seva-pg-modal__nav svg {
    width         : 22px;
    height        : 22px;
    stroke        : #ffffff;
    color         : #ffffff;
    fill          : none;
    stroke-width  : 2;
    display       : block;
    flex-shrink   : 0;
    pointer-events: none;
}

/* Polyline inside nav SVGs */
.seva-pg-modal__nav svg polyline {
    stroke: #ffffff;
}

.seva-pg-modal__nav--prev { left : -68px; }
.seva-pg-modal__nav--next { right: -68px; }

/* ── Footer: dots + counter ── */
.seva-pg-modal__footer {
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 12px;
    margin-top     : 18px;
}

.seva-pg-modal__dots {
    display: flex!important;
    gap    : 6px!important;
    align-items: center!important;
}

.seva-pg-modal__dot {
    width        : 6px!important;
    height       : 6px!important;
    border-radius: 50%!important;
    background   : rgba(255, 255, 255, 0.25)!important;
    cursor       : pointer!important;
    transition   : all 0.2s!important;
    border       : none!important;
    padding      : 0!important;
}

.seva-pg-modal__dot.is-active {
    background: #fff!important;
    transform : scale(1.35)!important;
}

.seva-pg-modal__counter {
    font-size : 14px;
    color     : rgba(255, 255, 255, 0.55);
    min-width : 52px;
    text-align: center;
}


/* =============================================================================
   7. Mobile — Slider (≤ 768 px)
   ============================================================================= */

@media (max-width:1700px){
	.seva-pg-root{
		width:1100px!important;
	}
}
@media (max-width: 768px) {
	
	.seva-pg-root {
		width:unset!important;
	}
    /* Hide desktop mosaic */
    .seva-pg-mosaic {
        display: none !important;
    }

    /* ── Slider wrapper ── */
    .seva-pg-slider-wrap {
        position  : relative;
        width     : 100%;
        overflow  : hidden;
        background: var(--seva-stone);
        height    : var(--seva-gal-height-mobile);
    }

    /* ── Sliding track ── */
    .seva-pg-slider-track {
        display   : flex;
        height    : 100%;
        transition: transform 0.38s cubic-bezier(.4, 0, .2, 1);
        will-change: transform;
        cursor    : grab;
    }

    .seva-pg-slider-track:active {
        cursor: grabbing;
    }

    /* ── Individual slides — 88 % width creates natural peek effect ── */
    .seva-pg-slide {
        flex        : 0 0 88%;
        height      : 100%;
        position    : relative;
        margin-right: 8px;
        overflow    : hidden;
        user-select : none;
    }

    .seva-pg-slide:last-child {
        margin-right: 0;
    }

    .seva-pg-slide img {
        width     : 100%;
        height    : 100%;
        object-fit: cover;
        display   : block;
        pointer-events: none;
        -webkit-user-drag: none;
    }

    /* ── Badge on first slide ── */
    .seva-pg-slide-badge {
        position      : absolute;
        bottom        : 14px;
        left          : 14px;
        background    : var(--seva-navy);
        color         : #fff;
        font-size     : 10px;
        font-weight   : 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        padding       : 5px 10px;
        border-radius : var(--seva-radius-sm);
        pointer-events: none;
    }

    /* ── Dots navigation strip (below slider) ── */
    .seva-pg-slider-dots {
        display        : flex!important;
        justify-content: center!important;
        align-items    : center!important;
        gap            : 6px!important;
        padding        : 12px 0 0!important;
    }

    .seva-pg-slider-dot {
        width        : 6px!important;
        height       : 6px!important;
        border-radius: 50%!important;
        background   : var(--seva-stone)!important;
        border       : 1.5px solid var(--seva-text-muted)!important;
        cursor       : pointer!important;
        padding      : 0!important;
        transition   : all 0.2s!important;
    }

    .seva-pg-slider-dot.is-active {
        background  : var(--seva-navy)!important;
        border-color: var(--seva-navy)!important;
        transform   : scale(1.28)!important;
    }

    /* ── Adjust modal arrows on small screens ── */
    .seva-pg-modal__nav--prev { left : -48px; }
    .seva-pg-modal__nav--next { right: -48px; }
}

@media (max-width: 480px) {
    .seva-pg-slider-wrap { height: calc(var(--seva-gal-height-mobile) - 20px); }
    .seva-pg-slide       { flex: 0 0 86%; }

    .seva-pg-modal__nav--prev { left : -36px; }
    .seva-pg-modal__nav--next { right: -36px; }
}


/* =============================================================================
   8. Theme override protection — reset button & SVG defaults
   ============================================================================= */

/* Prevent WordPress/WooCommerce theme styles from overriding modal buttons */
.seva-pg-modal button,
.seva-pg-modal button:focus,
.seva-pg-modal button:hover {
    box-shadow  : none !important;
    text-shadow : none !important;
    outline     : none;
}

/* Ensure SVG elements inside modal are never filled black by theme resets */
.seva-pg-modal svg {
    fill          : none !important;
    stroke        : #ffffff !important;
    overflow      : visible;
    vertical-align: middle;
}

.seva-pg-modal svg * {
    stroke: #ffffff !important;
    fill  : none !important;
}

/* More overlay SVG (on the gallery mosaic — dark background) */
.seva-pg-more svg,
.seva-pg-more svg * {
    stroke: #ffffff !important;
    fill  : none !important;
}

/* Prevent WooCommerce single product image styles from leaking in */
.seva-pg-root img {
    max-width : 100% !important;
    height    : 100% !important;
    object-fit: cover !important;
    display   : block !important;
    border    : none !important;
    box-shadow: none !important;
}

/* Full-width: undo any WooCommerce column constraints */
.seva-pg-root,
.seva-pg-mosaic,
.seva-pg-slider-wrap {
    max-width: none !important;
    margin   : 0 !important;
    padding  : 0 !important;
}