/* ============================================================
   MIRRIM · Онбординг — переиспользуемые компоненты мастера
   Источник: me/franchise/onboarding/onboarding.css (эталон)
   Подключать ПОСЛЕ ob-core.css. Направление-специфичные блоки
   (карточки городов, оплата, brandkit, multiselect площадок и
   т.п.) НЕ сюда — держать в CSS-файле самого направления.
   ============================================================ */

/* progress master */
.ob-prog{display:flex;align-items:flex-start;gap:0;margin-bottom:24px;padding:18px 22px}
.ob-prog__step{flex:1;display:flex;flex-direction:column;align-items:center;gap:9px;position:relative;text-align:center}
.ob-prog__line{position:absolute;top:17px;left:calc(-50% + 18px);right:calc(50% + 18px);height:3px;background:var(--glass-line);border-radius:3px;overflow:hidden}
.ob-prog__line i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--purple-500),var(--lime));transition:width .5s ease}
.ob-prog__step:first-child .ob-prog__line{display:none}
.ob-prog__dot{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--glass-strong);border:2px solid var(--glass-line);color:var(--ink-3);font:800 13px/1 var(--font);flex-shrink:0;transition:.25s;z-index:1}
.ob-prog__dot svg{width:16px;height:16px;stroke-width:2.6;fill:none;stroke:currentColor}
.ob-prog__lbl{font:700 11.5px/1.15 var(--font);color:var(--ink-3);transition:.2s;max-width:74px}
.ob-prog__step.done .ob-prog__dot{background:linear-gradient(150deg,var(--purple-500),var(--purple-700));border-color:transparent;color:#fff}
.ob-prog__step.done .ob-prog__line i{width:100%}
.ob-prog__step.active .ob-prog__dot{background:var(--lime);border-color:transparent;color:#0A0A0A;box-shadow:0 8px 20px -6px rgba(198,244,50,.8),0 0 0 5px rgba(198,244,50,.2)}
.ob-prog__step.active .ob-prog__lbl{color:var(--purple-700)}

/* card / panel / step */
.ob-panel{padding:34px 38px;margin-bottom:18px;animation:obIn .4s cubic-bezier(.2,.8,.3,1)}
@keyframes obIn{from{transform:translateY(16px)}to{transform:none}}
@media (prefers-reduced-motion: reduce){.ob-panel{animation:none}}
.ob-step{display:none}
.ob-step.on{display:block}
.ob-h{font:800 27px/1.12 var(--font);letter-spacing:-.02em;margin-bottom:8px}
.ob-h span{background:linear-gradient(90deg,var(--purple-500),var(--purple-300));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ob-sub{font:500 15px/1.5 var(--font);color:var(--ink-2);margin-bottom:26px;max-width:560px}
.ob-eyebrow{display:inline-flex;align-items:center;gap:8px;font:700 11px/1 var(--font);letter-spacing:1.4px;text-transform:uppercase;color:var(--purple-500);margin-bottom:14px}
.ob-eyebrow::before{content:"";width:18px;height:3px;border-radius:3px;background:var(--lime)}

/* info / limited banner (используется и для "оплата — при кампании") */
.ob-banner{display:flex;align-items:center;gap:13px;padding:14px 18px;border-radius:var(--r-md);background:linear-gradient(120deg,rgba(198,244,50,.16),rgba(167,139,250,.12));border:1px solid rgba(198,244,50,.35);margin-bottom:22px}
.ob-banner svg{width:22px;height:22px;stroke:var(--lime-deep);stroke-width:2;fill:none;flex-shrink:0}
.ob-banner b{font:700 14px/1.3 var(--font);color:var(--ink)}
.ob-banner span{font:500 12.5px/1.4 var(--font);color:var(--ink-2);display:block;margin-top:2px}

/* fields */
.ob-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ob-f{display:flex;flex-direction:column;gap:7px}
.ob-f.full{grid-column:1 / -1}
.ob-f label{font:700 12px/1 var(--font);color:var(--ink-2);text-transform:uppercase;letter-spacing:.6px}
.ob-f label .req{color:var(--purple-500)}
.ob-inp,.ob-ta,.ob-sel{height:52px;border-radius:var(--r-sm);border:1.5px solid var(--glass-line);background:var(--glass-soft);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:0 16px;font:500 15px/1 var(--font);color:var(--ink);transition:.16s;width:100%}
.ob-ta{height:auto;min-height:96px;padding:14px 16px;resize:vertical;line-height:1.5}
.ob-inp::placeholder,.ob-ta::placeholder{color:var(--ink-4)}
.ob-inp:focus,.ob-ta:focus,.ob-sel:focus{outline:none;border-color:var(--purple-300);background:var(--glass-strong);box-shadow:0 0 0 4px rgba(167,139,250,.18)}
.ob-inp.bad,.ob-ta.bad{border-color:var(--error);box-shadow:0 0 0 4px rgba(239,68,68,.12)}
.ob-err{font:600 11.5px/1 var(--font);color:var(--error);min-height:13px}
.ob-hint{font:500 12px/1.4 var(--font);color:var(--ink-3);display:flex;align-items:center;gap:7px}
.ob-hint svg{width:14px;height:14px;stroke:var(--ink-4);stroke-width:2;fill:none;flex-shrink:0}

/* auth tabs (email/phone) */
.ob-tabs{display:inline-flex;gap:4px;padding:5px;border-radius:14px;background:var(--glass-soft);border:1px solid var(--glass-line);margin-bottom:22px}
.ob-tabs button{font:700 13.5px/1 var(--font);padding:11px 20px;border-radius:10px;color:var(--ink-3);transition:.16s}
.ob-tabs button.on{background:var(--glass-strong);color:var(--purple-500);box-shadow:var(--shadow-sm)}

/* code input row (4-значный код) */
.ob-code{display:flex;gap:10px;margin-top:6px}
.ob-code input{width:52px;height:60px;text-align:center;font:800 22px/1 var(--font);border-radius:12px;border:1.5px solid var(--glass-line);background:var(--glass-soft);color:var(--ink)}
.ob-code input:focus{outline:none;border-color:var(--purple-400);background:var(--glass-strong)}

/* choice cards (радио-кнопки в сетке) */
.ob-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ob-choice{padding:14px 14px;border-radius:14px;border:1.5px solid var(--glass-line);background:var(--glass-soft);text-align:left;transition:.16s;font:600 13.5px/1.3 var(--font);color:var(--ink-2)}
.ob-choice:hover{border-color:var(--purple-200);background:var(--glass-strong)}
.ob-choice.on{border-color:var(--purple-500);background:rgba(124,58,237,.08);color:var(--purple-700);box-shadow:0 6px 18px -8px rgba(124,58,237,.4)}
.ob-choice b{display:block;font:700 14px/1.2 var(--font);color:var(--ink);margin-bottom:3px}
.ob-choice.on b{color:var(--purple-700)}

/* consent checkbox */
.ob-consent{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:16px;background:var(--glass-soft);border:1.5px solid var(--glass-line);margin-bottom:16px;cursor:pointer;transition:.16s}
.ob-consent:hover{border-color:var(--purple-200)}
.ob-consent.on{border-color:var(--purple-400);background:rgba(124,58,237,.06)}
.ob-check{width:24px;height:24px;border-radius:7px;border:2px solid var(--ink-4);flex-shrink:0;display:grid;place-items:center;transition:.14s;margin-top:1px}
.ob-consent.on .ob-check{background:var(--purple-500);border-color:var(--purple-500)}
.ob-check svg{width:14px;height:14px;stroke:#fff;stroke-width:3;fill:none;opacity:0;transition:.14s}
.ob-consent.on .ob-check svg{opacity:1}
.ob-consent p{font:500 13.5px/1.5 var(--font);color:var(--ink-2)}
.ob-consent p b{color:var(--ink)}

/* ── done screen ── */
.ob-done{text-align:center;padding:20px 10px 6px}
.ob-done__ring{width:96px;height:96px;border-radius:50%;background:radial-gradient(circle,rgba(198,244,50,.3),rgba(124,58,237,.15));display:grid;place-items:center;margin:0 auto 22px;position:relative}
.ob-done__ring::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(198,244,50,.4);animation:obPulse 2.4s ease-out infinite}
@keyframes obPulse{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.25);opacity:0}}
.ob-done__ring svg{width:46px;height:46px;stroke:var(--purple-600);stroke-width:2.4;fill:none}
.ob-done h2{font:800 28px/1.15 var(--font);letter-spacing:-.02em;margin-bottom:10px}
.ob-done p{font:500 15px/1.55 var(--font);color:var(--ink-2);max-width:480px;margin:0 auto 22px}
.ob-done-status{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:999px;background:rgba(93,211,60,.14);border:1px solid rgba(93,211,60,.3);font:700 13.5px/1 var(--font);color:#2E9E1E;margin-bottom:26px}
.ob-done-status.pending{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.3);color:#B7791F}
.ob-done-status .d{width:9px;height:9px;border-radius:50%;background:var(--success);animation:obBlink 1.4s ease-in-out infinite}
.ob-done-status.pending .d{background:var(--warning)}
@keyframes obBlink{0%,100%{opacity:1}50%{opacity:.3}}
.ob-done-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ── nav footer (sticky) ── */
.ob-nav{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:16px 22px calc(16px + env(safe-area-inset-bottom));background:linear-gradient(0deg,rgba(238,233,247,.96),rgba(238,233,247,.7));backdrop-filter:blur(12px);border-top:1px solid var(--glass-line-bot)}
.ob-nav-in{max-width:920px;margin:0 auto;display:flex;align-items:center;gap:14px}
.ob-back{display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 22px;border-radius:14px;background:var(--glass);border:1px solid var(--glass-line);font:700 14px/1 var(--font);color:var(--ink-2);transition:.16s}
.ob-back:hover{background:var(--glass-strong);color:var(--purple-500)}
.ob-back svg{width:17px;height:17px;stroke-width:2.4;fill:none;stroke:currentColor}
.ob-back[disabled]{opacity:.4;pointer-events:none}
.ob-saved{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font:600 12.5px/1 var(--font);color:var(--ink-3)}
.ob-saved svg{width:15px;height:15px;stroke:var(--success);stroke-width:2.4;fill:none}
.ob-next{display:inline-flex;align-items:center;gap:9px;height:52px;padding:0 30px;border-radius:14px;background:var(--lime);color:#0A0A0A;font:800 15px/1 var(--font);box-shadow:0 12px 26px -10px rgba(198,244,50,.9),inset 0 1px 0 rgba(255,255,255,.5);transition:.16s}
.ob-next:hover{transform:translateY(-1px);box-shadow:0 16px 34px -10px rgba(198,244,50,1)}
.ob-next:active{transform:scale(.98)}
.ob-next svg{width:17px;height:17px;stroke-width:2.6;fill:none;stroke:currentColor}
.ob-next[disabled]{opacity:.45;pointer-events:none;filter:grayscale(.3)}

/* responsive */
@media (max-width:768px){
  .ob-panel{padding:26px 22px}
  .ob-prog{padding:14px 10px}
  .ob-prog__lbl{display:none}
  .ob-prog__line{left:calc(-50% + 17px);right:calc(50% + 17px)}
  .ob-grid{grid-template-columns:1fr}
  .ob-choices{grid-template-columns:1fr}
  .ob-h{font-size:23px}
}
@media (max-width:430px){
  .ob-next{padding:0 20px;flex:1;justify-content:center}
}