/* Наши правки поверх style.css от Codex (сам style.css не трогаем — так проще подтягивать новые версии дизайна). */
/* Значок-«чип eSIM» вместо звезды после названия в шапке-мокапе Telegram (видна только вне Telegram, в демо-браузере). */
img.verified{height:17px;width:17px;vertical-align:-3px}
/* Тот же значок рядом с «PALITRA eSIM» в шапке магазина — видна и внутри настоящего Telegram (в отличие от .verified выше).
   Центрируем flex'ом по высоте строки (а не pixel-offset'ом vertical-align), чтобы значок был вровень с буквами, а не «плавал». */
.logo strong{display:inline-flex;align-items:center;gap:4px}
.logo .esim-chip{height:16px;width:16px;position:relative;top:1px}
/* Внутри Telegram: без рамки телефона и без имитации шапки Telegram — у клиента есть свои. */
html{background:var(--bg);overscroll-behavior:none}
html.in-tg body{display:block;padding:0;background:var(--bg);overscroll-behavior:none}
html.in-tg .desktop-side,html.in-tg .telegram-bar{display:none}
html.in-tg .phone{height:100dvh;min-height:0;width:100%;max-width:none;border:0;border-radius:0;box-shadow:none}
html.in-tg .app{padding-top:18px;padding-bottom:calc(106px + env(safe-area-inset-bottom))}
html.in-tg .app.no-nav{padding-bottom:25px}
html.in-tg .bottom-nav{bottom:calc(12px + env(safe-area-inset-bottom))}
/* ОТМЕНЕНО (2026-09-22): попытка поднять .bottom-nav выше .product-foot z-index'ом перекрыла кнопку «Купить»/«Продолжить»
   на странице тарифа — она и должна быть видна поверх нижней панели, когда sticky-футер легитимно наезжает на её зону
   (это часть исходного дизайна: кнопка едет над навигацией при скролле). Экран с «доком» из исходного репорта разобрать
   отдельно, не через z-index навигации. См. docs/BACKLOG.md. */
