/* ============================================================================
   Дель Кам — страница «Отзывы» (page-otzyvy.php).

   Файл самодостаточный. Вид карточки, фильтра и чипов повторяет блок отзывов
   страницы услуги, но правила там живут в service.css + service-page.css,
   а эти два файла грузятся только на `dk_service`. Выбор был из трёх:
   грузить на страницу отзывов 55 КБ чужих стилей вместе с ценами, шапкой
   услуги и аккордеонами; вынести dkR в общий файл (это правка чужих файлов
   темы — не моя работа); или повторить нужные правила здесь. Взят третий.

   Всё заперто внутри `.dkR--page`, поэтому файл не может задеть страницу
   услуги, даже если однажды окажется подключён рядом с ней. Побочная польза:
   селектор из двух классов перебивает `.elementor-kit-N a`, которым конструктор
   красит все ссылки, — без этого белый текст чипов молча становился голубым.

   Значения — только из tokens.css. Цветовых литералов нет, кроме #fff.
   ========================================================================== */

/* Родительская тема уйдёт вместе с Elementor, а с ней и её `*{box-sizing}`.
   Блок объявляет модель сам, иначе чипы с padding вылезут за контейнер. */
.dkR--page,
.dkR--page *,
.dkR--page *::before,
.dkR--page *::after { box-sizing: border-box; }

.dkR--page {
  background: #fff;
  padding: var(--section-y) 0;
  font-family: var(--font-body);
  color: var(--body);
}

.dkR--page .dkR__wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* --- Шапка страницы ------------------------------------------------------ */

.dkR--page .dkR__crumbs {
  font-size: var(--fz-meta);
  color: var(--muted);
  margin-bottom: 16px;
}
.dkR--page .dkR__crumbs a { color: var(--navy); text-decoration: none; }
.dkR--page .dkR__crumbs a:hover { text-decoration: underline; }

.dkR--page .dkR__eyebrow {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fz-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 14px;
}

.dkR--page .dkR__h1 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--fz-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tracking-h1);
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

/* --blue на белом даёт 2.03:1 — подзаголовок набираем --navy. */
.dkR--page .dkR__sub {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fz-sub);
  line-height: var(--lh-sub);
  color: var(--navy);
  margin: 10px 0 32px;
  max-width: 720px;
}

.dkR--page .dkR__intro {
  font-size: var(--fz-body);
  line-height: var(--lh-body);
  max-width: 820px;
  margin: 0 0 32px;
}
.dkR--page .dkR__intro > * + * { margin-top: 18px; }
.dkR--page .dkR__intro a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }

/* Ряд «оставить свой отзыв». Пустует, пока в описаниях терминов «Площадка»
   нет адресов форм, — блок в разметке просто не появляется. */
.dkR--page .dkR__leave {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 28px;
  font-size: var(--fz-meta);
}
.dkR--page .dkR__leaveLabel { color: var(--muted); }
.dkR--page .dkR__leaveLink {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--air);
  border: 1px solid var(--line);
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
}
.dkR--page .dkR__leaveLink:hover { border-color: var(--blue); background: var(--tint); }

/* --- Фильтр: три раскрывающиеся группы ----------------------------------- */

.dkR--page .dkR__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 20px;
}

.dkR--page .dkR__fgroup { position: relative; }

.dkR--page .dkR__fhead {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fz-meta);
  line-height: 1;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1px solid var(--line);
  color: var(--navy);
  white-space: nowrap;
}
.dkR--page .dkR__fhead::-webkit-details-marker { display: none; }
.dkR--page .dkR__fhead::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur) var(--ease);
}
.dkR--page .dkR__fgroup[open] .dkR__fhead::after { transform: rotate(-135deg) translate(-2px, -2px); }

.dkR--page .dkR__fcount { font-variant-numeric: tabular-nums; color: var(--muted); }

/* Выбранное значение видно по самой группе: свернув её, иначе не понять,
   какой фильтр сейчас работает. Тот же приём с :has(), что на странице услуги,
   только зацепка — активный чип, а не отмеченная радиокнопка. */
