/* --- SUB NAVIGATION --- */
.category-subnav {
    display: flex;
    gap: 36px;
    padding: 42px 100px;
    border-bottom: 1px solid var(--subnav-border);
}

.category-subnav a {
    text-decoration: none;
    color: var(--subnav-text);
    position: relative;
}

.category-subnav a.active::after {
    content: "";
    position: absolute;
    left: 0; bottom: -6px;
    width: 100%; height: 1px;
    background: var(--subnav-active);
}

/* --- SEARCH BAR --- */
.category-search {
    padding: 40px 100px;
    display: flex;
}

.category-search input {
    width: 500px;
    max-width: 100%;
    /* Връщаме твоя дебел и нежен плейсхолдър стил */
    border-bottom: 2px solid var(--subnav-border) !important;
    font-family: var(--font-serif), serif;
    font-style: italic;
    color: var(--color-text-muted);
}

.category-search input::placeholder {
    font-family: var(--font-serif), serif;
    font-style: italic;
    opacity: 0.5;
}

/* --- DROPDOWNS --- */
.category-filters {
    margin: 1.2rem auto 2rem;
    display: flex;
    justify-content: center;
}

.filters-form {
    display: flex;
    gap: 2rem;
}

.filters-form select {
    width: auto;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--subnav-border) !important;
    background: transparent;
    cursor: pointer;
}

.filters-form select:hover {
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-text-primary) !important;
}

/* ==========================================
   ADAPTIVITY (MOBILE & ULTRA-WIDE)
========================================== */

/* 1. Центриране за големи екрани (> 1550px) */
@media (min-width: 1550px) {
    .category-subnav { justify-content: center; max-width: 1400px; margin: 0 auto; }
    .category-search { justify-content: center; }
}

/* 2. Таблети и малки лаптопи */
@media (max-width: 1024px) {
    .category-subnav { padding: 20px; justify-content: center; flex-wrap: wrap; }
    .category-search { padding: 20px; justify-content: center; }

    .category-search input {
        width: 100% !important;
        max-width: 420px !important; /* Дава въздух на дългия текст */
        text-align: center;
    }
    .category-search input::placeholder { text-align: center; font-size: 0.9rem; }
}

/* 3. Мобилни устройства */
@media (max-width: 600px) {
    /* Премахваме страничните падинги, които свиват инпута */
    .category-search {
        padding: 40px 0;
        display: flex;
        justify-content: center;
    }

    /* Фиксираме ширината на 320px, за да съвпадне с филтрите */
    .category-search input {
        width: 320px !important;
        max-width: 90vw !important;
        margin: 0 auto;
        display: block;
        text-align: center;

        /* Корекции за дългия текст на български */
        font-size: 0.8rem;            /* Малко по-дребен, за да се вижда целия */
        letter-spacing: -0.025em;     /* Още малко сгъстяване за обем */
        padding: 12px 0;              /* Нулираме странични падинги, за да не "ядат" от мястото */

        /* Премахваме ellipsis, за да не реже името на артиста с точки */
        text-overflow: clip;
        white-space: nowrap;
        overflow: visible;
    }

    /* Правим плейсхолдъра по-сигурен против изрязване */
    .category-search input::placeholder {
        text-align: center;
        font-size: 0.8rem;
        opacity: 0.5;
    }

    .filters-form {
        flex-direction: column;
        width: 320px !important;
        max-width: 90vw !important;
        margin: 0 auto;
        gap: 1.5rem;
    }

    .filters-form select {
        width: 100% !important;
        text-align: center;
        text-align-last: center;
        border-bottom: 1px solid var(--subnav-border) !important;
        font-size: 1rem; /* Спираме автоматичното зуумване в iOS */
    }
}