.btn-row{display:flex;flex-direction:column;gap:9px;margin:12px 0}
.warn{background:#3d2a14;border:1px solid #7a5a22;color:#f6d99a;border-radius:15px;padding:12px 13px;font-size:12px;line-height:1.5;margin:12px 0}
.code{display:block;word-break:break-all;font-size:11px;color:#d7b4c8;margin-top:8px;user-select:all}
/* Домен SM-DP+ в коде ручной установки скрыт точками (не светим стороннего провайдера в скриншотах/на записи экрана);
   кнопка «Скопировать» рядом копирует код целиком, а по тапу на сам код его можно раскрыть — на случай ручного ввода. */
.code[data-reveal-code]{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
img.qr-img{width:190px;height:190px;background:#f9edf1;border-radius:18px;padding:10px;margin:14px auto;display:block}
.loading{color:var(--muted);text-align:center;padding:60px 0}

/* iOS/Telegram WebView zooms the viewport when a focused input is below 16px. */
.search input,.field{font-size:16px}
.search-icon{width:24px;height:24px;flex:0 0 24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.search-clear{width:32px;height:32px;flex:0 0 32px;display:grid;place-items:center;border:0;border-radius:50%;padding:0;background:#ffffff12;color:#c9adbd;font-size:24px;line-height:1}
.search-clear:active{background:#ffffff20;transform:scale(.94)}
.search-clear[hidden]{display:none}
/* Карточки баланса и бонусов на главной: кликабельна только круглая кнопка (тот же вид, что у крестика очистки поиска),
   не вся карточка — справа по центру, с отступом от края и от текста. «+» — пополнение, «i» — переход в реферальную
   программу (сама функция не изменилась, раньше вела вся карточка бонусов). */
.balance-card{position:relative;padding-right:48px}
.balance-add{position:absolute;top:50%;right:12px;transform:translateY(-50%);width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:50%;padding:0;background:#ffffff12;color:#c9adbd}
.balance-add svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.balance-add.info{font-size:18px;font-weight:500;font-style:italic;line-height:1;font-family:Georgia,"Times New Roman",serif}
.balance-add:active{background:#ffffff20;transform:translateY(-50%) scale(.94)}
.support-icon{display:block;width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.support-link{display:block;text-decoration:none;color:inherit}
.primary.support-link,.secondary.support-link{display:flex;align-items:center;justify-content:center}
.article a,.article .legal-link{display:inline;color:#ff8fba;text-decoration:none;font-weight:700;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.article a:visited,.article .legal-link:visited{color:#ff8fba}
.article a:active,.article .legal-link:active{color:#ffb0cf;opacity:.76}
.promo-page{padding:4px 5px 0}
.promo-page .back{display:block}

/* Stable columns keep every price vertically aligned; the discount owns its own slot. */
.plan-card{display:grid;grid-template-columns:minmax(0,1fr) 90px 58px 21px;gap:7px}
.plan-package,.plan-cost{min-width:0}
.plan-cost{justify-self:start}
.plan-discount{justify-self:end;white-space:nowrap}
.plan-discount:empty{visibility:hidden}

/* Remove the delayed mobile browser tap flash; visual states update directly with application state. */
.app :is(button,a.support-link,[data-plan],[data-toggle],[data-simview],[data-article],.card.clickable){
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

/* Фирменная шапка магазина — как у PALITRA Card */
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}.logo{display:flex;align-items:center;gap:10px}.logo img{width:38px;height:38px}.logo strong{font-size:19px;letter-spacing:-.045em}

/* Клавиатура открыта — панель навигации скрыта, чтобы не прыгала */
html.kbd-open .bottom-nav{display:none}html.kbd-open .app{padding-bottom:25px}

/* Переключатель языка RU/EN на главной — тот же вид, что в PALITRA Card */
.lang-switch{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:42px;padding:0 12px 0 10px;margin:0;border:1px solid #58334a;border-radius:14px;background:#311b2b;color:#f5dbe6;font:800 13px Manrope,sans-serif;letter-spacing:.03em}
.lang-switch svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lang-switch:active{transform:scale(.96)}

/* Код ручной установки скрыт до раскрытия */
.manual{margin-top:12px;text-align:left}.manual summary{cursor:pointer;color:#e8a5c0;font-size:13px;font-weight:700;text-align:center;list-style:none}.manual summary::-webkit-details-marker{display:none}.manual .code{display:block;margin-top:10px}

/* Значок 5G у пакетов */
.chip-5g{margin-left:6px;padding:2px 7px;font-size:10px;letter-spacing:.04em;color:#160b13;background:linear-gradient(120deg,#ffb3d0,#ff7aa9);vertical-align:1px}

/* Значок Top-up */
.chip-topup{margin-left:6px;padding:2px 7px;font-size:10px;letter-spacing:.04em;color:#dbe7ff;background:#2b3f73;vertical-align:1px}

/* Значки справа от объёма и срока в две строки: 5G всегда первая строка, Top-up всегда вторая (пустая строка остаётся на месте).
   Привязка к верху (не по центру): у «безлимитных» тарифов заголовок («10 ГБ/день») может переноситься на 2 строки, и при
   центрировании блок со значками уезжал вниз/вбок — теперь его положение не зависит от того, сколько строк занял текст. */
.plan-package{display:flex;align-items:flex-start;gap:14px}.plan-tags{display:grid;grid-template-rows:22px 22px;gap:4px;justify-items:start;margin-top:1px}
.plan-tags>span{display:flex;align-items:center;min-height:22px}.plan-tags .chip{margin:0;white-space:nowrap}

/* Подбор тарифа: рекомендованные пакеты выделены рамкой */
.plan-card.recommended{border-color:#ff91b7;box-shadow:0 0 0 1px #ff91b74d}
.rec-card .pills{flex-wrap:wrap}

/* Значок-треугольник со знаком восклицания в стикере */
.chip-icon{width:13px;height:13px;margin:-2px 5px 0 0;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Закрываемый баннер: прозрачная кнопка-крестик в правом верхнем углу (без заливки, рамки и размытия) */
.hero-card .hero-close{position:absolute;top:8px;right:8px;z-index:2;width:36px;height:36px;min-width:0;padding:0;margin:0;border:0;border-radius:50%;display:grid;place-items:center;color:#ffffffd9;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.hero-card .hero-close svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.hero-card .hero-close:active{transform:scale(.9);color:#fff}
.hero-card.hero-hide{height:0!important;min-height:0;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;opacity:0;transform:scale(.96);border-width:0;transition:height .18s cubic-bezier(.4,0,.2,1),margin .18s cubic-bezier(.4,0,.2,1),padding .18s cubic-bezier(.4,0,.2,1),opacity .14s ease-out,transform .18s ease-out,border-width .18s}

/* Referral artwork is pure CSS + inline SVG: no image request, no decode delay, and stays bilingual
   (Codex's own banner mockup has the text baked into the SVG in Russian only — we keep his gradient/ring/pen
   glyph, but render the actual copy through i18n so English keeps working). */
.referral-hero{min-height:154px;padding:20px 20px 18px;isolation:isolate;background:linear-gradient(118deg,#59102f 0%,#8e1e4d 52%,#c43c6d 100%)}
.referral-hero:before{z-index:-1;width:140px;height:140px;right:-24px;top:50%;transform:translateY(-50%);border:2px solid #ffdce933;background:radial-gradient(circle,#ffdce91f 0%,#f681aa0d 100%)}
.referral-hero .hero-eyebrow{display:block;position:relative;z-index:1;margin-bottom:9px;color:#ffd0e1;font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
/* Текст переносится явным <br> ровно на 2 строки (см. i18n.js inviteHero) — ширина подобрана под обе строки
   на обоих языках, значок справа не должен налезать на текст на узких экранах */
.referral-hero h2{max-width:205px;margin-bottom:19px;font-size:20px;line-height:1.3;letter-spacing:-.025em}
.referral-hero button{min-height:42px;padding:10px 16px;color:#61213e;background:#ffe8f0;font-size:13px}
.referral-hero .hero-mark{right:22px;bottom:auto;top:50%;transform:translateY(-50%);width:58px;height:auto;color:#fff0f6;opacity:.92}
.referral-hero .hero-mark svg{display:block;width:100%;height:auto}

/* Пометка об условиях безлимита/суточной нормы под карточкой пакета */
/* Условия безлимита — мягкий жёлтый, тот же тон, что у предупреждений в документах (легко заметить среди тёмных карточек) */
.fup-note{margin:-3px 0 9px;padding:11px 13px;border-radius:14px;background:#3d2a14;border:1px solid #6b4d22;font-size:12.5px;line-height:1.5;color:#f6d99a;font-weight:600}
.fup-note-muted{font-weight:500}

/* На Telegram Desktop окно мини-приложения шире телефона: без ограничения ширины плитки с фиксированными
   колонками (цена/значки/радио) растягивают промежутки и выглядят криво. На реальных телефонах (<=760px) окно и так узкое. */
html.in-tg.tg-desktop .phone { max-width: 480px; margin: 0 auto; }
@media (min-width: 761px) { html.in-tg .phone { max-width: 480px; margin: 0 auto; } }

/* Надзаголовок баннера приглашения — отдельно от текста с процентами (заголовок «Реферальная программа») */
.hero-card .hero-eyebrow{display:block;position:relative;color:#ffb3cf;letter-spacing:.12em;text-transform:uppercase;font-size:10.5px;font-weight:800;margin:0 0 6px}

/* На Telegram WebView (особенно iOS) декоративное кольцо баннера, нарисованное полупрозрачной border-рамкой поверх
   border-radius:50%+overflow:hidden, на кадр рендерится непрозрачным белым при каждой вставке элемента в DOM —
   баннер «мигает». Тот же узор через radial-gradient не имеет этого артефакта; плюс подсказка GPU-композитинга. */
.hero-card{transform:translateZ(0);-webkit-transform:translateZ(0)}
.hero-card:before{border:0;background:radial-gradient(circle, transparent 0 65px, #fff2 65px 90px, transparent 90px 100%)}