/* Container for the entire slider */
.cbis-slider-container {
    position: relative;
    width: 100%; 
    max-width: 1360px;
    margin: auto; 
    text-align: center;
    padding: 0; 
    box-sizing: border-box;
}

/* Override Elementor container restriction */
.elementor-element .cbis-slider-container {
    max-width: 1360px !important;
}

/* Main large image container */
.cbis-main-image {
    position: relative; 
}
.cbis-main-image img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 30px;
    aspect-ratio: 16 / 9; 
    object-fit: contain;
}

/* Thumbnails Container */
.cbis-thumbnails {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto; 
    scrollbar-width: none;
    -ms-overflow-style: none;

    width: 100% !important;
    max-width: 100% !important; 
    margin: 0 auto 0 auto !important;
    
    gap: 5px; 
    padding: 0; 
    box-sizing: border-box !important;
    min-height: 80px; 
    position: relative; 
}
.cbis-thumbnails::-webkit-scrollbar { 
    display: none;
}

/* Individual Thumbnails */
.cbis-slider-container .cbis-thumbnails img {
    width: 80px !important;
    flex-shrink: 0; 
    height: 80px !important; 
    aspect-ratio: 1 / 1 !important; 
    object-fit: contain !important; 
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.3s;
}

/* Active/Selected Thumbnail */
.cbis-thumbnails img.active {
    opacity: 1;
    border: 3px solid #0073AA;
    transform: none;
}

/* ============================================== */
/* BASE NAVIGATION ARROWS (Mobile + Tablet + Default) */
/* ============================================== */

.cbis-prev, .cbis-next {
    position: absolute;
    /* Centered vertically in the main image area (inside image) */
    top: calc(30px + (100% - 30px) / 2); /* 30px is margin-bottom of main image */
    transform: translateY(-50%);
    
    /* Overlay style (white over image) */
    background: transparent !important; 
    color: #fff; 
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); 
    opacity: 0.7;
    
    border: none; 
    font-size: 20px;
    padding: 10px;
    width: auto;
    height: auto;
    line-height: 1; 
    border-radius: 0; 
    cursor: pointer;
    z-index: 10;
    outline: none !important; 
    user-select: none;
    text-align: center;
    transition: all 0.3s;
}

/* Arrows inside edges */
.cbis-prev { 
    left: 5px;
}
.cbis-next { 
    right: 5px;
}

/* Hover Effect */
.cbis-prev:hover, .cbis-next:hover,
.cbis-prev:focus, .cbis-next:focus {
    background: transparent !important;
    color: #fff; 
    opacity: 1;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
    box-shadow: none !important;
}

/* Active (Clicked) State */
.cbis-prev:active, .cbis-next:active {
    background: transparent !important;
    color: #fff;
    opacity: 1;
    transform: translateY(-50%) scale(0.9); 
}

/* ============================================== */
/* DESKTOP SPECIFIC ADJUSTMENTS (> 1024px) - ARROWS OUTSIDE */
/* ============================================== */

@media (min-width: 1025px) {
    .cbis-slider-container {
        padding: 0; 
    }
    
    .cbis-prev, .cbis-next {
        position: absolute; 
        top: 0; 
        bottom: 0;
        margin: auto 0;
        transform: none; 
        
        color: #333; 
        opacity: 0.9;
        text-shadow: none;
        font-size: 30px; 
    }
    
    .cbis-prev { 
        left: -40px; 
    }
    .cbis-next { 
        right: -40px; 
    }
    
    .cbis-prev:hover, .cbis-next:hover,
    .cbis-prev:focus, .cbis-next:focus {
        opacity: 1;
        color: #000;
        text-shadow: none;
    }
    
    .cbis-prev:active, .cbis-next:active {
        color: #000;
        opacity: 1;
        transform: scale(0.9);
    }
}

/* ============================================== */
/* MOBILE SPECIFIC ADJUSTMENTS (< 768px) */
/* ============================================== */

@media (max-width: 767px) {
    .cbis-prev, .cbis-next {
        font-size: 24px; /* Slightly larger for touch */
    }
    
    .cbis-slider-container .cbis-thumbnails img {
        width: 60px !important;
        height: 60px !important; 
    }
}