/* Окно согласия на cookie. Самодостаточно: свои цвета (те же, что в системе сайта), чтобы одинаково выглядеть на всех страницах.
   Двигаем только opacity и transform. Окно не накрывает страницу подложкой: читать и листать можно, не выбирая;
   под окном остаётся место в конце страницы (--cc-inset), чтобы последние строки не пропадали. Курсор у кнопок не задаём:
   его даёт сайт (фирменный курсор), поэтому здесь нет cursor:pointer, кроме самого переключателя. */
html{padding-bottom:var(--cc-inset,0px); scroll-padding-bottom:var(--cc-inset,0px)}

.cc{
  --cc-surface:#141a2b; --cc-surface-hi:#1d2437; --cc-ink:#f7f9ff; --cc-muted:#b6c0d8; --cc-faint:#8d98b4;
  --cc-line:rgba(255,255,255,.14); --cc-line-strong:rgba(255,255,255,.34); --cc-edge:rgba(255,255,255,.45);
  --cc-signal:#c7ff58; --cc-signal-ink:#0a1004;
  position:fixed; z-index:1000;
  left:max(16px,env(safe-area-inset-left)); bottom:max(16px,env(safe-area-inset-bottom));
  width:min(27rem,calc(100vw - 32px));
  font:400 .875rem/1.55 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--cc-ink); text-align:left;
  opacity:0; transform:translateY(14px); visibility:hidden; pointer-events:none;
  transition:opacity .26s cubic-bezier(.16,1,.3,1),transform .26s cubic-bezier(.16,1,.3,1),visibility 0s linear .26s;
}
.cc[data-state="open"]{opacity:1; transform:none; visibility:visible; pointer-events:auto; transition-delay:0s}
.cc *,.cc *::before,.cc *::after{box-sizing:border-box}
.cc [hidden]{display:none !important}

.cc__card{
  position:relative; padding:20px 20px 0; border:1px solid var(--cc-line); border-radius:16px;
  background-color:#141a2b; background-image:linear-gradient(180deg,#182036 0%,#121828 100%);
  box-shadow:0 28px 60px rgba(3,6,14,.55),0 8px 18px rgba(3,6,14,.34);
  max-height:82vh; max-height:min(82dvh,40rem); overflow:auto; overscroll-behavior:contain;
}
.cc__title{margin:0 36px 8px 0; font:700 1rem/1.25 Inter,ui-sans-serif,system-ui,sans-serif; letter-spacing:-.01em; color:var(--cc-ink)}
.cc__title:focus{outline:none}
.cc__title:focus-visible{outline:3px solid var(--cc-signal); outline-offset:4px; border-radius:6px}
.cc__text{margin:0 0 16px; color:var(--cc-muted)}
.cc__text a{color:var(--cc-ink); text-decoration:underline; text-decoration-color:rgba(199,255,88,.7); text-underline-offset:3px}
.cc__text a:hover{color:var(--cc-signal)}

.cc__close{
  position:absolute; top:8px; right:8px; width:44px; height:44px; padding:0; border:0; border-radius:12px;
  background:transparent; color:var(--cc-muted); font:400 1.6rem/1 Inter,sans-serif;
  display:inline-flex; align-items:center; justify-content:center;
}
.cc__close:hover{color:var(--cc-ink); background:rgba(255,255,255,.07)}

.cc__more{margin:0 0 16px; border-top:1px solid var(--cc-line)}
.cc__row{display:flex; align-items:flex-start; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--cc-line)}
.cc__row > :last-child{margin-left:16px}
.cc__rowtext{min-width:0}
.cc__rowtitle{display:block; margin:0 0 2px; font-weight:700; color:var(--cc-ink)}
.cc__rowdesc{margin:0; font-size:.8125rem; line-height:1.5; color:var(--cc-muted)}
.cc__always{flex:none; padding:4px 10px; border:1px solid var(--cc-line-strong); border-radius:999px; font-size:.75rem; font-weight:600; color:var(--cc-muted); white-space:nowrap}

/* Переключатель: настоящий checkbox поверх нарисованной дорожки, поэтому работают клавиатура и экранные дикторы */
.cc__sw{position:relative; flex:none; width:48px; height:28px; margin-top:2px}
.cc__sw input{position:absolute; top:0; right:0; bottom:0; left:0; z-index:1; width:100%; height:100%; margin:0; opacity:0; cursor:pointer}
.cc__sw input:disabled{cursor:not-allowed}
.cc__track{position:absolute; top:0; right:0; bottom:0; left:0; border-radius:999px; background:var(--cc-surface-hi); border:1px solid var(--cc-edge); transition:background .14s,border-color .14s}
.cc__knob{position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:var(--cc-muted); transition:transform .2s cubic-bezier(.16,1,.3,1),background .14s}
.cc__sw input:checked + .cc__track{background:var(--cc-signal); border-color:var(--cc-signal)}
.cc__sw input:checked + .cc__track .cc__knob{transform:translateX(20px); background:var(--cc-signal-ink)}
.cc__sw input:disabled + .cc__track{opacity:.45}
/* Кольцо фокуса: запасное правило для Safari до 15.4, где нет :focus-visible, и его отмена для мыши там, где он есть */
.cc__sw input:focus + .cc__track{outline:3px solid var(--cc-signal); outline-offset:3px}
.cc__sw input:focus:not(:focus-visible) + .cc__track{outline:none}
.cc__sw input:focus-visible + .cc__track{outline:3px solid var(--cc-signal); outline-offset:3px}

