/* Reset & Wrapper */
.ss-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #f0f0f0;
    direction: ltr;
    border-radius: 5px;
    --ss-speed: 600ms;
    margin-inline: auto;
    display: block;
}

.ss-track {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Slides */
.ss-slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    z-index: 1;
    transition: opacity var(--ss-speed) ease-in-out;
}
.ss-slide.active { opacity: 1; z-index: 2; }

/* Slide effect (optional) */
.ss-wrapper.ss-effect-slide .ss-slide {
    opacity: 1;
    transform: translateX(100%);
    transition: transform var(--ss-speed) ease-in-out;
}
.ss-wrapper.ss-effect-slide .ss-slide.active {
    transform: translateX(0);
    z-index: 2;
}
.ss-wrapper.ss-effect-slide .ss-slide.from-left { transform: translateX(-100%); z-index: 3; }
.ss-wrapper.ss-effect-slide .ss-slide.from-right { transform: translateX(100%); z-index: 3; }
.ss-wrapper.ss-effect-slide .ss-slide.to-left { transform: translateX(-100%); z-index: 1; }
.ss-wrapper.ss-effect-slide .ss-slide.to-right { transform: translateX(100%); z-index: 1; }

/* Media */
.ss-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    min-width: 100%;
    min-height: 100%;
}

.ss-wrapper[data-fit="contain"] .ss-media {
    object-fit: contain;
    background: #000;
}

/* Content Box */
.ss-box {
    position: absolute;
    z-index: 10;
    padding: 25px 30px;
    max-width: 320px;
    width: 80%;
    border-radius: 4px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    backdrop-filter: blur(8px);
    transition: transform 0.4s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.ss-box:hover { transform: translateY(-3px); }

/* Typography */
.ss-title {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.3;
}
.ss-desc {
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.8;
    opacity: 0.85;
}

/* Text Colors */
.ss-box.text-white { color: #fff; }
.ss-box.text-black { color: #1a1a1a; }
.ss-box.text-black .ss-title { color: #000; }

/* Navigation Positioning */
:root {
    --ss-nav-size: 45px;
    --ss-nav-margin: 30px;
}

.ss-wrapper[data-lang="fa"] .ss-box.align-right,
.ss-wrapper[data-lang="ar"] .ss-box.align-right {
    right: var(--ss-nav-margin);
    left: auto;
    bottom: calc(var(--ss-nav-margin) + var(--ss-nav-size) + 10px);
    text-align: right !important;
    direction: rtl;
}

.ss-wrapper[data-lang="en"] .ss-box.align-left,
.ss-wrapper[data-lang="ru"] .ss-box.align-left {
    left: var(--ss-nav-margin);
    right: auto;
    bottom: calc(var(--ss-nav-margin) + var(--ss-nav-size) + 10px);
    text-align: left !important;
    direction: ltr;
}

/* Navigation Buttons */
.ss-btn {
    position: absolute;
    bottom: var(--ss-nav-margin);
    width: var(--ss-nav-size);
    height: var(--ss-nav-size);
    background: #fff;
    color: #000;
    border: none;
    cursor: pointer;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border-radius: 4px;
    opacity: 0.9;
    padding: 0;
}
.ss-btn:hover { background: #000; color: #fff; opacity: 1; }
.ss-btn svg { width: 24px; height: 24px; stroke-width: 1.5; }

.ss-prev { left: var(--ss-nav-margin); }
.ss-next { right: var(--ss-nav-margin); }

/* Responsive */
@media (max-width: 768px) {
    :root { --ss-nav-margin: 15px; --ss-nav-size: 40px; }
    .ss-wrapper { min-height: 300px; }
    .ss-box {
        max-width: 90%;
        padding: 18px 22px;
        bottom: 70px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        text-align: center !important;
    }
    .ss-box:hover { transform: translateX(-50%) translateY(-3px) !important; }
}

@media (max-width: 480px) {
    :root { --ss-nav-margin: 10px; --ss-nav-size: 35px; }
    .ss-box {
        padding: 15px 18px;
        max-width: 85%;
        bottom: 55px !important;
    }
    .ss-title { font-size: 14px !important; }
    .ss-desc { font-size: 12px !important; }
}