/* Дополнительные стили для секции услуг */

/* Панель управления услугами (фильтры и поиск) */
.services-controls {
    display: flex;                  /* Flexbox для горизонтального расположения */
    justify-content: space-between; /* Пространство между фильтрами и поиском */
    align-items: center;            /* Выравнивание по центру по вертикали */
    margin-bottom: 2rem;            /* Отступ снизу */
    flex-wrap: wrap;                /* Перенос на новую строку при нехватке места */
    gap: 1rem;                     /* Расстояние между элементами */
}

/* Стили для блока поиска */
.search-box {
    flex-grow: 1;          /* Занимает все доступное пространство */
    max-width: 400px;      /* Максимальная ширина */
    
    margin-bottom: 2rem;           /* Отступ снизу */
    display: flex;                 /* Flexbox для горизонтального расположения */
    gap: 1rem;                     /* Расстояние между фильтрами */
    flex-wrap: wrap;               /* Перенос на новую строку */
    justify-content: center;       /* Центрирование фильтров */

}

/* Стили для поля поиска */
.search-input {
    width: 100%;           /* Ширина 100% */
    padding: 1rem 1.5rem;  /* Внутренние отступы */
    border: 2px solid #e1e8ed; /* Граница */
    border-radius: 25px;   /* Скругленные углы */
    font-size: 1rem;       /* Размер шрифта */
    background: white;     /* Белый фон */
    color: #2c3e50;       /* Цвет текста */
    transition: all 0.3s ease; /* Плавные переходы */
}

/* Стили для фокуса на поле поиска */
.search-input:focus {
    outline: none;                 /* Убираем стандартный контур */
    border-color: #667eea;         /* Синяя граница */
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); /* Синяя тень */
}

/* Стили для статистики услуг */
.services-stats {
    margin-bottom: 2rem;   /* Отступ снизу */
}

/* Основной контейнер услуг */
.services-content {
    display: grid;                    /* CSS Grid layout */
    grid-template-columns: 300px 1fr; /* Две колонки: боковая панель и основной контент */
    gap: 2rem;                       /* Расстояние между колонками */
    min-height: 600px;               /* Минимальная высота */
}

/* Стили для боковой панели категорий */
.categories-sidebar {
    background: white;              /* Белый фон */
    border-radius: 16px;            /* Скругление углов */
    padding: 1.5rem;                /* Внутренние отступы */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Тень */
    height: fit-content;            /* Высота по содержимому */
    position: sticky;               /* Липкое позиционирование */
    top: 100px;                     /* Отступ сверху при липком позиционировании */
}

/* Стили для заголовка категорий */
.categories-sidebar h3 {
    color: #2c3e50;       /* Цвет текста */
    margin-bottom: 1.5rem; /* Отступ снизу */
    font-size: 1.3rem;    /* Размер шрифта */
    border-bottom: 2px solid #667eea; /* Синее подчеркивание */
    padding-bottom: 0.5rem; /* Отступ снизу для подчеркивания */
}

/* Стили для списка категорий */
.categories-list {
    display: flex;                  /* Flexbox для вертикального расположения */
    flex-direction: column;         /* Вертикальное направление */
    gap: 0.5rem;                   /* Расстояние между элементами */
}

/* Стили для элементов категорий */
.category-item {
    padding: 1rem;                  /* Внутренние отступы */
    border-radius: 10px;            /* Скругление углов */
    cursor: pointer;                /* Указатель при наведении */
    transition: all 0.3s ease;      /* Плавные переходы */
    border: 2px solid transparent;  /* Прозрачная граница */
    display: flex;                  /* Flexbox для расположения иконки и текста */
    align-items: center;            /* Выравнивание по центру */
    gap: 1rem;                     /* Расстояние между иконкой и текстом */
}

/* Эффекты при наведении на элементы категорий */
.category-item:hover {
    background: #f8f9fa;            /* Светлый фон */
    transform: translateX(5px);     /* Сдвиг вправо */
}

