/* ============================================================
   «Отдел банкротства граждан» — лендинг-заявка.
   Одна таблица стилей на два варианта оформления:
     body.t-red   — красно-оранжевый (макет «пример страницы.jpeg»)
     body.t-brown — коричневый       (макет «страница с нужным зданием.png»)
   Все размеры сняты с макетов и приведены к ширине окна 375px.
   ============================================================ */

/* ---------- палитра ---------- */
:root{
  --bg:#EBEBEB;
  --hdr:#EFEEEE;
  --line:rgba(0,0,0,.07);
  --ink:#0A0A0A;
  --ink-2:#1A1A1A;
  --muted:#5B5B5B;

  --accent:#E21D20;          /* цвет строк заголовка и рамок */
  --chip-bd:var(--accent);
  --cta-bg:linear-gradient(90deg,#E32223 0%,#F8680F 100%);
  --cta-shadow:0 10px 22px -12px rgba(227,34,35,.85);

  --logo-1:#E01F26;          /* красная «страница» знака */
  --logo-2:#F8770D;          /* вторая «страница» знака */

  --shot-gap:15px;           /* шапка → фото */
  --shot-w:84.4%;            /* ширина фото от колонки контента */
  --shot-ratio:286/335;
  --shot-radius:16px;
  --ring:#E32223;
  --ring-w:1.5px;

  --badge-w:84%;             /* ширина плашки от ширины фото */
  --badge-h:57px;
  --badge-top:87%;           /* центр плашки по высоте фото */
  --badge-bg:#fff;
  --badge-bd:transparent;
  --badge-bd-w:0px;
  --badge-radius:14px;

  --h1-gap:28px;             /* фото → заголовок */
  --field:#fff;
}

body.t-brown{
  --bg:#EBE8E8;
  --hdr:#EEECEC;

  --accent:#7E4D2D;
  --chip-bd:#E20809;         /* в коричневом макете рамки тегов остаются красными */
  --cta-bg:#82502E;
  --cta-shadow:0 10px 22px -12px rgba(126,77,45,.85);

  --logo-1:#C51F1B;
  --logo-2:#7E4A28;

  --shot-gap:8px;
  --shot-w:91.7%;
  --shot-ratio:1/1;
  --shot-radius:50%;
  --ring:#915D40;
  --ring-w:2px;

  --badge-w:79%;
  --badge-h:50px;
  --badge-top:98.4%;
  --badge-bg:#F2F1F2;
  --badge-bd:#8B5E3C;
  --badge-bd-w:2px;
  --badge-radius:16px;

  --h1-gap:56px;             /* плашка свисает ниже круга — отступ больше */
}

/* ---------- база ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:#DFDDDD;
  color:var(--ink);
  font:400 16px/1.45 'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
body.locked{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit}

.page{
  display:flex;
  flex-direction:column;
  max-width:480px;
  margin:0 auto;
  min-height:100dvh;
  background:var(--bg);
}

/* ---------- шапка ---------- */
.topbar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  height:78px;
  padding:0 14px;
  background:var(--hdr);
  border-bottom:1px solid var(--line);
}
.topbar__logo{width:34px;height:42px;flex:none}
.topbar__t{
  font-size:clamp(17px,5.15vw,20px);
  font-weight:700;
  letter-spacing:-.012em;
  white-space:nowrap;
}

/* ---------- первый экран ---------- */
.hero{padding:var(--shot-gap) 18px 26px;text-align:center}

.shot{
  position:relative;
  width:var(--shot-w);
  margin:0 auto;
  aspect-ratio:var(--shot-ratio);
}
.shot__img{
  position:absolute;
  inset:0;
  border:var(--ring-w) solid var(--ring);
  border-radius:var(--shot-radius);
  overflow:hidden;
}
.shot__img img{width:100%;height:100%;object-fit:cover}

/* Плашка «Онлайн-формат»: по ТЗ — строго по центру фото,
   слева и справа одинаковое расстояние, высота прежняя. */
.shot__badge{
  position:absolute;
  left:50%;
  top:var(--badge-top);
  transform:translate(-50%,-50%);
  width:var(--badge-w);
  min-height:var(--badge-h);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  margin:0;
  background:var(--badge-bg);
  border:var(--badge-bd-w) solid var(--badge-bd);
  border-radius:var(--badge-radius);
  font-size:clamp(22px,7.2vw,28px);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.015em;
  white-space:nowrap;
  box-shadow:0 6px 18px -10px rgba(0,0,0,.45);
}

