/* Complete slider.css — ensures exactly 3 visible slides (20%/60%/20%) always */

.csg-slider-wrapper {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
}

.csg-slider {
    position: relative;
    width: 100%;
    height: 420px;
    overflow: hidden;
    direction: ltr;
    user-select: none;
}

body[dir="rtl"] .csg-slider { direction: rtl; }

.csg-slides-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.csg-slides {
    display: flex;
    align-items: stretch;
    height: 100%;
    transition: transform 0.56s ease;
    will-change: transform;
}

/* default: each slide occupies 20% width (side) */
.csg-slide {
    flex: 0 0 20%;
    max-width: 20%;
    position: relative;
    height: 100%;
    box-sizing: border-box;
    transition: flex-basis 0.5s ease, transform 0.4s ease;
    overflow: hidden;
}

.csg-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.35s ease, filter 0.35s ease, transform 0.35s ease;
}

/* Center slide larger (exactly 60% width) */
.csg-slide.csg-center {
    flex-basis: 60% !important;
    max-width: 60% !important;
    z-index: 3;
}

/* Sides look slightly blurred and smaller */
.csg-slide.csg-left-side img,
.csg-slide.csg-right-side img {
    opacity: 0.6;
    filter: blur(2px);
    transform: scale(1.02);
}

/* Center clear and full opacity */
.csg-slide.csg-center img {
    opacity: 1;
    filter: none;
    transform: scale(1);
}

/* Navigation arrows — force left/right regardless of body dir */
.csg-prev, .csg-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.45);
    color: #fff;
    border: none;
    padding: 10px 14px;
    cursor: pointer;
    z-index: 20;
    font-size: 18px;
    border-radius: 4px;
}

/* Force explicit positions so they never stack */
.csg-prev { left: 12px !important; right: auto !important; }
.csg-next { right: 12px !important; left: auto !important; }

/* Dots */
.csg-dots {
    text-align: center;
    padding-top: 10px;
    z-index: 5;
}

.csg-dot {
    height: 10px;
    width: 10px;
    margin: 0 6px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.25s;
}

.csg-dot.active {
    background-color: #00b894;
}

/* Lightbox */
.csg-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.85);
    z-index: 9999;
    padding: 20px;
}

.csg-lightbox.active { display: flex; }

.csg-lightbox-img {
    max-width: calc(100% - 160px);
    max-height: calc(100% - 160px);
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

.csg-close, .csg-lightbox-prev, .csg-lightbox-next {
    position: absolute;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    padding: 8px;
    cursor: pointer;
    z-index: 10000;
    font-size: 20px;
    border-radius: 4px;
}

.csg-close { top: 18px; right: 18px; }
.csg-lightbox-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.csg-lightbox-next { right: 18px; top: 50%; transform: translateY(-50%); }

/* Responsive: stack on mobile */
@media (max-width: 768px) {
    .csg-slider { height: 320px; }
    .csg-slides { flex-direction: column; transition: none; }
    .csg-slide { flex: 0 0 100% !important; max-width: 100% !important; }
    .csg-slide img { opacity: 1 !important; filter: none !important; }
    .csg-prev, .csg-next { display: none; }
}