/* Стили для активной категории */
.category-item.active {
    background: linear-gradient(135deg, #667eea, #764ba2); /* Градиентный фон */
    color: white;                  /* Белый текст */
    border-color: #667eea;         /* Синяя граница */
}

/* Стили для иконки категории */
.category-icon {
    font-size: 1.5rem;             /* Размер иконки */
    width: 40px;                   /* Фиксированная ширина */
    height: 40px;                  /* Фиксированная высота */
    display: flex;                 /* Flexbox для центрирования */
    align-items: center;           /* Выравнивание по центру по вертикали */
    justify-content: center;       /* Выравнивание по центру по горизонтали */
    background: rgba(102, 126, 234, 0.1); /* Полупрозрачный синий фон */
    border-radius: 8px;            /* Скругление углов */
}

/* Стили для иконки активной категории */
.category-item.active .category-icon {
    background: rgba(255, 255, 255, 0.2); /* Полупрозрачный белый фон */
}

/* Стили для информации о категории */
.category-info h4 {
    margin: 0 0 0.3rem 0;  /* Отступы (только снизу) */
    font-size: 1rem;       /* Размер шрифта */
}

/* Стили для описания категории */
.category-info p {
    margin: 0;             /* Сброс отступов */
    font-size: 0.8rem;     /* Мелкий шрифт */
    opacity: 0.8;          /* Полупрозрачность */
}

/* Стили для описания активной категории */
.category-item.active .category-info p {
    opacity: 0.9;          /* Меньшая прозрачность */
}

/* Стили для основной области услуг */
.services-main {
    min-height: 500px;     /* Минимальная высота */
}

/* Сетка услуг */
.services-list {
    display: grid;          /* CSS Grid layout */
    gap: 1.5rem;           /* Расстояние между карточками */
}

/* Стили для карточек услуг */
.service-card {
    background: white;              /* Белый фон */
    border-radius: 12px;            /* Скругление углов */
    padding: 1.5rem;                /* Внутренние отступы */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Тень */
    transition: all 0.3s ease;      /* Плавные переходы */
    border: 1px solid #e1e8ed;     /* Граница */
    position: relative;             /* Для позиционирования псевдоэлемента */
    overflow: hidden;               /* Скрытие выходящего контента */
}

/* Цветная полоса слева карточек услуг */
.service-card::before {
    content: '';                    /* Пустой контент */
    position: absolute;             /* Абсолютное позиционирование */
    top: 0;                        /* Вверху карточки */
    left: 0;                       /* Слева карточки */
    width: 4px;                    /* Ширина полосы */
    height: 100%;                  /* На всю высоту */
    background: linear-gradient(135deg, #667eea, #764ba2); /* Градиентный фон */
}

/* Эффекты при наведении на карточки услуг */
.service-card:hover {
    transform: translateY(-5px);    /* Подъем карточки */
    box-shadow: 0 8px 25px rgba(0,0,0,0.15); /* Увеличенная тень */
}

/* Стили для заголовка услуги */
.service-header {
    display: flex;                  /* Flexbox для распределения */
    justify-content: space-between; /* Пространство между названием и ценой */
    align-items: flex-start;        /* Выравнивание по верху */
    margin-bottom: 1rem;            /* Отступ снизу */
}

/* Стили для названия услуги */
.service-header h3 {
    color: #2c3e50;       /* Цвет текста */
    margin: 0;            /* Сброс отступов */
    font-size: 1.2rem;    /* Размер шрифта */
    flex-grow: 1;         /* Занимает все доступное пространство */
}

/* Стили для цены услуги */
.service-price {
    background: linear-gradient(135deg, #2ecc71, #27ae60); /* Зеленый градиентный фон */
    color: white;                  /* Белый текст */
    padding: 0.5rem 1rem;          /* Внутренние отступы */
    border-radius: 20px;           /* Скругленные углы */
    font-weight: bold;             /* Жирное начертание */
    font-size: 1.1rem;             /* Размер шрифта */
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3); /* Зеленая тень */
}

/* Стили для описания услуги */
.service-description {
    color: #6c757d;       /* Серый цвет текста */
    margin-bottom: 1rem;  /* Отступ снизу */
    line-height: 1.5;     /* Межстрочный интервал */
}

/* Стили для деталей услуги */
.service-details {
    display: grid;                    /* CSS Grid layout */
    grid-template-columns: auto auto 1fr; /* Три колонки: длительность, филиалы, действие */
    gap: 1rem;                       /* Расстояние между элементами */
    align-items: center;             /* Выравнивание по центру */
    padding-top: 1rem;               /* Отступ сверху */
    border-top: 1px solid #e9ecef;   /* Разделительная линия */
}

/* Стили для длительности услуги */
.service-duration {
    color: #6c757d;       /* Серый цвет текста */
    font-size: 0.9rem;    /* Мелкий шрифт */
    display: flex;         /* Flexbox для выравнивания иконки и текста */
    align-items: center;   /* Выравнивание по центру */
    gap: 0.5rem;          /* Расстояние между иконкой и текстом */
}

/* Стили для блока филиалов услуги */
.service-branches {
    display: flex;         /* Flexbox для горизонтального расположения */
    align-items: center;   /* Выравнивание по центру */
    gap: 0.5rem;          /* Расстояние между иконкой и тегами */
    flex-wrap: wrap;      /* Перенос тегов на новую строку */
}

/* Стили для тегов филиалов */
.branch-tag {
    background: #e9ecef;   /* Светло-серый фон */
    color: #495057;       /* Цвет текста */
    padding: 0.3rem 0.8rem; /* Внутренние отступы */
    border-radius: 15px;   /* Скругленные углы */
    font-size: 0.8rem;     /* Мелкий шрифт */
    font-weight: 500;      /* Средняя жирность */
}

/* Стили для блока действия с услугой */
.service-action {
    text-align: right;     /* Выравнивание по правому краю */
}

/* Стили для кнопки услуги */
.btn-service {
    background: linear-gradient(135deg, #667eea, #764ba2); /* Градиентный фон */
    color: white;                  /* Белый текст */
    border: none;                  /* Без границы */
    padding: 0.6rem 1.2rem;        /* Внутренние отступы */
    border-radius: 20px;           /* Скругленные углы */
    cursor: pointer;               /* Указатель при наведении */
    font-weight: 600;              /* Полужирное начертание */
    transition: all 0.3s ease;     /* Плавные переходы */
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); /* Тень */
}

/* Эффекты при наведении на кнопку услуги */
.btn-service:hover {
    transform: translateY(-2px);   /* Подъем кнопки */
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); /* Увеличенная тень */
}

/* Адаптивность для планшетов (максимальная ширина 968px) */
@media (max-width: 968px) {
    .services-content {
        grid-template-columns: 1fr; /* Одна колонка */
        gap: 1.5rem;               /* Уменьшение расстояния */
    }
    
    .categories-sidebar {
        position: static;          /* Убираем липкое позиционирование */
        order: 2;                  /* Порядок отображения (второй) */
    }
    
    .services-main {
        order: 1;                  /* Порядок отображения (первый) */
    }
    
    .categories-list {
        flex-direction: row;       /* Горизонтальное расположение */
        flex-wrap: wrap;           /* Перенос на новую строку */
        gap: 0.8rem;              /* Увеличение расстояния */
    }
    
    .category-item {
        flex: 1;                   /* Равномерное распределение */
        min-width: 200px;          /* Минимальная ширина */
        text-align: center;        /* Выравнивание по центру */
        flex-direction: column;    /* Вертикальное расположение */
        gap: 0.5rem;              /* Уменьшение расстояния */
    }
    
    .service-details {
        grid-template-columns: 1fr; /* Одна колонка */
        gap: 0.8rem;              /* Уменьшение расстояния */
    }
    
    .service-action {
        text-align: center;        /* Выравнивание по центру */
    }
}

/* Адаптивность для мобильных устройств (максимальная ширина 768px) */
@media (max-width: 768px) {
    .services-controls {
        flex-direction: column;     /* Вертикальное расположение */
        align-items: stretch;       /* Растягивание на всю ширину */
    }
    
    .search-box {
        max-width: 100%;           /* Ширина 100% */
    }
    
    .category-item {
        min-width: 150px;          /* Уменьшение минимальной ширины */
    }
    
    .service-header {
        flex-direction: column;     /* Вертикальное расположение */
        gap: 1rem;                 /* Расстояние между элементами */
        align-items: flex-start;    /* Выравнивание по левому краю */
    }
    
    .service-price {
        align-self: flex-start;     /* Выравнивание цены по левому краю */
    }
}

/* Анимации для услуг */
@keyframes fadeInService {
    from {
        opacity: 0;                   /* Начальная прозрачность */
        transform: translateY(20px);  /* Начальное положение снизу */
    }
    to {
        opacity: 1;                   /* Конечная прозрачность */
        transform: translateY(0);     /* Конечное положение */
    }
}

/* Применение анимации к карточкам услуг */
.service-card {
    animation: fadeInService 0.5s ease; /* Анимация появления */
}

/* Применение анимации к элементам категорий */
.category-item {
    animation: fadeInService 0.3s ease; /* Анимация появления */
}