.h1{
  margin:var(--h1-gap) 0 0;
  font-size:clamp(20px,6.15vw,24px);
  line-height:1.2;
  font-weight:700;
  letter-spacing:-.018em;
}
.h1 span{display:block}
.h1 .ac{color:var(--accent)}

/* ТЗ п.1 и п.2: расстояние от «отдела банкротства граждан» до тегов
   и от тегов до кнопки увеличено (в макете было 4–5px). */
.tags{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin:14px 0 0;
  padding:0;
  list-style:none;
}
.tags li{
  border:1.5px solid var(--chip-bd);
  border-radius:999px;
  /* на 320px оба тега обязаны уместиться в одну строку, как в макете */
  padding:6px clamp(10px,3.7vw,15px);
  font-size:clamp(12.5px,3.9vw,15px);
  line-height:1.25;
  white-space:nowrap;
  color:var(--ink-2);
}

.cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:14px 0 0;
  min-height:54px;
  padding:10px 16px;
  border-radius:14px;
  background:var(--cta-bg);
  box-shadow:var(--cta-shadow);
  color:#fff;
  font-size:clamp(15px,4.2vw,17px);
  font-weight:700;
  letter-spacing:-.01em;
  text-decoration:none;
  transition:transform .16s ease,filter .16s ease;
}
.cta:active{transform:translateY(1px);filter:brightness(.96)}

/* ---------- всплывающая заявка ---------- */
/* Блока с формой на странице нет: он открывается поверх сайта по кнопке
   первого экрана. Открытие/закрытие (data-modal, data-close, Esc, блокировка
   прокрутки) уже умеет общий app.js — здесь только оформление. */
.modal{
  position:fixed;
  inset:0;
  z-index:60;
  display:flex;
  padding:18px 18px 26px;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.modal[hidden]{display:none}
.modal__back{
  position:fixed;               /* фон не уезжает, когда длинная форма прокручивается */
  inset:0;
  background:rgba(24,18,14,.55);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  animation:m-fade .22s ease both;
}
.modal__win{
  position:relative;
  z-index:1;
  width:100%;
  max-width:444px;
  margin:auto;                  /* центр по вертикали без обрезки верха */
  animation:m-rise .28s cubic-bezier(.2,.75,.3,1) both;
}
.modal__x{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  margin:0 0 10px auto;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.94);
  box-shadow:0 8px 20px -10px rgba(0,0,0,.7);
  color:var(--ink);
  cursor:pointer;
}
.modal__x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.modal__x:active{transform:translateY(1px)}

