/* /home/claude/zapishis/app/static/css/style.css
 *
 * Тема "северный минимализм" (см. ТЗ, раздел 3 «Визуальный стиль»).
 * Задача — уйти от вида "голого Bootstrap": переопределяем акцентные
 * цвета, скругления, тени и типографику поверх Bootstrap 5,
 * не пересобирая сам фреймворк.
 */

/* ---------- 1. Палитра и токены (см. ТЗ, раздел 3.1) ---------- */
:root {
    --color-teal: #1D9E75;
    --color-teal-dark: #085041;
    --color-violet: #534AB7;
    --color-violet-fill: #EEEDFE;
    --color-ice: #E1F5EE;

    --color-text: #1F2A28;       /* тёмно-графитовый, НЕ чёрный */
    --color-text-muted: #5B6B67;
    --color-bg: #F7FBFA;         /* ледяной светлый фон страницы */
    --color-surface: #FFFFFF;
    --color-border: #E4EEEC;
    /* Новое, перед деплоем — тёмная подложка showcase-bg (полярная ночь,
       см. раздел 6 ниже). Не производная от --color-teal/--color-violet
       через darken() (в чистом CSS такой функции нет) — отдельный,
       специально подобранный тёмный сине-зелёный, достаточно тёмный,
       чтобы текст героя в белом читался с хорошим контрастом. */
    --color-night: #071820;

    --gradient-aurora: linear-gradient(135deg, var(--color-teal) 0%, var(--color-violet) 100%);

    --radius-lg: 20px;
    --radius-md: 14px;
    --radius-sm: 10px;

    --shadow-card: 0 4px 24px rgba(8, 80, 65, 0.08);
    --shadow-card-hover: 0 10px 30px rgba(8, 80, 65, 0.14);

    --font-main: 'Onest', 'Golos Text', system-ui, -apple-system, sans-serif;
}

/* ---------- 2. Базовые переопределения ---------- */
body {
    font-family: var(--font-main);
    color: var(--color-text);
    background-color: var(--color-bg);
}

a {
    color: var(--color-teal-dark);
    text-decoration: none;
}
a:hover { color: var(--color-teal); }

.link-muted {
    color: var(--color-text-muted);
}
.link-muted:hover { color: var(--color-teal-dark); }

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -0.01em;
}

.section-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

/* Иконки — линейные (см. ТЗ 3.2: "иконки — линейные, не заливные").
   Tabler Icons webfont по умолчанию и есть линейный (outline) набор. */
.ti { line-height: 1; vertical-align: -2px; }

/* ---------- 3. Навигация ---------- */
.app-navbar {
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
}
.app-brand {
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--color-teal-dark) !important;
}
.app-footer {
    border-top: 1px solid var(--color-border);
}

/* ---------- 4. Кнопки ---------- */
.btn { border-radius: var(--radius-sm); font-weight: 600; padding-top: 0.55rem; padding-bottom: 0.55rem; }

.btn-primary {
    background-color: var(--color-teal);
    border-color: var(--color-teal);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--color-teal-dark);
    border-color: var(--color-teal-dark);
}

.btn-outline-primary {
    color: var(--color-teal-dark);
    border-color: var(--color-teal);
}
.btn-outline-primary:hover {
    background-color: var(--color-teal);
    border-color: var(--color-teal);
}

.btn-outline-secondary {
    color: var(--color-text-muted);
    border-color: var(--color-border);
}
.btn-outline-secondary:hover {
    background-color: var(--color-text);
    border-color: var(--color-text);
}

