/* ============================================================
   Виджет «Обратный звонок» — самодостаточный, стили изолированы
   классом .cb. Цвет кнопки берётся из --cb-accent (можно задать
   на .cb инлайном под цвет конкретного шаблона).
   ============================================================ */
.cb{--cb-accent:#e0342c;--cb-radius:10px;--cb-h:46px;font:inherit;box-sizing:border-box;max-width:100%}
.cb *,.cb *::before,.cb *::after{box-sizing:border-box}
.cb-form{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;margin:0}
.cb-input{flex:1 1 180px;min-width:0;height:var(--cb-h);padding:0 14px;border:1.5px solid #d6dbe3;border-radius:var(--cb-radius);
  font:inherit;font-size:16px;letter-spacing:.03em;color:#1c2333;background:#fff;outline:none;transition:border-color .15s,box-shadow .15s}
.cb-input:focus{border-color:var(--cb-accent);box-shadow:0 0 0 3px rgba(224,52,44,.14)}
@supports (color:color-mix(in srgb,red,blue)){.cb-input:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-accent) 18%,transparent)}}
.cb-input.cb-bad{border-color:#e0342c}
.cb-input::placeholder{color:#a3abb8}
/* Двухцветная маска: обёртка .cb-field занимает место поля, под прозрачным полем — «призрак» шаблона */
.cb-field{position:relative;flex:1 1 180px;min-width:0;display:block}
.cb-field .cb-input{display:block;width:100%;max-width:none;flex:none;position:relative;z-index:1;background:transparent;color:#3b4252}
.cb-ghost{position:absolute;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;padding:0 14px;border:1.5px solid transparent;border-radius:var(--cb-radius);
  background:#fff;color:#b4bcc8;font:inherit;font-size:16px;letter-spacing:.03em;white-space:pre;pointer-events:none;overflow:hidden}
.cb-ghost__typed{visibility:hidden}
.cb-btn{flex:0 0 auto;height:var(--cb-h);padding:0 18px;border:0;border-radius:var(--cb-radius);background:var(--cb-accent);color:#fff;
  font:inherit;font-size:15px;font-weight:700;line-height:1.1;cursor:pointer;white-space:nowrap;transition:filter .15s,transform .05s}
.cb-btn:hover{filter:brightness(1.07)}
.cb-btn:active{transform:translateY(1px)}
.cb-btn[disabled]{opacity:.7;cursor:default}
/* текст согласия — обычный поток (ссылка переносится вместе со словами), чекбокс слева абсолютом */
.cb-consent{flex:1 1 100%;display:block;position:relative;padding-left:22px;font-size:12px;line-height:1.35;color:#6b7280;cursor:pointer;margin:0;text-align:left}
.cb-consent input{position:absolute;left:0;top:1px;margin:0;width:15px;height:15px;accent-color:var(--cb-accent)}
.cb-consent a{color:inherit;text-decoration:underline}
.cb-err{flex:1 1 100%;font-size:12px;color:#e0342c;display:none;margin:-2px 0 0}
.cb-err.on{display:block}
.cb-hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;opacity:0;pointer-events:none}

/* --- варианты размещения --- */
/* Шапка: компактно — поле + кнопка в строку, согласие мелкой строкой под ними */
.cb--header{--cb-h:38px;--cb-radius:8px;flex:0 0 auto;align-self:center;max-width:340px}
.cb--header .cb-form{flex-wrap:wrap;gap:5px}
.cb--header .cb-input,.cb--header .cb-field{flex:0 0 118px;max-width:118px}
.cb--header .cb-input,.cb--header .cb-ghost{font-size:13px;padding:0 9px}
.cb--header .cb-btn{flex:0 0 auto;padding:0 10px;font-size:12px}
.cb--header .cb-consent{font-size:10px;line-height:1.2;margin-top:-1px;max-width:100%} /* мелко, но видно и отмечено; переносится в ширину виджета */

/* Первый экран: крупно, акцентно */
.cb--hero{--cb-h:54px;--cb-radius:12px;max-width:560px;margin-bottom:14px}
.cb--hero .cb-input,.cb--hero .cb-ghost{font-size:17px}
.cb--hero .cb-btn{font-size:16px;padding:0 22px}
/* Первый экран как отдельная карточка «второй способ связи»: разделитель «или» + белая карточка */
.cb-or{display:flex;align-items:center;gap:12px;width:100%;max-width:600px;margin:14px 0 10px;color:#8a94a6;font-size:13px;font-weight:600;letter-spacing:.02em}
.cb-or::before,.cb-or::after{content:"";flex:1;height:1px;background:#d9dfe8}
.cb-card{background:#fff;border:1px solid #dde3ea;border-radius:16px;padding:14px 16px 12px;box-shadow:0 2px 14px rgba(10,74,122,.07)}
.cb-or--light{color:rgba(255,255,255,.65)} /* разделитель на тёмном фоне */
.cb-or--light::before,.cb-or--light::after{background:rgba(255,255,255,.28)}
/* Лёгкая полоска в одну строку: цветной фон (--cb-bg), подпись слева, поле «в линию», кнопка-пилюля.
   Фон отделяет «оставить номер» от кнопки-телефона. (вариант не используется, оставлен на будущее) */
.cb--strip{--cb-h:44px;background:var(--cb-bg,#0095d9);color:#fff;border-radius:14px;padding:12px 16px 9px;max-width:600px;margin-top:14px}
.cb--strip .cb-form{align-items:center;gap:6px 14px}
.cb--strip .cb-label{flex:0 0 auto;font-size:15px;font-weight:600;line-height:1.2;white-space:nowrap}
.cb--strip .cb-field{flex:1 1 170px}
.cb--strip .cb-input,.cb--strip .cb-ghost{font-size:19px;font-weight:600;padding:0 4px;border:0;border-bottom:1.5px solid rgba(255,255,255,.55);border-radius:0;background:transparent;letter-spacing:.01em}
.cb--strip .cb-input{color:#fff}
.cb--strip .cb-ghost{color:rgba(255,255,255,.55);border-bottom-color:transparent}
.cb--strip .cb-input:focus{box-shadow:none;border-bottom-color:#fff}
.cb--strip .cb-input.cb-bad{border-bottom-color:#ffd2c8}
.cb--strip .cb-input::placeholder{color:rgba(255,255,255,.6);font-weight:500}
.cb--strip .cb-btn{border-radius:999px;padding:0 22px;font-size:15px;box-shadow:0 3px 12px rgba(0,0,0,.15)}
.cb--strip .cb-consent{color:rgba(255,255,255,.8);font-size:11.5px;margin-top:2px}
.cb--strip .cb-consent a{color:#fff}
.cb--strip .cb-consent input{accent-color:#fff}
.cb--strip .cb-err{color:#ffe0dc}

/* Инлайн у телефонов по лендингу */
.cb--inline{max-width:520px}

/* Планшет/мобильный: в шапке места нет — форма первого экрана сразу под ней */
@media (max-width:820px){
  .cb--header{display:none}
}
/* Шаблоны с длинным меню: виджет в шапке только на широких экранах */
@media (max-width:1439px){
  .cb--header-xl{display:none}
}
/* Мобильная версия: всё в столбик, кнопка на всю ширину */
@media (max-width:640px){
  .cb-form{flex-wrap:wrap}
  .cb-input,.cb-field{flex:1 1 100%;max-width:none}
  .cb--strip .cb-label{flex:1 1 100%;max-width:none}
  .cb--strip{padding:12px 14px 9px}
  .cb-btn{flex:1 1 100%;white-space:normal}
  .cb--hero{max-width:none;margin-left:0;margin-right:0}
}

/* ============ Попап «Обратный звонок» ============ */
.cb-open{cursor:pointer}
body.cb-lock{overflow:hidden}
.cb-modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:100000;background:rgba(15,23,42,.55);align-items:center;justify-content:center;padding:16px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.cb-modal.on{display:flex}
.cb-modal__box{position:relative;width:100%;max-width:440px;background:#fff;border-radius:16px;padding:28px 26px 22px;box-shadow:0 24px 60px rgba(0,0,0,.28);animation:cbIn .18s ease-out;font:inherit;color:#1c2333}
@keyframes cbIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.cb-modal__close{position:absolute;top:8px;right:10px;border:0;background:none;font-size:30px;line-height:1;color:#94a3b8;cursor:pointer;padding:4px 8px}
.cb-modal__close:hover{color:#334155}
.cb-modal__icon{width:54px;height:54px;border-radius:50%;background:var(--cb-accent,#e0342c);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 0 12px}
.cb-modal__icon svg{width:26px;height:26px} /* заливку/обводку задаёт сам шаблон (symbol или svg.i) */
.cb-modal__title{margin:0 0 4px;font-size:22px;font-weight:800;line-height:1.2}
.cb-modal__sub{margin:0 0 16px;font-size:14px;color:#64748b;line-height:1.4}
.cb--popup{--cb-h:52px;--cb-radius:12px;max-width:none}
.cb-modal .cb{--cb-accent:inherit} /* цвет попапа задаётся один раз на .cb-modal */
.cb--popup .cb-form{flex-direction:column;align-items:stretch;gap:10px}
.cb--popup .cb-input,.cb--popup .cb-btn{flex:1 1 auto;width:100%;font-size:16px}
.cb--popup .cb-field{flex:0 0 auto;width:100%} /* в колонке flex-basis стал бы высотой */
.cb--popup .cb-consent{font-size:12px}