/* ============================================================
   Modal/Booking — модалка записи
   figma: node-id=437:21
   Зависит от assets/css/tokens.css
   ============================================================ */

.sc-modal {
  /* --- Геометрия из макета, которой нет в ролях токенов --- */
  --modal-w: 1040px;          /* два квадрата по 520 */
  --modal-close: 40px;

  /* Затемнение из описания компонента (#000 40%); блюр — сверх макета */
  --modal-blur: 16px;
  --modal-dur: 240ms;
  --modal-z: 200;

  box-sizing: border-box;
  position: fixed;
  inset: 0;
  z-index: var(--modal-z);
  display: grid;
  place-items: center;
  padding: var(--page-margin-x);
}

.sc-modal[hidden] { display: none; }

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

/* ---------- Оверлей ---------- */

.sc-modal__overlay {
  position: absolute;
  inset: 0;
  background: var(--sc-black-alpha-40);
  -webkit-backdrop-filter: blur(var(--modal-blur));
  backdrop-filter: blur(var(--modal-blur));
  opacity: 0;
  transition: opacity var(--modal-dur) var(--sc-ease);
}

.sc-modal.sc-is-open .sc-modal__overlay { opacity: 1; }

/* ---------- Диалог ---------- */

.sc-modal__dialog {
  position: relative;
  inline-size: min(var(--modal-w), 100%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--background);
  color: var(--foreground);
  box-shadow: var(--shadow-xl);

  /* Появление и уход идут по одной диагонали: диалог разворачивается
     из левого нижнего угла и сворачивается в правый верхний — туда,
     куда смотрит стрелка закрытия. Стартовое состояние = левый нижний. */
  transform-origin: bottom left;
  opacity: 0;
  transform: translate(calc(-1 * var(--modal-close)), var(--modal-close)) scale(0.85);
  transition:
    opacity var(--modal-dur) var(--sc-ease-out),
    transform var(--modal-dur) var(--sc-ease-out);
}

/* Фокус на сам диалог ставит modal.js на сенсорных экранах — это точка входа
   для скринридера, а не элемент управления, рамка не нужна */
.sc-modal__dialog:focus { outline: none; }

.sc-modal.sc-is-open .sc-modal__dialog {
  opacity: 1;
  transform: none;
}

/* Уход в правый верхний угол. Класс ставит modal.js на время
   перехода: точку трансформации нужно перенести до того, как диалог
   поедет, иначе он сначала прыгнет обратно в левый нижний. */
.sc-modal.sc-is-closing .sc-modal__dialog {
  transform-origin: top right;
  transform: translate(var(--modal-close), calc(-1 * var(--modal-close))) scale(0.85);
  opacity: 0;
}

/* Фото тянется на высоту диалога, а не держит квадрат: панель с формой
   выше 520, и при фиксированной пропорции под фото оставалась полоса фона.
   Кадр кроется, пропорция снимка не искажается. */
.sc-modal__photo {
  block-size: 100%;
  min-block-size: var(--sq-modal, 520px);
  overflow: hidden;
  background: var(--muted);
}

.sc-modal__photo img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.sc-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--grid-gap);
  padding: var(--sc-space-12); /* 48 в макете */
  min-inline-size: 0;
}

/* ---------- Крестик ---------- */

.sc-modal__close {
  position: absolute;
  inset-block-start: var(--grid-gap);
  inset-inline-end: var(--grid-gap);
  inline-size: var(--modal-close);
  block-size: var(--modal-close);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: var(--sc-line) solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
  transition:
    background-color var(--sc-dur-fast) var(--sc-ease),
    border-color var(--sc-dur-fast) var(--sc-ease);
}

/* Icon/ArrowTurn в правый верхний угол: −45°, на ховере тычется туда же */
.sc-modal__close svg {
  transform: rotate(-45deg);
  transition: transform var(--sc-dur-arrow) var(--sc-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .sc-modal__close:hover {
    background: var(--muted);
    border-color: var(--foreground);
  }

  .sc-modal__close:hover svg {
    transform: translate(var(--sc-space-1), calc(-1 * var(--sc-space-1))) rotate(-45deg);
  }
}

/* ---------- Текст ---------- */

.sc-modal__kicker {
  margin: 0;
  color: var(--muted-foreground);
}

.sc-modal__title {
  margin: 0;
  color: var(--foreground);
}

.sc-modal__note {
  margin: 0;
  max-width: var(--sc-measure);
  color: var(--muted-foreground);
}

/* ---------- Форма ---------- */

.sc-modal__form {
  --sc-form-gap: var(--grid-gap);   /* шаг колонки — см. правило в base.css */

  display: flex;
  flex-direction: column;
  gap: var(--grid-gap);
}

.sc-modal__fields {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-3); /* 12 в макете */
}