/* ---------- 5. Карточки: мягкое скругление, тень вместо жёсткой рамки (ТЗ 3.2) ---------- */
.card {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.auth-card, .contact-card, .schedule-card {
    border-radius: var(--radius-lg);
}

/* ---------- 6. Hero-блок с градиентом "северное сияние" (ТЗ 3.1) ---------- */
.hero-aurora {
    background: var(--gradient-aurora);
    border-radius: var(--radius-lg);
    /* ИСПРАВЛЕНО (по просьбе в чате): было 3.5rem по вертикали — заметно
       просторнее, чем на мобильной версии (2.25rem, см. медиа-запрос
       ниже), из-за чего категории под героем не попадали в первый экран
       на типичных ноутбучных экранах без прокрутки. */
    padding: 2.25rem 2.5rem;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.hero-aurora::after {
    /* лёгкое сияние — деликатный акцент, а не декоративный шум */
    content: "";
    position: absolute;
    inset: -40% -10% auto auto;
    width: 60%;
    height: 140%;
    background: radial-gradient(circle, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0) 65%);
    pointer-events: none;
}
.hero-aurora__content { max-width: 640px; position: relative; z-index: 1; }
.hero-aurora__title { font-size: 2.25rem; font-weight: 800; margin-bottom: 0.5rem; }
.hero-aurora__subtitle { font-size: 1.05rem; opacity: 0.92; margin-bottom: 1.25rem; }
.hero-aurora__cta { color: var(--color-teal-dark); font-weight: 700; }

/* Новое, перед деплоем (по просьбе в чате — "фон практически не видно").
   Раньше: showcase-bg::before было почти невидимой тенью фото (opacity
   0.32) поверх и так светлого --color-bg — отсюда и жалоба. Северное
   сияние — это свет на тёмном небе, не пастельная плашка на белом, так
   что вместо подстройки цифры opacity подложка пересобрана под то, что
   она и должна изображать: то же самое фото Ягров (app/static/img/
   yagry-hero-dark.jpg — та же картинка, что и yagry-hero.jpg выше по
   этому файлу, только пересвечена через Pillow под полярную ночь, не
   новый кадр), высокая непрозрачность, тёмный фон-подложка на случай,
   где фото не закрывает весь блок. Используется ТОЛЬКО на главной (см.
   main/index.html) — на auth-страницах (login/register) showcase-bg
   по-прежнему оборачивает просто auth-card, тот же тёмный фон работает
   там как атмосферный задник без дополнительной вёрстки.

   overflow: hidden на обёртке — не даёт скруглению углов "потеряться" и
   не даёт margin вложенных секций пробить рамку подложки. */
.showcase-bg {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--color-night);
}
.showcase-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('/static/img/yagry-hero-dark.jpg');
    background-size: cover;
    background-position: center 45%;
    /* Дополнительная тёмная растяжка поверх самого фото — сверху чуть
       сильнее (там начинается текст героя), снизу тоже (переход к
       категориям на светлом фоне ниже не должен быть резким обрывом). */
    background-image: linear-gradient(180deg, rgba(4,16,20,0.55) 0%, rgba(4,16,20,0.25) 45%, rgba(4,16,20,0.75) 100%), url('/static/img/yagry-hero-dark.jpg');
    pointer-events: none;
    z-index: 0;
}
.showcase-bg > * { position: relative; z-index: 1; }

/* Анимированное сияние — два мягких пятна (бирюзовое и фиолетовое,
   в цветах --gradient-aurora), дрейфующих очень медленно.
   mix-blend-mode: screen — та же логика, что и у любого светового
   наложения: цвет складывается аддитивно с тёмным фото под ним, поэтому
   выглядит как свет, а не как цветное пятно краски поверх картинки.
   Только на главной (элементы добавляются в main/index.html, не через
   CSS ::before/::after — так их можно не выводить на auth-страницах,
   где это было бы лишним движением ради самой формы входа). */
.aurora-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(52px);
    mix-blend-mode: screen;
    opacity: 0.75;
    z-index: 0;
    pointer-events: none;
    animation: aurora-drift 14s ease-in-out infinite alternate;
}
.aurora-glow--teal {
    width: 420px;
    height: 300px;
    background: radial-gradient(circle, rgba(93,202,165,0.85) 0%, rgba(93,202,165,0) 70%);
    top: -100px;
    left: 6%;
}
.aurora-glow--violet {
    width: 380px;
    height: 260px;
    background: radial-gradient(circle, rgba(127,119,221,0.85) 0%, rgba(127,119,221,0) 70%);
    top: -60px;
    right: 4%;
    animation-delay: -6s;
}
@keyframes aurora-drift {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(-26px, 20px) scale(1.08); }
}
/* Уважаем prefers-reduced-motion — сияние остаётся видно (opacity/blur
   никуда не деваются), просто перестаёт двигаться. */
