.ph-filter-box {
    background-color: #FCF9F7;
    border-radius: 17px;
    padding: 30px;
}

.panel-title {
font-family: "Noto Sans", sans-serif;
font-weight: 600;
font-size: 22px;

}

.panel-title a{ 
text-decoration: inherit;
}

.ph-checkbox-container {
    font-family: "Rubik", sans-serif;
font-weight: 400;
font-size: 18px;

}

/* Modern Filter Radio Styles */
.filter-radio-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 8px 0;
    font-family: "Rubik", sans-serif;
    font-size: 14px;
    color: #333;
    transition: all 0.3s ease;
}

.filter-radio-label:hover {
    transform: translateX(4px);
}

.filter-radio-label input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.filter-radio-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.filter-radio-icon svg {
    transition: transform 0.2s ease;
}

.filter-radio-label:hover .filter-radio-icon svg {
    transform: scale(1.1);
}

.filter-title-text {
    flex: 1;
    color: #444;
}

/* Active/checked state text color */
.filter-radio-label:has(input:checked) .filter-title-text {
    color: #C09D5C;
    font-weight: 500;
}

.ph-filter-count {
    font-size: 12px;
    color: #999;
    margin-left: 6px;
}

/* Filter item styles */
.filter-item {
    margin-bottom: 12px;
}

.filter-item:last-child {
    margin-bottom: 0;
}

/* Modern Filter Radio Styles */
.filter-radio-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 8px 0;
    font-family: "Rubik", sans-serif;
    font-size: 16px;
    color: #333;
    transition: all 0.3s ease;
}

.filter-radio-label:hover {
    transform: translateX(4px);
}

.filter-radio-label input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.filter-radio-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.filter-radio-icon svg {
    transition: transform 0.2s ease;
}

.filter-radio-label:hover .filter-radio-icon svg {
    transform: scale(1.1);
}

.filter-title-text {
    flex: 1;
    color: #444;
    font-size: 16px;
}

/* Active/checked state text color */
.filter-radio-label:has(input:checked) .filter-title-text {
    color: #C09D5C;
    font-weight: 500;
}

.ph-filter-count {
    font-size: 13px;
    color: #999;
    margin-left: 8px;
}

/* Анимация для галочки */
.filter-radio-icon.checked svg .checkmark {
    animation: drawCheck 0.3s ease forwards;
}

@keyframes drawCheck {
    from {
        stroke-dashoffset: 10;
    }
    to {
        stroke-dashoffset: 0;
    }
}

/* Вложенные категории */
.ph-filter-module-categories-tree .filter-item {
    border-left: 1px dashed #e0e0e0;
    padding-left: 10px;
}

/* ============================================
   ПЕРЕСТАНОВКА БЛОКОВ ДЛЯ МОБИЛЬНОЙ ВЕРСИИ
   ============================================ */

/* Для мобильных устройств (до 768px) */
@media (max-width: 768px) {
    .site-grid {
        display: flex;
        flex-direction: column;
    }
    
    /* Убеждаемся, что sidebar-left идет первым */
    .container-sidebar-left {
        order: -1;
    }
    
    /* Компонент идет вторым */
    .container-component {
        order: 0;
    }
}

/* Альтернативный вариант через Grid */
@media (max-width: 768px) {
    .site-grid {
        display: grid;
        grid-template-areas: 
            "side-1"
            "comp";
        gap: 20px;
    }
    
    .container-sidebar-left {
        grid-area: side-1;
    }
    
    .container-component {
        grid-area: comp;
    }
}

/* Если у вас есть другие элементы (top-a, top-b, banner и т.д.) */
@media (max-width: 768px) {
    .site-grid {
        display: flex;
        flex-direction: column;
            
    }
    
    .container-sidebar-left,
    .container-component {
        padding: 0 10px;
    }
    
    /* Порядок всех элементов на мобильных */
    .container-banner { order: 0; }
    .container-top-a { order: 1; }
    .container-top-b { order: 2; }
    .container-sidebar-left { order: 3; }  /* Sidebar идет после top-b, но перед component */
    .container-component { order: 4; }
    .container-sidebar-right { order: 5; }
    .container-bottom-a { order: 6; }
    .container-bottom-b { order: 7; }
}