.v9-horizontal-scroll {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.v9-horizontal-scroll-container {
    display: flex;
    width: 100%;
    transition: transform var(--transition-duration) ease;
}

.v9-horizontal-scroll-item {
    flex: 0 0 100%;
    width: 100%;
}

.v9-horizontal-scroll-nav {
    position: absolute;
    display: flex;
    z-index: 10;
    gap: var(--nav-gap-mobile);
    padding: var(--nav-padding-mobile);
    background-color: var(--nav-background-color-mobile);
    border-radius: var(--nav-radius-mobile-top) var(--nav-radius-mobile-right) var(--nav-radius-mobile-bottom) var(--nav-radius-mobile-left);
}

/* Mobile Navigation Positions */
.v9-horizontal-scroll-nav[data-position-mobile="top-left"] {
    top: 20px;
    left: 20px;
}

.v9-horizontal-scroll-nav[data-position-mobile="top-center"] {
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.v9-horizontal-scroll-nav[data-position-mobile="top-right"] {
    top: 20px;
    right: 20px;
}

.v9-horizontal-scroll-nav[data-position-mobile="middle-left"] {
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
}

.v9-horizontal-scroll-nav[data-position-mobile="middle-center"] {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.v9-horizontal-scroll-nav[data-position-mobile="middle-right"] {
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

.v9-horizontal-scroll-nav[data-position-mobile="bottom-left"] {
    bottom: 20px;
    left: 20px;
}

.v9-horizontal-scroll-nav[data-position-mobile="bottom-center"] {
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.v9-horizontal-scroll-nav[data-position-mobile="bottom-right"] {
    bottom: 20px;
    right: 20px;
}

.v9-horizontal-scroll-nav[data-direction-mobile="row"] {
    flex-direction: row;
}

.v9-horizontal-scroll-nav[data-direction-mobile="column"] {
    flex-direction: column;
}

.v9-horizontal-scroll-nav-item {
    width: var(--nav-passive-size-mobile);
    height: var(--nav-passive-size-mobile);
    background-color: var(--nav-passive-color);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.v9-horizontal-scroll-nav-item.active {
    width: var(--nav-active-size-mobile);
    height: var(--nav-active-size-mobile);
    background-color: var(--nav-active-color);
}

/* Desktop Styles */
@media (min-width: 768px) {
    .v9-horizontal-scroll-nav {
        gap: var(--nav-gap-desktop);
        padding: var(--nav-padding-desktop);
        background-color: var(--nav-background-color-desktop);
        border-radius: var(--nav-radius-desktop-top) var(--nav-radius-desktop-right) var(--nav-radius-desktop-bottom) var(--nav-radius-desktop-left);
    }

    .v9-horizontal-scroll-nav[data-position-desktop="top-left"] {
        top: 20px;
        left: 20px;
    }
    
    .v9-horizontal-scroll-nav[data-position-desktop="top-center"] {
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .v9-horizontal-scroll-nav[data-position-desktop="top-right"] {
        top: 20px;
        right: 20px;
    }
    
    .v9-horizontal-scroll-nav[data-position-desktop="middle-left"] {
        top: 50%;
        left: 20px;
        transform: translateY(-50%);
    }
    
    .v9-horizontal-scroll-nav[data-position-desktop="middle-center"] {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .v9-horizontal-scroll-nav[data-position-desktop="middle-right"] {
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
    }
    
    .v9-horizontal-scroll-nav[data-position-desktop="bottom-left"] {
        bottom: 20px;
        left: 20px;
    }
    
    .v9-horizontal-scroll-nav[data-position-desktop="bottom-center"] {
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .v9-horizontal-scroll-nav[data-position-desktop="bottom-right"] {
        bottom: 20px;
        right: 20px;
    }
    
    .v9-horizontal-scroll-nav[data-direction-desktop="row"] {
        flex-direction: row;
    }
    
    .v9-horizontal-scroll-nav[data-direction-desktop="column"] {
        flex-direction: column;
    }
    
    .v9-horizontal-scroll-nav-item {
        width: var(--nav-passive-size-desktop);
        height: var(--nav-passive-size-desktop);
    }
    
    .v9-horizontal-scroll-nav-item.active {
        width: var(--nav-active-size-desktop);
        height: var(--nav-active-size-desktop);
    }
}

/* Hide navigation based on device */
@media (max-width: 767px) {
    .v9-horizontal-scroll-nav[data-show-mobile="no"] {
        display: none;
    }
}

@media (min-width: 768px) {
    .v9-horizontal-scroll-nav[data-show-desktop="no"] {
        display: none;
    }
}