/* ============================================================
   components.css — компоненты лендинга и общие элементы.
   Опирается на tokens.css + base.css.
   Дизайн-система: concept_fakedoor_B §1 (палитра, кнопки 56px,
   line-иконки, много воздуха, минимум шума).
   ============================================================ */

/* ---------- КНОПКИ ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:600; text-align:center; cursor:pointer;
  border:1px solid transparent; border-radius:var(--r-md);
  transition:background var(--t-fast), border-color var(--t-fast);
  text-decoration:none;
}
.btn:hover{ text-decoration:none; }
/* Недоступное состояние (валидация/загрузка в воронке) */
.btn:disabled,
.btn[aria-disabled="true"]{ cursor:not-allowed; opacity:.55; }
.btn:disabled{ pointer-events:none; }

/* Главный CTA: 56px, оранжевый, текст #1B2733 (контраст 5.2 — решение оператора) */
.btn--cta{
  height:var(--h-cta);
  padding-inline:var(--sp-6);
  background:var(--c-cta);
  color:var(--c-on-cta);
  font-size:18px;
  letter-spacing:.2px;
  width:100%;
}
.btn--cta:active{ background:var(--c-cta-active); }   /* 4.53:1 ✓ */

/* Вторичная / ghost-кнопка (cookie-баннер, второстепенные действия) */
.btn--ghost{
  height:var(--h-control);
  padding-inline:var(--sp-4);
  background:var(--c-bg);
  color:var(--c-blue);
  border-color:var(--c-border-control);
  font-size:15px;
}

/* hover только там, где он реально есть — против «залипшего hover» на тач-экранах */
@media (hover:hover) and (pointer:fine){
  .btn--cta:hover{ background:var(--c-cta-hover); }   /* 4.71:1 ✓ */
  .btn--ghost:hover{ background:var(--c-bg-soft); }
}

/* ---------- ХЕДЕР ---------- */
.site-header{
  border-bottom:1px solid var(--c-border);
  padding-block:var(--sp-4);
  background:var(--c-bg);
}
.logo{
  font-weight:700; font-size:20px; color:var(--c-blue);
  text-decoration:none;
}
.logo:hover{ text-decoration:none; }

/* ---------- HERO ---------- */
.hero{ padding-block:var(--sp-7) var(--sp-6); border:0; }
.hero__title{ margin-bottom:var(--sp-4); }
.hero__subtitle{
  font-size:18px; color:var(--c-text-muted);
  margin-bottom:var(--sp-5); max-width:34em;
}
.hero__note{ font-size:var(--fs-small); color:var(--c-text-muted); margin-top:var(--sp-3); }
.hero__art{
  margin-top:var(--sp-5);
  margin-inline:auto;
  max-width:420px;            /* квадратная иллюстрация не растягивается на всю ширину */
}
.hero__art img{ width:100%; height:auto; display:block; }
@media (min-width:680px){
  .hero .container{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(240px,.9fr); gap:var(--sp-6); align-items:center; }
  .hero__content{ min-width:0; }      /* текстовый блок-обёртка */
  .hero__art{ margin-top:0; }
}

/* ---------- КАК ЭТО РАБОТАЕТ ---------- */
.steps{ display:grid; gap:var(--sp-3); }
@media (min-width:680px){ .steps{ grid-template-columns:repeat(3,1fr); } }
.step{
  background:var(--c-bg-soft);
  border-radius:var(--r-lg);
  padding:var(--sp-5);
  /* мобильный: иконка слева, заголовок+текст в два ряда справа */
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  column-gap:var(--sp-3);
  row-gap:var(--sp-1);
  align-items:start;
}
.step__icon{
  grid-column:1; grid-row:1 / span 2;
  width:40px; height:40px; flex:none;
  color:var(--c-blue);          /* line-иконка наследует через currentColor */
}
.step__icon svg{ width:100%; height:100%; display:block; }
.step__title{ grid-column:2; margin:0; }
.step__text{ grid-column:2; margin:0; color:var(--c-text-muted); }
@media (min-width:680px){
  .step{ display:flex; flex-direction:column; gap:var(--sp-3); }
}

/* ---------- ЧТО ВХОДИТ В ДОКУМЕНТ ---------- */
.checklist{ display:grid; gap:var(--sp-3); }
.checklist__item{
  position:relative; padding-left:30px;
}
.checklist__item::before{
  content:"✓";
  position:absolute; left:0; top:0;
  color:var(--c-success); font-weight:700;
}

/* ---------- СРАВНЕНИЕ ---------- */
.compare__grid{ display:grid; gap:var(--sp-3); }
@media (min-width:560px){ .compare__grid{ grid-template-columns:1fr 1fr; } }
.compare__col{
  padding:var(--sp-5);
  border-radius:var(--r-lg);
  border:1px solid var(--c-border);
}
.compare__col--dim{ background:var(--c-bg-soft); }
.compare__col--dim .compare__text{ color:var(--c-text-muted); }
.compare__col--accent{ background:var(--c-bg); border-color:var(--c-blue-link); }
.compare__head{ margin-bottom:var(--sp-2); }
.compare__col--accent .compare__head{ color:var(--c-blue); }
.compare__text{ margin:0; }

