/* ============================================================================
   Форма отзыва — template-parts/review-form.php

   Два режима одной вёрстки:
     .dkO--inline — карточка в теле страницы (штатно — /fb2/);
     .dkO--dialog — окно, открывается ссылкой #dk-otzyv на :target.

   Механика окна повторяет .dkZ (форма записи) из site.css буквально: если бы
   она была своя, две одинаковые с виду штуки закрывались бы по-разному.
   Ни строчки JS: :target, radio + :checked, обычные ссылки.

   Токены только из assets/tokens.css. Тени синие. !important не используется.
   ========================================================================== */

.dkO,
.dkO *,
.dkO *::before,
.dkO *::after { box-sizing: border-box; }

/* --- Общая панель --------------------------------------------------------- */

.dkO__panel {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh1);
  padding: 32px;
  font-family: var(--font-body);
  color: var(--body);
}

.dkO__title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 8px;
}

.dkO__lead {
  font-size: 15px;
  line-height: var(--lh-body, 1.6);
  margin: 0 0 22px;
}

/* --- Режим «в теле страницы» ---------------------------------------------- */

.dkO--inline {
  width: min(720px, 100%);
  margin-inline: auto;
}

/* --- Режим «окно» --------------------------------------------------------- */

.dkO--dialog {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}

/* :target — открытие ссылкой, --open — возврат после отправки без JS. */
.dkO--dialog:target,
.dkO--dialog.dkO--open { display: flex; }

.dkO__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 40, 70, .6);
}

.dkO--dialog .dkO__panel {
  width: min(560px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  border: 0;
  box-shadow: var(--sh2);
}

.dkO__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
  color: var(--muted);
  text-decoration: none;
  border-radius: var(--r-pill);
}

.dkO__close:hover { background: var(--air); color: var(--ink); }

/* --- Сообщение о результате ----------------------------------------------- */

.dkO__flash {
  padding: 16px 18px;
  margin: 0 0 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--air);
}

.dkO__flash--err { border-color: #F2C9C9; background: #FFF6F6; }

.dkO__flashTitle {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  color: var(--navy);
  margin: 0 0 6px;
}

.dkO__flash--err .dkO__flashTitle { color: #b32d2e; }

.dkO__flashText { font-size: 14px; line-height: 1.55; margin: 0; }
.dkO__flashText + .dkO__flashText { margin-top: 6px; }
.dkO .dkO__flashText a { color: var(--navy); font-weight: 600; }

/* --- Поля ------------------------------------------------------------------ */

/* Правило одно на весь проект: колонки схлопываются сами, без брейкпоинта. */
.dkO__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--sp-4, 16px);
}

.dkO__field { display: block; margin-bottom: 16px; }

.dkO__label {
  display: block;
  font-size: var(--fz-meta, 13px);
  color: var(--body);
  margin-bottom: 6px;
  padding: 0;
}

.dkO__req { color: var(--muted); }

.dkO__input {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--air);
  font-family: var(--font-body);
  font-size: 16px;   /* меньше 16px — Safari на iOS зумит страницу при фокусе */
  line-height: 1.5;
  color: var(--ink);
}

.dkO__input:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }

.dkO__area { min-height: 150px; resize: vertical; }

.dkO__select { appearance: none; padding-right: 40px; }

/* Ловушка для роботов. Не display:none: часть ботов пропускает скрытые поля,
   а часть — наоборот, заполняет именно их. Уводим за экран. */
.dkO__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Оценка: радиокнопки без JS -------------------------------------------- */

.dkO__rate {
  border: 0;
  padding: 0;
  margin: 0 0 16px;
  min-width: 0;   /* fieldset не сжимается в grid/flex без этого */
}

.dkO__rateRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* Порядок в разметке 5→1, чтобы «5» стояла первой и без row-reverse
     не ломала переход по Tab. */
}

.dkO__rateItem { position: relative; display: inline-flex; }

/* Сам input не прячем от клавиатуры: он остаётся фокусируемым,
   видимость даёт :focus-visible на соседе. */
.dkO__rateItem input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.dkO__rateBox {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--air);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  color: var(--body);
}

.dkO__rateItem input:checked + .dkO__rateBox {
  border-color: var(--navy);
  background: var(--tint);
  color: var(--navy);
}

.dkO__rateItem input:focus-visible + .dkO__rateBox {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

/* --- Согласия -------------------------------------------------------------- */

.dkO__check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 12px;
  cursor: pointer;
}

.dkO__check input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--navy);
}

.dkO .dkO__check a { color: var(--navy); text-decoration: underline; }

/* --- Кнопка ---------------------------------------------------------------- */

/* Два класса в селекторе намеренно: kit Elementor красит ссылки и кнопки
   правилом вида .elementor-kit-N button и перебивает одиночный класс.
   Специфичности 0,2,0 хватает, !important не нужен. */
.dkO .dkO__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  margin-top: 8px;
  padding: 0 24px;
  border: 1px solid var(--accent);
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur, 200ms) var(--ease, ease);
}

.dkO .dkO__submit:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.dkO .dkO__submit:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

.dkO__note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  margin: 14px 0 0;
}

.dkO .dkO__note a { color: var(--navy); }

/* --- Запасной вид, когда приёмник отключён --------------------------------- */

.dkO--broken { width: min(720px, 100%); margin-inline: auto; }
.dkO--broken .dkO__panel { background: var(--air); }
.dkO .dkO__lead a { color: var(--navy); font-weight: 600; }

/* --- Мелкие экраны --------------------------------------------------------- */

@media (max-width: 520px) {
  .dkO__panel { padding: 24px 20px; }
  .dkO__title { font-size: 21px; }
  .dkO__rateBox { padding: 0 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .dkO .dkO__submit { transition-duration: 1ms; }
}