/* ═══════════════════════════════════════════════════════════════════════
   miniapp.css — герой Telegram Mini App (пример Fitmax). Показывает ВЕСЬ путь
   клиента внутри мессенджера: экран «Запись» (расписание, тренеры, цена) →
   «Оплата» (чек-аут, промокод, карта/эквайринг) → «Профиль» (подтверждение,
   абонемент, бонусы, история). Приложение само проводит тур по экранам в
   цикле. Токенизировано, акцент var(--accent).
   Ноль джанка: экраны — горизонтальный трек (translateX), кнопка/шаги —
   opacity; высота .ma-view фиксирована → CLS 0. reduced-motion/no-JS =
   статичный экран «Запись». Порядок стейта ведёт js/miniapp.js (data-s).
   ═══════════════════════════════════════════════════════════════════════ */
.miniapp{width:100%;max-width:400px;margin-inline:auto}
.ma-frame{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 30px 60px -32px rgba(6,29,41,.34),0 2px 8px -4px rgba(6,29,41,.12);
  display:flex;flex-direction:column;height:470px}

/* ── шапка ── */
.ma-head{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line);color:var(--ink)}
.ma-ava{width:34px;height:34px;border-radius:var(--r-sm);flex:none;display:grid;place-items:center;
  background:var(--grad);color:#fff;font-weight:800;font-size:14px}
.ma-title{flex:1;display:flex;flex-direction:column;line-height:1.15}
.ma-title b{font-size:14px;font-weight:700}
.ma-title span{font-size:11px;color:var(--ink-3)}
/* 🔴 Фикс 25.08.2026 (агент К2). Текст «6 онлайн» шёл цветом var(--ok) #0FB87E
   по белому: контраст 2.56 при кегле 11px — Lighthouse снимал 3 балла a11y
   (нужно 4.5). Точка-индикатор рядом остаётся фирменной: к декоративным
   элементам требование контраста текста не применяется. */
.ma-live{font-size:11px;font-weight:600;color:var(--ok-ink,#0A7D56);display:inline-flex;align-items:center;gap:5px}
.ma-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);
  animation:maBlink 1.8s ease-in-out infinite}
@keyframes maBlink{0%,100%{opacity:1}50%{opacity:.3}}

/* ── степпер ── */
.ma-steps{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.ma-step{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;font-size:11px;font-weight:600;
  color:var(--ink-3);transition:color .4s ease}
.ma-step i{width:17px;height:17px;border-radius:50%;flex:none;display:grid;place-items:center;font-style:normal;
  font-size:10px;font-weight:800;background:var(--line);color:var(--ink-2);transition:background .4s ease,color .4s ease}
.ma-frame[data-s="1"] .ma-step.s1,
.ma-frame[data-s="2"] .ma-step.s2,
.ma-frame[data-s="3"] .ma-step.s3,
.ma-frame:not([data-s]) .ma-step.s1{color:var(--ink)}
.ma-frame[data-s="1"] .ma-step.s1 i,
.ma-frame[data-s="2"] .ma-step.s2 i,
.ma-frame[data-s="3"] .ma-step.s3 i,
.ma-frame:not([data-s]) .ma-step.s1 i{background:var(--accent);color:var(--accent-ink)}
/* пройденные шаги — галочка-цвет */
.ma-frame[data-s="2"] .ma-step.s1 i,
.ma-frame[data-s="3"] .ma-step.s1 i,
.ma-frame[data-s="3"] .ma-step.s2 i{background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--accent)}

/* ── вьюпорт + трек экранов ── */
.ma-view{overflow:hidden;background:var(--bg-2);flex:1;min-height:0}
.ma-track{display:flex;width:300%;height:100%;transition:transform .55s cubic-bezier(.5,0,.2,1)}
.ma-frame[data-s="2"] .ma-track{transform:translateX(-33.333%)}
.ma-frame[data-s="3"] .ma-track{transform:translateX(-66.666%)}
.ma-screen{width:33.333%;flex:none;padding:16px 14px;display:flex;flex-direction:column;gap:12px;
  justify-content:center;box-sizing:border-box}

/* дни */
.ma-days{display:flex;gap:6px}
.ma-day{flex:1;text-align:center;font-size:11px;color:var(--ink-2);background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 0;line-height:1.2}
.ma-day b{display:block;font-size:14px;color:var(--ink);margin-top:1px}
.ma-day.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.ma-day.on b{color:var(--accent-ink)}

/* слоты */
.ma-slots{display:flex;flex-direction:column;gap:9px}
.ma-slot{display:flex;align-items:center;gap:11px;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r-md);padding:11px 13px}
.ma-time{font-weight:800;font-size:15px;color:var(--ink);flex:none;width:48px}
.ma-slot-info{flex:1;display:flex;flex-direction:column;line-height:1.25;min-width:0}
.ma-slot-info b{font-size:13px;font-weight:700;color:var(--ink)}
.ma-slot-info span{font-size:11px;color:var(--ink-2)}
.ma-price{font-size:12px;font-weight:700;color:var(--ink-2);flex:none}
.ma-check{width:22px;height:22px;border-radius:50%;border:2px solid var(--line-2);flex:none;
  display:grid;place-items:center;color:#fff;font-size:0;transition:border-color .3s ease,background .3s ease}
/* выбранный слот: no-JS = сразу подсвечен; с JS — после «выбора» (.ma-picked) */
.ma-slot.pick{transition:border-color .4s ease,box-shadow .4s ease,background .4s ease}
.ma-slot.pick,
.ma-frame.ma-picked .ma-slot.pick{border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent);
  background:color-mix(in srgb,var(--accent) 5%,var(--bg))}
