/* ==========================================================================
   Заявка — форма сбора контактных данных под тарифами
   Опорный кадр 1920 × 1094:

     фон секции      #e9e9e9, поля сверху и снизу по 116
     карточка        1710 × 862, #d9d9d9, радиус 30
     заголовок       Muller Medium 40 / 1.12, ширина 1147, отступ сверху 94
     белая форма     1472 × 483, радиус 30, отступ сверху 87 от заголовка

   Внутри белой формы (поля 78 по бокам, 70 сверху, 45 снизу):
     первая строка   две половины по 658, на стыке вертикальная черта 49
     поле            Muller Light 40 / 1.12, текст по центру, подчёркивание
                     1px, высота строки 49
     шаг между полями 45
     кнопка          421 × 78, чёрная, радиус 55, Muller Light 40, белый текст,
                     отступ сверху 53

   Поля секции взяты как у «Тарифов» — 97 вместо 103/107 в макете: так
   карточка заявки встаёт ровно под плитками, а не с уступом в 6px.

   Секция скрыта, пока её не позвали, и встаёт на место соседней секции,
   помеченной [data-order-swap]: скрипт снимает hidden с формы и вешает его
   на соседа (js/components/order.js). На страницах услуг сосед — «Тарифы»,
   на «Кто мы?» — текст о студии.

   Без скрипта ту же подмену делают :target и :has() — и стрелка плитки, и
   кнопка «Присоединиться» ведут на форму обычными ссылками.
   ========================================================================== */

:root {
  /* 40px при ширине 1920 — общий кегль заголовка, полей и кнопки */
  --order-fs: clamp(1rem, 2.0833vw, 2.5rem);

  /* Радиус 30 у карточки и у белой формы */
  --order-radius: clamp(1.25rem, 1.5625vw, 1.875rem);
}

/*
   z-index — на случай, когда форма встаёт на место секции, из-под которой
   в неё заглядывает фоновая графика соседей («Графический дизайн»).
*/
.order {
  position: relative;
  z-index: 2;
  background-color: var(--bg-muted);
  padding-block: 6.0417%;
  padding-inline: clamp(1.25rem, 5.0521vw, 6.0625rem);
}

/* Запасной путь без JS: переход по якорю формы раскрывает её и убирает соседа */
.order:target {
  display: block;
}

/* Секция-«подменыш» может стоять и до формы, и после неё */
[data-order-swap]:has(~ .order:target),
.order:target ~ [data-order-swap] {
  display: none;
}

/* Фокус на секцию ставит браузер при переходе по якорю — рамка тут лишняя */
.order:focus {
  outline: none;
}

/* --- Серая карточка ------------------------------------------------------- */

.order__card {
  position: relative;
  padding: 5.4971% 6.9591% 6.3743%;
  background-color: var(--bg-card);
  border-radius: var(--order-radius);
}

/* --- Возврат к тарифам -----------------------------------------------------
   В макете ссылки нет: она нужна потому, что форма занимает место плиток —
   иначе сменить выбранный пакет было бы нельзя. Лежит в верхнем поле
   карточки (95px при 1920) и не двигает заголовок.
   -------------------------------------------------------------------------- */

.order__back {
  position: absolute;
  top: calc(var(--order-fs) * 0.9);
  left: calc(var(--order-fs) * 1.5);

  display: inline-flex;
  align-items: center;
  gap: 0.5em;

  font-size: calc(var(--order-fs) * 0.5);
  font-weight: var(--fw-light);
  line-height: 1.12;
  color: var(--text-primary);
  opacity: 0.6;
  transition: opacity 0.25s ease, color 0.25s ease;
}

.order__back:hover,
.order__back:focus-visible {
  color: var(--accent-hover);
  opacity: 1;
}

.order__back-icon {
  font-size: 1.2em;
}

/* Ширина 1147 при 1920 — по ней заголовок ломается на две строки, как в макете */
.order__title {
  max-width: min(100%, 59.7396vw);
  margin-inline: auto;
  font-size: var(--order-fs);
  font-weight: var(--fw-medium);
  line-height: 1.12;
  text-align: center;
}

/* --- Белая форма ---------------------------------------------------------- */

/*
   Кегль задан на форме: внутренние отступы и шаг между полями считаются в em
   от него, поэтому вся внутренность масштабируется вместе с текстом.
*/
.order-form {
  display: flex;
  flex-direction: column;
  margin-top: 5.9089%;
  padding: 1.75em 1.95em 1.125em;
  font-size: var(--order-fs);
  background-color: var(--bg-base);
  border-radius: var(--order-radius);
}

.order-form > * + * {
  margin-top: 1.125em;
}

/* Имя и телефон — две равные половины, вертикальная черта на стыке */
.order-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.order-form__row > .order-form__field + .order-form__field {
  border-left: 1px solid var(--border-strong);
}

.order-form__input {
  display: block;
  width: 100%;
  padding-bottom: 0.105em;
  font-weight: var(--fw-light);
  line-height: 1.12;
  text-align: center;
  color: var(--text-primary);
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  border-radius: 0;
  appearance: none;
}

