/* Акценты двух главных действий сайта (10.10.2026, слово владельца «оплату и техподдержку 24/7
   выдели яркими цветами и анимацией»). Подключается <link href="/hl.css?v=N"> на каждой странице
   (кнопка «Поддержка 24/7» — везде, тест test/sos-everywhere.test.js). Окно чата сбоку — /sos.js.
   Цвета закреплены за смыслом: ЗЕЛЁНЫЙ = заплатить, ОРАНЖЕВЫЙ = поддержка 24/7. Больше эти цвета
   нигде не использовать, иначе глаз перестанет находить кнопку без чтения. */

/* 💳 Оплата: блик пробегает по зелёной кнопке и мягко «дышит» свечение */
.btn.pay{position:relative; overflow:hidden; isolation:isolate; box-shadow:0 6px 26px rgba(55,214,122,.45)}
.btn.pay::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  transform:translateX(-130%); animation:payshine 3.6s ease-in-out infinite}
@keyframes payshine{0%,55%{transform:translateX(-130%)} 85%,100%{transform:translateX(130%)}}

/* «💳 Оплата» в шапке — зелёная плашка, а не просто зелёный текст */
a.paypill,.nav a.paypill{display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 14px; border-radius:999px;
  font-weight:700; font-size:14px; color:#06210F !important; text-decoration:none !important;
  background:linear-gradient(180deg,#37D67A,#1FA855); position:relative}
a.paypill::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  border:2px solid rgba(55,214,122,.7); animation:ring 2.8s ease-out infinite}
a.paypill:hover,.nav a.paypill:hover{filter:brightness(1.08); background:linear-gradient(180deg,#37D67A,#1FA855)}
.nav a.sosnav{color:#FFB547; font-weight:700}
.nav a.sosnav:hover{color:#FFD08A}

/* 🛟 Поддержка 24/7 — плавающая кнопка в правом нижнем углу */
.sos{position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:50;
  display:inline-flex; align-items:center; gap:9px; padding:12px 18px 12px 14px; border-radius:999px;
  font:700 15px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#2A1400 !important; text-decoration:none !important;
  background:linear-gradient(180deg,#FFC24D,#FF8A1F); border:1px solid #FF9A2E;
  box-shadow:0 8px 26px rgba(255,138,31,.38)}
.sos::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  border:2px solid rgba(255,154,46,.75); animation:ring 2.4s ease-out infinite}
.sos:hover{filter:brightness(1.06); transform:translateY(-1px)}
.sos:focus-visible{outline:2px solid #fff; outline-offset:3px}
.sos .ic{font-size:19px; line-height:1}
.sos small{display:block; font-size:11.5px; font-weight:600; opacity:.78}
@keyframes ring{0%{transform:scale(1); opacity:.9} 70%,100%{transform:scale(1.18,1.45); opacity:0}}
/* зелёная точка «онлайн» */
.live{display:inline-block; position:relative; width:9px; height:9px; border-radius:50%; background:#1FD65F; flex:none}
.live::after{content:""; position:absolute; inset:0; border-radius:50%; background:#1FD65F; pointer-events:none;
  animation:livering 1.6s ease-out infinite}
@keyframes livering{0%{transform:scale(1); opacity:.7} 70%,100%{transform:scale(2.6); opacity:0}}
/* Кнопка не закрывает конец страницы и прячется, когда открыта клавиатура (Android сжимает окно) */
body:has(.sos){padding-bottom:84px}
.sos .live.m{display:none}
/* На телефоне — одна строка: меньше закрывает текст при прокрутке */
@media (max-width:480px){
  .sos{padding:10px 15px 10px 12px; font-size:14.5px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom))}
  .sos small{display:none}
  .sos .live.m{display:inline-block}
}
@media (max-height:520px){.sos{display:none}}
/* Уступка (sos.js): пока под кнопкой кнопка или поле страницы — кружок 🛟 с точкой «онлайн» */
.sos.dodge{width:52px; height:52px; padding:0; gap:0; justify-content:center}
.sos.dodge > span:not(.ic){display:none}
.sos.dodge > .live.m{display:block; position:absolute; top:5px; right:5px}
.sos.dodge .ic{font-size:24px}
.sos.dodge::before{animation-name:ringc}   /* кольцо кнопки вытянуто под «пилюлю» — у кружка ровное */
@keyframes ringc{0%{transform:scale(1); opacity:.9} 70%,100%{transform:scale(1.32); opacity:0}}

/* Карточка поддержки внутри страницы — тот же оранжевый */
.sos-card{border:1px solid rgba(255,154,46,.55) !important; border-radius:16px; padding:18px 20px;
  background:linear-gradient(180deg,rgba(255,154,46,.14),rgba(255,154,46,.04)) !important}
.sos-card h3{display:flex; align-items:center; gap:9px; margin:0 0 6px; font-size:18px; color:#FFD9A8}
.sos-card p{margin:0 0 12px; color:var(--mut,#98A0AA); font-size:15px}
.btn.sosbtn{position:relative; overflow:hidden; isolation:isolate; color:#2A1400; border-color:#FF9A2E;
  background:linear-gradient(180deg,#FFC24D,#FF8A1F); box-shadow:0 6px 22px rgba(255,138,31,.30)}
.btn.sosbtn:hover{text-decoration:none; transform:translateY(-1px); box-shadow:0 10px 28px rgba(255,138,31,.45)}
.sos-alt{font-size:14px; color:var(--mut,#98A0AA); margin-top:10px}
.sos-alt a{color:#FFC27A}

/* 🛟 Окно чата поддержки (sos.js): тот же чат /support?embed=1, страница остаётся на месте.
   .sosstage — прозрачная сцена размером с видимую часть экрана (sos.js подгоняет её под visualViewport,
   чтобы клавиатура телефона не закрывала поле ввода); клики сквозь неё проходят на страницу.
   Компьютер и планшет — окно справа внизу, телефон — на весь видимый экран. */
.sosstage{position:fixed; left:0; right:0; top:0; height:100%; z-index:60; pointer-events:none}
.sosstage[hidden]{display:none}
.sosbox{position:absolute; right:16px; bottom:16px; width:390px; height:min(640px,calc(100% - 32px));
  pointer-events:auto; display:flex; flex-direction:column; border-radius:18px; overflow:hidden; background:#0E1013;
  border:1px solid rgba(255,154,46,.6); box-shadow:0 18px 60px rgba(0,0,0,.55)}
.sosbox-h{display:flex; align-items:center; gap:9px; padding:8px 8px 8px 14px; flex:none; color:#2A1400;
  font:700 15px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:linear-gradient(180deg,#FFC24D,#FF8A1F)}
.sosbox-h small{font-size:12px; font-weight:600; opacity:.78}
.sosbox-h .sp{flex:1}
.sosbox-h a,.sosbox-h button{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px;
  border:0; border-radius:9px; background:rgba(42,20,0,.12); color:#2A1400 !important; font-family:inherit; font-size:16px; font-weight:700; line-height:1;
  text-decoration:none !important; cursor:pointer}
.sosbox-h a:hover,.sosbox-h button:hover{background:rgba(42,20,0,.22)}
.sosbox iframe{flex:1; width:100%; border:0; background:#0E1013}
.sos-open .sos{display:none}
@media (max-width:699px){
  .sosbox{right:0; bottom:0; width:100%; height:100%; border:0; border-radius:0; box-shadow:none}
  .sosbox-h{padding:10px 10px 10px 16px; font-size:16px}
  .sosbox-h a,.sosbox-h button{width:40px; height:40px; font-size:18px}
  html.sos-open,html.sos-open body{overflow:hidden}
}

@media (prefers-reduced-motion:reduce){
  .btn.pay::after,a.paypill::before,.sos::before,.live::after{animation:none; display:none}
}