/* Раскладка баннера согласия astrina (cc.js) — СВОИМ файлом, а не его <style>.
 *
 * cc.js вставляет раскладку инлайновым <style id="astr-cc-css">, а CSP витрины
 * (`style-src 'self'`) выбрасывает его молча: баннер вставал без позиции и
 * размеров посреди страницы (замер 17.09.2026). Ослаблять CSP до
 * 'unsafe-inline' нельзя. cc.js сам пропускает вставку, если элемент с
 * id="astr-cc-css" уже есть, — поэтому этот файл подключается <link> с тем же
 * id, и правила ниже — копия injectCss() из
 * /home/astrina/web/astrina.io/public_html/cc.js (версия widget-ui 2026-08-17,
 * design-audit 2026-08-22). Меняется там — переносить сюда.
 *
 * Отступ снизу на телефоне поднят над нижней панелью витрины (.mnav).
 */
:root { --astr-wb: 20px; --astr-ws: 20px; --astr-wr: 14px; }
@media (max-width: 760px) { :root { --astr-wb: 92px; --astr-ws: 12px; } }
.astr-cc{position:fixed;z-index:2147483646;box-sizing:border-box;font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;box-shadow:0 10px 40px rgba(0,0,0,.22)}
.astr-cc *{box-sizing:border-box}
.astr-cc-box{width:calc(100vw - var(--astr-ws,20px) * 2);max-width:400px;border-radius:var(--astr-wr,14px);padding:20px 20px 18px;bottom:calc(var(--astr-wb,20px) + env(safe-area-inset-bottom,0px));max-height:calc(100vh - var(--astr-wb,20px) - 40px);overflow:auto}
.astr-cc-bl{left:var(--astr-ws,20px)}.astr-cc-br{right:var(--astr-ws,20px)}
.astr-cc-center{left:50%;top:50%;transform:translate(-50%,-50%);bottom:auto;max-height:calc(100vh - 40px)}
.astr-cc-bar{left:0;right:0;padding:16px 18px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;max-height:100vh;overflow:auto}
.astr-cc-bar-bottom{bottom:var(--astr-wb,0px);padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
.astr-cc-bar-top{top:0}
.astr-cc-btns{display:flex;gap:8px;flex-wrap:wrap}
.astr-cc-btn{cursor:pointer;border-radius:9px;padding:9px 15px;font-size:13.5px;font-weight:600;line-height:1.2}
html.astr-cc-open #astr-tour-launch,html.astr-cc-open .astr-cb-bubble,html.astr-cc-open #astr-as-root{display:none!important}
@media(max-width:560px){
.astr-cc{box-shadow:0 -6px 24px rgba(0,0,0,.16)}
.astr-cc-box,.astr-cc-center{left:var(--astr-ws,8px);right:var(--astr-ws,8px);width:auto;max-width:none;top:auto;transform:none;bottom:calc(var(--astr-wb,8px) + env(safe-area-inset-bottom,0px));padding:12px 14px;max-height:none}
.astr-cc-bar{flex-direction:column;align-items:stretch;gap:9px;padding:11px 13px;padding-bottom:calc(11px + env(safe-area-inset-bottom,0px))}
.astr-cc-t{font-size:13.5px!important;margin-bottom:2px!important}
.astr-cc-b{font-size:12.5px!important;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.astr-cc-btns{display:flex;flex-wrap:nowrap;gap:6px;margin-top:9px!important}
.astr-cc-btn{flex:1 1 0;min-width:0;width:auto;padding:8px 5px;font-size:12px;text-align:center;white-space:normal;line-height:1.2;display:flex;align-items:center;justify-content:center;min-height:38px}
.astr-cc-panel{max-height:min(200px,38vh)!important}
}
@media(max-width:360px){.astr-cc-btn{font-size:11px;padding:8px 3px}}

/* ---- НАША правка поверх копии (17.09.2026) ------------------------------
   В правилах astrina текст баннера на узком экране зажат двумя строками
   (`-webkit-line-clamp: 2`), а ссылка «подробнее» стоит ВНУТРИ этого текста:
   при 320 px она оказывалась ниже обрезки, и у баннера не оставалось выхода
   к политике. Здесь строк четыре — ссылка видна, высота баннера почти не растёт.
   Правило нарочно отдельным блоком: копия выше остаётся дословной,
   переносить её из cc.js по-прежнему можно целиком. */
@media (max-width: 560px) {
  .astr-cc-b { -webkit-line-clamp: 6; }
  /* Подпись кнопки переносится внутри неё: «Отклонить необязательные» при
     320 px вылезала на соседние кнопки поверх них. */
  .astr-cc-btn { overflow-wrap: break-word; hyphens: auto; }
}
@media (max-width: 400px) { .astr-cc-btns { flex-wrap: wrap; } .astr-cc-btn { flex: 1 1 100%; } }

/* ==========================================================================
   Баннер согласия — в оформлении витрины (17.09.2026).

   cc.js красит баннер СВЕТЛЫМ, когда у посетителя светлая тема системы
   (`CFG.theme === 'auto'` → `prefers-color-scheme`), и берёт цвет решения из
   настроек astrina (#5b5bd6). Витрина же тёмная ВСЕГДА — светлой темы у неё
   нет и не подключено, — поэтому у половины посетителей белая карточка
   вставала посреди чёрной страницы чужим цветом.

   Цвета приезжают инлайном (`style.cssText`, CSSOM — CSP их не трогает),
   поэтому перекрываются только `!important`. Это тот редкий случай, когда
   он уместен: спор не с нашим правилом, а с чужим инлайном.

   Значения — те же токены, что у витрины (см. css/00-tokens.css).
   ========================================================================== */
.astr-cc { font-family: Onest, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important; }
.astr-cc-box, .astr-cc-bar {
  color: #F5F2FF !important;
  background: rgba(20, 18, 51, .92) !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 20px !important;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .85) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}
.astr-cc-t { font-size: 17px !important; letter-spacing: -.01em; }
.astr-cc-b { color: #B9B3DD !important; }
/* Ссылка на политику лежит не только в `.astr-cc-b`: у нынешней сборки cc.js
   она в `.astr-cc-pl`. Селектор по классу-родителю промахнулся молча, и
   ссылка осталась цветом astrina (#6D4DFF на #141233 — 3,6:1, ниже AA).
   Берём ЛЮБУЮ ссылку внутри баннера: их там одна. */
.astr-cc a { color: #A57BFF !important; }
.astr-cc a:hover { color: #C6ABFF !important; text-decoration: underline; }
.astr-cc-btn {
  border-radius: 12px !important; font-weight: 700 !important;
  transition: transform .2s, filter .2s;
}
.astr-cc-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
/* Главное решение на экране одно — «принять»: белая (яркая) кнопка ровно одна,
   как и на всей витрине. Остальные — обводкой. */
.astr-cc-btns .astr-cc-btn:first-child {
  background: #1EE3A3 !important; border-color: #1EE3A3 !important; color: #08071C !important;
}
.astr-cc-btns .astr-cc-btn:not(:first-child) {
  background: rgba(255, 255, 255, .05) !important;
  border-color: rgba(255, 255, 255, .14) !important; color: #F5F2FF !important;
}
.astr-cc-panel { border-top-color: rgba(255, 255, 255, .1) !important; }
.astr-cc-panel div { color: inherit; }
.astr-cc-panel input[type='checkbox'] { accent-color: #1EE3A3; width: 16px; height: 16px; }
.astr-cc-panel > button {
  background: #1EE3A3 !important; border-color: #1EE3A3 !important; color: #08071C !important;
  border-radius: 12px !important;
}

/* На широком экране баннер уходит ВПРАВО. Слева внизу у главной стоят кнопки
   «App Store» и «Google Play» — то есть баннер закрывал собой ровно то
   действие, ради которого человек пришёл (замер 1440 px: перекрытие
   400×250 px по кнопкам). Справа под ним оказывается рамка телефона, которая
   и выше, и повторяется ниже по странице. Настройка приезжает с сервера
   astrina — position: "bl", — поэтому перекрывается здесь. */
@media (min-width: 1000px) {
  .astr-cc-box.astr-cc-bl { left: auto; right: var(--astr-ws, 20px); }
}