.sc-modal__field { display: block; }

/* Подпись нужна скринридеру: плейсхолдер её не заменяет, а в макете её нет */
.sc-modal__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sc-modal__input {
  inline-size: 100%;
  block-size: var(--field-height);
  padding-inline: var(--grid-gap);
  border: var(--sc-line) solid var(--field-border);
  border-radius: var(--radius);
  background: var(--field-bg);
  color: var(--field-text);
  font: 400 var(--p-size) / var(--p-lh) var(--font-sans);
  transition: border-color var(--sc-dur-fast) var(--sc-ease);
}

.sc-modal__input::placeholder { color: var(--field-placeholder); }

.sc-modal__input:hover { border-color: var(--field-border-focus); }

.sc-modal__input:focus-visible {
  outline: var(--sc-focus-w) solid var(--ring);
  outline-offset: var(--sc-focus-offset);
  border-color: transparent;
}

/* Состояние ошибки — в Figma его нет, обязательно по CLAUDE.md */
.sc-modal__input[aria-invalid="true"] { border-color: var(--field-border-error); }

.sc-modal__error {
  margin: var(--sc-space-1) 0 0;
  color: var(--field-text-error);
  font: 400 var(--p-mini-size) / var(--p-mini-lh) var(--font-sans);
}

/* В отличие от B11 место под ошибку здесь НЕ резервируем: там оно
   держало кнопку в одной строке с полями, а тут кнопки под полями и
   резерв растил диалог до 546 — фото переставало быть квадратом 520.
   При ошибке модалка подрастает и переезжает по центру, это нормально. */
.sc-modal__error[hidden] { display: none; }

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

.sc-modal__actions {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap-sm);
}

.sc-modal__submit,
.sc-modal__later {
  block-size: var(--field-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--control-padding-x);
  border: var(--sc-line) solid transparent;
  border-radius: var(--radius);
  font: var(--button-weight) var(--button-size) / var(--button-lh) var(--font-headings);
  letter-spacing: var(--button-ls);
  text-transform: uppercase;
  text-align: center;      /* ссылка в две строки не уезжает влево */
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--sc-dur) var(--sc-ease),
    color var(--sc-dur) var(--sc-ease),
    border-color var(--sc-dur) var(--sc-ease);
}

.sc-modal__submit {
  background: var(--primary);
  color: var(--primary-foreground);
}

/* Наведение уводит кнопку на ступень глубже фирменного синего */
.sc-modal__submit:hover { background: var(--sc-primary-hover); }

.sc-modal__later {
  border-color: var(--border);
  background: transparent;
  color: var(--foreground);
}

.sc-modal__later:hover { background: var(--muted); }

.sc-modal__submit:focus-visible,
.sc-modal__later:focus-visible,
.sc-modal__close:focus-visible {
  outline: var(--sc-focus-w) solid var(--ring);
  outline-offset: var(--sc-focus-offset);
}

.sc-modal__submit:active,
.sc-modal__later:active { opacity: 0.85; }

/* Состояние загрузки — в Figma его нет, обязательно по CLAUDE.md */
.sc-modal__form[data-state="loading"] .sc-modal__submit,
.sc-modal__submit:disabled {
  opacity: 0.6;
  pointer-events: none;
}

.sc-modal__legal {
  margin: 0;
  color: var(--muted-foreground);
  font: 400 var(--p-mini-size) / var(--caption-lh) var(--font-sans);
}

/* ---------- Страница под модалкой ---------- */

/* Safari на iPad не держит overflow: hidden на body — страница под модалкой
   прокручивалась пальцем. Поэтому body ещё и фиксируется на месте прокрутки:
   сдвиг top ставит modal.js и снимает при закрытии (2026-11-10) */
body.sc-has-modal {
  overflow: hidden;
  position: fixed;
  inset-inline: 0;
}

@media (prefers-reduced-motion: reduce) {
  .sc-modal__close svg { transition: none; }
  .sc-modal__overlay,
  .sc-modal__dialog,
  .sc-modal__close,
  .sc-modal__input,
  .sc-modal__submit,
  .sc-modal__later { transition: none; }
}

/* ---------- Мобильный ----------
   Макета нет: два квадрата в 408px не живут. Диалог занимает экран целиком,
   фото становится полосой, панель прокручивается. */

