/* ============================================================
   lead-form.css — брендовая форма заявки для ВНУТРЕННИХ страниц.
   Значения 1:1 с попапом #lead-popup (.hp-*) из site/css/ai-test-sections.css
   (строки ~3296–3392). Вынесено в отдельный файл, потому что ai-test-sections.css
   на внутренние страницы не подключается (home-only). Ничего не переизобретаем —
   переносим готовые бренд-значения дизайн-системы.
   Подключается на /typography/ через {block name="new_tab_css"}.
   ============================================================ */

/* ── Карточка формы ── */
.hp-card{
  width:100%; max-width:558px; box-sizing:border-box;
  background:#fff; border-radius:24px;
  padding:44px 36px 36px;
  box-shadow:0 24px 64px rgba(0,0,0,.18);
}

/* ── Форма ── */
.hp-form{ display:flex; flex-direction:column; gap:16px; align-items:stretch; }
.hp-form .hp-input{
  width:100%; height:64px; min-height:64px; box-sizing:border-box;
  border:1px solid #d9d9d9; border-radius:14px;
  padding:0 24px; background:#fff;
  font-family:'Inter',sans-serif; font-size:18px; color:#1a1a1a;
  outline:none; transition:border-color .15s ease;
}
.hp-form textarea.hp-input{
  height:auto; min-height:120px; padding:20px 24px; resize:vertical; line-height:1.45;
}
.hp-form .hp-input::placeholder{ color:#9a9a9a; opacity:1; }
.hp-form .hp-input:focus{ border-color:#0A0A0A; }

/* ── Кнопка-сабмит (1:1 с CTA попапа: #FFCE00, Manrope 800 caps, без рамки, рука снизу-справа) ── */
.hp-submit{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:100%; box-sizing:border-box; height:64px; margin-top:4px; padding:0 20px;
  background:#FFCE00; color:#000; border:none; border-radius:15px;
  font-family:'Manrope',Arial,sans-serif; font-size:18px; font-weight:800;
  text-transform:uppercase; letter-spacing:.6px; cursor:pointer;
  overflow:visible; transition:transform .15s ease, opacity .15s ease;
}
.hp-submit:hover{ transform:translateY(-1px); }
.hp-submit:active{ transform:translateY(0); }
.hp-submit:focus-visible{ outline:3px solid #0A0A0A; outline-offset:3px; }
.hp-submit:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
.hp-submit .btn-04a5__label{ position:relative; z-index:1; }
.hp-submit .btn-04a5__hand{
  position:absolute; right:-12px; bottom:-16px; width:48px; height:60px;
  transition:transform .2s ease-out; pointer-events:none;
}
.hp-submit:hover .btn-04a5__hand{ transform:translate(-8px,-6px); }
.hp-submit .btn-04a5__hand-lines{ position:absolute; top:0; left:0; width:28px; height:auto; }
.hp-submit .btn-04a5__hand-palm{ position:absolute; top:12px; left:6px; width:31px; height:auto; }

/* ── Чекбокс согласия (.tg-policy) — 1:1 с попапом ──
   .agreement-with-policy оставлен на обёртке в разметке (к нему привязана
   валидация agreement-with-policy.js: блок сабмита до согласия); вид — из .tg-policy. */
.hp-policy-row{ margin-top:8px; }
.hp-policy-row .tg-policy{ display:flex; align-items:flex-start; gap:12px; cursor:pointer; margin:0; font-weight:400; }
.hp-policy-row .tg-policy__input{ position:absolute; opacity:0; width:0; height:0; margin:0; }
.hp-policy-row .tg-policy__box{
  flex:0 0 auto; width:22px; height:22px; margin-top:1px; position:relative;
  border:1px solid #292929; border-radius:4px; background:#fff;
  transition:background .15s ease, border-color .15s ease;
}
.hp-policy-row .tg-policy__input:checked + .tg-policy__box{ background:#292929; border-color:#292929; }
.hp-policy-row .tg-policy__input:checked + .tg-policy__box::after{
  content:''; position:absolute; left:7px; top:3px; width:5px; height:10px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.hp-policy-row .tg-policy__input:focus-visible + .tg-policy__box{ outline:2px solid #0A0A0A; outline-offset:2px; }
.hp-policy-row .tg-policy__text{
  font-family:'Inter',Arial,sans-serif; font-weight:300;
  font-size:12px; line-height:18px; letter-spacing:.12px; color:rgba(0,0,0,.55);
}
.hp-card .tg-policy__link{ color:rgba(0,0,0,.55); text-decoration:underline; }
.hp-card .tg-policy__link:hover{ opacity:.7; }

/* ── Служебные сообщения формы ── */
.hp-form .error_message{ color:#d64545; font-family:'Inter',sans-serif; font-size:14px; margin:0; }
.hp-form .success_message{ color:#1f9d55; font-family:'Inter',sans-serif; font-size:15px; margin:0; }

/* ── Мобайл ≤639px (значения из эталона) ── */
@media screen and (max-width:639px){
  .hp-card{ padding:32px 22px 28px; border-radius:18px; }
  .hp-form{ gap:14px; }
  .hp-form .hp-input{ height:58px; min-height:58px; font-size:16px; padding:0 18px; }
  .hp-form textarea.hp-input{ height:auto; min-height:110px; padding:16px 18px; }
  .hp-submit{ height:60px; font-size:16px; }
  .hp-submit .btn-04a5__hand{ bottom:-30px; right:-4px; }
}