@media (prefers-reduced-motion: reduce) {
    .aurora-glow { animation: none; }
}

/* Контент героя на главной — тот же текст/CTA, что раньше рендерил
   .hero-aurora (который остаётся как класс, просто больше не используется
   на главной — см. main/index.html), но БЕЗ собственного градиентного
   фона: теперь фон даёт сама тёмная showcase-bg, герой — просто текст на
   ней, не отдельная карточка поверх карточки. */
/* ИСПРАВЛЕНО (по правке в чате — сначала неверно понял как "уже",
   оказалось "ниже"): было padding 3rem/3.5rem сверху/снизу (в сумме
   104px) — специально увеличено при переходе на тёмный фон, чтобы дать
   фото/сиянию больше пространства, но по факту получилось выше, чем
   нужно. Уменьшено в сумме на ~64px (среднее между 1,5 и 2 см при
   96dpi/100% масштабе, 1 см ≈ 37,8px) — до 1rem/1.5rem (40px в сумме). */
.hero-content { position: relative; padding: 1rem 2.5rem 1.5rem; color: #fff; }
.hero-content__eyebrow {
    color: #9FE1CB;
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.hero-content__title { font-size: 2.25rem; font-weight: 800; margin-bottom: 0.5rem; max-width: 640px; }
.hero-content__subtitle { font-size: 1.05rem; opacity: 0.9; margin-bottom: 1.25rem; max-width: 560px; }
.hero-content__cta { color: var(--color-teal-dark); font-weight: 700; }

/* ---------- 7. Категории на главной ---------- */
.category-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 1.25rem 0.75rem;
    color: var(--color-text);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.category-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
    color: var(--color-text);
}
.category-tile__icon {
    font-size: 1.6rem;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-ice);
    color: var(--color-teal-dark);
}
.category-tile__name { font-size: 0.85rem; font-weight: 600; }

/* ---------- 8. Карточка заведения ---------- */
.business-card {
    display: block;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    color: var(--color-text);
    height: 100%;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.business-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
    color: var(--color-text);
}
.business-card__photo {
    aspect-ratio: 4 / 3; /* единое кадрирование фото — см. ТЗ 3.3 */
    width: 100%;
    background: var(--color-ice);
    /* НОВОЕ, перед деплоем (второй проход) — теперь сюда попадает не только
       иконка-плейсхолдер, но и реальное фото (app/media.py уже кадрирует
       файл до тех же 4:3 на сервере, это скорее подстраховка): overflow
       нужен явно здесь, а не только унаследованным от .business-card на
       карточке каталога — на странице заведения (business_detail.html)
       тот же класс используется БЕЗ обёртки .business-card вокруг. */
    overflow: hidden;
}
.business-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.business-card__photo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--color-teal);
    background: linear-gradient(135deg, var(--color-ice) 0%, var(--color-violet-fill) 100%);
}
.business-detail__photo { border-radius: var(--radius-lg); font-size: 3.5rem; }
.business-card__body { padding: 1.1rem 1.25rem 1.25rem; }
.business-card__name { font-size: 1.05rem; font-weight: 700; margin: 0.35rem 0 0.35rem; }
.business-card__category, .business-card__address { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 0.15rem; }
.business-card__price { font-size: 0.85rem; font-weight: 600; color: var(--color-text); }

/* Кнопка «в избранное» — новое, перед деплоем, второй проход (ТЗ, раздел 9:
   "избранное"). Сердечко поверх фото карточки, вне .business-card (см.
   main/_business_card.html про то, почему форма — не внутри <a>).
   ti-heart всегда один и тот же класс — ti-heart-filled не существует в
   подключённом шрифте (проверено тем же способом, что и ti-dental/ti-tooth
   в пункте 2 README): состояние "в избранном" передаётся модификатором
   --active, тот же принцип, что и review-star/review-star--filled выше. */