@media (max-width: 640px) {
  .sc-modal { padding: 0; place-items: stretch; }

  .sc-modal__dialog {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    inline-size: 100%;
    max-block-size: 100vh;
    max-block-size: 100dvh;
    overflow-y: auto;
  }

  .sc-modal__photo { block-size: auto; min-block-size: 0; aspect-ratio: 16 / 9; }

  .sc-modal__panel { padding: var(--card-padding); }
}

/* ---------- Передреєстрація: надсилання → success (2026-10-14) ----------
   Макет: Components «Modal/Booking · передреєстрація — стани» (1275:3298) */

.sc-modal__actions { position: relative; }

/* смужка невизначеного прогресу під кнопками — як у підписці в статті */
.sc-modal__progress {
  --modal-send-dur: 1.2s;
  position: absolute;
  inset-block-start: calc(100% + var(--sc-space-1_5));
  inset-inline: 0;
  block-size: var(--sc-progress-h);
  background: var(--muted);
  overflow: hidden;
}

.sc-modal__progress-bar {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 40%;
  background: var(--foreground);
  animation: sc-modal-sending var(--modal-send-dur) var(--sc-ease) infinite;
}

@keyframes sc-modal-sending {
  from { transform: translateX(-100%); }
  to   { transform: translateX(250%); }
}

/* надсилання: обидві кнопки і поля приглушені, висота та сама */
.sc-modal__form[data-state="sending"] .sc-modal__submit,
.sc-modal__form[data-state="sending"] .sc-modal__later,
.sc-modal__form[data-state="sending"] .sc-modal__input {
  opacity: 0.45;
  pointer-events: none;
}

/* success: панель ховає кікер, заголовок, підводку і форму — показує блок «Ви в списку»;
   вертикально по центру, як у макеті */
.sc-modal__panel[data-state="done"] > :not(.sc-modal__close):not(.sc-modal__done) { display: none; }
.sc-modal__panel[data-state="done"] { justify-content: center; }

.sc-modal__done { display: contents; } /* ті самі діти панелі: кікер, заголовок, підводка, кнопки */
.sc-modal__done[hidden] { display: none; }

/* кнопка-посилання «Читати Smart Age Journal» — той самий primary */
a.sc-modal__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* ---------- Попап повного відгуку (флеш-відгук у слайдері → клік, 2026-10-28) ----------
   Та сама модалка кита: поява з кута, кнопка закриття-«згортання» як у форми запису.
   Одна колонка без фото, ширина — як колонка тексту */
.sc-modal__dialog--review {
  --modal-w: 640px;
  --dtabs-fact-label-w: 110px; /* підписи (філія, напрямок, фахівець) — та сама сітка, що у вкладці «Відгуки» */
  grid-template-columns: minmax(0, 1fr);
}

.sc-modal__dialog--review .sc-modal__panel {
  justify-content: flex-start;
  gap: var(--sc-space-6);
  max-block-size: calc(100dvh - 2 * var(--grid-gap));
  overflow-y: auto;
}

.sc-review-full__head {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap-sm);
  padding-inline-end: calc(var(--modal-close) + var(--sc-space-4)); /* ім'я не заходить під кнопку */
}

.sc-review-full__head > * { margin: 0; }
.sc-review-full__head .sc-dreviews__date { color: var(--sc-neutral-600); }
.sc-review-full__stars { display: block; }

.sc-review-full__text { margin: 0; max-inline-size: var(--sc-measure); }

.sc-review-full__all {
  align-self: flex-start;
  color: var(--foreground);
  text-decoration: underline;
  text-underline-position: from-font;
}

@media (hover: hover) and (pointer: fine) {
  .sc-review-full__all:hover { text-decoration: none; }
}

.sc-review-full__all:focus-visible {
  outline: var(--sc-focus-w) solid var(--ring);
  outline-offset: var(--sc-focus-offset);
}

@media (max-width: 640px) {
  .sc-modal__dialog--review .sc-modal__panel { padding: var(--card-padding); }
}

/* Відео-відгук у попапі — як у стрічці: постер кита (sc-dvideo, 16:9) з кнопкою Play,
   по кліку на його місці плеєр того ж розміру */
.sc-review-full__video { margin: 0; }
.sc-review-full__video .sc-dvideo__open { inline-size: 100%; aspect-ratio: 16 / 9; }
.sc-review-full__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--sc-black-alpha-80);
}
.sc-review-full__frame iframe {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}

/* Запис у гостьовій книзі — скан сторінки, клік відкриває повний */
.sc-review-full__scan {
  display: block;
  inline-size: 240px;
  max-inline-size: 100%;
  border: var(--sc-line) solid var(--border);
}

.sc-review-full__scan img { display: block; inline-size: 100%; block-size: auto; }

