/* qa-site.css v1 — SmartFix public site / cabinet QA overrides (owner: QA agent).
   Loaded LAST on every public page. Keep rules minimal & scoped; never edit *-sf.js / polish.css for these. */

/* ===== 1. Consent checkbox («Я принимаю соглашение…») ===== */
/* bug: .shop-account-form label{flex-direction:column} squeezed the box into a 12x22 pill on the register form */
html body .sf-consent{display:flex !important;flex-direction:row !important;align-items:center;gap:12px;min-height:44px;margin:8px 0 6px;padding:4px 0;font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.82);cursor:pointer;-webkit-tap-highlight-color:transparent;position:relative}
html body .sf-consent[hidden]{display:none !important}
html body .sf-consent-chk{position:absolute !important;left:-8px;top:50%;width:44px !important;height:44px !important;margin:-22px 0 0 0 !important;opacity:0;cursor:pointer;z-index:2}
html body .sf-consent-box{flex:0 0 24px !important;width:24px !important;min-width:24px !important;height:24px !important;margin:0 !important;border-radius:8px !important;border:1.5px solid rgba(196,181,253,.62) !important;background:rgba(255,255,255,.045) !important;display:grid;place-items:center;align-self:center;transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease,transform .14s ease}
html body .sf-consent-box::after{content:"" !important;width:11px !important;height:6px !important;border-left:2.4px solid #fff !important;border-bottom:2.4px solid #fff !important;margin-top:-2px !important;transform:rotate(-45deg) scale(0) !important;transition:transform .14s ease !important}
html body .sf-consent:hover .sf-consent-box{border-color:rgba(216,204,255,.95) !important;background:rgba(167,139,250,.14) !important}
html body .sf-consent:active .sf-consent-box{transform:scale(.93)}
html body .sf-consent-chk:checked + .sf-consent-box{background:linear-gradient(135deg,#9f7cf6,#7e5bd8) !important;border-color:transparent !important;box-shadow:0 0 0 1px rgba(167,139,250,.25),0 4px 14px rgba(126,91,216,0.35)}
html body .sf-consent-chk:checked + .sf-consent-box::after{transform:rotate(-45deg) scale(1) !important}
html body .sf-consent-chk:focus-visible + .sf-consent-box{box-shadow:0 0 0 3px rgba(167,139,250,.5) !important}
html body .sf-consent-text{flex:1 1 auto;min-width:0}
html body .sf-consent-text a{white-space:normal !important;position:relative}
html body .sf-consent-text a::after{content:"";position:absolute;inset:-13px -3px}
/* hint under the box: calm lavender (no orange), no layout jump when ticked (space reserved, only fades) */
html body .sf-consent .sf-consent-text::after{display:block !important;margin-top:3px !important;font-size:12px !important;font-weight:600 !important;color:rgba(196,181,253,.95) !important;transition:opacity .14s ease;content:"Отметьте согласие, чтобы перейти к оплате" !important}
html[lang="en"] body .sf-consent .sf-consent-text::after{content:"Tick the box to continue to payment" !important}
html body .sf-consent[data-scope="register"] .sf-consent-text::after{content:"Отметьте согласие, чтобы создать аккаунт" !important}
html[lang="en"] body .sf-consent[data-scope="register"] .sf-consent-text::after{content:"Tick the box to create your account" !important}
html body .sf-consent[data-scope="tgauth"] .sf-consent-text::after{content:"Отметьте согласие, чтобы войти через Telegram" !important}
html[lang="en"] body .sf-consent[data-scope="tgauth"] .sf-consent-text::after{content:"Tick the box to sign in with Telegram" !important}
html body .sf-consent:has(.sf-consent-chk:checked) .sf-consent-text::after{opacity:0}

/* ===== 2. No load-time entrance animations (page must appear complete at once) ===== */
html body .acc-auth,html body .acc-guest-card,html body .acc-auth-panel,html body .shop-unified-wrap,html body .shop-hero-lead,html body .shop-trust{animation:none !important}
html body .sf-bg::before,html body .sf-bg::after{animation:none !important}
html.shop-page .shop-footer[data-motion] .shop-footer-head,html.shop-page .shop-footer[data-motion] .shop-footer-card{opacity:1 !important;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background-color .2s ease !important}

/* ===== 3. /driver: heading must be complete at first paint (no typewriter) ===== */
html body .drv-type__out,html body .drv-type__caret{display:none !important}
html body .drv-type__src,html body .drv-type__src[hidden]{display:inline !important}

/* ===== 4. Legal pages: no mid-word hyphenation, calmer wrapping ===== */
html body .lg-sec p,html body .lg-sec li,html body .legal-page .lg-hero .legal-title{hyphens:manual !important;-webkit-hyphens:manual !important;text-wrap:pretty}

/* ===== 5. Touch targets >=44px (phones/tablets only; desktop unchanged) ===== */
@media (pointer:coarse){
  html body .lg-lang-btn{min-width:48px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  html body .lg-toc-link{min-height:44px;align-items:center}
  html body .legal-topnav-link{min-height:44px;display:inline-flex;align-items:center}
  html body .support-oxy-star,html body .support-oxy-more{position:relative}
  html body .support-oxy-star::after,html body .support-oxy-more::after{content:"";position:absolute;inset:-10px}
  html body #support-pagination button{min-width:44px;min-height:44px}
  html body .oxy-footer__links a,html body .oxy-footer__counter,html body .oxy-footer__sub a{display:inline-flex;align-items:center;min-height:44px}
  html body .pn-input,html body .pn-btn,html body .pn-check{min-height:44px}
  html body .pn-check{display:flex;align-items:center}
  html body .ra-btn{min-height:44px}
}
/* iOS Safari zooms the page when a focused input has font-size < 16px */
@media (pointer:coarse){
  html body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),html body select,html body textarea{font-size:max(16px,1em)}
  html body #frp-gate-key,html body .pn-input,html body #ra-user,html body #ra-pass{font-size:16px !important}
}

/* ===== 6. Palette: no orange/amber accents (calm violet) ===== */
html body .shop-dhru-meta{color:rgba(196,181,253,.88) !important}
html body.shop-page .shop-footer-card--rt .shop-footer-card-icon,html.shop-page .shop-footer-card--rt .shop-footer-card-icon{border-color:rgba(167,139,250,.38) !important;background:rgba(161,125,250,0.14) !important;color:#c4b5fd !important}
html body.shop-page .shop-footer-card--rt .shop-footer-card-label,html.shop-page .shop-footer-card--rt .shop-footer-card-label{color:rgba(196,181,253,.78) !important}
html body .acc-showcase-pill.is-warn{border-color:rgba(167,139,250,.38) !important;background:rgba(161,125,250,0.1) !important}
html body .acc-showcase-row-status.is-pay{color:#c4b5fd !important}

/* ===== 7. Cabinet layout (phones) ===== */
@media (max-width:560px){
  html body .acc-showcase-hero{flex-direction:column !important;align-items:flex-start !important;gap:12px !important}
  html body .acc-showcase-hero-text{width:100% !important}
  html body .acc-dash-link{white-space:nowrap}
}
@media (pointer:coarse){
  html body .acc-topbar-balance,html body .acc-showcase-cta,html body .acc-filter-pill,html body .shop-topup-preset,html body .acc-orders-search{min-height:44px}
  html body .acc-dash-link,html body .acc-keys-issued-link{position:relative}
  html body .acc-dash-link::after,html body .acc-keys-issued-link::after{content:"";position:absolute;inset:-12px -8px}
}

/* ===== QA pass 2 (2026-10-28): touch targets on support / oxygen / panel / frp / driver (phones only) ===== */
@media (pointer:coarse){
  html body .support-oxy-star,html body .support-oxy-more{position:relative}
  html body .support-oxy-star::after,html body .support-oxy-more::after{content:"";position:absolute;inset:-9px -6px}
  html body .support-footer-links a,html body .oxy-footer__links a{display:inline-flex;align-items:center;min-height:44px;padding-inline:6px}
  html body .pn-input,html body #pn-app .pn-input{min-height:44px;font-size:16px}
  html body .pn-btn,html body .pn-btn.is-sm,html body .pn-login .pn-btn{min-height:44px}
  html body .pn-check,html body .frp-remember{min-height:44px;display:flex;align-items:center}
  html body .drv-logo{min-height:44px}
  html body .support-footer-counter a,html body .oxy-footer__counter a{position:relative}
  html body .support-footer-counter a::after,html body .oxy-footer__counter a::after{content:"";position:absolute;inset:-7px 0}
}

/* ===== Password recovery link on the login form (2026-10-28) ===== */
html body .acc-auth-opts{justify-content:space-between}
html body .acc-forgot{margin-left:auto;display:inline-flex;align-items:center;min-height:44px;padding:0 2px;font-size:13px;font-weight:600;color:#aa8bfa;text-decoration:none;-webkit-tap-highlight-color:transparent}
html body .acc-forgot:hover,html body .acc-forgot:focus-visible{color:#e0d5fd;text-decoration:underline}

/* ===== Cabinet touch fixes found on the live test account (2026-10-28) ===== */
@media (pointer:coarse){
  html:root body.acc-authed .acc-topbar-balance{min-height:44px}
  html body .acc-orders-search input{align-self:stretch;height:auto;min-height:44px}
  html body .acc-sess-end{min-height:44px}
}
@media (pointer:coarse){
  html body .acc-key-copy{min-height:44px}
  html body a.acc-dash-link,html body a.acc-keys-issued-link{position:relative}
  html body a.acc-dash-link::after,html body a.acc-keys-issued-link::after{content:"";position:absolute;left:-8px;right:-8px;top:50%;height:44px;transform:translateY(-50%)}
}

/* ===== Round 2 (2026-10-28) ===== */
/* /oxygen: reserve the banner height before the PNG arrives (was CLS 0.13 on a cold first visit) */
html body .oxy-showcase__img{aspect-ratio:3/2;height:auto}
/* contrast: small muted texts were 3.0-3.9:1 */
html body .legal-footer-copy{color:#a39aba}
html body .support-oxy-line--muted{color:#9a8fb5}

/* ===== Round 2: touch targets in the "desktop-sized" layout of landscape phones / tablets (>=900px wide, coarse pointer) ===== */
@media (pointer:coarse){
  html body .acc-topbar-pill,html body .acc-topbar-brand,html body .acc-topbar-lang-btn{min-height:44px}
  html body .acc-topbar-lang-btn{min-width:44px}
  html body .shop-dl-btn{min-height:44px}
  html body .shop-qty-btn{min-width:44px;min-height:44px}
  html body .shop-account-tab,html body .acc-auth-switch,html body label.acc-check{min-height:44px !important}
  html body .shop-legal-nav a,html body .legal-foot a{display:inline-flex;align-items:center;min-height:44px}
  html body .acc-pass-toggle{min-width:44px;min-height:44px}
  html body .shop-pay-balance-hint-link,html body .lg-crumbs a{position:relative}
  html body .shop-pay-balance-hint-link::after,html body .lg-crumbs a::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
}
/* reduced motion: /support background mesh kept animating */
@media (prefers-reduced-motion:reduce){html body .support-bg__mesh,html body .support-bg__mesh *{animation:none !important}}
/* long headings must not poke out of the screen with large system text */
html body .support-hero-copy h1,html body .support-hero-copy .support-kicker{overflow-wrap:anywhere}

/* Round 2: big system text on 360px phones must not widen the auth grid; more touch targets on support/legal/oxygen */
@media (max-width:760px){html body .acc-auth{grid-template-columns:minmax(0,1fr)}html body .acc-auth>*{min-width:0}html body .shop-legal-nav a{overflow-wrap:anywhere}}
@media (pointer:coarse){
  html body .support-nav-link,html body .support-btn,html body .support-dd-trigger,html body .legal-topnav-link,html body .legal-topnav-tg,html body .legal-brand,html body .legal-doc-link,html body .oxy-header__shop,html body .oxy-icon-btn,html body .oxy-pwd-copy{min-height:44px}
  html body .oxy-icon-btn{min-width:44px}
  html body .legal-footer-nav a{display:inline-flex;align-items:center;min-height:44px}
}

/* Round 2: /account first visit — the Telegram consent row appeared ~0.15s after paint and pushed the card (+92px, re-centred). Reserve its place (hidden) until JS reveals it; class set by head script only when consent not yet remembered. */
html.qa-tgc body #acc-auth-tg:not([hidden]) #acc-tg-consent[hidden]{display:flex !important}
html.qa-tgc body #acc-auth-tg #acc-tg-consent[hidden]{display:flex !important}

/* ===== Round 3 (2026-10-28, chunk A) ===== */
/* S-20: desktop hero title "Активации Oxygen · MOBILedit · MSAB XRY" broke after the first dot; let it use one line */
@media (min-width:880px){html body .shop-hero-public .shop-page-title{max-width:none;margin-inline:-60px}}
@media (min-width:1100px){html body .shop-hero-public .shop-page-title{margin-inline:-150px}}
/* S-21: icon-only filter button on phones gets its (already existing) aria-label as visible text */
html body .support-search-filter-btn{grid-auto-flow:column;grid-auto-columns:max-content;justify-content:center;align-items:center;gap:8px}
html body .support-search-filter-btn::after{content:attr(aria-label);font-weight:600;font-size:14px}
/* S-21: legal pages on phones: the decorative hero badge took a whole row; the brand subtitle was cut to "Пользовате…" and repeats the page title */
@media (max-width:480px){html body .legal-hero-badge{display:none}}
@media (max-width:420px){html body .legal-brand-text small{display:none}}
/* S-19: /support status bar ("Всего в базе — / Найдено —") sat under the still-empty list and jumped ~700px down when the 50 rows arrived; keep its place but hide it until the list exists */
html body .support-list-panel:has(#support-list:empty)+.support-empty[hidden]~.support-statusbar{visibility:hidden}
/* cabinet: illegible micro-text (LOST MODE badge was 6.5px on phones, labels 9.5–10px) */
html body .acc-imei-badge{font-size:9px;padding:3px 6px}
@media (max-width:640px){html body .acc-imei-badge{font-size:9px;padding:3px 6px}html body .acc-order-cat,html body .acc-order-src,html body .acc-order-content-label,html body .acc-imei-model-k{font-size:11px}}
/* a11y: sidebar "Выйти" had no visible keyboard focus */
html body .acc-sidebar-logout:focus-visible,html body button#acc-logout:focus-visible{outline:2px solid #b99ffb !important;outline-offset:2px !important;border-radius:10px}
/* Round 3: the Telegram consent row was reserved but invisible and popped in ~0.15-0.5s after first paint (JS un-hides it under exactly the same condition as the qa-tgc class) -> show it from the first frame */
/* C: RU/EN pill on /support and /oxygen — same look as .acc-topbar-lang on /service (40px high pill, 32px buttons; 44px targets on touch widths) */
.qa-lang{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(0,0,0,.28);flex:none}
.qa-lang button{display:block;min-width:40px;min-height:32px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:rgba(230,226,240,0.72);font:750 12px/18px "Source Sans 3",system-ui,sans-serif;letter-spacing:.04em;cursor:pointer;transition:none}
.qa-lang button.is-active{background:rgba(131,105,196,0.3);color:#f3effe}
.qa-lang button:focus-visible{outline:2px solid #b99ffb;outline-offset:2px}
.support-header-actions,.oxy-header__actions{align-items:center}
@media (max-width:640px){.qa-lang button{min-width:44px;min-height:44px;padding:5px 7px}}

/* QA t79u: /oxygen version picker — an incomplete last row never leaves a left-aligned orphan.
   The last card spans the free columns of its row (generic for any card count): 4 cols above 900px, 2 cols at <=900px. */
@media (min-width: 901px) {
  html body .oxy-picker > .oxy-picker__tab:last-child:nth-child(4n + 1) { grid-column: 1 / -1 !important; }
  html body .oxy-picker > .oxy-picker__tab:last-child:nth-child(4n + 2) { grid-column: span 3 !important; }
  html body .oxy-picker > .oxy-picker__tab:last-child:nth-child(4n + 3) { grid-column: span 2 !important; }
  html body .oxy-picker > .oxy-picker__tab:last-child:nth-child(4n + 1),
  html body .oxy-picker > .oxy-picker__tab:last-child:nth-child(4n + 2),
  html body .oxy-picker > .oxy-picker__tab:last-child:nth-child(4n + 3) {
    flex-direction: row !important;
    align-items: center !important;
    align-content: center !important;
    justify-content: center !important;
    flex-wrap: wrap;
    gap: 0.15rem 0.8rem !important;
    min-height: 84px !important;
    text-align: center;
  }
  html body .oxy-picker > .oxy-picker__tab:last-child:nth-child(4n + 1):not([aria-selected="true"]),
  html body .oxy-picker > .oxy-picker__tab:last-child:nth-child(4n + 2):not([aria-selected="true"]),
  html body .oxy-picker > .oxy-picker__tab:last-child:nth-child(4n + 3):not([aria-selected="true"]) {
    background: linear-gradient(90deg, rgba(17,10,36,0.88) 0%, rgba(34,20,68,0.92) 50%, rgba(17,10,36,0.88) 100%) !important;
    border-color: rgba(176,127,250,0.22) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 28px rgba(0, 0, 0, 0.22) !important;
  }
  html body .oxy-picker > .oxy-picker__tab:last-child:nth-child(4n + 1) .oxy-picker__ver { font-size: clamp(1.25rem, 2.1vw, 1.5rem) !important; }
}
@media (max-width: 900px) {
  html body .oxy-picker > .oxy-picker__tab:last-child:nth-child(odd) { grid-column: 1 / -1 !important; }
  html body .oxy-picker > .oxy-picker__tab:last-child:nth-child(odd) {
    flex-direction: row !important;
    align-items: center !important;
    align-content: center !important;
    justify-content: center !important;
    flex-wrap: wrap;
    gap: 0.15rem 0.8rem !important;
    min-height: 84px !important;
    text-align: center;
  }
  html body .oxy-picker > .oxy-picker__tab:last-child:nth-child(odd):not([aria-selected="true"]) {
    background: linear-gradient(90deg, rgba(17,10,36,0.88) 0%, rgba(34,20,68,0.92) 50%, rgba(17,10,36,0.88) 100%) !important;
    border-color: rgba(176,127,250,0.22) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 28px rgba(0, 0, 0, 0.22) !important;
  }
}