/* Добавления к оформлению «Айболита» — то, чего у него не было.
 *
 * У донора врачи, услуги и статьи были заведены руками, с фотографиями и
 * отдельными страницами. У нас они приезжают из данных клиники, поэтому
 * понадобились: список цен, буквенная аватарка вместо фото врача, таблица
 * часов работы и форма записи. Всё остальное — его css без изменений.
 *
 * Своих цветов здесь нет: только переменные, иначе добавления остались бы
 * бирюзовыми у клиники, выбравшей другой цвет.
 */

/* ─── логотип текстом, если картинку не загрузили ─── */
.logo__text { font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em;
              color: var(--color-primary-dark); }

/* ─── прайс ─── */
.price-group { margin-bottom: var(--space-3); }
.price-group__heading { display: flex; align-items: center; gap: var(--space-2);
                        margin-bottom: var(--space-2); }
.price-group__heading .service-card__icon { width: 3rem; height: auto; flex: none; }
.price-list { display: grid; gap: 0; }
.price-list__item { display: flex; justify-content: space-between; gap: var(--space-2);
                    padding: .7rem 0; border-bottom: 1px solid var(--color-border); }
.price-list__item:last-child { border-bottom: none; }
.price-list__value { font-weight: 600; white-space: nowrap; color: var(--color-primary-dark);
                     font-variant-numeric: tabular-nums; }
.price-group__more { margin: .75rem 0; color: var(--color-text-muted);
                     font-size: var(--font-size-small); }

/* ─── прайс: выбор нескольких услуг сразу ───
 *
 * Без js этих классов на странице просто не с чем работать: чекбокс лежит
 * рядом с названием как обычная часть строки, а панель ниже стоит с
 * атрибутом hidden прямо в разметке — снять его может только services.js.
 * Значит и без скрипта прайс остаётся тем же читаемым списком цен, каким был. */
/* Строка выбора услуги — зона нажатия, а не подпись: человек метит в неё
   пальцем на телефоне. Было 26 пикселей по высоте. */
.price-list__выбор { display: flex; align-items: center; min-height: 44px;
  gap: var(--space-2); cursor: pointer; }
.price-list__чекбокс { width: 1.25rem; height: 1.25rem; flex: none;
                       accent-color: var(--color-primary-dark); cursor: pointer; }

.services-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
               background: var(--color-surface); border-top: 1px solid var(--color-border);
               box-shadow: var(--shadow-md); }
.services-bar[hidden] { display: none; }
.services-bar__inner { display: flex; align-items: center; justify-content: space-between;
                       gap: var(--space-2); flex-wrap: wrap; padding-block: var(--space-2); }
.services-bar__count { margin: 0; font-weight: 600; color: var(--color-text); }
.services-bar__count small { display: block; font-weight: 400; color: var(--color-text-muted);
                             font-size: var(--font-size-small); }

/* ─── врач без фотографии ─── */
.specialist-card__avatar { width: 5rem; height: 5rem; border-radius: 50%; margin: 0 auto .75rem;
                           display: grid; place-items: center; font-size: 1.6rem; font-weight: 700;
                           color: var(--color-primary-dark);
                           background: var(--color-background-alt); }
.specialist-card { text-align: center; }
.specialist-card__role { color: var(--color-text-muted); font-size: var(--font-size-small);
                         margin-bottom: var(--space-2); }
/* Рассказ о враче своими словами от клиники — короче обычного абзаца, но
   заметно темнее .role, иначе теряется рядом с полупрозрачной специальностью. */
.specialist-card__bio { color: var(--color-text); font-size: var(--font-size-small);
                        margin-bottom: var(--space-2); }
.specialists__grid { display: grid; gap: var(--space-3);
                     grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }

