/**
 * Стили бокового меню каталога - лёгкий воздушный дизайн
 */

:root {
    --sidebar-width: 200px;
    --sidebar-text: #333333;
    --sidebar-muted: #999999;
    --sidebar-hover: rgba(0,0,0,0.03);
    --sidebar-active: #c9a961;
}

/* === DESKTOP SIDEBAR === */
@media (min-width: 992px) {
    body.has-sidebar {
        margin-left: var(--sidebar-width);
    }

    .catalog-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: var(--sidebar-width);
        height: 100vh;
        background: rgba(255,255,255,0.95);
        backdrop-filter: blur(10px);
        overflow-y: auto;
        z-index: 1000;
    }

    .sidebar-header {
        padding: 30px 16px 20px;
        font-size: 11px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: var(--sidebar-muted);
    }

    .sidebar-close {
        display: none;
    }

    .menu-burger {
        display: none;
    }

    #sidebarOverlay {
        display: none;
    }
}

/* === MOBILE === */
@media (max-width: 991px) {
    body.has-sidebar {
        margin-left: 0;
    }

    .catalog-sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        width: 80%;
        max-width: 280px;
        height: 100vh;
        background: rgba(255,255,255,0.98);
        backdrop-filter: blur(10px);
        overflow-y: auto;
        z-index: 2001;
        transition: left 0.3s ease;
    }

    .catalog-sidebar.open {
        left: 0;
    }

    .sidebar-header {
        padding: 24px 16px 16px;
        font-size: 11px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: var(--sidebar-muted);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .sidebar-close {
        background: none;
        border: none;
        color: var(--sidebar-muted);
        font-size: 18px;
        cursor: pointer;
        padding: 5px;
        opacity: 0.6;
    }

    #sidebarOverlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.2);
        z-index: 2000;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease;
    }

    #sidebarOverlay.open {
        opacity: 1;
        visibility: visible;
    }

    .menu-burger {
        position: fixed;
        bottom: 20px;
        left: 20px;
        z-index: 1500;
        background: rgba(255,255,255,0.95);
        color: #555;
        border: none;
        border-radius: 25px;
        padding: 10px 16px;
        font-size: 13px;
        cursor: pointer;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
        backdrop-filter: blur(10px);
    }

    .menu-burger.active {
        background: var(--sidebar-active);
        color: white;
    }

    body.menu-open {
        overflow: hidden;
    }
}

/* === NAVIGATION === */
.sidebar-nav {
    padding: 0;
}

.sidebar-category {
    /* без границ */
}

.sidebar-category-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    color: var(--sidebar-text);
    cursor: pointer;
    transition: color 0.2s;
    font-size: 14px;
    font-weight: 400;
}

.sidebar-category-header:hover {
    color: var(--sidebar-active);
}

.sidebar-category.active > .sidebar-category-header {
    color: var(--sidebar-active);
    font-weight: 500;
}

.sidebar-arrow {
    font-size: 8px;
    transition: transform 0.2s;
    opacity: 0.4;
    margin-left: 2px;
}

.sidebar-category.active .sidebar-arrow {
    transform: rotate(180deg);
    opacity: 0.6;
}

/* Подкатегории */
.sidebar-subcategories {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.sidebar-subcategories.open {
    max-height: 400px;
}

.sidebar-subcategories li a {
    display: block;
    padding: 9px 16px 9px 28px;
    color: var(--sidebar-muted);
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s;
}

.sidebar-subcategories li a:hover {
    color: var(--sidebar-text);
}

.sidebar-subcategories li a.active {
    color: var(--sidebar-active);
}

/* === SCROLLBAR === */
.catalog-sidebar::-webkit-scrollbar {
    width: 0;
}

/* === SCROLL OFFSET FOR ANCHORS (чтобы заголовок не уходил под хедер) === */
.catalog-api-section[id],
section[id] {
    scroll-margin-top: 80px;
}