/* ===== Общий цвет фона сайта =====
   --page-bg - "переменная" CSS: цвет задаётся ОДИН раз здесь, а дальше
   используется как var(--page-bg). Чтобы поменять фон всего сайта
   (правая половина первого экрана, второй экран, края страницы) -
   меняем только это значение */
:root {
    --page-bg: #111111;
}

.bg-split {
    position: absolute;
    inset: 0;
    display: flex;
    z-index: 0;
    overflow: hidden;
}
.bg-left {
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.photo-strip {
    display: flex;
    flex-direction: column;
    animation: scrollUp 25s linear infinite;
    will-change: transform;
}
.photo-strip img {
    width: 100%;
    height: auto;
    display: block;
}
@keyframes scrollUp {
    from { transform: translateY(0); }
    to { transform: translateY(-50%); }
}
.bg-right {
    width: 50%;
    height: 100%;
    background: var(--page-bg);       /* тот же фон, что у второго экрана */
    position: relative;
}
.phone-video {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    object-fit: cover;
    border-radius: 30px;
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.15);
}
/* Белая дымка - только над ЛЕВОЙ половиной (над фото), чтобы смягчить их.
   inset: 0 50% 0 0 - отступы сверху/справа/снизу/слева: справа 50%,
   т.е. дымка не заходит на правую тёмную половину и не осветляет её */
.bg-overlay {
    position: absolute;
    inset: 0 50% 0 0;
    background: rgba(255, 255, 255, 0.1);
    z-index: 1;
    pointer-events: none;
}
.table-transparent th, .table-transparent td {
  background-color: transparent !important;
}
/* .table-transparent {
  max-width: 700px;
  margin: 0 auto;
  font-size: 0.9rem;
  font-weight: 600;
  background-color: rgba(255, 255, 255, 0.55) !important;
  border-radius: 12px;
  overflow: hidden;
} */
.gradient-text {
  background: linear-gradient(90deg, #ffffff, #999999);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    /* svh - "маленькая высота экрана": на iPhone 100vh выше видимой части
       (за панелью Safari), а 100svh - ровно видимая часть. Старые браузеры
       svh не знают и возьмут строку выше (100vh) */
    height: 100svh;
    overflow: hidden;
    isolation: isolate;
}

.scroll-divider {
  display: flex;
  align-items: center;
  width: 96%;
  max-width: 1800px;
  margin: 2rem auto;
  position: relative;
  z-index: 1;
}
.scroll-divider::before,
.scroll-divider::after {
  content: "";
  flex: 1;
  height: 1px;
}
.scroll-divider::before {
  background: linear-gradient(90deg, hsla(0, 0%, 94%, 0) 3%, #fff 70%);
}
.scroll-divider::after {
  background: linear-gradient(270deg, hsla(0, 0%, 94%, 0) 3%, #fff 70%);
}

.services-section {
  width: 96%;
  max-width: 1600px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* Заголовок секции ("УСЛУГИ", "ПОЧЕМУ BU-DIAS ?").
   Inter обычной толщины (400) + градиент
   (градиент даёт класс .gradient-text, который стоит рядом в HTML).
   Толщину можно менять числом font-weight: 400 - обычный, 700 - жирный,
   800 - очень жирный (только эти три подключены в base.html) */
.section-title {
  font-family: 'Inter', sans-serif;
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 60px;
  text-align: center;
}

.cards-row {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
}

/* Карточка услуги: тёмный фон + тонкая светлая рамка.
   transition - перечисляем, какие свойства меняются плавно и за сколько:
   сдвиг (transform), цвет рамки, тень и фон - все за 0.3 секунды */
.service-card {
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 36px 28px;
  flex: 1 1 300px;
  transition: transform 0.3s ease, border-color 0.3s ease,
              box-shadow 0.3s ease, background-color 0.3s ease;
}

/* При наведении мышкой карточка:
   - приподнимается на 6px (translateY - сдвиг по вертикали, минус = вверх);
   - рамка становится ярче;
   - фон чуть светлеет;
   - появляется мягкое белое свечение вокруг (box-shadow) */
.service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.45);
  background-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.08);
}

/* Текст в карточке услуги - белый и жирный, как заголовки преимуществ */
.service-card p {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: #ffffff;
  text-align: center;
  margin: 0;
}

/* ===== Страница "Услуги и цены" (services.html) ===== */

/* У страницы услуг нет первого экрана, поэтому тёмный лист начинается
   с самого верха. Отступ сверху 140px - чтобы заголовок не оказался
   под логотипом и меню.
   Селектор из ДВУХ классов (.page-sheet.services-page = "элемент, у которого
   есть оба класса") "сильнее" одиночного .page-sheet - иначе padding-top: 60px
   из правила .page-sheet ниже по файлу перебил бы наш отступ */
.page-sheet.services-page {
  padding-top: 140px;
}

/* Отступ под последним рядом карточек на странице услуг.
   Нужен, потому что у нижней линии margin-top: auto ("займи всё свободное
   место"): если страница выше экрана, свободного места нет, auto = 0 -
   и без этого отступа линия прилипала бы к карточкам */
.services-page .services-section {
  margin-bottom: 70px;
}

/* Серый поясняющий текст по центру (на странице услуг - сообщение
   "Список услуг скоро появится", если услуг в базе нет) */
.page-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: #a0a0a0;
  text-align: center;
  margin: -30px 0 50px;           /* подтягиваем ближе к заголовку */
}

/* Заголовок раздела ("Основные услуги", "Плюшки") - меньше главного,
   бронзовый, разрежённые заглавные буквы */
.price-group-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c08552;
  text-align: center;
  margin: 0 0 28px;
}
/* Второй раздел отодвигаем от карточек первого */
.price-grid + .price-group-title {
  margin-top: 70px;
}

/* Ряды карточек: по 3 в ряд, НЕПОЛНЫЙ ряд (например, 2 карточки) - по центру.
   Здесь flex, а не grid: flex с flex-wrap: wrap переносит карточки на новую
   строку, а justify-content: center ставит каждую строку по центру.
   (grid прижал бы неполный ряд к левому краю.)
   max-width + margin auto - блок не растягивается на очень широких экранах */
.price-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;         /* карточки не тянутся по высоте за соседями */
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
  text-align: left;
}

/* Ширина карточки = треть ряда минус промежутки.
   В ряду 3 карточки и 2 промежутка по 24px: (100% - 2 × 24px) / 3.
   flex: 0 0 ... - карточка не растягивается и не сжимается: ширина у всех одна */
.price-grid .price-card {
  flex: 0 0 calc((100% - 2 * 24px) / 3);
}
/* Планшет - 2 в ряд (1 промежуток), телефон - 1 в ряд */
@media (max-width: 992px) {
  .price-grid .price-card {
    flex-basis: calc((100% - 24px) / 2);
  }
}
@media (max-width: 576px) {
  .price-grid .price-card {
    flex-basis: 100%;
  }
}

/* Карточка услуги с ценой - в стиле карточек главной:
   тёмный фон, тонкая рамка, при наведении приподнимается.
   display: flex + column - содержимое идёт сверху вниз,
   а цена (margin-top: auto) прижимается к низу карточки -
   так цены во всех карточках ряда стоят на одной линии */
.price-card {
  position: relative;              /* для растянутой на всю карточку ссылки */
  display: flex;
  flex-direction: column;
  min-height: 210px;               /* одинаковая высота у всех СВЁРНУТЫХ карточек -
                                      и с "Подробнее", и без, и с названием в 2 строки */
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 28px 26px 24px;
  transition: transform 0.3s ease, border-color 0.3s ease,
              box-shadow 0.3s ease, background-color 0.3s ease;
}
/* Карточка "Подарить сертификат" целиком - ссылка <a>:
   убираем синий цвет и подчёркивание, которые ссылкам ставит Bootstrap */
a.price-card,
a.price-card:hover {
  color: inherit;
  text-decoration: none;
}

/* Ссылка на запись - это название услуги (белое, без подчёркивания),
   но её кликабельная область растянута на ВСЮ карточку:
   псевдоэлемент ::after - прозрачный блок поверх карточки (inset: 0).
   Для этого у карточки position: relative (см. .price-card) */
.price-card-link {
  color: inherit;
  text-decoration: none;
}
.price-card-link:hover {
  color: inherit;                    /* Bootstrap красит ссылки при наведении - запрещаем */
}
.price-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 16px;
}

/* ===== Описание услуги - всплывающая подсказка при наведении на "Подробнее" ===== */

/* Обёртка: лежит ПОВЕРХ растянутой ссылки карточки (z-index: 2) -
   поэтому наведение/нажатие на "Подробнее" не открывает запись.
   position: relative - подсказка позиционируется относительно обёртки */
.service-more {
  position: relative;
  z-index: 2;
  align-self: flex-start;            /* обёртка шириной с надпись, а не на всю карточку */
  margin: -10px 0 22px;
  font-family: 'Inter', sans-serif;
}

/* Надпись "Подробнее": бронзовая, с пунктирным подчёркиванием -
   так обычно помечают текст, у которого есть подсказка */
.service-more-btn {
  padding: 0;
  font-family: inherit;
  font-size: 0.85rem;
  color: #c08552;
  background: none;
  border: none;
  border-bottom: 1px dashed rgba(192, 133, 82, 0.6);
  cursor: help;
}
.service-more-btn:hover,
.service-more-btn:focus-visible {
  color: #e3b48a;
  outline: none;
}

/* Сама подсказка: появляется ПОД надписью, поверх карточки.
   В покое невидима (opacity: 0 + visibility: hidden) */
