/* Планшет активных зон. Свёрстан по макету Figma «Lamoda Sport × NSW land»,
   страницы 59–66: айпад 1536 × 2048, портрет.

   Единица измерения — макетный пиксель: в макете экран 1536 широкий, и
   корневой размер шрифта равен ровно одному такому пикселю. Поэтому во всех
   правилах стоят те же числа, что и в макете, а подгонку под планшет делает
   одна строка в :root.

   Внешних шрифтов и библиотек нет: на площадке связь может пропасть. */

@font-face { font-family: "CoFo Sans"; src: url("/static/fonts/CoFoSansRegular.ttf") format("truetype");
  font-weight: 400; font-display: block; }
@font-face { font-family: "CoFo Sans"; src: url("/static/fonts/CoFoSansMedium.ttf") format("truetype");
  font-weight: 500; font-display: block; }
@font-face { font-family: "Druk Text Wide Cyr"; src: url("/static/fonts/DrukTextWideCyr-Heavy.otf") format("opentype");
  font-weight: 900; font-display: block; }

:root {
  font-size: min(calc(100vw / 1536), calc(100vh / 2048));
  --mint: #aaf4bf;
  --druk: 900 1rem/1 "Druk Text Wide Cyr", "Arial Black", sans-serif;
  --cofo: "CoFo Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: #4a4a4a; overflow: hidden; }
body { display: flex; align-items: center; justify-content: center; color: #fff; }

/* Серый лист с росчерком — тот же, что на экранах будки. Значения сняты
   пипеткой с макета: сверху темнее, книзу светлеет */
#screen { position: relative; width: 1536rem; height: 2048rem; overflow: hidden;
  transition: transform .2s ease;
  font-family: var(--cofo);
  background: linear-gradient(180deg, #535353 0%, #636363 25%, #707070 50%,
                              #7b7b7b 75%, #8a8a8a 100%); }
/* Росчерк отдельным слоем: в макете он приглушён, а прозрачность одного
   фонового слоя иначе не задать. Доля низкая намеренно: на планшете он
   проходит прямо под кнопками «прочитать», и в полную силу съедал их */
#screen::before { content: ""; position: absolute; inset: 0; opacity: .32;
  background: url("/static/design/decor_squiggle.svg") right -120rem top / auto 108% no-repeat;
  pointer-events: none; }
.step, .mark, .logo { position: absolute; z-index: 1; }

.mark { position: absolute; right: 144rem; top: 141rem; width: 102rem; }
.logo { position: absolute; left: 144rem; bottom: 160rem; width: 504rem; }

/* Шаг занимает лист целиком: заголовок сверху, кнопки внизу */
.step { position: absolute; inset: 0; padding: 275rem 144rem 1507rem; }

.title { margin: 0; font: var(--druk); font-size: 100rem; line-height: 94rem;
  letter-spacing: -4rem; text-transform: uppercase; color: #fff; }
.title.mint { color: var(--mint); }
.subtitle { margin: 130rem 0 0; font: var(--druk); font-size: 80rem; line-height: 76rem;
  letter-spacing: -3.2rem; text-transform: uppercase; color: #fff; }
.note { margin: 120rem 0 0; font-size: 34rem; line-height: 42rem; color: #fff; }
/* Строка про таймер служебная, она не должна спорить с приглашением */
.note-small { margin-top: 40rem; font-size: 24rem; line-height: 30rem; opacity: .75; }
.error { position: absolute; left: 144rem; top: 1380rem; margin: 0; font-weight: 500;
  font-size: 30rem; line-height: 38rem; color: #fff; }

/* -------------------------------------------------------------- галочки */

/* Первая строка списка стоит там же, где в макете; дальше шаг постоянный */
.rows { position: absolute; left: 144rem; right: 144rem; top: 739rem; }
#step-consents .rows { top: 491rem; }

.row { display: flex; align-items: flex-start; gap: 96rem; margin-bottom: 85rem; }
#step-consents .row { margin-bottom: 102rem; }
.check { flex: none; width: 81rem; height: 81rem; padding: 10rem; border: 4rem solid #fff;
  background: none; background-clip: content-box; cursor: pointer; }
.check[aria-pressed="true"] { background-color: #fff; }
.row-text { flex: 1; margin: 12rem 0 0; font-weight: 500; font-size: 34rem; line-height: 42rem;
  color: #fff; }
#step-consents .row-text { font-size: 27rem; line-height: 34rem; }

/* ---------------------------------------------------------------- поля */

.fields { position: absolute; left: 144rem; right: 144rem; top: 615rem; }
/* Подпись уезжает наверх, когда в поле что-то написано: держится на
   :placeholder-shown, поэтому у каждого поля placeholder=" " */
.field { position: relative; display: block; height: 174rem; padding-top: 40rem;
  border-bottom: 4rem solid #fff; margin-bottom: 40rem; }
.field input { display: block; width: 100%; padding: 10rem 0 24rem; border: 0; background: none;
  outline: none; font-family: var(--cofo); font-size: 44rem; color: #fff; }
.field-label { position: absolute; left: 0; top: 0; font-size: 24rem; opacity: .85;
  pointer-events: none; transition: top .15s, font-size .15s; }
.field input:placeholder-shown + .field-label { top: 46rem; font-size: 44rem; opacity: 1; }
.field:has(input:not(:placeholder-shown)) { border-bottom-color: var(--mint); }

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

.buttons { position: absolute; left: 144rem; top: 1507rem; display: flex; gap: 48rem; }
.btn { height: 126rem; padding: 0 40rem; border: 3rem solid #fff; background: none; color: #fff;
  cursor: pointer; font: var(--druk); font-size: 34rem; letter-spacing: 0;
  text-transform: uppercase; }
.btn:disabled { border-color: rgba(255,255,255,.45); color: rgba(255,255,255,.45);
  cursor: default; }
/* «Прочитать» у согласия — та же кнопка, только мельче: заливки в макете у
   неё нет, росчерк виден насквозь. Читается она за счёт того, что сам
   росчерк приглушён. Стоит ПОСЛЕ .btn намеренно: специфичность та же, и
   выше по файлу общее правило перебивало кегль, и слово вылезало за рамку */
.row-read { flex: none; width: 285rem; height: 72rem; padding: 0 10rem;
  font-size: 20rem; }
.btn.wide { width: 1248rem; }
.btn.half { width: 600rem; }
.btn:active:not(:disabled) { background: rgba(255,255,255,.15); }

/* ------------------------------------------------- правила безопасности */

/* Документ лежит поверх шага: гость возвращается ровно туда, откуда ушёл */
.sheet { z-index: 40; background: linear-gradient(180deg, #535353 0%, #636363 25%,
                                                   #707070 50%, #7b7b7b 75%, #8a8a8a 100%); }
/* Лист документа непрозрачный, поэтому росчерк ему нужен свой */
.sheet::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .32;
  background: url("/static/design/decor_squiggle.svg") right -120rem top / auto 108% no-repeat;
  pointer-events: none; }
/* Заголовок документа мельче обычного: к «правилам безопасности» добавляется
   название зоны, и в четыре строки крупного кегля он налезал бы на текст */
#rules .title { font-size: 72rem; line-height: 76rem; letter-spacing: -2.9rem; }
.paper { position: absolute; left: 144rem; right: 470rem; top: 602rem; height: 800rem;
  overflow-y: auto; font-size: 29rem; line-height: 50rem; color: #fff; }
.paper p { margin: 0 0 30rem; }
.paper h4 { margin: 0 0 16rem; font-size: 34rem; }
.paper::-webkit-scrollbar { width: 10rem; }
.paper::-webkit-scrollbar-thumb { background: #fff; }