/**
 * ScrollTabs - Reusable horizontal sliding tab component styles
 *
 * Required HTML structure:
 *   <div class="scrolltabs">
 *     <div class="scrolltabs-nav">
 *       <div class="tabs">
 *         <ul>
 *           <li class="is-active" data-tab="0"><a>Tab 1</a></li>
 *           <li data-tab="1"><a>Tab 2</a></li>
 *         </ul>
 *       </div>
 *     </div>
 *     <div class="scrolltabs-panels">
 *       <div class="scrolltabs-track">
 *         <div class="scrolltabs-panel" data-panel="0">Content 1</div>
 *         <div class="scrolltabs-panel" data-panel="1">Content 2</div>
 *       </div>
 *       <div class="scrolltabs-progress">
 *         <div class="scrolltabs-progress-bar"></div>
 *       </div>
 *     </div>
 *   </div>
 */

/* Container */
.scrolltabs {
    position: relative;
    overflow: hidden;
}

/* Tab Navigation */
.scrolltabs-nav {
    margin-bottom: 2rem;
    overflow: hidden;
}

.scrolltabs-nav .tabs {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.scrolltabs-nav .tabs::-webkit-scrollbar {
    display: none;
}

.scrolltabs-nav .tabs ul {
    border-bottom: 3px solid #3273dc;
    display: inline-flex;
    flex-wrap: nowrap;
    min-width: 100%;
    justify-content: flex-start;
}

.scrolltabs-nav .tabs li {
    flex-shrink: 0;
    white-space: nowrap;
}

.scrolltabs-nav .tabs li a {
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -3px;
    padding: 0.75em 1.25em;
    color: #4a4a4a;
    font-weight: 500;
    transition: all 0.3s ease;
    white-space: nowrap;
    cursor: pointer;
}

.scrolltabs-nav .tabs li a:hover {
    background-color: rgba(50, 115, 220, 0.05);
    border-bottom-color: rgba(50, 115, 220, 0.3);
}

.scrolltabs-nav .tabs li.is-active a {
    color: #3273dc;
    border-bottom-color: #3273dc;
    font-weight: 600;
}

/* Panel Container */
.scrolltabs-panels {
    position: relative;
    overflow: hidden;
}

/* Panels Track (horizontal sliding) */
.scrolltabs-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* Individual Panels */
.scrolltabs-panel {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    padding: 2rem;
    box-sizing: border-box;
}

/* Vertical Progress Bar */
.scrolltabs-progress {
    position: absolute;
    right: -30px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 200px;
    background: #e8e8e8;
    border-radius: 2px;
    overflow: hidden;
}

.scrolltabs-progress-bar {
    width: 100%;
    background: linear-gradient(180deg, #3273dc 0%, #00b89c 100%);
    border-radius: 2px;
    transition: height 0.3s ease;
    height: 20%;
}

/* Mobile Responsive */
@media screen and (max-width: 768px) {
    .scrolltabs-nav {
        margin-bottom: 0;
    }

    .scrolltabs-nav .tabs ul {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        border-bottom: 2px solid #3273dc;
        gap: 0;
        padding-bottom: 0;
    }

    .scrolltabs-nav .tabs ul::-webkit-scrollbar {
        display: none;
    }

    .scrolltabs-nav .tabs li {
        flex: 0 0 auto;
    }

    .scrolltabs-nav .tabs li a {
        border: none;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        margin-bottom: -2px;
        font-size: 0.85rem;
        padding: 0.5em 0.75em;
        white-space: nowrap;
    }

    .scrolltabs-nav .tabs li.is-active a {
        background-color: transparent;
        color: #3273dc;
        border-bottom-color: #3273dc;
    }

    .scrolltabs-panel {
        padding: 0 0.5rem;
    }

    .scrolltabs-progress {
        display: none;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .scrolltabs-track {
        transition: none;
    }

    .scrolltabs-progress-bar {
        transition: none;
    }
}