.dkR--page .dkR__fgroup:has(.dkR__chip--on) > .dkR__fhead {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.dkR--page .dkR__fgroup:has(.dkR__chip--on) > .dkR__fhead .dkR__fcount { color: #fff; opacity: .7; }

.dkR--page .dkR__flist {
  position: absolute;
  z-index: 5;
  top: calc(100% + 8px);
  left: 0;
  min-width: 260px;
  max-width: min(440px, 90vw);
  max-height: 340px;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh2);
}

.dkR--page .dkR__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fz-meta);
  line-height: 1.2;
  padding: 11px 16px;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1px solid var(--line);
  color: var(--navy);
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.dkR--page .dkR__chip:hover { border-color: var(--blue); }
.dkR--page .dkR__chip--all { padding: 12px 18px; }
.dkR--page .dkR__chip--on { background: var(--tint); border-color: var(--blue); color: var(--navy); }

.dkR--page .dkR__chipN {
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: var(--muted);
}
.dkR--page .dkR__chip--on .dkR__chipN { color: var(--navy); }

/* --- Строка «показаны N–M из K» ------------------------------------------ */

.dkR--page .dkR__count {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 20px;
  font-size: var(--fz-meta);
  color: var(--body);
  font-variant-numeric: tabular-nums;
}

.dkR--page .dkR__countPick {
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--tint);
  border: 1px solid var(--line);
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--navy);
}

.dkR--page .dkR__reset {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Лента --------------------------------------------------------------- */

.dkR--page .dkR__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  grid-auto-rows: 1fr;
  align-items: stretch;
  margin: 0;
  /* Карточка сама решает, как ей ужаться: ширина колонки, а не окна. */
  container-type: inline-size;
}

.dkR--page .dkR__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px 26px 22px;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.dkR--page .dkR__card:hover { box-shadow: var(--sh2); }

.dkR--page .dkR__top { display: flex; align-items: flex-start; gap: 12px; }

.dkR--page .dkR__ava {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--r-pill);
  background: linear-gradient(160deg, var(--blue), var(--cyan));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 16px;
}

.dkR--page .dkR__who { min-width: 0; flex: 1; }

.dkR--page .dkR__author {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.dkR--page .dkR__srcline {
  margin-top: 2px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--fz-meta);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Автор и площадка стояли двумя строками одного вида, и «Яндекс Карты»
   читалось как вторая строка имени. Площадка — ярлык с подписью «отзыв с». */
.dkR--page .dkR__plat {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 8px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--air);
  border: 1px solid var(--line);
  font-size: 11px;
  line-height: 1.2;
  white-space: normal;
}
.dkR--page .dkR__platLabel { font-family: var(--font-body); font-weight: 400; color: var(--muted); }
.dkR--page .dkR__platName { font-family: var(--font-head); font-weight: 700; color: var(--navy); }

.dkR--page .dkR__rate {
  color: var(--star);
  font-size: 13px;
  letter-spacing: 1.5px;
}

/* Ярлыки врача и направления. В карточке-флекс-колонке одиночный inline-block
   растягивается по ширине и начинает читаться как пустое поле ввода — поэтому
   у них своя строка с flex-wrap, а сами пилюли жмутся к содержимому. */
.dkR--page .dkR__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
}

.dkR--page .dkR__svc {
  display: inline-block;
  max-width: 100%;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--air);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy);
  white-space: normal;
}

/* Направление — второй ярлык, и он должен читаться как подпись, а не как
   второй врач: то же начертание, но без заливки. */
