/* ==========================================================================
   Экосистема 99Percentile – попап записи на консультацию

   Источник: Figma нода 32513:3984, 591×762.
   Значения сняты через get_design_context.

   ЗАМЕРЫ ИЗ МАКЕТА:
     окно          591×762, фон #F2F2F8, радиус 24, padding 24,
                   колонка, промежуток 32
     картинка      радиус 24, занимает оставшуюся высоту
     блок полей    промежуток между полями 8, до кнопки 48
     поле          фон #FFFFFF, высота 75.571, радиус 16, padding 16,
                   текст Inter Regular 20 / 1.3 / −1px (−5%), цвет #3A3A3A
     кнопка        фон #2597FF, высота 57, радиус 999, padding 8/20,
                   во всю ширину, текст Inter Semi Bold 20 / 1.2 / −1px
     крестик       40×40, белый круг, иконка 24×24, обводка #2597FF

   ЧЕГО В МАКЕТЕ НЕТ – сделано минимально и подлежит согласованию:
     подложка попапа, анимация открытия, состояния ошибки поля,
     состояние отправки, экран «спасибо».
   ========================================================================== */

.popup[hidden] { display: none; }

.popup {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);

  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-24);
}

/* [ВЫВЕДЕН] Подложки в макете нет – попап нарисован отдельным окном.
   Без затемнения окно теряется на светлой странице. */
.popup__overlay {
  position: absolute;
  inset: 0;
  background: rgba(58, 58, 58, .45);
}

.popup__dialog {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  gap: var(--space-32);

  width: 591px;
  max-width: 100%;
  max-height: 100%;
  overflow-y: auto;

  padding: var(--space-24);
  background: var(--color-bg-soft);
  border-radius: var(--radius-xl); /* 24 */
}

/* --- Крестик -------------------------------------------------------------- */
/* Нода 32513:4084: 40×40 на left 503 / top 48 → right 48 от края окна. */

.popup__close {
  position: absolute;
  top: 48px;
  right: 48px;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;

  background: var(--color-bg);
  border-radius: var(--radius-pill);
}

/* --- Картинка ------------------------------------------------------------- */
/* Нода 32513:3985: 543×334.29, радиус 24 – фиксированная высота, не flex-grow. */

.popup__media {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 543 / 334.29;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.popup__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.popup__form {
  display: flex;
  flex-direction: column;
  gap: 48px;
  flex: 0 0 auto;
}

.popup__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.popup__input {
  width: 100%;
  min-height: 75.571px;
  padding: var(--space-16);

  background: var(--color-bg);
  border: 0;
  border-radius: var(--radius-lg); /* 16 */

  font-size: var(--fs-body);       /* 20 */
  line-height: 1.3;                /* text_20_reg */
  font-weight: 400;
  letter-spacing: -0.05em;         /* −1px при 20px */
  color: var(--color-text);
}

/* Плейсхолдер в макете набран тем же кеглем и цветом, что и значение –
   отдельного «серого» состояния дизайнер не рисовал. */
.popup__input::placeholder {
  color: var(--color-text);
  opacity: 1;
}

/* Выпадающие списки «Экзамен» / «Программа» – та же плашка, что у полей,
   плюс стрелка справа (та же, что у пунктов меню). Пока выбран первый
   пункт-подпись, текст выглядит как placeholder. */
.popup__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: calc(var(--space-16) * 2 + 18px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M4.5 6.75L9 11.25L13.5 6.75' stroke='%233A3A3A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-16) center;
  cursor: pointer;
}

/* [ВЫВЕДЕН] Состояния ошибки в макете нет. Обводка – минимальный способ
   показать проблемное поле, не изобретая нового оформления. */
.popup__field--invalid .popup__input {
  outline: 2px solid var(--color-error);
  outline-offset: -2px;
}

.popup__error {
  margin-top: var(--space-4);
  padding-inline: var(--space-16);
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-error);
}

.popup__error[hidden] { display: none; }

.popup__submit {
  width: 100%;
  min-height: var(--btn-height);
  padding: var(--btn-padding);

  font-size: var(--fs-btn);
  line-height: var(--lh-btn);
  font-weight: var(--fw-btn);
  letter-spacing: var(--ls-btn);
}

.popup__submit[disabled] {
  opacity: .6;
  cursor: default;
}

.popup__message {
  margin-top: calc(-1 * var(--space-32));
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  letter-spacing: var(--ls-small);
  color: var(--color-text);
}

.popup__message[hidden] { display: none; }
.popup__message--error { color: var(--color-error); }

/* Ловушка для ботов: убрана из потока и с глаз, но остаётся в DOM. */
.popup__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Пока попап открыт, страница под ним не скроллится. */
body.popup-open { overflow: hidden; }

/* ==========================================================================
   АДАПТИВ – заглушка. Мобильного вида попапа в макете нет.
   ========================================================================== */

@media (max-height: 800px), (max-width: 640px) {
  /* На низком экране картинка съедает форму – ограничиваем её. */
  .popup__media { max-height: 220px; aspect-ratio: auto; height: 220px; }
  .popup__close { top: 36px; right: 36px; }
  .popup__form { gap: var(--space-24); }
  .popup__input { min-height: 60px; }
}