/* ============================================================
   Формы: один стиль для всех (попап, лид-блок, сервис, запчасти, S/N, контакты).
   Цвет панели задаётся в «Настройки сайта → Формы» (--form-bg).
   ============================================================ */
:root{
  --form-bg:#F4F5F7;
  --field-bg:#FFFFFF;
  --field-line:#E2E5EA;
  --field-line-hover:#C9CED6;
  --field-text:#16181D;
  --field-ph:#8A909A;
  --field-muted:#5C6270; /* текст на панели формы: контраст AA к #F4F5F7 */
  --label:#3A3F47;
  --focus:var(--ink);
  --err:#D1291B;
  --err-bg:#FFF7F6;
  --ok:#1A7F43;
  --wa:#1A9E51;
  --wa-dark:#14803F;
}

/* Панель формы — только попап «Подобрать кран» (и явный .fform--panel).
   Формы на страницах сохраняют прежнее оформление своих разделов. */
.fform--panel{background:var(--form-bg);border-radius:20px;padding:32px;color:var(--field-text);box-shadow:none}
.fform--bordered{border:1px solid var(--field-line)}

/* Сетка полей */
.lm-box .fform .wpcf7-form{display:grid;gap:14px}
.lm-box .fform .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fform .wpcf7-form-control-wrap{display:block}
.fform p{margin:0}

/* Лейблы */
.lm-box .fform label,.lm-box .fform .fl{display:grid;gap:6px;font-size:13px;line-height:1.3;font-weight:600;color:var(--label)}
.fform label .req{color:var(--err);margin-left:2px}

/* Поля */
.lm-box .fform input:not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=file]),
.lm-box .fform select,
.lm-box .fform textarea{
  width:100%;height:52px;padding:0 16px;font:inherit;font-size:16px;color:var(--field-text);
  background:var(--field-bg);border:1px solid var(--field-line);border-radius:12px;
  transition:border-color .15s,box-shadow .15s,background-color .15s;appearance:none
}
.lm-box .fform textarea{height:auto;min-height:104px;padding:14px 16px;resize:vertical;line-height:1.5}
.lm-box .fform select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238A909A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.lm-box .fform ::placeholder{color:var(--field-ph);opacity:1}
.lm-box .fform input:hover:not(:focus),.lm-box .fform select:hover:not(:focus),.lm-box .fform textarea:hover:not(:focus){border-color:var(--field-line-hover)}
.lm-box .fform input:focus,.lm-box .fform select:focus,.lm-box .fform textarea:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px rgba(22,24,29,.08)}
.lm-box .fform input:focus-visible,.lm-box .fform select:focus-visible,.lm-box .fform textarea:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* Чипы типа заявки */
.lm-box .fform .chips,.lm-box .fform .wpcf7-radio{display:flex;flex-wrap:wrap;gap:8px}
.lm-box .fform .chips .wpcf7-list-item,.lm-box .fform .wpcf7-radio .wpcf7-list-item{margin:0}
.lm-box .fform .wpcf7-list-item-label,.lm-box .fform .chip{
  display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;
  background:#fff;border:1px solid var(--field-line);font-size:14px;font-weight:600;color:var(--field-text);cursor:pointer;
  transition:background-color .15s,border-color .15s,color .15s
}
.lm-box .fform .wpcf7-list-item input{position:absolute;opacity:0;width:1px;height:1px}
.lm-box .fform .wpcf7-list-item input:checked + .wpcf7-list-item-label,
.lm-box .fform .chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.lm-box .fform .wpcf7-list-item input:focus-visible + .wpcf7-list-item-label{outline:2px solid var(--focus);outline-offset:2px}