.dkR--page .dkR__svc--dir { background: #fff; color: var(--muted); }

.dkR--page .dkR__text {
  font-size: 15px;
  line-height: 1.62;
  color: var(--body);
  margin: 12px 0 0;
  overflow-wrap: anywhere;
  /* Обрезаем, а не даём длинному отзыву рвать высоту строки сетки. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
}

.dkR--page .dkR__exp { margin-top: 8px; }
.dkR--page .dkR__exp > summary { list-style: none; cursor: pointer; }
.dkR--page .dkR__exp > summary::-webkit-details-marker { display: none; }

.dkR--page .dkR__toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fz-meta);
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dkR--page .dkR__toggleClose { display: none; }
.dkR--page .dkR__exp[open] .dkR__toggleOpen { display: none; }
.dkR--page .dkR__exp[open] .dkR__toggleClose { display: inline; }

/* Раскрытие снимает обрезку у текста той же карточки. */
.dkR--page .dkR__card:has(.dkR__exp[open]) .dkR__text {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

/* Раскрытая карточка перестаёт быть заложницей общей высоты строки. */
.dkR--page .dkR__grid:has(details[open]) { grid-auto-rows: auto; }

/* --- Ответ клиники -------------------------------------------------------- */

.dkR--page .dkR__reply {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.dkR--page .dkR__replyHead {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fz-meta);
  color: var(--navy);
}
.dkR--page .dkR__replyHead::-webkit-details-marker { display: none; }
.dkR--page .dkR__replyHead::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur) var(--ease);
}
.dkR--page .dkR__reply[open] .dkR__replyHead::after { transform: rotate(-135deg) translate(-2px, -2px); }

.dkR--page .dkR__replyText {
  margin: 4px 0 0;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--air);
  font-size: 14px;
  line-height: 1.6;
  color: var(--body);
  overflow-wrap: anywhere;
}

.dkR--page .dkR__spacer { flex: 1 1 auto; }

.dkR--page .dkR__more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 14px 0 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dkR--page .dkR__more:hover { color: var(--cyan); }

/* --- Пагинация ------------------------------------------------------------
   Разметку рисует paginate_links(), классы у неё свои и переименованию
   не поддаются, поэтому стилизуем их внутри своего контейнера. */

.dkR--page .dkR__pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 32px 0 0;
}

.dkR--page .dkR__pager .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: #fff;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fz-meta);
  font-variant-numeric: tabular-nums;
  color: var(--navy);
  text-decoration: none;
}
.dkR--page .dkR__pager a.page-numbers:hover { border-color: var(--blue); background: var(--tint); }
.dkR--page .dkR__pager .page-numbers.current {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.dkR--page .dkR__pager .page-numbers.dots { border-color: transparent; color: var(--muted); }

/* --- Хвост ---------------------------------------------------------------- */

.dkR--page .dkR__empty {
  margin: 8px 0 0;
  padding: 28px;
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  background: var(--air);
  font-size: var(--fz-body);
  color: var(--body);
}
.dkR--page .dkR__empty a { color: var(--navy); }

/* Обязательную оговорку не набираем цветом, который не читается. */
.dkR--page .dkR__note {
  margin: 28px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--body);
  max-width: 900px;
}

/* Только для скринридера. */
.dkR--page .dkR__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Фокус виден: --cyan на белом даёт 2.31:1, для индикатора это ниже нормы. */
.dkR--page :is(.dkR__chip, .dkR__fhead, .dkR__toggle, .dkR__replyHead, .dkR__more,
               .dkR__reset, .dkR__leaveLink, .page-numbers):focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

/* --- Раскладка ------------------------------------------------------------ */

/* repeat(auto-fit, minmax(Npx, 1fr)) здесь запрещён: он не сжимается ниже N
   и выдавливает страницу вбок на узком экране. Ширины задаём явно. */
@media (max-width: 1199px) {
  .dkR--page .dkR__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .dkR--page .dkR__grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .dkR--page .dkR__card { padding: 20px 18px 18px; }
  /* Выпадающий список на узком экране становится обычным блоком: абсолютно
     позиционированная панель шириной 440px на телефоне уезжает за край. */
  .dkR--page .dkR__flist {
    position: static;
    max-width: none;
    max-height: none;
    box-shadow: none;
    margin-top: 8px;
  }
  .dkR--page .dkR__filters { gap: 8px; }
  /* Замер в мобильном вьюпорте показал 32px у «Показать все» — норма 44px. */
  .dkR--page .dkR__reset { min-height: 44px; }
}


@media (prefers-reduced-motion: reduce) {
  .dkR--page * {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
  .dkR--page .dkR__card:hover { transform: none !important; }
}