.business-card__favorite {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 2;
}
.business-card__favorite-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-text-muted);
    font-size: 1.05rem;
    box-shadow: var(--shadow-card);
    transition: color 0.1s ease, transform 0.1s ease;
}
.business-card__favorite-btn:hover { transform: scale(1.08); }
/* --color-violet, не отдельный "сердечный" красный/розовый — в палитре
   проекта (ТЗ 3.1) такого цвета нет вовсе, а заводить третий акцентный
   цвет ради одной кнопки значило бы разойтись с самой идеей единой
   палитры teal+violet; сигнал "в избранном" и так читается за счёт
   контраста цвет/не-цвет, не обязательно должен быть именно красным. */
.business-card__favorite-btn--active { color: var(--color-violet); }

/* Значок "Проверено" — плашка на фиолетовом фоне (см. ТЗ 3.1, 3.2) */
.badge-verified {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--color-violet-fill);
    color: var(--color-violet);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
}

/* Значок "Топ" — топ каталога (Этап 5, ТЗ 7.1). Тот же размер/форма, что
   и .badge-verified — семейство одинаковых плашек, — но градиент
   "северное сияние" вместо сплошного фиолетового: топ и "Проверено" не
   должны сливаться визуально, если оба стоят на одной карточке. */
.badge-topped {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--gradient-aurora);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
}

/* ---------- 9. Прочие блоки ---------- */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    color: var(--color-text-muted);
}
.empty-state .ti { font-size: 2rem; display: block; margin-bottom: 0.75rem; color: var(--color-teal); }

.stat-tile {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 1.1rem 1.25rem;
}
.stat-tile__value { font-size: 1.75rem; font-weight: 800; color: var(--color-teal-dark); }
.stat-tile__label { font-size: 0.8rem; color: var(--color-text-muted); }

.service-table thead th { color: var(--color-text-muted); font-size: 0.8rem; font-weight: 600; border-bottom-width: 1px; }
.service-table td, .service-table th { vertical-align: middle; }

.service-list__item { display: flex; justify-content: space-between; align-items: center; border-color: var(--color-border); }
.service-list__price { font-weight: 700; color: var(--color-teal-dark); white-space: nowrap; }

.schedule-table th, .schedule-table td { vertical-align: middle; }
.schedule-row__name { font-weight: 600; }
.schedule-table input[type="time"] { max-width: 130px; }

.error-page .ti { font-size: 3rem; color: var(--color-violet); }

.role-switch .btn { flex: 1; }

/* ---------- 10. Онлайн-запись (Этап 2) ---------- */

/* Саб-навигация кабинета бизнеса (Услуги/Мастера/Расписание/Записи) */
.dashboard-nav .nav-link {
    color: var(--color-text-muted);
    font-weight: 600;
    border-radius: var(--radius-sm);
    padding: 0.5rem 1rem;
}
.dashboard-nav .nav-link.active {
    background: var(--color-teal);
    color: #fff;
}

/* Разовые исключения расписания (ТЗ 5.2) */
.exception-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    border-color: var(--color-border);
}

/* Статусы записи — используются и в кабинете бизнеса, и в /my */
.booking-status {
    font-weight: 700;
    font-size: 0.72rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    white-space: nowrap;
}
.booking-status--pending {
    background: var(--color-ice);
    color: var(--color-teal-dark);
    border: 1px solid var(--color-teal);
}
.booking-status--confirmed { background: var(--color-teal); color: #fff; }
.booking-status--cancelled { background: var(--color-border); color: var(--color-text-muted); }
.booking-status--completed { background: var(--color-violet-fill); color: var(--color-violet); }
.booking-status--needs_reschedule { background: var(--color-violet); color: #fff; }

/* Индикатор шагов мастера записи */
.booking-steps { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.85rem; }
.booking-steps__item { color: var(--color-text-muted); font-weight: 600; }
.booking-steps__item--active { color: var(--color-teal-dark); }
.booking-steps__item--done { color: var(--color-teal); }
.booking-steps__sep { color: var(--color-border); font-size: 0.9rem; }

/* Шаг 1 — список услуг */
.booking-service-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    border-color: var(--color-border);
    color: var(--color-text);
}
.booking-service-item:hover { background: var(--color-ice); color: var(--color-text); }
.booking-service-item__price { font-weight: 700; color: var(--color-teal-dark); white-space: nowrap; }

/* Шаг 2 — карточки выбора мастера */
.master-pick-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 1rem 1.1rem;
    color: var(--color-text);
    height: 100%;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.master-pick-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); color: var(--color-text); }