.ma-slot.pick .ma-check,
.ma-frame.ma-picked .ma-slot.pick .ma-check{border-color:var(--accent);background:var(--accent);font-size:13px}
/* при активном JS до «выбора» слот не подсвечен */
.ma-frame.ma-js .ma-slot.pick{border-color:var(--line);box-shadow:none;background:var(--bg)}
.ma-frame.ma-js .ma-slot.pick .ma-check{border-color:var(--line-2);background:transparent;font-size:0}
.ma-frame.ma-js.ma-picked .ma-slot.pick{border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent);
  background:color-mix(in srgb,var(--accent) 5%,var(--bg))}
.ma-frame.ma-js.ma-picked .ma-slot.pick .ma-check{border-color:var(--accent);background:var(--accent);font-size:13px}

/* ── экран 2: оплата ── */
.ma-order{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r-md);padding:12px 13px}
.ma-order-t{flex:1;display:flex;flex-direction:column;line-height:1.3;min-width:0}
.ma-order-t b{font-size:13.5px;font-weight:700;color:var(--ink)}
.ma-order-t span{font-size:11px;color:var(--ink-2)}
.ma-order-p{font-size:15px;font-weight:800;color:var(--ink);flex:none}
.ma-rows{display:flex;flex-direction:column;gap:0;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r-md);padding:4px 13px}
.ma-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;font-size:12.5px;color:var(--ink-2)}
.ma-row + .ma-row{border-top:1px solid var(--line)}
.ma-row b{color:var(--ink);font-weight:700}
.ma-promo{font-style:normal;font-size:10px;font-weight:700;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);
  border-radius:var(--r-sm);padding:1px 5px;margin-left:5px}
.ma-row-tot{font-size:13.5px;color:var(--ink);font-weight:700}
.ma-row-tot b{font-size:15px}
.ma-method{display:flex;align-items:center;gap:11px;background:var(--bg);
  border:1.5px solid var(--accent);border-radius:var(--r-md);padding:11px 13px}
.ma-card{width:30px;height:30px;border-radius:var(--r-sm);flex:none;display:grid;place-items:center;
  background:var(--bg-2);font-size:15px}
.ma-method-t{flex:1;display:flex;flex-direction:column;line-height:1.25;min-width:0}
.ma-method-t b{font-size:13px;font-weight:700;color:var(--ink)}
.ma-method-t span{font-size:10.5px;color:var(--ink-2)}
.ma-method-r{width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--accent-ink);
  flex:none;display:grid;place-items:center;font-size:12px;font-weight:800}