/* opacity: 1 — Firefox приглушает плейсхолдер сам, поверх наших 20% */
.order-form__input::placeholder {
  color: rgb(0 0 0 / 20%);
  opacity: 1;
}

/*
   Общая рамка фокуса из reset.css обводит поле по периметру и ломает вид
   формы. Вместо неё активное поле помечается удвоенным подчёркиванием:
   курсор в строке и без того показывает, где мы находимся.

   Утолщение нарисовано внутренней тенью, а не border-bottom-width: тень не
   входит в поток, поэтому строка не подпрыгивает на 1px — и не спорит с
   собственными полями поля на мобильных.
*/
.order-form__input:focus,
.order-form__input:focus-visible {
  outline: none;
}

.order-form__input:focus {
  box-shadow: inset 0 -1px 0 0 var(--border-strong);
}

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

.order-form > .order-form__submit {
  align-self: center;
  margin-top: 1.325em;
  padding: 0.415em 0.9875em;
  font-weight: var(--fw-light);
  line-height: 1.12;
  color: var(--text-inverse);
  background-color: var(--bg-inverse);
  border-radius: 999px;
  transition: background-color 0.25s ease;
}

.order-form__submit:hover,
.order-form__submit:focus-visible {
  background-color: var(--accent-hover);
}

/* --- Ответ после отправки -------------------------------------------------
   В макете строки нет: она появляется только после нажатия на кнопку.
   -------------------------------------------------------------------------- */

.order-form > .order-form__status {
  margin-top: 0.6em;
  font-size: 0.5em;
  line-height: 1.25;
  text-align: center;
}

.order-form__status:empty {
  display: none;
}

.order-form__status--error {
  color: var(--text-accent);
}

.order-form__status--success {
  font-weight: var(--fw-medium);
}

/* --- Проверка полей --------------------------------------------------------
   Разметку ошибок ставит js/components/order-form.js. Поле с ошибкой
   помечается той же линией, что и обычное, только красной: форма собрана на
   подчёркиваниях, рамка выбилась бы из неё.
   -------------------------------------------------------------------------- */

.order-form__field--invalid .order-form__input {
  border-bottom-color: var(--accent-hover);
}

.order-form__field--invalid .order-form__input:focus {
  box-shadow: inset 0 -1px 0 0 var(--accent-hover);
}

.order-form__field--invalid .order-form__input::placeholder {
  color: color-mix(in srgb, var(--accent-hover) 45%, transparent);
}

.order-form__error {
  margin-top: 0.4em;
  font-size: 0.5em;
  font-weight: var(--fw-light);
  line-height: 1.25;
  text-align: center;
  color: var(--text-accent);
}

/* Кнопка на время отправки: нажать ещё раз нельзя, но и не мигает */
.order-form__submit[disabled] {
  opacity: 0.45;
  cursor: default;
}

.order-form__submit[disabled]:hover {
  background-color: var(--bg-inverse);
}

/* --- Планшет и мобильные ---------------------------------------------------
   Ниже 1200px кегли фиксируются, как в «Тарифах»: пропорции макета здесь уже
   не работают — 40px текста не помещаются в узкое поле.
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  :root {
    --order-fs: 1.25rem;
    --order-radius: 1.25rem;
  }

  .order {
    padding-block: 3.5rem 4rem;
    padding-inline: var(--container-pad);
  }

  .order__card {
    padding: 2.5rem 1.75rem 3rem;
  }

  /* Поля карточки уже не вмещают ссылку — она встаёт в поток над заголовком */
  .order__back {
    position: static;
    margin-bottom: 1.5rem;
    font-size: 1rem;
  }

  .order__title {
    max-width: 100%;
  }

  .order-form {
    margin-top: 2.5rem;
    padding: 2rem 1.5rem;
  }

  /* Поле-строка становится слишком низким для пальца — добавляем поля сверху и снизу */
  .order-form__input {
    padding-block: 0.5em;
  }

  .order-form > .order-form__submit {
    padding: 0.85em 1.6em;
  }
}

@media (max-width: 560px) {
  :root {
    --order-fs: 1rem;
  }

  .order__card {
    padding: 2rem 1.25rem 2.5rem;
  }

  .order-form {
    margin-top: 2rem;
    padding: 1.5rem 1rem;
  }

  /* Двух полей в строку уже не поместить — имя и телефон друг под другом */
  .order-form__row {
    grid-template-columns: 1fr;
  }

  .order-form__row > .order-form__field + .order-form__field {
    margin-top: 1.125em;
    border-left: 0;
  }

  /*
     Длинные подсказки («В каком мессенджере/по звонку…») в узкое поле не
     влезают. При выключке по центру браузер обрезает строку с обеих сторон,
     при выключке влево — только конец: начало фразы остаётся читаемым.
  */
  .order-form__input {
    text-align: left;
  }

  .order-form > .order-form__submit {
    width: 100%;
  }
}