.cc__actions{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.cc[data-expanded="true"] .cc__btn--primary{grid-column:1 / -1}
.cc__btn{
  min-height:44px; padding:10px 14px; border:1px solid transparent; border-radius:12px;
  font:700 .875rem/1.2 Inter,ui-sans-serif,system-ui,sans-serif; text-align:center;
  transition:transform .14s cubic-bezier(.16,1,.3,1),background .14s,border-color .14s,color .14s;
}
/* «Принять всё» и «Только необходимые» выглядят одинаково; яркая кнопка только у «Сохранить выбор» (она записывает ваши переключатели) */
.cc__btn--quiet{background:rgba(255,255,255,.08); border-color:var(--cc-line-strong); color:var(--cc-ink)}
.cc__btn--quiet:hover{border-color:var(--cc-signal); color:var(--cc-signal)}
.cc__btn--primary{background:var(--cc-signal); color:var(--cc-signal-ink)}
.cc__btn--primary:hover{transform:translateY(-1px)}
.cc__btn:active{transform:translateY(1px)}
.cc__btn:focus-visible,.cc__link:focus-visible,.cc__close:focus-visible,.cc__text a:focus-visible{outline:3px solid var(--cc-signal); outline-offset:3px; border-radius:8px}

/* Панель кнопок прилипает к низу окна, пока прокручиваются настройки */
.cc__bar{position:-webkit-sticky; position:sticky; bottom:0; margin:0 -20px; padding:12px 20px 10px; background:linear-gradient(180deg,rgba(18,24,40,0) 0,#121828 14px)}
.cc__foot{display:flex; justify-content:center; padding:2px 0 0}
.cc__link{min-height:44px; padding:8px 12px; border:0; background:none; color:var(--cc-muted); font:600 .8125rem/1.2 Inter,ui-sans-serif,system-ui,sans-serif; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:4px}
.cc__link:hover{color:var(--cc-ink)}

.cc-live{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; -webkit-clip-path:inset(50%); clip-path:inset(50%); white-space:nowrap}

/* Кнопка «Настройки cookie» в подвале: выглядит как соседние ссылки; область нажатия шире видимого текста */
.cc-open{margin:-.5rem -.25rem; padding:.5rem .25rem; border:0; background:none; color:inherit; font:inherit; letter-spacing:inherit; text-align:inherit}
.cc-open:hover{color:#c7ff58}
.cc-open:focus-visible{outline:3px solid #c7ff58; outline-offset:3px; border-radius:6px}
/* На страницах с подвалом из ссылок в ряд (политика, оферта, реквизиты) ссылки светло-зелёные с подчёркиванием: кнопка такая же */
footer > .cc-open{color:#c7ff58; text-decoration:underline; text-underline-offset:2px}

@media (max-width:560px){
  .cc{left:max(8px,env(safe-area-inset-left)); right:max(8px,env(safe-area-inset-right)); bottom:max(8px,env(safe-area-inset-bottom)); width:auto}
  .cc__card{padding:18px 16px 0; max-height:78vh; max-height:78dvh}
  .cc__bar{margin:0 -16px; padding:12px 16px 10px}
}
/* Очень низкие окна (телефон боком, увеличение 400%): панель кнопок не прилипает, иначе она съедает окно целиком */
@media (max-height:340px){
  .cc__bar{position:static}
  .cc__card{max-height:88vh}
}
@media (prefers-reduced-motion:reduce){
  .cc{transform:none; transition:opacity .01s linear,visibility 0s}
  .cc__knob,.cc__track,.cc__btn{transition:none}
  .cc__btn--primary:hover,.cc__btn:active{transform:none}
}
@media (forced-colors:active){
  .cc__card,.cc__bar{background:Canvas; color:CanvasText}
  .cc__card{border:2px solid CanvasText}
  .cc__track{border:2px solid ButtonText}
  .cc__knob{background:ButtonText}
  .cc__sw input:checked + .cc__track{background:Highlight}
  .cc__sw input:checked + .cc__track .cc__knob{background:HighlightText}
}