.service-more-pop {
  position: absolute;
  top: calc(100% + 10px);
  left: -12px;
  z-index: 10;
  width: 300px;
  max-width: calc(100vw - 40px);     /* на узком телефоне не вылезет за экран */
  padding: 14px 16px;
  background-color: #222222;
  border: 1px solid rgba(192, 133, 82, 0.6);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
/* Невидимый "мостик" над подсказкой: пока мышка едет от надписи
   к подсказке через промежуток 10px, подсказка не пропадает */
.service-more-pop::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}
/* Показываем: мышка над надписью или подсказкой (:hover),
   либо надпись "выбрана" нажатием / клавишей Tab (:focus-within) */
.service-more:hover .service-more-pop,
.service-more:focus-within .service-more-pop,
.service-more.is-open .service-more-pop {      /* is-open - открыли нажатием (iPhone, скрипт в base.html) */
  opacity: 1;
  visibility: visible;
  transform: none;
}
/* Текст описания внутри подсказки - чуть светлее, без отступов */
.service-more-pop .price-card-desc {
  margin: 0;
  color: #d0d0d0;
}

/* Карточка, в которой открыта подсказка, - поверх соседних карточек
   (иначе подсказка, вылезающая вниз, ушла бы ПОД карточки следующего ряда) */
.price-card:hover,
.price-card:focus-within {
  z-index: 5;
}

.price-card:hover {
  transform: translateY(-6px);
  border-color: rgba(192, 133, 82, 0.6);       /* рамка становится бронзовой */
  background-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 10px 30px rgba(192, 133, 82, 0.15);
}

/* Название услуги */
.price-card-name {
  font-family: 'Inter', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 12px;
}

/* Длительность: серая строка с иконкой часов */
.price-card-duration {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  color: #a0a0a0;
  margin: 0 0 24px;
}
.price-card-duration svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Цена: крупная, бронзовая, прижата к низу карточки (margin-top: auto) */
/* Описание услуги в карточке: мелкий серый текст.
   Абзац (<p>) или список (<ul>) - стили общие */
.price-card-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #a0a0a0;
  margin: -8px 0 22px;              /* ближе к длительности, с отступом до цены */
  padding: 0;
  list-style: none;                 /* убираем стандартные чёрные точки списка */
}
/* Пункт списка: свой маркер - маленькая бронзовая точка слева */
.price-card-desc li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 6px;
}
.price-card-desc li:last-child {
  margin-bottom: 0;
}
.price-card-desc li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #c08552;
}

/* Цена: в ПРАВОМ НИЖНЕМ углу карточки.
   margin-top: auto - прижимает цену к низу карточки;
   align-self: flex-end - ставит её к правому краю (карточка - flex-колонка,
   и align-self двигает элемент по горизонтали).
   font-weight: 400 - тонкие линии цифр (раньше было 800 - очень жирно) */
.price-card-price {
  margin: auto 0 0;
  align-self: flex-end;
  font-family: 'Inter', sans-serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
  color: #d9a272;
}
/* Карточка "Подарить сертификат": вместо цены - иконка подарка
   в правом нижнем углу (там же, где цены у соседних карточек) */
