/* Desktop defaults */
.header-tabs-section {
    border-bottom: 1px solid #e5e7eb;
    padding: 8px 0;
}

.tabs-container-header {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: flex-start; /* RTL friendly, aligns to right with dir="rtl" */
}

.tab-header {
    position: relative;
    padding: 10px 16px;
    font-size: 1rem;
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    border-radius: 10px; /* subtle hover area */
}

    .tab-header:hover {
        background: #f5f7f9;
    }

    .tab-header.active::after {
        content: "";
        position: absolute;
        inset-inline-start: 12px; /* RTL-aware */
        inset-inline-end: 12px; /* RTL-aware */
        bottom: -9px; /* sits on the section border */
        height: 3px;
        border-radius: 3px;
       
    }

/* Mobile: horizontal scroll, bigger tap targets, smaller text */
@media (max-width: 768px) {
    .header-tabs-section {
        padding: 4px 0 10px;
    }

    .tabs-container-header {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        gap: 8px;
        padding-inline: 12px;
        scroll-snap-type: x mandatory; /* smooth snap */
    }

        .tabs-container-header::-webkit-scrollbar {
            display: none;
        }
    /* WebKit */

    .tab-header {
        flex: 0 0 auto; /* don’t shrink */
        scroll-snap-align: start;
        font-size: 0.95rem;
        padding: 12px 14px; /* bigger touch area */
        border: 1px solid #eef0f2; /* chip look */
        background: #fff;
    }

        .tab-header.active {
            border-color: #cce9d6;
            background: #f0fdf4;
        }

            .tab-header.active::after {
                bottom: -11px; /* matches mobile spacing */
                height: 3px;
            }
}

/* Extra-small phones */
@media (max-width: 420px) {
    .tab-header {
        font-size: 0.9rem;
        padding: 10px 12px;
    }
}