/* ── экран 3: профиль ── */
.ma-okcard{display:flex;align-items:center;gap:11px;background:color-mix(in srgb,var(--ok) 12%,var(--bg));
  border:1px solid color-mix(in srgb,var(--ok) 40%,transparent);border-radius:var(--r-md);padding:12px 13px}
.ma-ok-i{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
  /* 🔴 WEB-СТАНДАРТ §1.8: белый глиф по --ok = 2,57. Темнеет глиф, не плашка. */
  background:var(--ok);color:var(--ink);font-size:15px;font-weight:800}
.ma-ok-t{display:flex;flex-direction:column;line-height:1.3}
.ma-ok-t b{font-size:13.5px;font-weight:700;color:var(--ink)}
.ma-ok-t span{font-size:11px;color:var(--ink-2)}
.ma-abon{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 13px;display:flex;flex-direction:column;gap:9px}
.ma-abon-h{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--ink-2)}
.ma-abon-h b{font-size:13px;color:var(--ink);font-weight:800}
.ma-bar{height:8px;border-radius:var(--r-pill);background:var(--bg-2);overflow:hidden}
.ma-bar-f{display:block;height:100%;border-radius:var(--r-pill);background:var(--grad);
  transform-origin:left;transform:scaleX(.15);transition:transform .8s cubic-bezier(.4,0,.2,1)}
.ma-frame[data-s="3"] .ma-bar-f{transform:scaleX(.667)}
.ma-stat{display:flex;gap:8px}
.ma-stat-c{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 8px;
  display:flex;flex-direction:column;align-items:center;gap:2px}
.ma-stat-c b{font-size:15px;font-weight:800;color:var(--ink)}
.ma-stat-c span{font-size:10px;color:var(--ink-3)}

/* ── низ: главная кнопка Telegram, меняет подпись по шагу ── */
.ma-foot{position:relative;min-height:56px;background:var(--accent);overflow:hidden;
  transition:background .5s cubic-bezier(.4,0,.2,1)}
.ma-cta{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;
  color:var(--accent-ink);font-weight:700;font-size:14px;padding:15px;box-sizing:border-box;
  opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease;pointer-events:none}
/* 🔴 QA3 26.08.2026. Белая подложка .22 осветляла --accent #6D49CE до #8D71D9,
   и белый текст на пилюле давал 3,82 при норме 4,5 — Lighthouse снимал 3 балла
   a11y на /boty/telegram-prilozheniya/. Опустили до .12: пилюля читается, контраст
   4,69. Правило — WEB-СТАНДАРТ §1.8: полупрозрачная заливка считается композитом
   с фоном, а не своим цветом. */
.ma-cta .ma-when{background:rgba(255,255,255,.12);border-radius:var(--r-pill);padding:2px 9px;font-size:12px}
.ma-cta-i{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.12);display:grid;place-items:center;font-size:12px;font-weight:800}
.ma-frame[data-s="1"] .c1,
.ma-frame[data-s="2"] .c2,
.ma-frame[data-s="3"] .c3,
.ma-frame:not([data-s]) .c1{opacity:1;transform:none}
.ma-frame[data-s="3"] .ma-foot{background:var(--ok)}

@media (prefers-reduced-motion:reduce){
  .ma-track,.ma-cta,.ma-foot,.ma-bar-f,.ma-slot.pick,.ma-check,.ma-step,.ma-step i,.ma-live::before{transition:none;animation:none}
}

/* мобильные версии — превью видно и на телефоне (только эти страницы) */
@media(max-width:860px){
  .phero .process-visual{display:block!important;margin-top:clamp(22px,6vw,38px)}
  /* 🔴 Фикс 25.08.2026 (агент К2). На 360 px первый экран обрезался: заголовок,
     лид и кнопка уезжали за правый край и прятались под overflow:hidden у .phero.
     Причина — грид-трек 1fr берёт min-width:auto, то есть min-content вложенного
     макета телефона (≈400 px), и растягивает колонку шире вьюпорта. Обнуляем
     min-width обоим детям .phero .wrap — трек снова считается от ширины экрана.
     Проверено на 360 / 768 / 1280: обрезки нет, горизонтального скролла нет. */
  .phero .wrap > *{min-width:0}
}