.price-card-gift-icon {
  width: 40px;
  height: 40px;
  margin-top: auto;
  align-self: flex-end;
  fill: none;
  stroke: #d9a272;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* "BYN" после цены - мельче и тоньше */
.price-card-price span {
  font-size: 1rem;
  font-weight: 400;
  color: #a0a0a0;
}

/* ===== Страница записи (book.html) ===== */

/* Колонка формы: не шире 820px, по центру; отступ снизу - чтобы нижняя
   линия не прилипала (та же причина, что на странице услуг) */
.book-wrap {
  width: 92%;
  max-width: 820px;
  margin: 0 auto 70px;
  position: relative;
  z-index: 1;
}

/* Шаг формы ("1. Услуга", "2. Дата", "3. Время") - отступ между шагами */
.book-step {
  margin-top: 50px;
}

/* Выбранная услуга: название и время слева, цена справа */
.book-service {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 24px 26px;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(192, 133, 82, 0.6);
  border-radius: 16px;
}
.book-service-name {
  font-family: 'Inter', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 10px;
}
.book-service .price-card-duration {
  margin: 0;
}
.book-service .service-more {
  margin: 12px 0 0;
}
.book-service .price-card-price {
  margin: 0;
  align-self: center;               /* здесь блок - строка: цена справа по центру высоты */
  white-space: nowrap;              /* "40–45 BYN" не переносится */
}

/* "Сменить услугу" + выпадающий список */
.book-change-service {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  font-family: 'Inter', sans-serif;
  color: #a0a0a0;
}
.book-change-service label {
  white-space: nowrap;
}
/* Выпадающий список в тёмном стиле.
   appearance: none - убираем стандартный вид списка браузера,
   стрелку рисуем сами (маленькая картинка-SVG в background-image) */
.book-select {
  flex: 1;
  min-width: 0;
  padding: 12px 40px 12px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  color: #e6e6e6;
  background-color: rgba(255, 255, 255, 0.04);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c08552' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.book-select:focus {
  outline: none;
  border-color: #c08552;
}
/* Пункты раскрытого списка - тёмные (иначе на некоторых системах белые) */
.book-select option {
  background-color: #1a1a1a;
  color: #e6e6e6;
}

/* Ряд кнопок-"таблеток" (даты, время): переносятся на новую строку, по центру */
.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* Одна кнопка-"таблетка" */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 84px;
  padding: 12px 18px;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  color: #e6e6e6;
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}
a.chip:hover {
  color: #ffffff;
  border-color: #c08552;
  transform: translateY(-2px);
}
/* Кнопка даты - в две строки: день недели сверху, число снизу */
.chip--date {
  flex-direction: column;
  gap: 2px;
  min-width: 96px;
}
.chip-weekday {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #a0a0a0;
}
/* Выбранная дата/время - бронзовая заливка, тёмный текст */
.chip--active,
a.chip--active:hover {
  color: #1a1a1a;
  background: linear-gradient(135deg, #e3b48a 0%, #c08552 50%, #94603a 100%);
  border-color: transparent;
}
.chip--active .chip-weekday {
  color: #3a2a1d;
}
/* День, в котором всё занято - бледный, нажать нельзя */
.chip--disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Строка над временем: "← Другая дата" слева, выбранный день по центру */
.book-date-bar {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  margin-bottom: 20px;
}
/* Ссылка "← Другая дата": прижата к левому краю (position: absolute) */
.book-back {
  position: absolute;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 8px 10px;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: #a0a0a0;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.book-back:hover {
  color: #ffffff;
  border-color: #c08552;
}
.book-back svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Выбранный день: "Вторник, 6 октября" */
.book-date-selected {
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

/* Итог записи - сразу под временем, с небольшим отступом */
.book-summary {
  margin-top: 28px;
  text-align: center;
  padding: 32px 26px;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(192, 133, 82, 0.6);
  border-radius: 16px;
  font-family: 'Inter', sans-serif;
}
.book-summary-title {
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c08552;
  margin: 0 0 12px;
}
.book-summary-line {
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 6px;
}
.book-summary-when {
  color: #d9a272;
  margin-bottom: 24px;
}
/* Кнопка "Записаться" пока неактивна (disabled) - приглушённая, без эффектов */
.btn-bronze:disabled,
.btn-bronze:disabled:hover {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.book-summary-note {
  font-size: 0.85rem;
  color: #8a8a8a;
  margin: 14px 0 0;
}
/* "Войти и записаться" - не шире обычной кнопки, по центру */
.book-login {
  max-width: 340px;
  margin: 0 auto;
}

/* На телефоне: услуга и цена - друг под другом */
@media (max-width: 576px) {
  .book-service {
    flex-direction: column;
    align-items: flex-start;
  }
  .book-change-service {
    flex-direction: column;
    align-items: stretch;
  }
  .book-date-bar {
    flex-direction: column;
    gap: 12px;
  }
  .book-back {
    position: static;
    align-self: flex-start;
  }
}

/* ===== Форма подарочного сертификата (certificate.html) ===== */

/* Форма - узкая колонка по центру */
.cert-form {
  max-width: 520px;
  margin: 40px auto 0;
  font-family: 'Inter', sans-serif;
}

/* Одно поле формы (подпись + подсказка + ввод + ошибка).
   fieldset - "группа полей" (для способа оплаты): убираем его стандартную рамку */
.form-field {
  margin: 0 0 30px;
  padding: 0;
  border: none;
  min-width: 0;
}
.form-label {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 4px;
  padding: 0;
}
.form-hint {
  font-size: 0.85rem;
  color: #8a8a8a;
  margin: 0 0 12px;
}

/* ===== Выноска (tooltip): значок "i" + всплывающее пояснение ===== */
/* Класс называется info-tip, а НЕ tooltip: в Bootstrap уже есть свой .tooltip
   (скрытый, opacity: 0) - с ним наша выноска была бы невидимой */
.form-hint {
  display: flex;
  align-items: center;
  gap: 8px;
}
.info-tip {
  position: relative;                /* пояснение позиционируется относительно значка */
  display: inline-flex;
}
/* Значок "i" в бронзовом кружке */
.info-tip-btn {
  width: 18px;
  height: 18px;
  padding: 0;
  font-family: Georgia, serif;
  font-size: 0.75rem;
  font-style: italic;
  font-weight: 700;
  line-height: 16px;
  color: #c08552;
  background: transparent;
  border: 1px solid #c08552;
  border-radius: 50%;
  cursor: help;                      /* курсор со знаком вопроса */
}
/* Само пояснение: над значком, по центру, со стрелочкой вниз.
   В покое невидимо (opacity: 0 + visibility: hidden) */
.info-tip-text {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  z-index: 10;
  width: max-content;
  max-width: 230px;
  padding: 10px 14px;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #ffffff;
  text-align: center;
  background-color: #222222;
  border: 1px solid rgba(192, 133, 82, 0.6);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
/* Стрелочка снизу пояснения - маленький повёрнутый квадрат */
.info-tip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 10px;
  height: 10px;
  background-color: #222222;
  border-right: 1px solid rgba(192, 133, 82, 0.6);
  border-bottom: 1px solid rgba(192, 133, 82, 0.6);
  transform: translate(-50%, -50%) rotate(45deg);
}
/* Показываем: наведение мышкой ИЛИ значок в фокусе (нажали на телефоне / Tab) */
.info-tip:hover .info-tip-text,
.info-tip-btn:focus + .info-tip-text,
.info-tip.is-open .info-tip-text {             /* is-open - открыли нажатием (iPhone) */
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Поле ввода с "приставкой" (+375 слева или BYN справа) - одна рамка на всё */
.input-group {
  display: flex;
  align-items: stretch;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
/* :focus-within - "внутри есть поле, в котором сейчас мигает курсор" - рамка бронзовая */
.input-group:focus-within {
  border-color: #c08552;
}
.input-group--error {
  border-color: #d9534f;
}
.input-addon {
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 1rem;
  color: #c08552;
  background-color: rgba(255, 255, 255, 0.04);
}
.form-input {
  flex: 1;
  min-width: 0;
  padding: 14px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: #ffffff;
  background: transparent;
  border: none;
  outline: none;
}
.form-input::placeholder {
  color: #5f5f5f;
}
/* Убираем стрелочки вверх/вниз у поля с числом (сумма) */
.form-input[type="number"]::-webkit-outer-spin-button,
.form-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.form-input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Текст ошибки под полем - красноватый */
.form-error {
  font-size: 0.85rem;
  color: #e07b77;
  margin: 8px 0 0;
}

/* Способ оплаты: две кнопки-таблетки в ряд */
.pay-options {
  display: flex;
  gap: 12px;
}
.pay-option {
  flex: 1;
  position: relative;
}
/* Сам кружочек radio прячем (но он остаётся в форме и работает) */
.pay-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pay-option label {
  width: 100%;
  cursor: pointer;
}
.pay-option label:hover {
  border-color: #c08552;
}
/* input:checked + label - "label, который стоит сразу после ВЫБРАННОГО кружочка":
   выбранный способ оплаты - бронзовый */
.pay-option input:checked + label {
  color: #1a1a1a;
  background: linear-gradient(135deg, #e3b48a 0%, #c08552 50%, #94603a 100%);
  border-color: transparent;
}
/* Рамка при выборе клавиатурой (Tab + стрелки) - для доступности */
.pay-option input:focus-visible + label {
  outline: 2px solid #c08552;
  outline-offset: 3px;
}

/* ===== Всплывающее окно (например, "Заявка принята!") ===== */
/* ВАЖНО: классы называются popup-..., а НЕ modal-...: в Bootstrap уже есть
   свой класс .modal с display: none (Bootstrap прячет свои окна и показывает
   их через JavaScript). С именем .modal наше окно было бы невидимым */

/* Затемнение на весь экран поверх всего сайта.
   position: fixed + inset: 0 - растянуто на всё окно браузера;
   z-index: 2000 - выше шапки, меню и кнопки "Запись" (у них 1000);
   display: flex + center - окно ровно по центру экрана */
.popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: popup-fade 0.3s ease-out;
}

/* Само окно */
.popup {
  width: 100%;
  max-width: 440px;
  padding: 36px 30px 32px;
  text-align: center;
  font-family: 'Inter', sans-serif;
  background-color: #161616;
  border: 1px solid rgba(192, 133, 82, 0.6);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(192, 133, 82, 0.15);
  animation: popup-pop 0.35s ease-out;
}

/* Бронзовая галочка в круге */
.popup-icon {
  width: 56px;
  height: 56px;
  padding: 12px;
  margin-bottom: 18px;
  fill: none;
  stroke: #1a1a1a;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  background: linear-gradient(135deg, #e3b48a 0%, #c08552 50%, #94603a 100%);
  border-radius: 50%;
}
.popup-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 12px;
}
.popup-text {
  font-size: 1rem;
  line-height: 1.5;
  color: #bdbdbd;
  margin: 0 0 28px;
}

/* Появление: затемнение плавно проявляется, окно чуть "выпрыгивает" */
@keyframes popup-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes popup-pop {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .popup-overlay,
  .popup {
    animation: none;
  }
}

/* ===== Страница "Как найти?" (contacts.html) ===== */

/* Обёртка страницы: до 1100px по центру; отступ снизу - чтобы нижняя линия
   не прилипала (см. "подводные камни" про margin-top: auto в README) */
.contacts-wrap {
  width: 92%;
  max-width: 1100px;
  margin: 0 auto 70px;
  position: relative;
  z-index: 1;
}

/* Две колонки: слева карточки (1 часть ширины), справа карта (1.6 части).
   grid-template-columns: 1fr 1.6fr - "fr" = доля свободного места */
.contacts-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 28px;
  margin-top: 10px;
  align-items: start;
}

/* Левая колонка: карточки друг под другом */
.contacts-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Одна карточка: иконка в бронзовом кружке слева, текст справа */
.contact-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 22px 22px;
  font-family: 'Inter', sans-serif;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  transition: border-color 0.3s ease;
}
.contact-card:hover {
  border-color: rgba(192, 133, 82, 0.6);
}
.contact-icon {
  flex: 0 0 44px;
  height: 44px;
  padding: 10px;
  fill: none;
  stroke: #c08552;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  background-color: rgba(192, 133, 82, 0.12);
  border: 1px solid rgba(192, 133, 82, 0.35);
  border-radius: 50%;
}
.contact-icon .contact-icon-dot {
  fill: #c08552;
  stroke: none;
}
/* Подпись карточки ("АДРЕС") - бронзовая, мелкая, заглавными */
.contact-label {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c08552;
  margin: 2px 0 6px;
}
/* Главное значение ("г. Барановичи, ул. Гагарина, 26") */
.contact-value {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 4px;
}
.contact-value--link {
  text-decoration: none;
}
.contact-value--link:hover {
  color: #e3b48a;
}
/* Мелкая серая приписка (координаты, пояснение) */
.contact-note {
  font-size: 0.85rem;
  color: #8a8a8a;
  margin: 0;
}
/* Ссылка "Выбрать услугу и время →" */
.contact-link {
  font-size: 0.9rem;
  color: #c08552;
  text-decoration: none;
}
.contact-link:hover {
  color: #e3b48a;
}

/* Рамка карты: скруглённая, с бронзовой рамкой и мягким свечением.
   overflow: hidden - обрезает углы карты по скруглению рамки */
.map-frame {
  position: relative;
  height: 460px;
  border: 1px solid rgba(192, 133, 82, 0.6);
  border-radius: 20px;
  overflow: hidden;
  background-color: #1a1a1a;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(192, 133, 82, 0.12);
}
/* Сама карта (iframe) - на всю рамку, поверх текста "Загружаем карту…" */
.map-frame iframe {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Текст под картой: виден, пока карта не загрузилась */
.map-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-family: 'Inter', sans-serif;
  color: #6a6a6a;
}

/* Кнопки под картой - в ряд, переносятся на узком экране */
.map-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 20px;
}
/* Обе кнопки: текст ровно по центру (flex + center), в одну строку (nowrap),
   чуть мельче и с меньшей разрядкой - чтобы длинная надпись влезала.
   .btn-bronze.map-btn - ДВА класса: правило .btn-bronze стоит ниже в файле
   и иначе перебило бы размеры (одинаковая "сила" - побеждает то, что ниже) */
.btn-bronze.map-btn,
.map-btn-outline {
  flex: 1 1 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 20px;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
/* Вторая кнопка - "контурная": прозрачная с бронзовой рамкой */
.map-btn-outline {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  color: #e3b48a;
  border: 1px solid #c08552;
  border-radius: 50px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.map-btn-outline:hover {
  color: #ffffff;
  background-color: rgba(192, 133, 82, 0.15);
  transform: translateY(-3px);
}

/* Планшет и телефон: колонки друг под другом - сначала карточки, потом карта */
@media (max-width: 992px) {
  .contacts-grid {
    grid-template-columns: 1fr;
  }
  .map-frame {
    height: 380px;
  }
}

/* ===== Страница "Отзывы" (reviews.html) ===== */

.reviews-wrap {
  width: 92%;
  max-width: 820px;
  margin: 0 auto 70px;              /* отступ снизу - чтобы нижняя линия не прилипала */
  position: relative;
  z-index: 1;
  font-family: 'Inter', sans-serif;
}

/* --- Звёзды (общие правила) --- */
.stars {
  display: inline-flex;
  gap: 3px;
}
.stars svg {
  width: 18px;
  height: 18px;
  fill: #3a3a3a;                    /* "пустая" звезда - тёмно-серая */
}
.stars svg.is-on {
  fill: #d9a272;                    /* "полная" звезда - бронзовая */
}

/* --- Сводка: большая средняя оценка + полоски --- */
.reviews-summary {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 36px;
  align-items: center;
  padding: 28px 32px;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
}
.summary-score {
  text-align: center;
}
.summary-number {
  font-size: 3.4rem;
  font-weight: 400;                  /* тонкие цифры, как цены */
  line-height: 1;
  color: #ffffff;
  margin: 0 0 10px;
}
/* Пока отзывов нет - вместо цифры серый прочерк */
.summary-number--empty {
  color: #4a4a4a;
}
.summary-count {
  font-size: 0.9rem;
  color: #8a8a8a;
  margin: 10px 0 0;
}

/* Большие звёзды с частичной закраской: два ряда звёзд друг на друге.
   Нижний ряд - серые, верхний - бронзовые, обрезанные по ширине
   (width в процентах задаётся прямо в HTML: style="width: 96%") */
.stars--big {
  position: relative;
  display: inline-block;
}
.stars-row {
  display: flex;
  gap: 4px;
  white-space: nowrap;
}
.stars-row svg {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
}
.stars-row--empty svg {
  fill: #3a3a3a;
}
.stars-row--fill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;                  /* всё, что шире заданного процента, - обрезается */
}
.stars-row--fill svg {
  fill: #d9a272;
}

/* Полоски распределения оценок */
.summary-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bar-row {
  display: grid;
  grid-template-columns: 34px 1fr 30px;
  gap: 12px;
  align-items: center;
  font-size: 0.85rem;
  color: #a0a0a0;
}
.bar-track {
  height: 8px;
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #94603a, #d9a272);
  border-radius: 8px;
}
.bar-count {
  text-align: right;
}

/* --- Форма отзыва (компактная: заголовок+звёзды / текст / фото+кнопка) --- */
.review-form {
  margin-top: 24px;
  padding: 20px 24px;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(192, 133, 82, 0.6);
  border-radius: 18px;
}
/* Строка 1: заголовок слева, звёзды справа */
.review-form-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.review-form-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}
/* fieldset (группа звёзд) - убираем его стандартную рамку и отступы */
.review-rating {
  margin: 0;
  padding: 0;
  border: none;
  min-width: 0;
}
.review-form-error {
  margin: -6px 0 10px;
}
/* Строка 2: поле текста - 3 строки, тянуть можно только по высоте */
.form-textarea {
  min-height: 78px;
  resize: vertical;
  line-height: 1.5;
}
/* Строка 3: кнопка "Фото" слева, "Опубликовать" справа */
.review-form-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}
/* Небольшая кнопка "Фото" (внутри спрятано настоящее поле выбора файлов) */
.photo-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 0.9rem;
  color: #c08552;
  border: 1px dashed rgba(192, 133, 82, 0.6);
  border-radius: 50px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.photo-btn:hover {
  background-color: rgba(192, 133, 82, 0.08);
  border-color: #c08552;
}
.photo-btn--error {
  border-color: #d9534f;
}
.photo-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.photo-btn input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
/* Кнопка "Опубликовать" - поменьше обычной бронзовой.
   Два класса - чтобы перебить правило .btn-bronze, которое ниже в файле */