/* Кнопки */
.fform .acts{display:flex;gap:10px;flex-wrap:wrap}
.fform .acts > *{flex:1 1 180px}
.lm-box .fform input[type=submit],.lm-box .fform .wpcf7-submit,.lm-box .fform button[type=submit]{
  height:52px;width:100%;justify-content:center;font:inherit;font-weight:700;font-size:15px;cursor:pointer
}
.fform .btn-wa{background:var(--wa);border-color:var(--wa);color:#fff}
.fform .btn-wa:hover{background:var(--wa-dark);border-color:var(--wa-dark);color:#fff}
.fform form.submitting input[type=submit],.fform form.submitting .wpcf7-submit{opacity:.7;pointer-events:none}
.fform .wpcf7-spinner{width:20px;height:20px;border-width:2px;border-color:rgba(255,255,255,.35);border-top-color:#fff;margin:0 0 0 10px}

/* Согласие */
.lm-box .fform .agree,.lm-box .fform .wpcf7-acceptance .wpcf7-list-item-label{font-size:12px;font-weight:400;color:var(--field-muted);line-height:1.45}
.fform .agree a{color:var(--field-ph);text-decoration:underline}

/* Зона загрузки файлов */
.lm-box .fform .drop{background:#fff;border:1px dashed var(--field-line-hover);border-radius:12px;padding:18px;text-align:center;cursor:pointer;transition:border-color .15s,background-color .15s}
.fform .drop:hover,.fform .drop.over{border-color:var(--focus);background:#fbfcfd}
.fform .drop b{display:block;font-size:14px;color:var(--field-text)}
.fform .drop small{color:var(--field-ph);font-size:12px}
.fform .drop-prev{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.fform .drop-prev span{position:relative;display:inline-flex;align-items:center;gap:6px;padding:6px 26px 6px 10px;background:#fff;border:1px solid var(--field-line);border-radius:10px;font-size:12px;color:var(--field-text)}
.fform .drop-prev button{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:18px;height:18px;border:0;background:none;color:var(--field-ph);cursor:pointer;font-size:14px;line-height:1}

/* ---------- Ошибки под полем ---------- */
.fform .field-err,.fform .wpcf7-not-valid-tip{
  display:flex;align-items:flex-start;gap:6px;margin-top:6px;
  font-size:12px;line-height:1.35;font-weight:500;color:var(--err);
  opacity:0;transform:translateY(-3px);animation:fassi-err .15s ease forwards
}
.fform .field-err::before,.fform .wpcf7-not-valid-tip::before{
  content:"!";flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;margin-top:1px;border-radius:50%;background:var(--err);color:#fff;font-size:10px;font-weight:700;line-height:1
}
@keyframes fassi-err{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .fform .field-err,.fform .wpcf7-not-valid-tip{animation:none;opacity:1;transform:none}
}
.fform .wpcf7-form-control.wpcf7-not-valid,
.fform [aria-invalid="true"]{border-color:var(--err);background:var(--err-bg)}
.fform .wpcf7-form-control.wpcf7-not-valid:focus,
.fform [aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(209,41,27,.14)}

/* Список ошибок сверху не показываем: остаётся только для скринридеров */
.fform .wpcf7-response-output,
.fform .screen-reader-response{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0!important}

/* Плашка «не удалось отправить» */
.fform .send-err{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:var(--err-bg);border:1px solid var(--err);color:var(--err);border-radius:12px;padding:12px 14px;font-size:14px}
.fform .send-err .btn{flex:none;height:40px}

/* Блок успеха вместо формы */
.fform .sent-ok{display:grid;justify-items:center;gap:10px;text-align:center;padding:12px 0}
.fform .sent-ok .ic{width:52px;height:52px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;font-size:26px;line-height:1}
.fform .sent-ok b{font-family:var(--f-head);font-size:20px;color:var(--field-text)}
.fform .sent-ok p{color:var(--field-muted);font-size:14px;margin:0}
.fform .sent-ok .acts{width:100%;margin-top:6px}

/* Телефон и WhatsApp под формой */
.fform .f-phone{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--label);text-decoration:none}
.fform .f-phone b{color:var(--field-text)}

@media (max-width:720px){
  .fform--panel{padding:20px;border-radius:16px}
  .lm-box .fform .two{grid-template-columns:1fr}
  .fform .acts > *{flex:1 1 100%}
}
@media (min-width:390px){
  .fform .acts--row > *{flex:1 1 calc(50% - 5px)}
}

/* ============================================================
   Попап «Подобрать кран»
   ============================================================ */
.lead-modal{position:fixed;inset:0;z-index:140;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(15,17,21,.55);backdrop-filter:blur(4px)}
.lead-modal[hidden]{display:none}
.lm-box{position:relative;width:min(560px,100%);max-height:90vh;overflow:auto;background:var(--form-bg);color:var(--field-text);border-radius:24px;padding:32px}
.lm-box .eyebrow{color:var(--red)}
.lm-box h3,.lm-box h2{font-size:26px;margin:8px 0 8px;color:var(--field-text)}
.lm-box .lead{color:var(--field-muted);font-size:15px;margin:0 0 18px}
.lm-close{position:absolute;right:16px;top:16px;width:40px;height:40px;border-radius:50%;border:1px solid var(--field-line);background:#fff;color:var(--field-text);font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center}
.lm-close:hover{border-color:var(--field-line-hover)}
.lm-grab{display:none}
.lm-model[hidden]{display:none}
.lm-model{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--field-line);border-radius:999px;padding:6px 8px 6px 14px;font-size:13px;font-weight:600;margin-bottom:14px}
.lm-model button{width:22px;height:22px;border:0;border-radius:50%;background:var(--bg-soft);color:var(--field-ph);cursor:pointer;line-height:1;font-size:13px}
.lm-phone{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:14px;color:var(--label);text-decoration:none}
.lm-phone b{color:var(--field-text)}

@media (max-width:720px){
  .lead-modal{align-items:flex-end;padding:0}
  .lm-box{width:100%;max-width:none;max-height:92vh;border-radius:20px 20px 0 0;padding:14px 16px calc(16px + env(safe-area-inset-bottom));animation:fassi-sheet .22s ease}
  .lm-grab{display:block;width:44px;height:4px;border-radius:999px;background:var(--field-line-hover);margin:2px auto 12px}
  .lm-close{top:10px;right:10px;width:36px;height:36px}
  .lm-box .fform{padding:0;background:none}
  @keyframes fassi-sheet{from{transform:translateY(24px)}to{transform:none}}
}
@media (prefers-reduced-motion:reduce){
  .lm-box{animation:none}
}
body.lm-open{overflow:hidden;scrollbar-gutter:stable}
body.lm-open .mbar,body.lm-open .cmp-bar,body.lm-open .pd-sticky{display:none!important}

/* Чипы типа заявки в попапе: белые, выбранный — тёмный (как в остальном интерфейсе попапа). */
.lm-box [data-chips]{display:flex;flex-wrap:wrap;gap:8px}
.lm-box [data-chips] button{
  height:40px;padding:0 16px;border-radius:999px;background:#fff;border:1px solid var(--field-line);
  color:var(--field-text);font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  transition:background-color .15s,border-color .15s,color .15s
}
.lm-box [data-chips] button:hover{border-color:var(--field-line-hover)}
.lm-box [data-chips] button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.lm-box .form-note{font-size:12px;color:var(--field-muted);line-height:1.45;margin:0}

/* Карточка крана: модель в форме КП не редактируется, меняется выбором исполнения. */
.f-model-edit{justify-self:start;margin-top:4px;background:none;border:0;padding:0;font:inherit;font-size:12px;font-weight:600;color:var(--red);cursor:pointer;text-decoration:underline}
.cta-form input.f-model[readonly]{opacity:.85;cursor:default}
#variants.flash{box-shadow:0 0 0 3px rgba(195,24,8,.25);transition:box-shadow .2s}