/* UI — Tabs / Filters — filter-btn, formats-tab-btn */
.filter-btn,
.formats-tab-btn {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: color var(--transition-normal), border-color var(--transition-normal);
    font-family: var(--font-display);
}

.filter-btn {
    padding: var(--spacing-xs) ;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gray-400);
}

.filter-btn:hover {
    color: var(--white);
    border-bottom-color: var(--color-white-15);
}

.filter-btn.active {
    color: var(--white);
    border-bottom-color: var(--color-primary);
}

@media (max-width: 768px) {
    .filter-btn {
        font-size: 0.8rem;
    }
}

.formats-tab-btn {
    position: relative;
    z-index: 1;
    top: 1px;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-600);
}

.formats-tab-btn:hover {
    color: var(--carbon-400);
}

.formats-tab-btn.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

@media (max-width: 768px) {
    .formats-tab-btn {
        border-bottom: 1px solid var(--gray-200);
        text-align: left;
    }

    .formats-tab-btn.active {
        border-bottom-color: var(--color-primary);
        background: var(--gray-100);
    }
}