.btn-bronze.review-submit {
  padding: 11px 28px;
  font-size: 0.9rem;
}

/* Звёзды-оценка: порядок в коде 5…1, row-reverse показывает 1…5 слева направо */
.star-input {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 6px;
}
.star-input input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.star-input label {
  cursor: pointer;
  line-height: 0;
}
.star-input svg {
  width: 30px;
  height: 30px;
  fill: #3a3a3a;
  transition: fill 0.15s ease, transform 0.15s ease;
}
/* Наведение: подсвечиваем звезду под мышкой и все ЛЕВЕЕ неё
   (в коде они идут ПОСЛЕ - их выбирает знак ~) */
.star-input label:hover svg,
.star-input label:hover ~ label svg,
/* Выбранная оценка: отмеченный кружочек и все звёзды левее */
.star-input input:checked ~ label svg {
  fill: #d9a272;
}
.star-input label:hover svg {
  transform: scale(1.12);
}
/* Пока мышка над звёздами - показываем то, что под мышкой, а не выбранное */
.star-input:hover input:checked ~ label svg {
  fill: #3a3a3a;
}
.star-input:hover label:hover svg,
.star-input:hover label:hover ~ label svg {
  fill: #d9a272;
}
.star-input input:focus-visible + label svg {
  outline: 2px solid #c08552;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Блок "только для зарегистрированных" вместо формы */
.review-locked {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
  padding: 24px 28px;
  border: 1px dashed rgba(192, 133, 82, 0.6);
  border-radius: 20px;
}
.review-locked svg {
  flex: 0 0 44px;
  height: 44px;
  padding: 10px;
  fill: none;
  stroke: #c08552;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  background-color: rgba(192, 133, 82, 0.12);
  border-radius: 50%;
}
.review-locked-title {
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 4px;
}
.review-locked-note {
  font-size: 0.9rem;
  color: #8a8a8a;
  margin: 0;
}

/* Кнопка "Войти" справа в блоке с замком (отзывы, личный кабинет).
   Два класса - чтобы перебить размеры .btn-bronze, который ниже в файле */
.btn-bronze.locked-login-btn {
  margin-left: auto;
  flex-shrink: 0;
  padding: 10px 26px;
  font-size: 0.95rem;
}

/* Страница входа /login/ */
.login-form {
  max-width: 400px;
}
.login-error {
  margin: 0 0 20px;
  text-align: center;
}
.cta-wrap.login-cta {
  margin-top: 10px;
}
.login-note {
  margin: 18px 0 0;
  text-align: center;
  font-size: 0.85rem;
  color: #8a8a8a;
}

/* Форма входа отправляется - кнопки чуть бледнеют (второй клик игнорируется) */
form.is-sending button {
  opacity: 0.6;
  pointer-events: none;
}

/* Второй шаг входа: код из почты (login_code.html) */
.login-code-text {
  margin: 0 0 22px;
  text-align: center;
  color: #bdbdbd;
  line-height: 1.5;
}
.login-code-text b {
  color: #ffffff;
}
.login-code-info {
  margin: 0 0 16px;
  text-align: center;
  color: #e3b48a;
}
.form-input.login-code-input {
  text-align: center;
  font-size: 1.6rem;
  letter-spacing: 0.4em;            /* цифры кода - с промежутками */
}
.login-remember {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -10px 0 0;
  font-size: 0.9rem;
  color: #bdbdbd;
  cursor: pointer;
}
.login-remember input {
  width: 18px;
  height: 18px;
  accent-color: #c08552;            /* галочка бронзовая */
}
.login-resend {
  padding: 0;
  font: inherit;
  color: #c08552;
  text-decoration: underline;
  background: none;
  border: 0;
  cursor: pointer;
}

/* --- Вход через Telegram (login.html, tg_wait.html) --- */
/* Кнопка "Войти через Telegram" - бронзовая, на всю ширину формы, со значком.
   Два класса (.btn-bronze.btn-telegram) - чтобы перебить размеры .btn-bronze,
   который ниже в файле */
.btn-bronze.btn-telegram {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 16px 20px;
  font-size: 1rem;
}
.btn-telegram svg {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.tg-login {
  margin: 0 auto;
}
/* Линия с подписью между входом через Telegram и входом по логину */
.login-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 400px;
  margin: 36px auto 28px;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6f6f6f;
}
.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #333333;
}
/* Кнопка "Войти по логину" - второстепенная: только контур */
.btn-outline-login {
  padding: 12px 32px;
  font: 600 0.95rem 'Inter', sans-serif;
  color: #c08552;
  background: transparent;
  border: 1px solid #c08552;
  border-radius: 50px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn-outline-login:hover {
  color: #1a1a1a;
  background: #c08552;
}
/* Страница ожидания: шаги 1-2-3 и строка "Ждём подтверждения…" */
.tg-wait {
  margin: 0 auto;
}
.tg-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 28px;
  padding-left: 1.4em;
  line-height: 1.5;
  color: #bdbdbd;
}
.tg-steps li::marker {
  font-weight: 700;
  color: #c08552;
}
.tg-steps b {
  color: #ffffff;
}
.tg-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 22px 0 0;
  color: #e3b48a;
}
/* Пульсирующая точка - "ждём" */
.tg-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c08552;
  animation: tgPulse 1.4s ease-in-out infinite;
}
@keyframes tgPulse {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50%      { opacity: 1;    transform: scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
  .tg-status-dot { animation: none; }
}

/* --- Список отзывов --- */
.reviews-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 40px;
  scroll-margin-top: 110px;          /* после "К отзывам" заголовок не прячется под меню */
}
.reviews-empty {
  margin: 10px 0 0;
}
.review-card {
  padding: 24px 26px;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 18px;
}
/* Шапка отзыва: кружок-буква, имя и дата, звёзды справа */
.review-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.review-avatar {
  flex: 0 0 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  color: #1a1a1a;
  background: linear-gradient(135deg, #e3b48a 0%, #c08552 50%, #94603a 100%);
  border-radius: 50%;
}
.review-author {
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}
.review-date {
  font-size: 0.8rem;
  color: #8a8a8a;
  margin: 2px 0 0;
}
.review-stars {
  margin-left: auto;                 /* звёзды прижаты к правому краю */
}
.review-text {
  color: #d0d0d0;
  line-height: 1.6;
  margin: 0;
  overflow-wrap: anywhere;           /* очень длинное слово не "разорвёт" карточку */
}
/* Миниатюры фото */
.review-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.review-photos a {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.review-photos a:hover {
  transform: translateY(-2px);
  border-color: #c08552;
}
.review-photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;                 /* фото заполняет квадрат, лишнее обрезается */
  display: block;
}

/* Телефон: сводка - в столбик, звёзды отзыва - под именем */
@media (max-width: 576px) {
  .reviews-summary {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 24px 20px;
  }
  .review-form {
    padding: 18px 16px;
  }
}

/* ===== Личный кабинет (account.html) ===== */

.account-wrap {
  width: 92%;
  max-width: 720px;
  margin: 0 auto 70px;              /* отступ снизу - чтобы нижняя линия не прилипала */
  position: relative;
  z-index: 1;
  font-family: 'Inter', sans-serif;
}

/* Шапка: кружок с буквой + имя */
.account-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 26px;
}
.review-avatar.account-avatar {   /* два класса - чтобы перебить размер из .review-avatar */
  flex: 0 0 64px;
  height: 64px;
  font-size: 1.6rem;
}
.account-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}
.account-since {
  font-size: 0.9rem;
  color: #8a8a8a;
  margin: 2px 0 0;
}

