/* lead-form.css — формы заявок alekseev-ai.ru (движок assets/lead-form.js).
   Две темы: .lf-light — форма на бумаге (главная), .lf-dark — форма на зелёном (.cf-box).
   Цвета берутся из переменных страницы, с фолбэками. */

.lf-form{
  --lf-fg:var(--ink,#10231F);
  --lf-muted:var(--muted,#4C5F5A);
  --lf-link:var(--teal,#045F52);
  --lf-input-border:#6B7C77;
  --lf-focus-border:var(--green,#013F38);
  --lf-focus-ring:var(--green,#013F38);
  --lf-chip-bg:#fff;
  --lf-chip-border:#6B7C77;
  --lf-chip-on-bg:var(--green,#013F38);
  --lf-chip-on-fg:var(--on-dark,#EAF3EE);
  --lf-check:var(--green,#013F38);
  --lf-err-fg:#8A1C12;
  --lf-err-bg:#FFE3DD;
  --lf-err-icon:#B3261E;
  --lf-err-ring:rgba(179,38,30,.22);
  --lf-err-border:#B3261E;
  display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:18px 16px;align-items:start;
  position:relative;color:var(--lf-fg);
  font-family:var(--f-body,"Manrope","Segoe UI",Arial,sans-serif);font-size:16px;line-height:1.45;
}
.lf-form.lf-dark{
  --lf-fg:var(--on-dark,#EAF3EE);
  --lf-muted:var(--on-dark-muted,#9DB8AF);
  --lf-link:var(--lime,#B7EF49);
  --lf-input-border:transparent;
  --lf-focus-border:var(--lime,#B7EF49);
  --lf-focus-ring:var(--lime,#B7EF49);
  --lf-chip-bg:transparent;
  --lf-chip-border:rgba(234,243,238,.45);
  --lf-chip-on-bg:var(--lime,#B7EF49);
  --lf-chip-on-fg:var(--green,#013F38);
  --lf-check:var(--lime,#B7EF49);
  --lf-err-ring:rgba(255,180,168,.6);
  --lf-err-border:#FF9585;
}
.lf-form *,.lf-form *::before,.lf-form *::after{box-sizing:border-box}
.lf-form>*{grid-column:1/-1;min-width:0}
/* сетка 10 колонок: .lf-half — пополам, .lf-w4/.lf-w6 — узкое + широкое поле (имя | контакт) */
.lf-form>.lf-half{grid-column:span 5}
.lf-form>.lf-w4{grid-column:span 4}
.lf-form>.lf-w6{grid-column:span 6}
@media (max-width:640px){
  .lf-form{grid-template-columns:minmax(0,1fr);gap:16px}
  .lf-form>.lf-half,.lf-form>.lf-w4,.lf-form>.lf-w6{grid-column:1/-1}
}

/* ---------- поле ---------- */
.lf-field{display:grid;gap:7px;margin:0;padding:0;border:0;min-width:0}
.lf-field>label,.lf-field>legend{display:block;padding:0;font-size:15px;font-weight:700;line-height:1.35;color:var(--lf-fg)}
.lf-field>legend{margin-bottom:9px}
.lf-opt{display:inline-block;margin-left:2px;font-size:13.5px;font-weight:500;color:var(--lf-muted);white-space:nowrap}
.lf-hint{margin:0;font-size:14px;line-height:1.4;color:var(--lf-muted)}

.lf-form input:not([type=radio]):not([type=checkbox]),
.lf-form select,
.lf-form textarea{
  display:block;width:100%;min-height:50px;margin:0;padding:12px 14px;
  font:500 16px/1.4 var(--f-body,"Manrope","Segoe UI",Arial,sans-serif);color:var(--ink,#10231F);
  background-color:#fff;border:2px solid var(--lf-input-border);border-radius:12px;
  outline:0;box-shadow:none;transition:border-color .15s,box-shadow .15s;
  -webkit-appearance:none;appearance:none;
}
.lf-form textarea{min-height:108px;resize:vertical}
.lf-form select{
  padding-right:42px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23013F38' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
}
.lf-form ::placeholder{color:#5E6E6A;opacity:1}
.lf-form input:not([type=radio]):not([type=checkbox]):focus,
.lf-form select:focus,
.lf-form textarea:focus{border-color:var(--lf-focus-border);box-shadow:0 0 0 3px rgba(183,239,73,.55);outline:0}
.lf-dark input:not([type=radio]):not([type=checkbox]):focus,
.lf-dark select:focus,
.lf-dark textarea:focus{box-shadow:0 0 0 4px rgba(183,239,73,.35)}

/* ошибка у поля: рамка + текст с иконкой, не только цвет */
.lf-form [aria-invalid="true"]:not([type=checkbox]):not([type=radio]){border-color:var(--lf-err-border);box-shadow:0 0 0 3px var(--lf-err-ring)}
.lf-form [aria-invalid="true"]:not([type=checkbox]):not([type=radio]):focus{border-color:var(--lf-err-border);box-shadow:0 0 0 3px var(--lf-err-ring),0 0 0 6px rgba(183,239,73,.45)}
.lf-error{
  display:flex;gap:8px;align-items:flex-start;width:fit-content;max-width:100%;margin:0;
  padding:7px 11px 7px 8px;border-radius:9px;background:var(--lf-err-bg);color:var(--lf-err-fg);
  font-size:14.5px;font-weight:600;line-height:1.4;
}
.lf-light .lf-error{box-shadow:inset 0 0 0 1px #EDB1A7}
.lf-error::before{
  content:"!";flex:none;display:inline-grid;place-items:center;width:19px;height:19px;margin-top:1px;border-radius:50%;
  background:var(--lf-err-icon);color:#fff;font:800 12.5px/1 var(--f-body,Arial,sans-serif);
}
.lf-error[hidden]{display:none!important}

/* ---------- radio-сегменты ---------- */
.lf-seg{position:relative}
.lf-opts{display:flex;flex-wrap:wrap;gap:8px}
.lf-seg input[type=radio]{position:absolute;width:1px;height:1px;margin:0;padding:0;opacity:0;pointer-events:none;clip-path:inset(50%)}
.lf-seg label{
  display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:9px 16px;
  font-size:15px;font-weight:600;line-height:1.2;color:var(--lf-fg);
  background:var(--lf-chip-bg);border:1.5px solid var(--lf-chip-border);border-radius:999px;cursor:pointer;
  transition:background-color .15s,border-color .15s,color .15s;
}
.lf-seg label:hover{border-color:var(--lf-focus-border)}
.lf-seg input:checked+label{background:var(--lf-chip-on-bg);border-color:var(--lf-chip-on-bg);color:var(--lf-chip-on-fg)}
.lf-seg input:checked+label::before{content:"";flex:none;width:10px;height:6px;margin-top:-3px;border:solid currentColor;border-width:0 0 2.5px 2.5px;transform:rotate(-45deg)}
.lf-seg input:focus-visible+label{outline:3px solid var(--lf-focus-ring);outline-offset:3px}
.lf-intent>legend{font-size:15px}
.lf-intent label{font-weight:700}

/* ---------- согласие ---------- */
.lf-consent{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;align-items:start}
.lf-consent input[type=checkbox]{
  width:24px;height:24px;min-height:0;margin:1px 0 0;padding:0;cursor:pointer;
  accent-color:var(--lf-check);border:0;
}
.lf-consent label{font-size:14.5px;font-weight:500;line-height:1.5;color:var(--lf-fg);cursor:pointer}
.lf-consent label a{color:var(--lf-link);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.lf-consent input[type=checkbox]:focus-visible{outline:3px solid var(--lf-focus-ring);outline-offset:3px}
.lf-consent input[aria-invalid="true"]{outline:2px solid var(--lf-err-icon);outline-offset:2px}
.lf-dark .lf-consent input[aria-invalid="true"]{outline-color:#FFB4A8}
.lf-consent .lf-error{grid-column:2}

/* ---------- honeypot ---------- */
.lf-hp{position:absolute!important;left:-10000px!important;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- сводка ошибок ---------- */
.lf-summary{
  padding:14px 16px 14px 18px;border-radius:14px;border-left:5px solid var(--lf-err-icon);
  background:var(--lf-err-bg);color:var(--lf-err-fg);font-size:15px;line-height:1.45;
}
.lf-summary:focus{outline:3px solid var(--lf-focus-ring);outline-offset:3px}
.lf-summary-title{margin:0 0 6px;font-weight:800}
.lf-summary ul{margin:0;padding-left:20px}
.lf-summary li+li{margin-top:4px}
.lf-summary a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.lf-summary a:focus-visible{outline:3px solid var(--lf-err-icon);outline-offset:2px}

/* ---------- низ формы ---------- */
.lf-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 22px}
.lf-promise{flex:1 1 240px;max-width:46ch;margin:0;font-size:14px;line-height:1.5;color:var(--lf-muted)}
.lf-promise b{display:block;color:var(--lf-fg);font-weight:700;font-size:15px}
.lf-form [type=submit]{min-height:50px}
.lf-form [type=submit][disabled]{opacity:.75;cursor:progress;transform:none}
@media (max-width:640px){
  .lf-foot [type=submit]{width:100%;justify-content:center;text-align:center}
}

/* ---------- статус: успех / запасной путь ---------- */
.lf-status{
  display:grid;gap:12px;padding:20px 22px;border-radius:18px;
  background:#fff;color:var(--ink,#10231F);border:2px solid var(--green,#013F38);
}
.lf-dark .lf-status{border-color:var(--lime,#B7EF49)}
.lf-status[hidden]{display:none!important}
.lf-status:focus{outline:3px solid var(--lf-focus-ring);outline-offset:3px}
.lf-status p{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink,#10231F)}
.lf-status .lf-status-title{font:700 20px/1.25 var(--f-display,"Unbounded","Arial Black",Arial,sans-serif);color:var(--green,#013F38)}
.lf-status .lf-status-warn{font-size:18px}
.lf-status a:not(.lf-act){color:var(--teal,#045F52);font-weight:700;text-underline-offset:2px}
.lf-status :focus-visible{outline:3px solid var(--teal,#045F52);outline-offset:2px}
.lf-text{
  margin:0;max-height:240px;overflow:auto;padding:12px 14px;white-space:pre-wrap;overflow-wrap:anywhere;
  font:500 13.5px/1.55 var(--f-mono,ui-monospace,Menlo,Consolas,monospace);color:var(--ink,#10231F);
  background:var(--paper-2,#F6F6F2);border:1px solid var(--line,rgba(16,35,31,.14));border-radius:10px;
}
.lf-row{display:flex;flex-wrap:wrap;gap:10px}
.lf-act{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;
  font:700 15px/1.2 var(--f-body,"Manrope","Segoe UI",Arial,sans-serif);text-decoration:none;cursor:pointer;
  color:var(--green,#013F38);background:#fff;border:2px solid var(--green,#013F38);border-radius:12px;
  transition:transform .15s;
}
.lf-act:hover{transform:translateY(-1px)}
.lf-act-main{background:var(--green,#013F38);color:var(--lime,#B7EF49)}
.lf-act-sub{font-weight:600;white-space:pre}
.lf-copy-note{font-size:14px!important;color:var(--muted,#4C5F5A)!important}
.lf-copy-note:empty{display:none}
@media (max-width:480px){.lf-act{width:100%}.lf-status{padding:18px 16px}}
@media (prefers-reduced-motion:reduce){.lf-form *{transition:none!important}}

/* следующий шаг: ИИ-ассистент в Telegram */
.lf-next-box{display:grid;gap:10px;padding:14px 16px;border-radius:14px;background:var(--lime,#B7EF49);color:var(--green,#013F38)}
.lf-next-box p{margin:0;font-size:15px;line-height:1.45;color:var(--green,#013F38)!important}
.lf-next-box .lf-next{justify-self:start;font-size:16px}
@media (max-width:480px){.lf-next-box .lf-next{justify-self:stretch}}