/* ─── часы работы ─── */
.hours-list { display: grid; gap: .5rem; margin-block: var(--space-3);
              grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.hours-list__item { display: flex; justify-content: space-between; gap: var(--space-2);
                    padding: .7rem 1rem; border: 1px solid var(--color-border);
                    border-radius: var(--radius-sm); background: var(--color-surface); }
.hours-list__item--off { color: var(--color-text-muted); background: transparent; }
.hours-list__item strong { font-variant-numeric: tabular-nums; }

/* ─── форма записи ─── */
.zapis__обёртка { max-width: 44rem; }
.zapis { display: grid; gap: var(--space-3); }
.zapis__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
/* Подписи к отметкам согласия — обычным цветом, не приглушённым.
 *
 * Стояло `--color-text-muted` (#68858b): на белом это контраст 3.95, на
 * светлом фоне 3.80 при норме 4.5 для мелкого текста. Приглушённый серый
 * взят был просто как «подпись под полем», и в этом ошибка: здесь не
 * подсказка, а тот самый текст, чья работа — сделать согласие
 * информированным. Закон о защите прав потребителей требует доводить
 * сведения «в наглядной и доступной форме» (ч. 2 ст. 8, ст. 10), и в споре
 * плохо читаемая подпись работает против того, кто её набрал, — ровно как
 * мелкий шрифт в договоре.
 *
 * ПРАВИЛО: юридически значимый текст не красится приглушённым. Согласия,
 * оферта, политика, цены, условия отказа — полный контраст. Muted остаётся
 * для «по нему перезвоним» и подобного. */
.zapis__soglasie { font-size: var(--font-size-small); color: var(--color-text); }
/* Отметки согласий. flex:none у квадратика — иначе он сжимается в полоску
   рядом с длинной подписью в две строки. */
.zapis__отметка { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; cursor: pointer; }
.zapis__отметка input { flex: none; margin-top: 3px; width: 16px; height: 16px; }
.zapis__отметка a { text-decoration: underline; }
.zapis__ответ { padding: .9rem 1.1rem; border-radius: var(--radius-sm); }
.zapis__ответ.хорошо { background: var(--color-background-alt); color: var(--color-primary-dark);
                       border: 1px solid var(--color-border); }
.zapis__ответ.плохо { background: #fff4ed; color: #9a4b16; border: 1px solid #f3d3bd; }
/* Ловушка для роботов: убрана с глаз, но не display:none — часть ботов
   пропускает скрытые так поля, а этот способ они заполняют. */
.ловушка { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ─── документы ─── */
.документ { max-width: 46rem; }
.документ h2 { margin: var(--space-4) 0 var(--space-1); }
.документ p, .документ ul { margin-bottom: var(--space-2); }
.документ ul { padding-left: 1.35rem; list-style: disc; }
.документ li { margin-bottom: .4rem; }
.документ a { color: var(--color-primary-dark); text-decoration: underline; }
/* «Редакция от…» — по ней определяют, какая версия оферты действует, то есть
   какие условия человек принял. Тот же случай, что и подписи согласий. */
.документ__дата { color: var(--color-text); font-size: var(--font-size-small); }
/* `.документ__сноска` убрана вместе со своими двумя применениями (67b6ea4):
   сноска в оферте признавала, что документ не проверен юристом, а в политике
   обещала подстановку своего документа, которой нет. Класс не оставлен «на
   всякий случай»: мёртвый стиль выглядит поддерживаемым и приглашает себя
   переиспользовать — а вместе с ним на юридическую страницу вернулся бы
   приглушённый цвет, который отсюда только что убрали. Понадобится клинике
   публиковать свой документ — там нужен обычный видимый текст, а не сноска
   мелким серым. */

.site-footer__made { margin-top: var(--space-3); opacity: .7;
                     font-size: var(--font-size-small); }

@media (max-width: 40rem) { .zapis__row { grid-template-columns: 1fr; } }

/* ─── поля формы в окне записи ─── */
.field { display: grid; gap: .4rem; }
.field__label { font-size: var(--font-size-small); font-weight: 600;
                color: var(--color-primary-dark); }
.field__hint { font-size: var(--font-size-small); color: var(--color-text-muted); }
.field__control { width: 100%; min-height: 3rem; padding: .75rem 1rem; font: inherit;
                  color: var(--color-text); background: var(--color-surface);
                  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
                  transition: border-color var(--transition); }
.field__control:focus { outline: none; border-color: var(--color-primary); }
textarea.field__control { min-height: 5rem; resize: vertical; }

/* Поля в ряду стоят на одной линии.
 *
 * `.field` — грид, и в ряду из двух полей высота выравнивалась растяжением:
 * поле рядом с тем, у которого есть подсказка снизу, вытягивалось вслед за
 * ним, и рамки получались разной высоты. Плюс браузер рисует `select` и
 * `input[type=date]` своей высотой, не спрашивая: у нативной даты внутри ещё
 * значок календаря, и она оказывалась на пару пикселей выше соседа. Поэтому
 * ряд прижимаем к верху, а рамкам задаём одну высоту в явном виде. Текстовое
 * поле из правила исключено — оно тянется по содержимому, в этом его смысл. */
.zapis__row { align-items: start; }
.zapis__row .field { align-content: start; }
input.field__control, select.field__control { height: 3rem; }

/* ─── выбор дня полосой ───
 *
 * Плитки, а не выпадающий календарь: «сегодня» и «завтра» выбирают чаще
 * всего остального вместе взятого, и на них должно уходить одно нажатие.
 * Полоса прокручивается вбок — на телефоне это привычнее, чем сетка месяца,
 * и не отнимает пол-экрана у остальной формы. */
.дни { display: flex; gap: .5rem; overflow-x: auto; padding-block: .15rem .4rem;
       scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.день { flex: none; display: grid; gap: .05rem; justify-items: center;
        min-width: 4.4rem; padding: .5rem .6rem; font: inherit; cursor: pointer;
        color: var(--color-text); background: var(--color-surface);
        border: 1px solid var(--color-border); border-radius: var(--radius-sm);
        transition: border-color var(--transition), background var(--transition); }
.день:hover:not(:disabled) { border-color: var(--color-primary); }
.день:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.день__нед { font-size: var(--font-size-small); color: var(--color-text-muted); }
.день__число { font-size: 1.2rem; font-weight: 700; line-height: 1.15;
               font-variant-numeric: tabular-nums; }
.день__мес { font-size: var(--font-size-small); color: var(--color-text-muted); }
/* Выбранный день — на тёмном оттенке палитры, а не на основном: основной у
   части клиник светлый (небесно-голубой, салатовый), и белая подпись на нём
   не дотягивает до нормы контраста. Тёмный получается из того же цвета
   клиники, так что плитка остаётся её. */
.день[aria-pressed="true"] { background: var(--color-primary-dark);
                             border-color: var(--color-primary-dark); color: #fff; }
.день[aria-pressed="true"] .день__нед,
.день[aria-pressed="true"] .день__мес { color: rgb(255 255 255 / 85%); }
/* Нерабочий день гасим, но оставляем: дыра в полосе читается как сбой. */
.день:disabled { opacity: .45; cursor: not-allowed; }
.день--ещё { min-width: 6rem; align-content: center; font-size: var(--font-size-small);
             color: var(--color-primary-dark); font-weight: 600; }
/* Полоса шире половины окна, поэтому ряд «дата + время» становится в одну
   колонку. Класс ставит скрипт — он же строит полосу. */
.zapis__row--дни { grid-template-columns: 1fr; }
.lead-catcher .zapis { margin-top: var(--space-3); }

/* ─── отзывы и статьи, заведённые клиникой ─── */
.reviews__grid, .home-articles__grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}
.review-card__text { font-size: 1.02rem; }
.review-card__author { margin-top: var(--space-2); font-weight: 600;
                       color: var(--color-primary-dark); }
.article-card__media { margin: calc(var(--space-3) * -1) calc(var(--space-3) * -1) var(--space-2);
                       border-radius: var(--radius-md) var(--radius-md) 0 0; overflow: hidden; }
.article-card__image { width: 100%; height: 12rem; object-fit: cover; display: block; }

/* ─── фотография врача вместо инициалов ─── */
.specialist-card__photo { width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
                          border-radius: var(--radius-md); margin-bottom: .75rem;
                          display: block; }

/* ─── страница «как поставить приложение» ─── */
.ustanovka__grid { display: grid; grid-template-columns: 1.4fr 1fr;
                   gap: var(--space-4); align-items: start; }
.ustanovka h2 { font-size: clamp(1.1rem, 1.8vw, 1.4rem);
                margin: var(--space-4) 0 var(--space-1); }
.ustanovka p { margin-bottom: var(--space-2); }
.ustanovka__шаги { padding-left: 1.35rem; list-style: decimal; margin-bottom: var(--space-2); }
.ustanovka__шаги li { margin-bottom: .4rem; }
.ustanovka__сноска { color: var(--color-text-muted); font-size: var(--font-size-small); }
.ustanovka__qr { text-align: center; position: sticky; top: 6rem; }
.ustanovka__qr img { width: min(100%, 15rem); height: auto; margin: var(--space-2) auto;
                     display: block; }
@media (max-width: 60rem) { .ustanovka__grid { grid-template-columns: 1fr; }
                            .ustanovka__qr { position: static; } }


/* Часы работы внутри блока контактов.
 *
 * Отдельного раздела на пол-экрана у них больше нет: «как доехать» и «когда
 * открыто» — один вопрос, и отвечать на него надо в одном месте. Список здесь
 * плотный, в две колонки: семь строк подряд в колонке контактов вытянули бы
 * её вдвое длиннее карты рядом.
 */
.contacts__hours { margin-block: var(--space-3); }

.contacts__hours-title {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: baseline;
  margin: 0 0 .5rem;
  font-weight: 600;
}

/* Часы работы на сегодня. Цвет текста — тёмный оттенок палитры, а не акцент.
 *
 * Стояло `color: var(--color-accent)` на подложке того же тона в 12% — то
 * есть светло-голубое по светло-голубому: замер дал 1.66:1 при норме 4.5 для
 * мелкого текста, а размер здесь 13px. Строка сообщает, работает ли клиника
 * ПРЯМО СЕЙЧАС, — то самое, ради чего человек и открыл контакты, — и читать
 * её должно быть легче всего на странице, а не труднее всего.
 *
 * Подложку оставляем прежней: она отделяет строку от списка часов и на
 * контраст почти не влияет. Меняется только цвет надписи. */
.contacts__today {
  padding: .1rem .5rem;
  border-radius: 999px;
  background: rgb(var(--color-accent-rgb) / 12%);
  color: var(--color-primary-dark);
  font-size: .8125rem;
  font-weight: 500;
}

.contacts__hours-list {
  /* Одна колонка, а не две.
     Колонка контактов узкая, и «понедельник 09:00–20:00» в половину её
     ширины не помещается — при двух столбцах каждая вторая строка
     переносилась. Семь строк в столбик короче, чем семь перенесённых. */
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contacts__hours-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding: .3rem 0;
  border-bottom: 1px solid var(--color-border);
}

.contacts__hours-list li.is-off { color: var(--color-text-muted); }
.contacts__hours-list strong { font-variant-numeric: tabular-nums; white-space: nowrap; }

.contacts__hours-note {
  margin: .6rem 0 0;
  color: var(--color-text-muted);
  font-size: .9375rem;
}


/* Подпись под отзывом: снимок автора рядом с именем. */
.review-card__подпись { display: flex; gap: .625rem; align-items: center; margin-top: .75rem; }
.review-card__фото {
  width: 2.75rem; height: 2.75rem;
  border-radius: 999px;
  object-fit: cover;
  flex: none;
}
.review-card__подпись .review-card__author { margin: 0; }


/* Настоящие отзывы: звёзды, оценка и ответ клиники. */
.reviews__средняя {
  margin: 0 0 var(--space-3);
  color: var(--color-text-muted);
}
.reviews__средняя b { color: var(--color-text); font-size: 1.25rem; }

.review-card__звёзды {
  margin: 0 0 .5rem;
  color: #f59e0b;
  font-size: 1.0625rem;
  letter-spacing: .1em;
}
/* Незаполненные звёзды — тем же знаком, но приглушённо: так их ряд не
   прыгает по ширине от оценки к оценке. */
.review-card__пусто { color: var(--color-border); }

.review-card__ответ {
  margin-top: .75rem;
  padding: .75rem;
  border-radius: var(--radius-sm);
  background: rgb(var(--color-accent-rgb) / 8%);
  font-size: .9375rem;
}
.review-card__ответ p { margin: 0; }
.review-card__ответил {
  margin-bottom: .25rem !important;
  color: var(--color-accent);
  font-weight: 600;
  font-size: .8125rem;
}