/* 4 плитки: 2 в ряд (на телефоне - по одной) */
.account-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.account-stat {
  padding: 18px 20px;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  transition: border-color 0.3s ease;
}
.account-stat:hover {
  border-color: rgba(192, 133, 82, 0.6);
}
.account-stat-label {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a8a8a;
  margin: 0 0 6px;
}
.account-stat-value {
  font-size: 1.15rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}

/* Блоки "История записей" и "Уведомления" - строка-кнопка во всю ширину */
.account-block {
  margin-top: 14px;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  overflow: hidden;                 /* список истории не вылезает за скруглённые углы */
  transition: border-color 0.3s ease;
}
.account-block:hover,
.account-block:focus-within {
  border-color: rgba(192, 133, 82, 0.6);
}
/* Сама строка: текст слева, стрелка/переключатель справа.
   Это <button>, поэтому убираем его стандартный вид (фон, рамку) */
.account-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  font: inherit;
  text-align: left;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
.account-row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.account-row-title {
  font-weight: 600;
  color: #ffffff;
}
.account-row-note {
  font-size: 0.85rem;
  color: #8a8a8a;
}

/* Стрелка "вниз"; когда история открыта - поворачивается вверх */
.account-chevron {
  flex: 0 0 22px;
  height: 22px;
  fill: none;
  stroke: #c08552;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s ease;
}
.account-history-btn[aria-expanded="true"] .account-chevron {
  transform: rotate(180deg);
}

