/* ==========================================================================
   Попапы. Разметку собирает popups.js, окно — тот же <dialog>, что и быстрый
   просмотр: подложка, Esc и ловушка фокуса достаются от браузера.
   ========================================================================== */

.popup {
  width: min(30rem, 100vw - var(--sp-8));
  max-height: min(44rem, 100vh - var(--sp-8));
  padding: 0;
  margin: auto;
  position: relative;
  color: var(--c-ink);
  background: var(--c-bg);
  border: 0;
  border-radius: var(--radius);
  box-shadow: 0 1.5rem 3rem rgb(28 24 21 / .22);
  overflow: auto;
}

.popup::backdrop { background: rgb(28 24 21 / .45); }

/* Полноэкранный режим из админки: карточка растягивается на весь экран,
   содержимое остаётся по центру и не расползается по ширине монитора. */
.popup[data-mode="fullscreen"] {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  border-radius: 0;
}

/* Высоту тянет и обёртка, которую заполняет JS: без неё `height: 100%` у
   карточки считать не от чего, и содержимое прижимается к верху экрана. */
.popup[data-mode="fullscreen"] [data-popup-body] { height: 100%; }

.popup[data-mode="fullscreen"] .popup__inner {
  max-width: 34rem;
  height: 100%;
  margin-inline: auto;
  align-content: center;
}

.popup__close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 1;
  background: var(--c-bg);
  border-radius: var(--radius-pill);
}

.popup__inner {
  display: grid;
  gap: var(--sp-6);
  padding: var(--sp-6);
}

.popup__media {
  border-radius: var(--radius);
  background: var(--c-surface);
  overflow: hidden;
}

.popup__media img {
  display: block;
  width: 100%;
  height: auto;
}

.popup__body { display: grid; gap: var(--sp-3); }

.popup__title {
  margin: 0;
  font-size: var(--fs-h3);
  line-height: 1.2;
}

.popup__subtitle {
  margin: 0;
  color: var(--c-ink-2);
}

.popup__form { display: grid; gap: var(--sp-4); margin-top: var(--sp-2); }

.popup__field { display: grid; gap: var(--sp-2); border: 0; padding: 0; margin: 0; }

.popup__label {
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
}

.popup__req { color: var(--c-error); }

.popup__input {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  color: inherit;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  font: inherit;
  font-size: var(--fs-sm);
}

.popup__input:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 1px;
}

.popup__check {
  display: flex;
  gap: var(--sp-2);
  align-items: start;
  font-size: var(--fs-sm);
  cursor: pointer;
}

.popup__consent { color: var(--c-ink-2); }

/* Ловушка для ботов: поле должно быть недостижимо и невидимо, но не
   display:none — часть ботов такие поля пропускает. */
.popup__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.popup__error {
  margin: 0;
  color: var(--c-error);
  font-size: var(--fs-sm);
}

.popup__submit { width: 100%; }

@media (max-width: 480px) {
  .popup { width: 100vw; max-width: 100vw; border-radius: var(--radius) var(--radius) 0 0; }
  .popup__inner { padding: var(--sp-6); }
}