/* Стили для модального окна */
.modal {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.5);
 z-index: 1000;
 justify-content: center;
 align-items: center;
}
.modal-content {
 background-color: white;
 padding: 20px;
 border-radius: 8px;
 max-width: 500px;
 width: 90%;
 max-height: 80vh;
 overflow-y: auto;
}
.modal-content h2 {
 margin-top: 0;
}
.modal-content .slots-list {
 margin: 20px 0;
}
.modal-content .slot {
 padding: 01px;
 border-bottom: 1px solid #e5e7eb;
}
.modal-content .slot:last-child {
 border-bottom: none;
}
.modal-content .close {
 float: right;
 font-size: 24px;
 cursor: pointer;
}
/* Исправление для независимого скроллинга */
.left-panel {
 position: sticky;
 top: 0;
 height: fit-content; /* Адаптируется под содержимое */
 overflow-y: auto; /* Скролл только при необходимости */
}
.right-panel {
 height: 100vh; /* Фиксированная высота на весь экран */
 overflow-y: auto; /* Независимый скроллинг */
}
/* Стили для кнопок слотов (уменьшенные) */
.slot-button {
 background-color: #60a5fa; /* Светло-голубой цвет по умолчанию */
 color: white;
/* Уменьшаем размеры кнопки */
 padding: 0.25rem 0.75rem; /* py-1 px-3 */
 font-size: 0.875rem; /* text-sm */
 border-radius: 0.375rem; /* rounded */
 margin: 0.25rem; /* m-1 */
 cursor: pointer;
 transition: background-color 0.2s;
/* Добавляем display: inline-block для правильного отображения с новыми размерами */
display: inline-block;
}
/* .slot-button:hover:not(.slot-button-proposed) {
background-color: #3b82f6; Чуть темнее при наведении */
/* } */
.slot-button.active {
 background-color: #2563eb !important;
/* background-color: #2563eb;  Тёмно-голубой для активной кнопки */
}
/* Новый стиль для предлагаемых слотов */
.slot-button-proposed {
 background-color: #d1d5db !important; /* Серый цвет, !important для приоритета над .slot-button */
 color: #6b7280 !important; /* Темно-серый текст, !important */
 cursor: pointer; /* Курсор указатель */
}
.slot-button-proposed:hover {
 background-color: #9ca3af !important; /* Темнее при наведении */
}
.slot-button-busy {
    background-color: white;
    color: #ccc;
    cursor: not-allowed;
}
.slot-button-busy:hover {
    background-color: white; /* No darken */
}
.slot-button-selected {
    background-color: #dcfce7 !important; /* Green like completed step */
    color: #374151;
}
.slot-button-selected:hover {
    background-color: #bbf7d0 !important; /* Darker green */
}
.slot-date {
 font-weight: bold;
 margin: 10px 0 5px;
}
/* Стили для спиннера загрузки */
.loading-spinner {
 border: 4px solid #f3f3f3;
 border-top: 4px solid #3498db;
 border-radius: 50%;
 width: 30px;
 height: 30px;
 animation: spin 1s linear infinite;
 margin: 20px auto;
}
@keyframes spin {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
}
/* Стили для карточки специалиста */
.staff-card {
 display: flex;
 flex-direction: row; /* Горизонтальное расположение */
 background-color: white;
 border-radius: 0.5rem; /* Закругление углов карточки */
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 overflow: hidden; /* Скрывает переполнение, важно для закругления */
}
.staff-photo-container {
 width: 40%; /* Ширина левой части */
 position: relative;
 overflow: hidden; /* Для обрезки изображения */
 display: flex;
 flex-direction: column;
 align-items: center;
 padding: 1rem;
}
.staff-photo {
/* Установлено на w-40 h-40 */
 width: 17rem; /* w-40 - ширина 10rem (160px) */
 height: 10rem; /* h-40 - высота 10rem (160px) */
 display: block;
 object-fit: cover; /* Обрезка изображения для заполнения контейнера 1:1 (круг) или 4:3 */
/* aspect-ratio убран, так как фиксированная ширина и высота */
/* Уменьшение размера и скругление углов */
 border-radius: 0.75rem; /* rounded-xl - скругление углов фото */
/* margin центрирует внутри flex-контейнера */
 margin-bottom: 0.5rem; /* Отступ снизу от фото до кнопки */
}
.staff-info {
 width: 60%; /* Ширина правой части */
 padding: 1rem; /* Внутренние отступы */
 display: flex;
 flex-direction: column;
 justify-content: space-between; /* Распределяет содержимое по вертикали */
}
.staff-name {
 font-size: 1.25rem; /* Крупный шрифт */
 font-weight: bold; /* Жирный шрифт */
 color: #374151; /* Цвет немного светлее черного (Tailwind gray-700) */
 margin-bottom: 0.5rem; /* Отступ снизу */
}
.staff-role {
 font-size: 1rem; /* Нормальный размер шрифта */
 color: #4b5563; /* Цвет текста (Tailwind gray-600) */
 margin-bottom: 0.5rem; /* Отступ снизу */
}
.staff-experience {
 font-size: 0.875rem; /* Меньший размер шрифта */
 color: #6b7280; /* Цвет текста (Tailwind gray-500) */
 margin-bottom: 0.5rem; /* Отступ снизу */
}
/* Новый стиль для блока "О себе" */
.staff-about-box {
 background-color: #fffbeb; /* bg-amber-50 - светло-бежевый */
 border-radius: 0.5rem; /* rounded-lg - скругление углов */
 padding: 0.75rem; /* p-3 - внутренние отступы */
 margin-bottom: 1rem; /* mb-4 - отступ снизу */
 font-size: 0.875rem; /* text-sm - размер шрифта */
 color: #6b7280; /* text-gray-500 - цвет текста */
}
.staff-about-title {
 font-weight: 600; /* font-semibold - полужирный заголовок */
 color: #92400e; /* text-amber-700 - цвет заголовка */
 margin-bottom: 0.25rem; /* mb-1 - небольшой отступ снизу */
}
.staff-about-text {
 margin-bottom: 0.5rem; /* mb-2 - отступ снизу от текста */
}
.staff-about-link {
 color: #b45309; /* text-amber-600 - цвет ссылки */
 text-decoration: none; /* убираем подчеркивание по умолчанию */
 font-weight: 500; /* font-medium - средняя жирность */
 transition: color 0.2s; /* плавный переход цвета */
}
.staff-about-link:hover {
 color: #92400e; /* text-amber-700 - цвет ссылки при наведении */
 text-decoration: underline; /* подчеркивание при наведении */
}
.staff-actions {
 display: flex;
 flex-direction: column; /* Кнопки друг под другом */
 gap: 0.5rem; /* Расстояние между кнопками */
}
.select-button {
 background-color: #3b82f6; /* Голубой цвет фона */
 color: white; /* Белый цвет текста */
 padding: 0.5rem 1rem; /* Внутренние отступы */
 border-radius: 0.375rem; /* Закругление углов */
 border: none; /* Убираем границу */
 cursor: pointer; /* Курсор указатель */
 transition: background-color 0.2s; /* Плавный переход */
 text-align: center; /* Центрирование текста */
 margin: 0 auto 1rem auto; /* Центрирование и отступ снизу */
 display: block; /* Для центрирования */
 width: 90%; /* Ширина кнопки */
}
.select-button:hover {
 background-color: #2563eb; /* Темнее при наведении */
}
/* Стили для табов тарифов */
.tabs {
 display: flex;
 margin-bottom: 20px;
 border: 1px solid #d1d5db;
 border-radius: 0.5rem;
 overflow: hidden;
}
.tab {
 flex: 1;
 padding: 10px 15px;
 text-align: center;
 cursor: pointer;
 background-color: #f9fafb;
 transition: background-color 0.2s;
}
.tab:hover {
 background-color: #f3f4f6;
}
.tab.active {
 background-color: #3b82f6;
 color: white;
}
.tab:not(:last-child) {
 border-right: 1px solid #d1d5db;
}
/* Стили для шагов */
.step {
 margin-bottom: 15px;
 padding: 10px;
 border-radius: 5px;
 background-color: #f3f4f6; /* Серый фон по умолчанию */
}
.step.active {
 background-color: #dbeafe; /* Голубой фон для активного шага */
 border-left: 4px solid #3b82f6;
}
.step.completed {
 background-color: #dcfce7; /* Зеленый фон для завершенного шага */
}
.step h3 {
 margin: 0 0 5px 0;
 font-size: 1rem;
}
.step p {
 margin: 0;
 font-size: 0.9rem;
 color: #4b5563;
}