@media (hover: hover) and (pointer: fine) {
  .sc-review-full__scan:hover { border-color: var(--foreground); }
}

.sc-review-full__scan:focus-visible {
  outline: var(--sc-focus-w) solid var(--ring);
  outline-offset: var(--sc-focus-offset);
}

/* Склад замовлення — форма препаратів (preparations.html, 2026-10-29) */
.sc-modal__order {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-1);
}
.sc-modal__order-title { margin: 0; color: var(--foreground); font-weight: var(--sc-weight-medium); }
.sc-modal__order-items { margin: 0; color: var(--sc-neutral-600); }
.sc-modal__order-items[hidden], .sc-modal__order-list[hidden] { display: none; }
.sc-modal__order-list {
  margin: 0;
  color: var(--foreground);
}

/* ---------- Форма відгуку (reviews.html, 2026-10-29): поля як у формі virtus ---------- */
.sc-modal__stars { margin: 0; padding: 0; border: 0; }
/* Підпис над зірками видимий (2026-11-05): без нього п'ять зірок у формі не читаються як питання */
.sc-modal__stars > legend { padding: 0; margin-block-end: var(--sc-space-2); color: var(--sc-neutral-600); }
.sc-modal__stars-row { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: var(--sc-space-1); }
/* row-reverse + «~»: зірки до вибраної включно підсвічуються; у DOM порядок 1→5, візуально 1 ліворуч */
.sc-modal__stars-row { flex-direction: row; justify-content: flex-start; } /* зірки під підписом, від лівого краю */
.sc-modal__star-input { position: absolute; opacity: 0; pointer-events: none; }
/* Зірки (2026-11-05): невибрані — контуром, вибрані — заливкою, як ☆/★ у формі virtus.
   Раніше невибрані були кольору --border, а він у системі чорний — вибір не було видно. */
.sc-modal__star {
  font-size: var(--h3-size);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: var(--sc-line) var(--foreground);
  cursor: pointer;
  transition: color var(--sc-dur-fast) var(--sc-ease);
}
/* заливка до вибраної включно — через :has на рядку; :where знімає вагу id, щоб ховер нижче перебивав */
:where(.sc-modal__stars-row:has(#review-star-1:checked)) .sc-modal__star:nth-of-type(-n+1),
:where(.sc-modal__stars-row:has(#review-star-2:checked)) .sc-modal__star:nth-of-type(-n+2),
:where(.sc-modal__stars-row:has(#review-star-3:checked)) .sc-modal__star:nth-of-type(-n+3),
:where(.sc-modal__stars-row:has(#review-star-4:checked)) .sc-modal__star:nth-of-type(-n+4),
:where(.sc-modal__stars-row:has(#review-star-5:checked)) .sc-modal__star:nth-of-type(-n+5) { color: var(--foreground); }
/* Ховер — передперегляд: заливка до зірки під курсором */
@media (hover: hover) and (pointer: fine) {
  .sc-modal__stars-row:hover .sc-modal__star { color: transparent; }
  .sc-modal__stars-row .sc-modal__star:hover,
  .sc-modal__stars-row .sc-modal__star:has(~ .sc-modal__star:hover) { color: var(--foreground); }
}
.sc-modal__star-input:focus-visible + .sc-modal__star {
  outline: var(--sc-focus-w) solid var(--ring);
  outline-offset: var(--sc-focus-offset);
}
.sc-modal__textarea {
  block-size: auto;
  min-block-size: calc(var(--field-height) * 2);
  padding-block: var(--sc-space-3);
  resize: vertical;
  font: inherit;
}
/* Селект — як інші поля: без нативного скруглення й фону (2026-11-05). Стрілка — дві
   діагоналі градієнтом кольору тексту, без картинки: колір іде від токена */
select.sc-modal__input {
  --select-tick: var(--sc-space-1_5); /* половина «галочки» 6 */
  appearance: none;
  padding-inline-end: calc(var(--grid-gap) * 2 + var(--select-tick) * 2);
  background-color: var(--field-bg);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--field-text) 50%, var(--field-text) calc(50% + var(--sc-line)), transparent calc(50% + var(--sc-line))),
    linear-gradient(-45deg, transparent 50%, var(--field-text) 50%, var(--field-text) calc(50% + var(--sc-line)), transparent calc(50% + var(--sc-line)));
  background-size: var(--select-tick) var(--select-tick);
  background-position:
    right calc(var(--grid-gap) + var(--select-tick)) center,
    right var(--grid-gap) center;
  background-repeat: no-repeat;
  cursor: pointer;
}