/* CLT — небольшие правки поверх Bootstrap 5 */

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.navbar-brand {
    letter-spacing: 0.05em;
}

.card {
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.table-tight td, .table-tight th {
    padding: 0.4rem 0.5rem;
    font-size: 0.92rem;
}

.status-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.status-new       { background: #e7f1ff; color: #084298; }
.status-confirmed { background: #d1e7dd; color: #0f5132; }
.status-arrived   { background: #fff3cd; color: #664d03; }
.status-done      { background: #c6c6f5; color: #2b2b8c; }
.status-no_show   { background: #f8d7da; color: #842029; }
.status-cancelled { background: #e2e3e5; color: #41464b; text-decoration: line-through; }

/* --- Публичная часть --- */
.master-card { cursor: pointer; transition: border-color .15s; }
.master-card:hover { border-color: #888; }

/* --- Страница выбора мастера: один столбик, оптимизация под 320–375px ---
   Контейнер сужаем до мобильного даже на десктопе — задача из ТЗ.
   880px (max-width в _public_base.html) уже задан на <main>, мы лишь
   ограничиваем СЕБЯ внутри него до 420px и центрируем. */
.book-master-page {
    max-width: 620px;
    margin: 0 auto;
}

/* Список мастеров — всегда вертикальный, одна колонка, и на десктопе тоже. */
.master-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Скрываем нативный radio — выбор делается кликом по стрелке (см. JS).
   Оставляем в DOM для сабмита формы и required-валидации. */
.master-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Тело карточки: аватар слева, текст в центре, стрелка справа.
   align-items: center — аватар и стрелка вертикально по центру блока с текстом.
   Это и есть «отцентрировать фото» из ТЗ: при любой высоте текстовой части
   аватар остаётся посередине. */
.master-card-body {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 0.9rem;
}

/* Текстовая часть — растягивается, прижимая стрелку к правому краю.
   min-width: 0 нужен чтобы flex-элемент мог сжиматься на узких экранах
   (иначе длинное имя не переносится и ломает layout). */
.master-info {
    flex: 1 1 auto;
    min-width: 0;
}

/* Кнопка-стрелка справа. Без рамки, минималистично, тапабельно (≥40×40). */
.master-arrow-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #dee2e6;
    border-radius: 50%;
    background: #fff;
    color: #212529;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .15s;
}
.master-arrow-btn:hover,
.master-arrow-btn:focus-visible {
    background: #212529;
    color: #fff;
    border-color: #212529;
    outline: none;
}
.master-arrow-btn:active {
    transform: scale(0.95);
}

/* На совсем узких экранах (≤375px) ужимаем отступы карточки,
   чтобы всё помещалось без горизонтальной прокрутки. */
@media (max-width: 375px) {
    .master-card-body {
        gap: 0.5rem;
        padding: 0.7rem 0.75rem;
    }
    .master-arrow-btn {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
    }
}

/* Индикатор шагов */
.step { flex: 1; text-align: center; padding: 0.4rem 0; color: #adb5bd; font-size: 0.9rem; border-bottom: 2px solid #dee2e6; }
.step.active { color: #212529; border-bottom-color: #212529; font-weight: 500; }
.step-num { display: inline-block; width: 1.5rem; height: 1.5rem; line-height: 1.5rem; border-radius: 50%; background: #e9ecef; font-size: 0.8rem; margin-right: 0.25rem; }
.step.active .step-num { background: #212529; color: #fff; }

/* Календарь */
.calendar td { padding: 0.15rem; height: 42px; vertical-align: middle; }
.cal-day {
    display: inline-block;
    width: 36px; height: 36px; line-height: 36px;
    border-radius: 50%;
    text-decoration: none;
}
.cal-day.available {
    background: #f8f9fa;
    color: #212529;
    font-weight: 500;
}
.cal-day.available:hover {
    background: #212529;
    color: #fff;
}
.cal-day.disabled { color: #adb5bd; cursor: default; }
.cal-day.selected { background: #212529 !important; color: #fff !important; }
.cal-day.today { box-shadow: inset 0 0 0 2px #6c757d; }

/* Слот-кнопки */
.slot-btn { min-width: 70px; }
.slot-btn.active { box-shadow: 0 0 0 2px #212529; }

/* --- Аватары мастеров на публичной странице --- */
.master-avatar {
    width: var(--avatar-size, 96px);
    height: var(--avatar-size, 96px);
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid #e9ecef;
}
.master-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    /* Размер букв — примерно треть от размера аватара */
    font-size: calc(var(--avatar-size, 96px) / 2.6);
    letter-spacing: 0.02em;
    border: none;
}

/* --- Рейтинг звёздами в форме отзыва ---
   Структура: набор пар (input.radio, label.rating-star), input скрыт.
   В шаблоне выводим в обратном порядке (5,4,3,2,1) и с flex-direction: row-reverse
   возвращаем визуальный порядок (1,2,3,4,5).
   Это позволяет CSS-селектором ~ (siblings) подсвечивать все звёзды,
   которые в исходном HTML идут ПОСЛЕ выбранной/наведённой — т.е. визуально
   находятся СЛЕВА от неё.
*/
.rating-input {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 0.25rem;
}
.rating-input input[type="radio"] {
    /* Скрываем сам radio, кликабелен будет label через for=... */
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.rating-input .rating-star {
    cursor: pointer;
    font-size: 1.8rem;
    line-height: 1;
    color: #dee2e6;
    transition: color .15s;
    margin: 0;
    user-select: none;
}
/* Выбранная звезда и все звёзды правее в HTML (= левее визуально) — золотые */
.rating-input input[type="radio"]:checked ~ .rating-star {
    color: #f0ad4e;
}
/* При наведении на звезду — она и все «правее в HTML» (= левее визуально) подсвечиваются */
.rating-input .rating-star:hover,
.rating-input .rating-star:hover ~ .rating-star {
    color: #f0ad4e;
}
/* Если что-то уже выбрано, при наведении на ДРУГУЮ звезду — старую подсветку гасим
   (CSS не умеет «отменять» родственные эффекты, но можно перебить через hover на контейнере) */
.rating-input:hover input[type="radio"]:checked ~ .rating-star {
    color: #dee2e6;
}
.rating-input:hover .rating-star:hover,
.rating-input:hover .rating-star:hover ~ .rating-star {
    color: #f0ad4e;
}
/* Фокус-индикатор для доступности */
.rating-input input[type="radio"]:focus-visible + .rating-star {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
    border-radius: 4px;
}

/* --- Иконка «оставить отзыв» в карточке мастера --- */
.leave-review-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff8e6;
    border: 1px solid #f0ad4e;
    color: #b87a14;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    transition: background .15s, transform .15s;
}
.leave-review-icon:hover {
    background: #f0ad4e;
    color: #fff;
    transform: scale(1.08);
}


/* ======================================================================
   Адаптив публичных страниц записи
   ======================================================================
   Базовая ширина <main> теперь задаётся здесь, а не инлайн-стилем в HTML.
   - >= 1200px : 880px (как было)
   - 620–1200  : 100% с боковыми отступами (комфортно на планшетах)
   - <= 620    : плотнее отступы, кнопки во всю ширину, шрифт чуть крупнее
   - <= 420    : страница /book/ уже подогнана отдельно (см. .book-master-page)
*/
.public-main {
    max-width: 580px;
}

@media (max-width: 1199.98px) {
    .public-main {
        max-width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* 620px — это «большой смартфон / маленький планшет», по ТЗ.
   Цели: ничего не вылезает за экран, формы и кнопки удобно тыкать пальцем,
   карточки занимают всю доступную ширину, текст не налезает. */
@media (max-width: 520px) {
    .public-main {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Заголовки чуть крупнее для лучшей читаемости на телефоне. */
    .public-main h1.h4,
    .public-main h1.h3 { font-size: 1.25rem; }

    /* Кнопки на всю ширину в ряду «← Назад / Далее →» — иначе на узком
       экране они склеиваются. Применяется ко всем .d-flex.gap внутри main. */
    .public-main .btn-row-mobile {
        display: flex;
        flex-direction: column-reverse; /* основная кнопка сверху */
        gap: 0.5rem;
    }
    .public-main .btn-row-mobile > .btn { width: 100%; }

    /* Карточки и аккордеон занимают всю ширину, без правых-левых отступов. */
    .public-main .card,
    .public-main .accordion {
        margin-left: 0;
        margin-right: 0;
    }

    /* Список услуг: чекбокс слева, цена/время справа — на узком экране
       стек иначе названия услуг режутся. */
    .public-main .list-group-item {
        flex-wrap: wrap;
        row-gap: 0.25rem;
    }

    /* Шаги (_steps.html) — компактнее. */
    .public-main .steps-bar {
        font-size: 0.8rem;
    }

    /* Завершающий экран /book/done/ и /cancel/ — единый блок без избыточных
       отступов. */
    .public-main .summary-card .card-body {
        padding: 1rem;
    }

    /* Поля формы /book/data/ — занимают всю ширину карточки. */
    .public-main .form-control,
    .public-main .form-select {
        font-size: 1rem; /* ≥16px чтобы iOS не зумил при фокусе */
    }
}

/* 420px и меньше — уже есть отдельный стиль .book-master-page,
   доп. правки не нужны. */