/* ---------- ЦЕНА ---------- */
.price{ text-align:center; }
.price .container{
  background:var(--c-bg-soft);
  border-radius:var(--r-lg);
  padding-block:var(--sp-6);
}
.price__amount{ font-size:40px; font-weight:700; color:var(--c-blue); margin:0; }
.price__type{ color:var(--c-text-muted); margin:var(--sp-1) 0 var(--sp-3); }
.price__sub{ font-size:var(--fs-small); margin:0; }
.price__anchor{ color:var(--c-text-muted); font-size:var(--fs-small); margin-top:var(--sp-2); }

/* ---------- СИГНАЛЫ ОПЛАТЫ ---------- */
.trust-pay__row{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:var(--sp-3);
  background:var(--c-bg-soft);
  padding:var(--sp-4);
  border-radius:var(--r-lg);
}
.trust-pay__label,.trust-pay__secure{ font-size:var(--fs-small); color:var(--c-text-muted); }
.trust-pay__lock{ width:20px; height:20px; flex:none; color:var(--c-text-muted); }
.trust-pay__lock svg{ width:100%; height:100%; display:block; }
.paylogos{ display:flex; gap:var(--sp-2); }
.paylogo{
  font-size:13px; font-weight:600; color:var(--c-text-muted);
  border:1px solid var(--c-border);
  background:var(--c-bg);
  padding:4px 8px; border-radius:6px;
}

/* ---------- FAQ ---------- */
.accordion__item{
  border:1px solid var(--c-border);
  border-radius:var(--r-md);
  margin-bottom:var(--sp-2);
  padding-inline:var(--sp-4);
}
.accordion__q{
  font-weight:600; cursor:pointer;
  padding-block:var(--sp-3);
  list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3);
}
.accordion__q::-webkit-details-marker{ display:none; }
.accordion__q::after{
  content:"+"; color:var(--c-blue-link); font-size:22px; font-weight:400; flex:none;
}
.accordion__item[open] .accordion__q::after{ content:"–"; }
.accordion__a{
  color:var(--c-text-muted);
  padding-bottom:var(--sp-3);
}

/* ---------- ФИНАЛЬНЫЙ CTA ---------- */
.cta-final{ text-align:center; }
.cta-final .btn--cta{ max-width:420px; }
.cta-final__note{ font-size:var(--fs-small); color:var(--c-text-muted); margin-top:var(--sp-3); }

/* ---------- ФУТЕР ---------- */
.site-footer{
  background:var(--c-bg-soft);
  padding-block:var(--sp-6);
  border-top:1px solid var(--c-border);
  font-size:var(--fs-small);
}
.site-footer a{ color:var(--c-link-on-soft); }   /* #245FCC — запас контраста на сером фоне */
.footer__requisites p{ margin:2px 0; color:var(--c-text-muted); }
.footer__nav,.footer__legal{
  display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5);
  margin-block:var(--sp-4);
}
.footer__rkn{ color:var(--c-text-muted); font-size:14px; margin:0; }
.footer__disclaimer{
  color:var(--c-text-muted); font-size:var(--fs-small); line-height:1.5;
  margin-top:var(--sp-4);
}

/* ---------- COOKIE-БАННЕР ---------- */
.cookie-banner{
  position:fixed; inset-inline:0; bottom:0; z-index:40;
  background:var(--c-bg);
  border-top:1px solid var(--c-border-control);
  box-shadow:0 -4px 16px rgba(16,35,63,.08);
  /* safe-area снизу для телефонов с жестовой панелью */
  padding:var(--sp-4) var(--sp-4) max(var(--sp-4), env(safe-area-inset-bottom));
}
.cookie-banner[hidden]{ display:none; }
.cookie-banner__inner{
  max-width:var(--container); margin-inline:auto;
  display:grid; gap:var(--sp-3);
}
/* две колонки только когда хватает ширины под текст + три кнопки (~470px) */
@media (min-width:960px){
  .cookie-banner__inner{ grid-template-columns:minmax(0,1fr) auto; align-items:center; }
}
.cookie-banner__text{ font-size:var(--fs-small); color:var(--c-text); margin:0; }
.cookie-banner__actions{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }

/* ---------- ВОРОНКА: контейнер ---------- */
#funnel-root[hidden]{ display:none; }

/* Что входит: примечание о нормах + превью документа */
.contents__note{ font-size:var(--fs-small); color:var(--c-text-muted); margin-top:var(--sp-4); line-height:1.5; }
.contents__preview{ margin:var(--sp-6) auto 0; max-width:380px; text-align:center; }
.contents__preview img{
  width:100%; height:auto; display:block;
  border:1px solid var(--c-border); border-radius:var(--r-md);
  box-shadow:0 4px 20px rgba(16,35,63,.10);
}
.contents__preview-cap{ font-size:13px; color:var(--c-text-muted); margin-top:var(--sp-2); }