.master-pick-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-ice);
    color: var(--color-teal-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.master-pick-card__name { font-weight: 700; }

/* Шаг 3 — лента дат */
.booking-date-strip { display: flex; gap: 0.6rem; overflow-x: auto; padding-bottom: 0.4rem; }
.booking-date-pill {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    min-width: 64px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.5rem;
    color: var(--color-text);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.booking-date-pill:hover { border-color: var(--color-teal); }
.booking-date-pill--active { background: var(--color-teal); border-color: var(--color-teal); color: #fff; }
.booking-date-pill__dow { font-size: 0.7rem; text-transform: uppercase; opacity: 0.75; }
.booking-date-pill__day { font-size: 1.15rem; font-weight: 800; line-height: 1.1; }
.booking-date-pill__month { font-size: 0.7rem; opacity: 0.75; }

/* Шаг 3 — грид слотов времени */
.booking-slot-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.booking-slot {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.9rem;
    font-weight: 600;
    color: var(--color-teal-dark);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.booking-slot:hover { border-color: var(--color-teal); }
.booking-slot--active { background: var(--color-teal); border-color: var(--color-teal); color: #fff; }

/* /my — личный кабинет клиента */
.my-booking-item { border-color: var(--color-border); }
.my-booking-item__note {
    background: var(--color-violet-fill);
    color: var(--color-violet);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.9rem;
    font-size: 0.85rem;
}
.my-booking-item__note .ti { margin-right: 0.25rem; }

/* ---------- 12. Клиенты и лояльность (Этап 4) ---------- */

/* Статусы клиента у заведения — та же форма, что и .booking-status выше,
   но своя палитра (см. ТЗ 6.1: none/vip/flagged/blocked) */
.client-status {
    font-weight: 700;
    font-size: 0.72rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    white-space: nowrap;
}
.client-status--none { background: var(--color-border); color: var(--color-text-muted); }
.client-status--vip { background: var(--gradient-aurora); color: #fff; }
.client-status--flagged { background: #FCEFD8; color: #8A5A00; border: 1px solid #E4B85A; }
.client-status--blocked { background: var(--color-text); color: #fff; }

/* Значок заслуженной награды по программе лояльности (ТЗ 6.2) */
.badge-reward {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--color-ice);
    color: var(--color-teal-dark);
    border: 1px solid var(--color-teal);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
}

.client-row__note-form textarea { min-height: 2.4rem; font-size: 0.85rem; }

/* ---------- 13. Монетизация и реклама (Этап 5) ---------- */

/* Статусы размещения — та же форма, что и .booking-status/.client-status
   выше (см. ТЗ 7.4: pending_review/awaiting_payment/active/rejected/
   expired_unpaid), палитра переиспользует уже введённые выше пары цветов
   по смыслу состояния, а не заводит новые. */
.promotion-status {
    font-weight: 700;
    font-size: 0.72rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    white-space: nowrap;
}
.promotion-status--pending_review {
    background: var(--color-ice);
    color: var(--color-teal-dark);
    border: 1px solid var(--color-teal);
}
.promotion-status--awaiting_payment { background: #FCEFD8; color: #8A5A00; border: 1px solid #E4B85A; }
.promotion-status--active { background: var(--color-teal); color: #fff; }
.promotion-status--rejected { background: var(--color-text); color: #fff; }
.promotion-status--expired_unpaid { background: var(--color-border); color: var(--color-text-muted); }

/* Баннер на всех страницах (ТЗ 7.1) — узкая полоса под навигацией, не
   доминирует над контентом страницы (max-height, а не просто "как есть":
   исходные изображения могут быть любых пропорций). */
.sitewide-banner__img {
    width: 100%;
    max-height: 160px;
    object-fit: cover;
    border-radius: var(--radius-md);
    display: block;
}

/* Баннер на главной (ТЗ 7.1) — своё место сразу после hero.
   ИСПРАВЛЕНО (по просьбе в чате): было 280px, затем 190px "чуть крупнее
   всесайтового" — теперь та же высота, что и у sitewide-banner__img
   (160px). Разный размер двух баннеров одного типа контента ничем не был
   обоснован, кроме истории правок. (Тёмный hero с сиянием — отдельное,
   ещё не перенесённое сюда превью, см. переписку в чате; эта правка не
   зависит от него и не отменяется, когда/если тот редизайн применят.) */
.home-banner__img {
    width: 100%;
    max-height: 160px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    display: block;
}

/* Блок акций на главной (ТЗ 7.1)
   Новое, перед деплоем — тонкая полоска слева тем же --gradient-aurora,
   что и у hero: небольшой, но узнаваемый маркер "это оплаченное
   размещение", не рескин обычной карточки контента (тот же приём, что и
   у .pro-trial-card/.stat-tile.locked в разделе аналитики выше — единый
   язык "это про деньги/продвижение" по всему сайту, не только здесь). */
.promo-block {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem 1rem 1.5rem;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.promo-block::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-aurora);
}
.promo-block__title { font-weight: 700; margin-bottom: 0.25rem; }

/* Лейбл "Партнёр" на баннере (ТЗ 7.1) — новое, перед деплоем. Сейчас
   нигде явно не подписано, что это реклама; явная подпись обычно
   повышает доверие, а не наоборот. Позиционируется поверх картинки
   баннера через обёртку .home-banner (см. base.html) — не трогает саму
   .home-banner__img, чтобы не переопределять object-fit/border-radius. */
.home-banner { position: relative; }
.home-banner__tag {
    position: absolute;
    top: 0.6rem;
    left: 0.9rem;
    z-index: 1;
    background: rgba(255,255,255,0.92);
    color: var(--color-text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
}

/* Предпросмотр материала на странице продвижения (business/promote.html,
   advertise/dashboard.html) — найдено в чате: предпросмотр показывал
   изображение целиком, а реальный баннер/акция обрезались под свой слот
   (object-fit: cover у .home-banner__img/.sitewide-banner__img/.promo-block
   img выше). Те же пропорции здесь через aspect-ratio + тот же object-fit,
   переключаются JS-ом по выбранному типу размещения (main.js:
   initPromotionMaterialPreview) — так предпросмотр честно показывает,
   что именно обрежется, ещё до отправки формы. */
.material-preview {
    overflow: hidden;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    max-width: 480px;
}
.material-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.material-preview--banner { aspect-ratio: 4 / 1; }  /* см. .sitewide-banner__img/.home-banner__img */
.material-preview--promo { aspect-ratio: 2 / 1; }    /* см. .promo-block img на главной */

/* ---------- 14. Отзывы и рейтинг (Этап 7) ---------- */

/* Суммарный рейтинг-бейдж на карточке каталога и странице заведения —
   Business.rating_avg/rating_count, не форма ввода. ti-star (контурная),
   не ti-star-filled — см. комментарий у .review-star ниже про то, почему
   -filled здесь не используется вовсе. */
.rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text);
}
.rating-badge .ti { color: var(--color-violet); }
.rating-badge__count { font-weight: 400; color: var(--color-text-muted); }

/* Статичный вывод оценки конкретного отзыва — 1-5 звёзд, без hover.
   ИСПРАВЛЕНО (второй заход): изначально предполагалось переключать класс
   иконки между ti-star и ti-star-filled, разница в цвете была лишь
   попутным первым багом. У единого CDN-файла tabler-icons.min.css (см.
   base.html), начиная с недавних версий библиотеки, классы с суффиксом
   -filled не имеют начертания вовсе — глиф пустой независимо от цвета
   (открытый баг апстрима: github.com/tabler/tabler-icons/issues/1452).
   Поэтому везде используется ОДНА и та же контурная иконка ti-star, а
   "закрашенность" передаётся исключительно модификатором класса. */
.review-star { color: var(--color-text-muted); }
.review-star--filled { color: var(--color-violet); }

/* Ответ бизнеса на отзыв — вне ТЗ, идея расширения (см. README.md, "Идеи
   для расширения сверх ТЗ", пункт 2). Левая граница + лёгкий сдвиг —
   стандартный визуальный приём "вложенности" ответа под отзывом (как у
   2ГИС/Google), без отдельной рамки-карточки, которая выглядела бы
   тяжеловесно для пары строк текста. */
.review-reply {
    margin-top: 0.6rem;
    padding: 0.6rem 0 0.6rem 0.9rem;
    border-left: 3px solid var(--color-violet-fill);
}
.review-item { border-color: var(--color-border); }
.review-item__meta { font-size: 0.8rem; color: var(--color-text-muted); }

/* Интерактивный выбор оценки в форме отзыва (app/booking/forms.py:
   ReviewForm.rating) — чистый CSS, без JS: радио-инпуты визуально скрыты,
   :checked/:hover на подписи стилизуют общий соседний селектор (~).
   row-reverse здесь + обратный порядок choices в самой форме (5→1) —
   вместе дают привычную подсветку "слева направо" при наведении/выборе.
   Иконка внутри label — тоже ti-star (см. комментарий выше), цвет
   переключается этими же правилами, а не сменой класса иконки. */
.star-rating { position: relative; display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 0.2rem; }
.star-rating input { position: absolute; opacity: 0; pointer-events: none; }
.star-rating label {
    font-size: 1.9rem;
    line-height: 1;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 0.15s ease;
}
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
    color: var(--color-violet);
}

/* ---------- 15. Расширенная аналитика (новое, перед деплоем, вне ТЗ) ---------- */

/* Баннер триала на /dashboard/stats — тот же --gradient-aurora, что и
   hero-aurora/client-status--vip: акцентный цвет для "особого" состояния
   аккаунта, не новая палитра под одну страницу. */
.pro-banner {
    background: var(--gradient-aurora);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.pro-banner__title { font-weight: 700; font-size: 0.95rem; margin: 0; }
.pro-banner__text { font-size: 0.85rem; opacity: 0.92; margin: 0; }
.pro-banner .btn-light { color: var(--color-teal-dark); }

/* Подписка уже оплачена — спокойнее триала: не градиент, а мягкий
   ice-фон с рамкой, тот же язык, что и promotion-status--pending_review
   (см. раздел 13) — "всё в порядке", не "скоро действие понадобится". */
.pro-banner--active {
    background: var(--color-ice);
    color: var(--color-teal-dark);
    border: 1px solid var(--color-teal);
}

/* Приглашение попробовать (доступа нет, триал ещё не запускали) — тот же
   градиент, что и pro-banner выше, но крупнее: это первое, что видит
   бизнес на пустом месте расширенной аналитики. */
.pro-trial-card {
    background: var(--gradient-aurora);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.75rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.pro-trial-card__title { font-weight: 800; font-size: 1.1rem; margin: 0 0 0.35rem; }
.pro-trial-card__text { font-size: 0.88rem; opacity: 0.92; margin: 0; max-width: 480px; }

/* Заблокированная карточка метрики (доступа нет, триал уже был) — та же
   геометрия/тень .stat-tile, только замок и приглушённое "•••" вместо
   значения. НЕ настоящая цифра под CSS blur — см. докстринг
   _compute_pro_analytics в app/business/routes.py: сервер вообще не
   отправляет реальные числа без доступа, blur можно было бы снять
   просмотром исходного кода страницы, а "•••" снимать нечем. */
.stat-tile.locked { position: relative; color: var(--color-text-muted); }
.stat-tile.locked .stat-tile__value { color: var(--color-text-muted); letter-spacing: 0.15em; }
.locked__icon {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-border);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

/* Столбчатая диаграмма загруженности по дням недели — семь простых
   div-баров без библиотеки графиков (в проекте её нигде больше нет,
   тащить ради одной диаграммы избыточно). Высота столбика — inline
   style, проценты считаются в шаблоне (business/stats.html), здесь
   только геометрия/цвет самих элементов. */
.weekday-bars { display: flex; align-items: flex-end; gap: 0.6rem; height: 120px; }
.weekday-bar { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.weekday-bar__track {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    background: var(--color-ice);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    overflow: hidden;
}
.weekday-bar__fill { width: 100%; background: var(--gradient-aurora); min-height: 3px; }
.weekday-bar__label { font-size: 0.72rem; color: var(--color-text-muted); margin-top: 0.4rem; }

/* ---------- 16. Чеки «Мой налог» (новое, перед деплоем, вне ТЗ) ---------- */

/* Статус чека — та же форма/приём, что и promotion-status/client-status
   (см. разделы 12–13): плашка-таблетка, палитра по смыслу состояния, не
   новая. FAILED красный неспроста ярче обычного — это единственный
   статус в таблице, требующий действия, должен цеплять взгляд в списке. */
.tax-receipt-status {
    font-weight: 700;
    font-size: 0.72rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    white-space: nowrap;
}
.tax-receipt-status--pending { background: var(--color-border); color: var(--color-text-muted); }
.tax-receipt-status--issued { background: var(--color-teal); color: #fff; }
.tax-receipt-status--failed { background: #FBE4E1; color: #A32D2D; border: 1px solid #E8A29B; }

/* Тайл на /admin с "требует внимания" (сейчас — только незавершённые
   чеки) — та же геометрия .stat-tile, акцент цветом рамки/значения. */
.stat-tile--warning { border: 1px solid #E8A29B; }
.stat-tile--warning .stat-tile__value { color: #A32D2D; }

/* ---------- 17. Picker иконок категорий (новое, перед деплоем, второй
   проход — см. README.md, "Второй проход перед деплоем", пункт 2) ----------
   Тот же принцип, что и review-star выше: выбор передаётся чистым CSS
   через :checked + соседний селектор, JS (main.js: initIconPickers) нужен
   только для показа/скрытия ручного поля у варианта "Другое", не для
   самого выбора иконки. Макрос — app/templates/_macros/icon_picker.html,
   общий для admin/categories.html, admin/category_edit.html и
   auth/register.html. */
.icon-picker { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.icon-picker__option { position: relative; cursor: pointer; text-align: center; width: 72px; }
.icon-picker__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    /* НЕ display:none — скрытый таким образом инпут выпал бы из таб-порядка
       и был бы недоступен с клавиатуры вовсе, а не просто визуально скрыт. */
}
.icon-picker__tile {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    font-size: 1.3rem;
    color: var(--color-text-muted);
    transition: border-color 0.1s ease, background 0.1s ease, color 0.1s ease;
}
.icon-picker__name {
    display: block;
    font-size: 0.7rem;
    color: var(--color-text-muted);
    margin-top: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.icon-picker__input:checked + .icon-picker__tile {
    border-color: var(--color-violet);
    background: var(--color-violet-fill);
    color: var(--color-violet);
}
.icon-picker__input:checked ~ .icon-picker__name { color: var(--color-violet); font-weight: 600; }
.icon-picker__input:focus-visible + .icon-picker__tile { outline: 2px solid var(--color-violet); outline-offset: 2px; }

/* ---------- 18. Адаптивность ---------- */
@media (max-width: 767.98px) {
    .hero-aurora { padding: 2.25rem 1.5rem; }
    .hero-aurora__title { font-size: 1.7rem; }

    /* Новое, перед деплоем — .hero-content заменил .hero-aurora на
       главной (см. main/index.html), то же сужение отступов/заголовка.
       ИСПРАВЛЕНО вместе с десктопной версией выше — пропорционально
       меньший отступ, не тот же абсолютный минус (мобильный экран и так
       начинал с меньшего запаса). */
    .hero-content { padding: 0.75rem 1.5rem 1.25rem; }
    .hero-content__title { font-size: 1.7rem; }

    /* Новое, вместе с разделом 15 выше — на узком экране CTA-кнопка под
       текстом читается лучше, чем прижатая вправо и обрезанная. */
    .pro-banner, .pro-trial-card { flex-direction: column; align-items: flex-start; }
    .weekday-bars { gap: 0.3rem; height: 90px; }
    .weekday-bar__label { font-size: 0.65rem; }
}