/* Список записей */
.account-history {
  padding: 0 20px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.history-item:last-child {
  border-bottom: 0;
}
.history-service {
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}
.history-date {
  font-size: 0.85rem;
  color: #8a8a8a;
  margin: 2px 0 0;
}
.history-empty {
  padding: 16px 0 8px;
  color: #8a8a8a;
  margin: 0;
}
.history-empty a {
  color: #c08552;
}
/* Значок статуса: цвет по статусу записи */
.history-status {
  flex-shrink: 0;
  padding: 4px 10px;
  font-size: 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #bdbdbd;
}
.history-status--confirmed,
.history-status--done {
  color: #e3b48a;
  border-color: rgba(192, 133, 82, 0.6);
}
.history-status--cancelled {
  color: #7a7a7a;
  text-decoration: line-through;
}

/* Переключатель уведомлений: "дорожка" и кружок внутри (кружок - ::after).
   switch--on - включено: дорожка бронзовая, кружок уезжает вправо */
.switch {
  flex: 0 0 48px;
  height: 28px;
  position: relative;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  transition: background-color 0.3s ease;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background-color: #ffffff;
  border-radius: 50%;
  transition: transform 0.3s ease;
}
.switch--on {
  background: linear-gradient(135deg, #e3b48a 0%, #c08552 50%, #94603a 100%);
}
.switch--on::after {
  transform: translateX(20px);
}

/* Сообщение после отмены записи */
.account-message {
  margin: 0 0 18px;
  padding: 12px 16px;
  font-size: 0.95rem;
  color: #1a1a1a;
  background: linear-gradient(135deg, #e3b48a 0%, #c08552 100%);
  border-radius: 12px;
}
.account-message--error {
  color: #ffffff;
  background: rgba(217, 83, 79, 0.25);
  border: 1px solid rgba(217, 83, 79, 0.6);
}

/* Блок "Ближайшие записи" */
.account-subtitle {
  margin: 0 0 12px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8a8a;
}
.account-upcoming {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 26px;
}
.upcoming-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  background-color: rgba(192, 133, 82, 0.08);
  border: 1px solid rgba(192, 133, 82, 0.5);
  border-radius: 16px;
}
.upcoming-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.upcoming-date {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
}
.upcoming-service {
  margin: 0;
  color: #bdbdbd;
}
.upcoming-cancel {
  flex-shrink: 0;
  padding: 10px 18px;
  font: inherit;
  font-size: 0.9rem;
  color: #e57373;
  white-space: nowrap;
  background: none;
  border: 1px solid rgba(229, 115, 115, 0.55);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.upcoming-cancel:hover,
.upcoming-cancel:focus-visible {
  background-color: rgba(229, 115, 115, 0.12);
}
.upcoming-note {
  max-width: 220px;
  margin: 0;
  font-size: 0.8rem;
  color: #8a8a8a;
  text-align: right;
}
@media (max-width: 576px) {
  .upcoming-card {
    flex-direction: column;
    align-items: stretch;
  }
  .upcoming-cancel {
    width: 100%;
  }
  .upcoming-note {
    max-width: none;
    text-align: left;
  }
}

/* Кнопка "Панель барбера" (только у сотрудника) */
.cta-wrap.account-panel-link {
  margin-top: 30px;
}

/* Кнопка "Выйти из аккаунта": спокойная, без заливки, по центру */
.account-logout {
  margin-top: 30px;
  text-align: center;
}
.account-logout-btn {
  padding: 10px 26px;
  font: inherit;
  font-size: 0.95rem;
  color: #bdbdbd;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.account-logout-btn:hover,
.account-logout-btn:focus-visible {
  color: #e57373;
  border-color: rgba(229, 115, 115, 0.6);
}

@media (max-width: 576px) {
  .account-stats {
    grid-template-columns: 1fr;
  }
  .review-locked {
    flex-wrap: wrap;            /* кнопка "Войти" уходит на новую строку */
  }
}

/* ===== Блок "Почему Bu-Dias" (преимущества) ===== */

/* Обёртка блока: такая же ширина, как у блока услуг, и отступ сверху,
   чтобы блок не прилипал к карточкам услуг */
.advantages-section {
  width: 96%;
  max-width: 1600px;
  margin: 100px auto 40px;
  position: relative;
  z-index: 1;
}

/* Мягкая пульсация текста (сноска "Выберите услугу" на странице услуг).
   Анимация subtle-pulse: прозрачность плавно меняется 1 → 0.45 → 1,
   один "вдох" - 2.6 секунды, бесконечно. ease-in-out - плавно, без рывков.
   Цвет и размер не меняются - поэтому не пёстро */
.page-subtitle--pulse {
  animation: subtle-pulse 2.6s ease-in-out infinite;
}
@keyframes subtle-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
/* Если в системе включено "уменьшить движение" - не пульсирует */
@media (prefers-reduced-motion: reduce) {
  .page-subtitle--pulse {
    animation: none;
  }
}

/* Сетка карточек. auto-fit + minmax: браузер сам решает, сколько карточек
   влезает в ряд (на широком экране 4, на планшете 2, на телефоне 1) */
.advantages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
}

/* Один пункт преимущества: без фона и рамки - просто иконка и текст,
   всё выровнено по центру колонки */
.advantage-card {
  padding: 20px 16px;
  text-align: center;
}

/* Иконка в карточке преимущества (рисунок <svg> в home.html).
   fill: none - фигуры не заливаются, рисуются только контуры;
   stroke - цвет линий, stroke-width - их толщина.
   transition - вращение будет плавным, длится 0.8 секунды */
.advantage-icon {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 24px;  /* auto слева и справа - иконка встаёт ровно по центру */
  fill: none;
  stroke: #e6e6e6;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.8s ease;
}

/* Наводим мышку на карточку - иконка делает полный оборот (360 градусов).
   Убираем мышку - плавно возвращается обратно */
.advantage-card:hover .advantage-icon {
  transform: rotate(360deg);
}

/* Если у человека в системе включено "уменьшить движение"
   (настройка для тех, кого укачивает от анимаций) - не вращаем */
@media (prefers-reduced-motion: reduce) {
  .advantage-icon {
    transition: none;
  }
  .service-card:hover {
    transform: none;  /* карточка не прыгает, но рамка и свечение остаются */
  }
}

/* Заголовок преимущества */
.advantage-card h3 {
  font-family: 'Inter', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 12px;
}

/* Пояснение под заголовком - серое, чтобы не спорить с заголовком */
.advantage-card p {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  color: #a0a0a0;
  margin: 0;
}
.page-sheet {
  position: relative;
  z-index: 1;
  background-color: var(--page-bg);   /* тот же фон, что у правой половины первого экрана */
  padding-top: 60px;
  padding-bottom: 60px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.scroll-divider--bottom {
  margin-top: auto;
}

.page-sheet .container {
  position: relative;
  z-index: 1;
}
.hero-center-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  object-fit: contain;
  z-index: 2;
}
/* Закреплённая шапка (логотип в левом верхнем углу).
   position: fixed - элемент "приклеивается" к окну браузера, а не к странице:
   страница прокручивается, а шапка остаётся на месте.
   top: 0; left: 0 - к какому углу окна приклеить (верхний левый).
   z-index: 1000 - шапка лежит поверх всех остальных блоков
   (у второго экрана z-index: 1, поэтому он проезжает ПОД шапкой).
   Ширину не задаём - шапка занимает ровно столько места, сколько логотип,
   и не мешает кликать по остальной странице */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}
/* Логотип в углу (на телефоне - меньше, см. "Мобильная версия") */
.corner-logo {
    height: 61px;
}
/* Кнопка меню ☰ - на компьютере не нужна, показывается только на телефоне */
.nav-toggle {
    display: none;
}
/* "Записаться" внутри меню - тоже только на телефоне.
   .site-nav .nav-cta - два класса, чтобы перебить display у ссылок меню */
.site-nav .nav-cta {
    display: none;
}

html {
    background: var(--page-bg);
    /* Плавная прокрутка: при клике на пункт меню страница не "прыгает",
       а плавно едет к нужному блоку */
    scroll-behavior: smooth;
}

/* Если включено "уменьшить движение" - прокрутка мгновенная */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Блоки, к которым ведут пункты меню: при прокрутке оставляем сверху
   отступ 110px, чтобы заголовок блока не спрятался под закреплённой шапкой */
section[id] {
    scroll-margin-top: 110px;
}

body {
    margin: 0;
    padding: 0;
    background: var(--page-bg);
}
/* ===== Бронзовая кнопка "Записаться" ===== */

/* Обёртка кнопки: ставит её по центру и отодвигает от иконок */
.cta-wrap {
  text-align: center;
  margin-top: 50px;
}

/* Сама кнопка.
   background - бронзовый градиент: светлая бронза → насыщенная → тёмная,
   поэтому кнопка выглядит "металлической", а не плоской.
   Оттенки подобраны под цвет логотипа BU.DIASS.
   background-size: 200% - градиент в 2 раза шире кнопки, видна только
   его часть; при наведении сдвигаем его - получается "перелив" */
.btn-bronze {
  display: inline-block;
  padding: 16px 48px;
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.08em;       /* чуть разрежённые буквы - смотрится дороже */
  text-transform: uppercase;    /* все буквы заглавные */
  text-decoration: none;        /* убираем подчёркивание ссылки */
  color: #1a1a1a;               /* тёмный текст на бронзе */
  background: linear-gradient(135deg, #e3b48a 0%, #c08552 35%, #94603a 65%, #e3b48a 100%);
  background-size: 200% 200%;
  background-position: 0% 50%;
  border: none;
  cursor: pointer;              /* курсор-"рука": кнопка бывает и тегом <button> */
  border-radius: 50px;          /* полностью скруглённые края - "таблетка" */
  box-shadow: 0 4px 20px rgba(192, 133, 82, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-position 0.6s ease;
}

/* При наведении: кнопка приподнимается, бронза "переливается"
   (градиент сдвигается), свечение становится сильнее */
.btn-bronze:hover {
  color: #1a1a1a;               /* Bootstrap перекрашивает ссылки при наведении - запрещаем */
  transform: translateY(-3px);
  background-position: 100% 50%;
  box-shadow: 0 8px 30px rgba(192, 133, 82, 0.45);
}

/* При нажатии кнопка чуть "проседает" - ощущение настоящей кнопки */
.btn-bronze:active {
  transform: translateY(0);
}

/* ===== Навигационное меню (правый верхний угол) ===== */

/* Само меню: стоит вверху первого экрана, растянуто на всю правую половину
   (над той половиной, где видео), на одной высоте с логотипом: top 24px.
   Пункты стоят группой ПО ЦЕНТРУ меню с одинаковыми промежутками (gap) -
   поэтому на широком экране слова не разъезжаются далеко друг от друга.
   position: absolute - меню стоит на СВОЁМ МЕСТЕ НА СТРАНИЦЕ и при прокрутке
   уезжает вверх вместе с первым экраном (в отличие от логотипа и кнопки
   "Запись", у которых position: fixed - они "приклеены" к окну).
   Фон - полупрозрачная тёмная "таблетка" с размытием того, что под ней
   (backdrop-filter: blur) - эффект "матового стекла". Благодаря ему
   надписи читаются и на фото, и когда под меню проезжает текст страницы */
.site-nav {
  position: absolute;
  top: 24px;
  left: calc(50% + 24px);              /* начинается от середины экрана (+ отступ 24px) */
  right: 24px;                         /* и тянется до правого края (- отступ 24px) */
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;             /* пункты - группой по центру меню */
  gap: 28px;                           /* расстояние между пунктами меню */
  padding: 12px 24px;
  background: rgba(10, 10, 10, 0.55);
  -webkit-backdrop-filter: blur(10px);   /* то же для Safari */
  backdrop-filter: blur(10px);
  border: 1px solid rgba(212, 169, 55, 0.15);   /* тонкая золотистая рамка */
  border-radius: 50px;
  /* Золотая тень (свечение) вокруг меню.
     box-shadow: сдвиг-по-X сдвиг-по-Y размытие цвет.
     Сдвиги 0 0 - тень расходится равномерно во все стороны (как свечение);
     18px - насколько сильно размыта; rgba(212,169,55,0.35) - золото,
     прозрачное на 65%, чтобы не "кричало" */
  box-shadow: 0 0 18px rgba(212, 169, 55, 0.25);
}

/* Пункты меню: светлый текст без подчёркивания.
   position: relative - нужно для линии под текстом (см. ::after ниже) */
.site-nav a {
  position: relative;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  color: #e6e6e6;
  text-decoration: none;
  white-space: nowrap;                 /* "Личный кабинет" не переносится на 2 строки */
  transition: color 0.3s ease;
}

/* Бронзовая линия под пунктом меню. В покое ширина 0 (не видна),
   при наведении плавно "вырастает" из центра на всю ширину слова */
.site-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: #c08552;
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width 0.3s ease;
}

.site-nav a:hover {
  color: #ffffff;
}
.site-nav a:hover::after,
.site-nav a.active::after {        /* active - пункт текущей страницы: линия видна всегда */
  width: 100%;
}
.site-nav a.active {
  color: #ffffff;
}

/* Колокольчик: у него линия не нужна - вместо неё иконка становится бронзовой */
.site-nav .nav-bell::after {
  display: none;
}
.nav-bell {
  position: relative;
  display: flex;
  padding: 0;
  color: #e6e6e6;
  background: none;                   /* колокольчик - это <button>: убираем его стандартный вид */
  border: 0;
  cursor: pointer;
}
.nav-bell svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;               /* цвет линий = цвет текста ссылки */
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: color 0.3s ease;
}
.site-nav .nav-bell:hover,
.site-nav .nav-bell[aria-expanded="true"] {
  color: #c08552;
}

/* ===== Уведомления: счётчик на колокольчике и окошко ===== */

/* Кружок с числом непрочитанных - в правом верхнем углу колокольчика */
.notif-badge {
  position: absolute;
  top: -7px;
  right: -9px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  color: #1a1a1a;
  background: linear-gradient(135deg, #e3b48a 0%, #c08552 100%);
  border-radius: 9px;
  box-shadow: 0 0 0 2px #111111;      /* тёмная обводка - кружок отделяется от иконки */
}
.notif-badge[hidden] {
  display: none;
}

/* Колокольчик для телефона - только на узком экране (см. "Мобильная версия") */
.notif-toggle--mobile {
  display: none;
}

/* Окошко уведомлений: под колокольчиком, справа вверху.
   Полупрозрачный тёмный фон + размытие того, что под ним ("матовое стекло") */
.notif-panel {
  position: fixed;
  top: 84px;
  right: 24px;
  z-index: 1700;                      /* выше меню, кнопок и чата */
  display: flex;
  flex-direction: column;
  width: 380px;
  max-width: calc(100vw - 32px);
  max-height: min(70vh, 560px);
  font-family: 'Inter', sans-serif;
  background: rgba(18, 18, 18, 0.72);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(192, 133, 82, 0.45);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  animation: popup-pop 0.2s ease-out;
}
.notif-panel[hidden] {
  display: none;
}
.notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 12px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.notif-title {
  margin: 0;
  font-weight: 700;
  color: #ffffff;
}
.notif-close {
  width: 30px;
  height: 30px;
  padding: 6px;
  background: none;
  border: 0;
  cursor: pointer;
}
.notif-close svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #8a8a8a;
  stroke-width: 2;
  stroke-linecap: round;
}
.notif-close:hover svg {
  stroke: #ffffff;
}
.notif-list {
  overflow-y: auto;                   /* много уведомлений - прокрутка внутри окошка */
}
/* Одно уведомление: иконка слева, текст и время справа */
.notif-item {
  display: flex;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  font: inherit;
  text-align: left;
  text-decoration: none;
  color: #d6d6d6;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.notif-item:last-child {
  border-bottom: 0;
}
a.notif-item:hover,
button.notif-item:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.05);
  cursor: pointer;
}
/* Непрочитанное - светлее и с бронзовой полоской слева */
.notif-item.is-unread {
  color: #ffffff;
  background-color: rgba(192, 133, 82, 0.1);
  box-shadow: inset 3px 0 0 #c08552;
}
.notif-icon {
  flex: 0 0 34px;
  height: 34px;
  padding: 7px;
  background-color: rgba(192, 133, 82, 0.15);
  border-radius: 50%;
}
.notif-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #e3b48a;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.notif-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.notif-text {
  font-size: 0.9rem;
  line-height: 1.4;
}
.notif-time {
  font-size: 0.75rem;
  color: #8a8a8a;
}
.notif-empty {
  margin: 0;
  padding: 28px 22px;
  font-size: 0.9rem;
  text-align: center;
  color: #8a8a8a;
}

/* ===== Плавающая кнопка "Запись" (правый нижний угол) ===== */

/* Сама кнопка.
   position: fixed + bottom/right - приклеена к правому нижнему углу окна
   (как шапка с логотипом - к левому верхнему), видна при любой прокрутке.
   env(safe-area-inset-bottom) - на iPhone без кнопки "Домой" добавляет
   отступ, чтобы кнопка не залезла под полоску внизу экрана.
   display: flex + gap - иконка и текст стоят в ряд с промежутком 10px.
   Цвета - та же бронза, что у кнопки "Записаться" */