@keyframes m-fade{from{opacity:0}to{opacity:1}}
@keyframes m-rise{from{opacity:0;transform:translateY(20px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .modal__back,.modal__win{animation:none}
}

/* без JS всплывающее окно остаётся обычным блоком в потоке страницы */
html.no-js .modal[hidden]{display:block;position:static;padding:0 18px 26px;overflow:visible}
html.no-js .modal__back,html.no-js .modal__x{display:none}
html.no-js .modal__win{max-width:none;animation:none}

/* ---------- форма ---------- */
.form{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px 16px 16px;
  box-shadow:0 26px 54px -28px rgba(0,0,0,.75);
}
.form__h{
  margin:0 0 14px;
  font-size:clamp(18px,5vw,21px);
  font-weight:700;
  line-height:1.25;
  letter-spacing:-.015em;
  text-align:center;
}
.progress{height:3px;border-radius:3px;background:rgba(0,0,0,.08);overflow:hidden;margin:0 0 16px}
.progress i{display:block;height:100%;width:0;background:var(--accent);transition:width .3s ease}

.field{margin:0 0 12px}
.field__label{display:block;margin:0 0 6px;font-size:13px;color:var(--muted)}
.field__label em{font-style:normal;color:var(--accent)}
.field input{
  width:100%;
  height:50px;
  padding:0 14px;
  border:1.5px solid rgba(0,0,0,.14);
  border-radius:12px;
  background:var(--field);
  font:inherit;
  font-size:16px;
  color:var(--ink);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.field input::placeholder{color:#9A9A9A}
.field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,0,0,.05)}
.field input.ok{border-color:#2E9E5B}
.field input.bad{border-color:#D93025}

.radios{margin:4px 0 12px;padding:0;border:0}
.radios legend{padding:0;margin:0 0 8px;font-size:13px;color:var(--muted)}
.radios legend em{font-style:normal;color:var(--accent)}
/* 44px по высоте — минимальный удобный тап-таргет на телефоне */
.radio{display:flex;align-items:center;gap:10px;padding:11px 0;min-height:44px;cursor:pointer}
.radio input{position:absolute;opacity:0;width:0;height:0}
.radio__dot{
  width:22px;height:22px;flex:none;border-radius:50%;
  border:1.5px solid rgba(0,0,0,.22);
  position:relative;transition:border-color .15s ease;
}
.radio__dot::after{
  content:'';position:absolute;inset:4px;border-radius:50%;
  background:var(--accent);transform:scale(0);transition:transform .15s ease;
}
.radio input:checked + .radio__dot{border-color:var(--accent)}
.radio input:checked + .radio__dot::after{transform:scale(1)}
.radio input:focus-visible + .radio__dot{box-shadow:0 0 0 3px rgba(0,0,0,.12)}
.radio__txt{font-size:15px}

.consent{display:flex;align-items:flex-start;gap:10px;margin:0 0 10px;padding:8px 0;min-height:44px;cursor:pointer}
.consent input{position:absolute;opacity:0;width:0;height:0}
.consent__box{
  width:22px;height:22px;flex:none;margin-top:0;
  border:1.5px solid rgba(0,0,0,.22);border-radius:6px;
  display:grid;place-items:center;transition:background .15s ease,border-color .15s ease;
}
.consent__box svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.consent input:checked + .consent__box{background:var(--accent);border-color:var(--accent)}
.consent input:checked + .consent__box svg{opacity:1}
.consent__txt{font-size:13px;line-height:1.4;color:var(--muted)}
.consent__txt em{font-style:normal;color:var(--accent)}
.lnk{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

.btn{
  position:relative;
  width:100%;
  min-height:54px;
  border:0;
  border-radius:14px;
  background:var(--cta-bg);
  box-shadow:var(--cta-shadow);
  color:#fff;
  font:inherit;
  font-size:clamp(15px,4.2vw,17px);
  font-weight:700;
  letter-spacing:-.01em;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .16s ease,filter .16s ease;
}
.btn:active{transform:translateY(1px);filter:brightness(.96)}
.btn[disabled]{cursor:default}
.btn__spin{
  display:none;width:20px;height:20px;margin-left:10px;
  border:2.4px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;
  animation:spin .8s linear infinite;
}
.btn.loading .btn__spin{display:block}
@keyframes spin{to{transform:rotate(360deg)}}

.err{margin:10px 0 0;font-size:13px;color:#D93025;min-height:0;display:none}
.err.show{display:block}

.done{
  text-align:center;
  padding:32px 18px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 26px 54px -28px rgba(0,0,0,.75);
}
.done__ico{display:block;width:72px;height:72px;margin:0 auto 14px}
.done__ico svg{width:100%;height:100%;fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.done__h{margin:0 0 8px;font-size:22px;font-weight:700}
.done__p{margin:0;font-size:15px;color:var(--muted)}

/* ---------- подвал ---------- */
.foot{margin-top:auto;padding:0 18px 30px;text-align:center;color:var(--muted);font-size:12px;line-height:1.5}
.foot p{margin:0 0 6px}
.foot__docs a{display:inline-block;padding:6px 2px;color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.foot .sep{opacity:.5;padding:0 4px}

/* ---------- появление ---------- */
.js .rise{opacity:0;transform:translateY(14px)}
.js .rise.in{opacity:1;transform:none;transition:opacity .5s ease var(--d,0s),transform .5s ease var(--d,0s)}
@media (prefers-reduced-motion:reduce){
  .js .rise{opacity:1;transform:none}
  .cta,.btn{transition:none}
}

/* ---------- широкий экран ---------- */
@media (min-width:481px){
  .topbar__t{font-size:20px}
  .h1{font-size:24px}
  .shot__badge{font-size:28px}
}