/* style.css */
.depth-slider-container {
    display: flex;
    align-items: center;
    justify-content: center; /* تغییر مهم: مرکز چین کردن به جای space-between */
    width: 100%;
    max-width: 100%; 
    overflow: visible;
    box-sizing: border-box;
    padding: 10px;
    position: relative;
    color: #333;
    font-family: 'Arial', sans-serif;
}

/* Navigation Buttons and Rectangles */
.ds-nav-group {
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 100;
    position: absolute; 
    transition: all 0.3s ease-in-out;
}

.ds-nav-group.top {
    align-self: flex-start;
}

.ds-nav-group.bottom {
    align-self: flex-end;
}

.ds-arrow {
    background: transparent;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    opacity: 0.8;
    color: var(--ds-nav-color, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
}

ds-arrow:hover {
    opacity: 1;
}

.ds-rect {
    background-color: var(--ds-nav-color, #fff);
    opacity: 0.8;
    cursor: pointer;
    transition: opacity 0.3s ease;
    /* Aspect ratio and height are set dynamically via JS */
}

.ds-rect:hover, .ds-rect.active {
    opacity: 1;
}

/* Track and Slides */
.ds-track {
    position: relative;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
    width: 100%;
}

.ds-slide {
    position: absolute;
    transition: transform 0.5s ease-in-out, filter 0.5s ease-in-out, opacity 0.5s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    will-change: transform, filter;
    cursor: pointer;
    max-width: 100%; /* Keeps it responsive */
    
}

/* .ds-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
} */

.ds-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    background: no-repeat center;
    background-size: contain;
    position: relative;
}

.ds-image.ds-has-corners::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 4px solid var(--ds-corner-color, #fff);
    border-radius: 24px;
    pointer-events: none;
    z-index: 1;
    -webkit-mask: 
        linear-gradient(#000 0 0) top left / var(--ds-corner-size, 40px) var(--ds-corner-size, 40px) no-repeat,
        linear-gradient(#000 0 0) top right / var(--ds-corner-size, 40px) var(--ds-corner-size, 40px) no-repeat,
        linear-gradient(#000 0 0) bottom left / var(--ds-corner-size, 40px) var(--ds-corner-size, 40px) no-repeat,
        linear-gradient(#000 0 0) bottom right / var(--ds-corner-size, 40px) var(--ds-corner-size, 40px) no-repeat;
    mask: 
        linear-gradient(#000 0 0) top left / var(--ds-corner-size, 40px) var(--ds-corner-size, 40px) no-repeat,
        linear-gradient(#000 0 0) top right / var(--ds-corner-size, 40px) var(--ds-corner-size, 40px) no-repeat,
        linear-gradient(#000 0 0) bottom left / var(--ds-corner-size, 40px) var(--ds-corner-size, 40px) no-repeat,
        linear-gradient(#000 0 0) bottom right / var(--ds-corner-size, 40px) var(--ds-corner-size, 40px) no-repeat;
}

/* Captions */
.ds-caption {
    position: absolute;
    text-align: center;
    font-size: 0.9rem;
    font-family: inherit;
    transition: opacity 0.3s ease;
}

.ds-caption.bottom {
    top: 100%; 
    margin-top: 10px;
}

.ds-caption.top {
    bottom: 100%; 
    margin-bottom: 10px;
}

.ds-caption.overlay { 
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.8);
    padding: 5px 10px;
    border-radius: 4px;
}

.ds-expand-icon {
    float: right;
    margin: 5px 0 0 5px;
    /* position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    z-index: 10; */
}