.floating-book {
  position: fixed;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px 14px 20px;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;            /* текст пишется как в HTML: "Запись" */
  color: #1a1a1a;
  background: linear-gradient(135deg, #e3b48a 0%, #c08552 50%, #94603a 100%);
  border-radius: 50px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5), 0 0 18px rgba(192, 133, 82, 0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Иконка календаря внутри кнопки: тёмные линии, как текст */
.floating-book svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #1a1a1a;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Пульсирующее кольцо вокруг кнопки.
   ::before - "псевдоэлемент": дополнительный блок, который CSS рисует сам,
   без отдельного тега в HTML. Он прозрачный и ровно такого же размера и формы,
   как кнопка (inset: 0 + border-radius: inherit).
   Кольцо - это его тень (box-shadow) без размытия. Тень рисуется только
   СНАРУЖИ блока, поэтому кнопку она не закрывает - видна лишь как ореол вокруг.
   pointer-events: none - кольцо "прозрачно" для мышки, не мешает кликать.
   animation - запускаем анимацию pulse-ring: 2.2 секунды, бесконечно */
.floating-book::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: pulse-ring 2.2s ease-out infinite;
}

/* Сама анимация: тень-кольцо стартует вплотную к кнопке и полупрозрачной,
   затем расходится на 18px наружу и полностью растворяется - "сигнал".
   Четвёртое число в box-shadow (0 → 18px) - насколько тень выходит за край */
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0    rgba(192, 133, 82, 0.7); }
  80%  { box-shadow: 0 0 0 18px rgba(192, 133, 82, 0); }
  100% { box-shadow: 0 0 0 18px rgba(192, 133, 82, 0); }
}

/* При наведении кнопка приподнимается и свечение становится сильнее */
.floating-book:hover {
  color: #1a1a1a;                    /* Bootstrap перекрашивает ссылки - запрещаем */
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 28px rgba(192, 133, 82, 0.6);
}

/* При нажатии - "проседает" */
.floating-book:active {
  transform: translateY(0);
}

/* Если включено "уменьшить движение" - кольцо не пульсирует */
@media (prefers-reduced-motion: reduce) {
  .floating-book::before {
    animation: none;
  }
}

/* ===== Чат (правый нижний угол, все страницы кроме главной) =====
   .chat - "коробка" в углу (position: fixed), там же, где на главной "Запись".
   Внутри снизу кнопка, над ней - окно чата (когда открыто).
   flex-direction: column + align-items: flex-end - всё прижато вправо */
.chat {
  position: fixed;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  font-family: 'Inter', sans-serif;
}

/* Кнопка: тёмный круг с бронзовой рамкой и иконкой - спокойнее, чем бронзовая "Запись".
   Подпись "Написать нам" спрятана (max-width: 0) и выезжает при наведении */
.chat-btn {
  position: relative;
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 16px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: #e3b48a;
  background-color: #161616;
  border: 1px solid rgba(192, 133, 82, 0.7);
  border-radius: 50px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5), 0 0 14px rgba(192, 133, 82, 0.25);
  cursor: pointer;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.chat-btn svg {
  flex: 0 0 24px;
  height: 24px;
  fill: none;
  stroke: #c08552;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chat-btn svg .chat-btn-dots {
  stroke-width: 2.8;                /* точки внутри облачка - жирнее, чтобы были видны */
}
.chat-btn-label {
  max-width: 0;                     /* спрятана: ширина 0 */
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width 0.35s ease, opacity 0.25s ease, margin 0.35s ease;
}
.chat-btn:hover,
.chat-btn:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 24px rgba(192, 133, 82, 0.5);
}
.chat-btn:hover .chat-btn-label,
.chat-btn:focus-visible .chat-btn-label {
  max-width: 140px;                 /* выезжает */
  margin-right: 10px;
  opacity: 1;
}
/* Главная: в углу кнопка "Запись", поэтому кнопку чата прячем, а окно чата
   (открывается из колокольчика) ставим выше "Записи", чтобы не закрывать её */
.page-home .chat-btn {
  display: none;
}
.page-home .chat {
  bottom: calc(100px + env(safe-area-inset-bottom, 0px));
}

/* Точка "есть новый ответ" - в правом верхнем углу кнопки */
.chat-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  background-color: #e3b48a;
  border: 2px solid #161616;
  border-radius: 50%;
}

/* Окно чата */
.chat-panel {
  width: 340px;
  max-width: calc(100vw - 32px);    /* на узком телефоне - не шире экрана */
  height: 440px;
  max-height: calc(100vh - 140px);
  display: flex;
  flex-direction: column;
  background-color: #161616;
  border: 1px solid rgba(192, 133, 82, 0.6);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(192, 133, 82, 0.15);
  overflow: hidden;
  animation: popup-pop 0.25s ease-out;   /* та же анимация появления, что у окон */
}
/* hidden у элемента с display: flex: Bootstrap и наш сброс [hidden] прячут его */
.chat-panel[hidden] {
  display: none;
}
.chat-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 16px 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.chat-title {
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}
.chat-sub {
  font-size: 0.8rem;
  color: #8a8a8a;
  margin: 2px 0 0;
}
.chat-close {
  flex: 0 0 30px;
  height: 30px;
  padding: 6px;
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.chat-close svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #8a8a8a;
  stroke-width: 2;
  stroke-linecap: round;
}
.chat-close:hover svg {
  stroke: #ffffff;
}

/* Лента сообщений: занимает всё свободное место и прокручивается */
.chat-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}
.chat-empty {
  margin: auto 0;
  text-align: center;
  font-size: 0.85rem;
  color: #8a8a8a;
}
/* Одно сообщение - "пузырь". Свои - справа, бронзовые; ответы барбера - слева, тёмные */
.chat-msg {
  max-width: 82%;
  padding: 9px 12px 6px;
  border-radius: 14px;
}
.chat-msg p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  white-space: pre-wrap;            /* переносы строк из сообщения сохраняются */
  overflow-wrap: anywhere;          /* очень длинное слово не вылезет за пузырь */
}
.chat-msg--me {
  align-self: flex-end;
  color: #1a1a1a;
  background: linear-gradient(135deg, #e3b48a 0%, #c08552 100%);
  border-bottom-right-radius: 4px;
}
.chat-msg--admin {
  align-self: flex-start;
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.08);
  border-bottom-left-radius: 4px;
}
.chat-time {
  display: block;
  margin-top: 3px;
  font-size: 0.7rem;
  opacity: 0.6;
  text-align: right;
}

/* Низ окна: (телефон гостя) + поле сообщения + кнопка-стрелка */
.chat-form {
  padding: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.chat-phone {
  margin-bottom: 10px;
}
.chat-phone-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.8rem;
  color: #bdbdbd;
}
.chat-phone .form-input {
  padding: 9px 12px;
  font-size: 0.9rem;
}
.chat-phone .input-addon {
  padding: 0 12px;
  font-size: 0.9rem;
}
.chat-error {
  margin: 0 0 8px;
  font-size: 0.8rem;
  color: #e07b77;
}
.chat-input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.chat-input-row textarea {
  flex: 1;
  min-width: 0;
  max-height: 120px;
  padding: 10px 12px;
  font: inherit;
  font-size: 0.9rem;
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  outline: none;
  resize: none;
  field-sizing: content;            /* поле растёт по мере набора текста (новые браузеры) */
}
.chat-input-row textarea:focus {
  border-color: #c08552;
}
.chat-input-row textarea::placeholder {
  color: #5f5f5f;
}
.chat-send {
  flex: 0 0 42px;
  height: 42px;
  padding: 10px;
  background: linear-gradient(135deg, #e3b48a 0%, #c08552 50%, #94603a 100%);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.chat-send:hover {
  transform: scale(1.06);
}
.chat-send svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #1a1a1a;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 576px) {
  .chat {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .chat-btn {
    height: 52px;
    padding: 0 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .chat-btn,
  .chat-btn-label {
    transition: none;
  }
  .chat-panel {
    animation: none;
  }
}

/* ===== Подвал страницы (footer) ===== */

/* Обёртка подвала: всё по центру, поверх тёмной подложки */
.site-footer {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-top: 10px;
}

/* Ссылка-иконка Instagram: квадратик 32×32, статичная (без анимации) */
.footer-instagram {
  display: inline-block;
  width: 32px;
  height: 32px;
}

/* Сам рисунок иконки: такие же тонкие светлые линии, как у иконок преимуществ */
.footer-instagram svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #e6e6e6;
  stroke-width: 1.6;
}

/* Маленькая точка в углу иконки - она залитая, а не контурная */
.footer-instagram .footer-instagram-dot {
  fill: #e6e6e6;
  stroke: none;
}

/* Подпись "powered by savgod12".
   Шрифт - системный шрифт Apple (San Francisco): -apple-system и
   BlinkMacSystemFont включают его на Mac/iPhone. На Windows/Android
   такого шрифта нет - там возьмётся следующий по списку (Helvetica/Arial) */
.footer-credit {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.85rem;
  color: #7a7a7a;
  margin: 18px 0 0;
}

/* Ссылка на имя автора: светлее основного текста, без подчёркивания */
.footer-credit a {
  color: #bdbdbd;
  text-decoration: none;
}

/* При наведении на имя - оно просто становится белым (без подчёркивания) */
.footer-credit a:hover {
  color: #ffffff;
  text-decoration: none;
}

/* ===== Меню на средних экранах (уже 992px): компактнее ===== */
@media (max-width: 992px) {
  .site-nav {
    left: auto;                        /* на узких экранах половины не хватает -
                                          меню по ширине содержимого, у правого края */
    gap: 16px;
    padding: 10px 14px 10px 20px;
  }
  .site-nav a {
    font-size: 0.85rem;
  }
}

/* ===== Адаптация под телефоны (экран уже 576px) =====
   @media - "если экран такой-то, примени эти правила поверх обычных" */
@media (max-width: 576px) {
  .section-title {
    font-size: 1.8rem;
    margin-bottom: 30px;
  }
  .advantages-section {
    margin-top: 60px;
  }
  .page-sheet.services-page {
    padding-top: 110px;
  }
  .advantage-card {
    padding: 16px 8px;
  }
  .floating-book {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    padding: 12px 20px 12px 16px;
    font-size: 0.9rem;
  }
}

/* ===== Согласие на обработку персональных данных (_consent.html) ===== */
.consent {
  margin: 0 0 24px;
  font-family: 'Inter', sans-serif;
}
.consent-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  line-height: 1.45;
  color: #bdbdbd;
  cursor: pointer;
}
.consent-label input,
.chat-consent input {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: #c08552;            /* галочка бронзовая */
}
.consent-label a,
.chat-consent a {
  color: #c08552;
}
.consent--error .consent-label {
  color: #e07b77;
}
/* В форме отзыва - между полем текста и кнопками */
.review-form .consent {
  margin: 12px 0 0;
}
/* В окне чата - маленькая строка над полем сообщения */
.chat-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #bdbdbd;
  cursor: pointer;
}
.chat-consent[hidden] {
  display: none;
}

/* Ссылка на Политику в подвале */
.footer-privacy {
  margin: 14px 0 0;
  font-size: 0.8rem;
}
.footer-privacy a {
  color: #8a8a8a;
}
.footer-privacy a:hover {
  color: #c08552;
}

/* ===== Страница "Политика обработки персональных данных" (privacy.html) ===== */
.privacy {
  max-width: 760px;
  font-family: 'Inter', sans-serif;
  color: #cfcfcf;
  line-height: 1.6;
}
.privacy .section-title {
  font-size: 1.9rem;
  margin-bottom: 14px;
}
.privacy-date {
  text-align: center;
  font-size: 0.85rem;
  color: #8a8a8a;
  margin: 0 0 30px;
}
.privacy h3 {
  margin: 30px 0 10px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
}
.privacy p,
.privacy li {
  font-size: 0.95rem;
}
.privacy a {
  color: #c08552;
}
/* То, что нужно заполнить перед запуском, - подсвечено */
.fill-in {
  padding: 0 4px;
  color: #1a1a1a;
  background-color: #e0c07a;
  border-radius: 4px;
}
/* Таблица на телефоне прокручивается вбок, а не вылезает за экран */
.privacy-table-wrap {
  overflow-x: auto;
}
.privacy-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.privacy-table th,
.privacy-table td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.privacy-table th {
  color: #c08552;
  font-weight: 700;
}
@media (max-width: 576px) {
  .privacy .section-title {
    font-size: 1.4rem;
  }
}

/* ===== Страницы ошибок: 404, 403, 400 (_error_page.html) ===== */
.error-wrap {
  width: 92%;
  max-width: 560px;
  margin: 0 auto 70px;
  padding-top: 10px;
  position: relative;
  z-index: 1;
  font-family: 'Inter', sans-serif;
  text-align: center;
}
/* Большие тонкие цифры - как заголовки разделов сайта, только крупнее */
.error-code {
  margin: 0;
  font-size: clamp(5rem, 24vw, 9rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.04em;
}
/* Пунктирная линия, которую "режут" ножницы */
.error-cut {
  position: relative;
  height: 28px;
  margin: 14px auto 26px;
  max-width: 320px;
  border-top: 2px dashed rgba(192, 133, 82, 0.55);
}
.error-cut svg {
  position: absolute;
  top: -14px;
  left: 50%;
  width: 26px;
  height: 26px;
  padding: 2px;
  transform: translateX(-50%) rotate(90deg);
  fill: none;
  stroke: #c08552;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  background-color: var(--page-bg);   /* ножницы "разрезают" линию - под ними фон страницы */
  animation: error-snip 2.4s ease-in-out infinite;
}
/* Ножницы чуть едут по линии туда-сюда */
@keyframes error-snip {
  0%, 100% { left: 40%; }
  50%      { left: 60%; }
}
@media (prefers-reduced-motion: reduce) {
  .error-cut svg { animation: none; left: 50%; }
}
.error-title {
  margin: 0 0 12px;
  font-size: 1.6rem;
  font-weight: 700;
  color: #ffffff;
}
.error-text {
  margin: 0 auto 30px;
  max-width: 440px;
  line-height: 1.55;
  color: #bdbdbd;
}
.error-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 22px;
}
.error-link {
  color: #c08552;
}
.error-link:hover {
  color: #e3b48a;
}

/* =====================================================================
   МОБИЛЬНАЯ ВЕРСИЯ (экран уже 768px - телефоны и маленькие планшеты)
   Большинство клиентов записываются с телефона, поэтому здесь собраны
   все правила "как сайт выглядит на телефоне":
     1) верхняя панель: логотип слева, кнопка меню ☰ справа;
     2) меню - на весь экран по кнопке ☰;
     3) первый экран главной - фото на всю ширину, логотип по размеру экрана;
     4) отступы, карточки, поля ввода.
   ===================================================================== */
@media (max-width: 768px) {

  /* --- 1. Верхняя панель ---
     На компьютере логотип просто "висит" в углу. На телефоне при прокрутке он
     наезжал бы на текст - поэтому делаем панель во всю ширину с тёмным
     "матовым стеклом": текст страницы уезжает ПОД неё.
     !important - нужен, чтобы перебить отступ p-3 из Bootstrap (у него тоже !important) */
  .site-header {
    right: 0;
    height: calc(60px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 16px 0 !important;
    background: rgba(17, 17, 17, 0.75);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .corner-logo {
    height: 44px;
  }

  /* Кнопка ☰: три полоски. При открытом меню верхняя и нижняя поворачиваются
     и складываются в крестик, средняя исчезает */
  .nav-toggle {
    position: fixed;
    top: calc(8px + env(safe-area-inset-top, 0px));
    right: 10px;
    z-index: 1600;                     /* выше открытого меню - чтобы закрыть его */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;                       /* 44px - удобно попадать пальцем */
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: #e6e6e6;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.2s ease;
  }
  body.nav-open .nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  body.nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
  }
  body.nav-open .nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* --- 2. Меню на весь экран ---
     Обычно спрятано (display: none). Нажали ☰ → у <body> класс nav-open →
     меню появляется поверх страницы, пункты крупно, столбиком по центру */
  .site-nav {
    position: fixed;
    inset: 0;                          /* на весь экран */
    z-index: 1500;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding: 80px 24px;
    background: rgba(10, 10, 10, 0.97);
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  body.nav-open .site-nav {
    display: flex;
    animation: popup-fade 0.25s ease-out;
  }
  body.nav-open {
    overflow: hidden;                  /* страница под меню не прокручивается */
  }
  .site-nav a {
    font-size: 1.5rem;
  }
  .site-nav a::after {
    bottom: -8px;
  }
  .site-nav .nav-bell {
    display: none;                     /* на телефоне колокольчик - в верхней панели (ниже) */
  }
  /* Колокольчик в верхней панели телефона - слева от кнопки ☰ */
  .notif-toggle--mobile {
    position: fixed;
    top: calc(8px + env(safe-area-inset-top, 0px));
    right: 58px;
    z-index: 1600;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: #e6e6e6;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .notif-toggle--mobile svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .notif-toggle--mobile .notif-badge {
    top: 4px;
    right: 2px;
  }
  /* Окошко на телефоне - под верхней панелью, почти во всю ширину */
  .notif-panel {
    top: calc(64px + env(safe-area-inset-top, 0px));
    right: 16px;
    left: 16px;
    width: auto;
  }
  /* Открыто меню ☰ - колокольчик прячем (меню на весь экран) */
  body.nav-open .notif-toggle--mobile {
    display: none;
  }
  /* Бронзовая кнопка "Записаться" внизу меню */
  .site-nav .nav-cta {
    display: inline-block;
    margin-top: 14px;
    font-size: 1rem;
    color: #1a1a1a;
  }
  .site-nav .nav-cta::after {
    display: none;                     /* без бронзовой линии под текстом */
  }

  /* --- 3. Первый экран главной ---
     На компьютере: слева лента фото, справа видео. На телефоне для двух
     половин нет места - лента фото на всю ширину, видео прячем (заодно
     телефону не нужно скачивать тяжёлый файл по мобильному интернету).
     Затемнение - чтобы логотип хорошо читался на фото */
  .bg-left {
    width: 100%;
  }
  .bg-right {
    display: none;
  }
  .bg-overlay {
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.55) 100%);
  }
  .hero-center-logo {
    width: min(78vw, 340px);           /* не шире экрана: 78% его ширины, но не больше 340px */
    height: auto;
  }

  /* --- 4. Отступы и карточки --- */
  /* Снизу - место под плавающими кнопками ("Запись" / чат), чтобы они
     не закрывали подвал */
  .page-sheet {
    padding-bottom: 100px;
  }
  .page-sheet.services-page {
    padding-top: 100px;
  }
  /* По краям экрана - 16px, карточки не прилипают к краю */
  .services-section {
    width: calc(100% - 32px);
  }
  /* Карточки услуг: высота по содержимому (на компьютере у всех 210px) */
  .price-card {
    min-height: 0;
    padding: 22px 20px 20px;
  }
  .price-grid {
    gap: 14px;
  }
  .price-grid + .price-group-title {
    margin-top: 50px;
  }
  .service-card {
    padding: 26px 20px;
  }
  .cards-row {
    gap: 14px;
  }

  /* Кнопка "Фото · до 3" в форме отзыва - в одну строку */
  .photo-btn {
    white-space: nowrap;
    flex-shrink: 0;
  }
  /* "Опубликовать" - компактнее, чтобы рядом с "Фото" влезла в узкий экран */
  .btn-bronze.review-submit {
    padding: 12px 20px;
    font-size: 0.9rem;
  }

  /* Поля ввода - не меньше 16px: iPhone сам увеличивает страницу, когда
     нажимаешь на поле с более мелким шрифтом (и обратно не уменьшает) */
  .form-input,
  .book-select,
  .chat-input-row textarea,
  .chat-phone .form-input {
    font-size: 16px;
  }
}