/* Cookie-баннер страниц входа без своих стилей баннера: страница Ритуала пара, клуб (IT-361).
   Вид и размеры - как на главной (site/index.html, раздел «COOKIE-БАННЕР»): там те же правила,
   но через html body ... !important из-за стилей поля. Показывает и прячет баннер js/metka.js
   по атрибуту data-metka-ck; ответ гостя лежит в ph_metrika_ok.
   Слева снизу. Справа внизу - кнопка чата сайта (css/chat-saita.css): на телефоне баннер
   кончается в 96 px от правого края, круг чата 56 px встаёт в этот зазор. Открытый чат
   на телефоне баннер прячет (правило в chat-saita.css), лист выбора и окна страницы - тоже,
   это правило лежит в самой странице.
   Что баннер не должен закрывать на первом экране и где плавающая кнопка страницы встаёт
   над ним - тоже в странице: геометрия у каждой своя. Здесь только сам баннер. */

.ck{position:fixed;z-index:95;left:20px;right:auto;bottom:calc(20px + env(safe-area-inset-bottom,0px));max-width:480px;
  display:flex;align-items:center;gap:16px;margin:0;padding:10px 10px 10px 18px;border-radius:16px;
  background:rgba(18,20,23,.94);border:1px solid rgba(231,168,92,.26);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.9),0 0 50px -30px rgba(219,138,52,.5);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-family:'Raleway',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  opacity:0;transform:translateY(12px);
  transition:opacity 260ms cubic-bezier(.22,.61,.36,1),transform 260ms cubic-bezier(.22,.61,.36,1)}
.ck[hidden]{display:none!important}
.ck.is-in{opacity:1;transform:none}
.ck .ck__t{margin:0;font-size:14px;line-height:1.4;color:#F4F1EA;text-shadow:none}
.ck .ck__btns{flex:none;display:flex;align-items:center;gap:8px}
.ck button{flex:none;min-height:44px;margin:0;border-radius:999px;font-family:inherit;line-height:1;
  cursor:pointer;box-shadow:none;-webkit-appearance:none;appearance:none}
.ck .ck__ok{padding:0 20px;border:0;background:#DB8A34;color:#1a1206;font-size:15px;font-weight:500;
  transition:background 200ms cubic-bezier(.22,.61,.36,1),transform 160ms cubic-bezier(.22,.61,.36,1)}
.ck .ck__ok:hover{background:#E7A85C}
.ck .ck__ok:active{background:#C87C2C;transform:scale(.96)}
/* отказ - тихая кнопка рядом с согласием: отказаться можно, но не предлагаем первым */
.ck .ck__no{padding:0 14px;border:1px solid rgba(244,241,234,.3);background:transparent;color:#F4F1EA;
  font-size:14px;font-weight:400;
  transition:border-color 200ms cubic-bezier(.22,.61,.36,1),color 200ms cubic-bezier(.22,.61,.36,1),transform 160ms cubic-bezier(.22,.61,.36,1)}
.ck .ck__no:hover{border-color:#E7A85C;color:#E7A85C}
.ck .ck__no:active{transform:scale(.96)}
.ck button:focus-visible{outline:2px solid #E7A85C;outline-offset:3px}

/* от 601 px баннер - одна полоса: текст в две строки слева, кнопки справа, высота по кнопкам
   (66 px). 480 px - столько нужно строке «Визиты, клики и переходы с рекламы - в Яндекс
   Метрику?», чтобы встать в две строки (при 440 она уходила в три, 81 px).
   601-719 px: полоса шириной 480 px заходит на кнопку чата справа (она там 180 px и стоит
   в 24 px от края). Здесь баннер встаёт колонкой - текст над кнопками - и кончается в 16 px
   от чата: 20 px слева + ширина + 16 + 180 + 24 = ширина экрана. С 720 px полоса помещается */
@media (min-width:601px) and (max-width:719px){
  .ck{max-width:calc(100vw - 240px);flex-direction:column;align-items:stretch;gap:8px}
  .ck .ck__btns{justify-content:flex-end}
}

/* телефон: текст и кнопки - две строки, справа место под круг чата */
@media (max-width:600px){
  .ck{left:12px;right:96px;bottom:calc(12px + env(safe-area-inset-bottom,0px));max-width:none;gap:8px;
    padding:10px 12px;border-radius:14px;flex-direction:column;align-items:stretch}
  .ck .ck__t{font-size:13px;line-height:1.35}
  .ck .ck__btns{justify-content:flex-end}
  .ck .ck__ok{padding:0 16px}
}

/* до 339 px ряд кнопок (202 px) шире места внутри баннера (186 px на 320) и вылезал за левый
   край карточки: отступы у кнопок и карточки меньше, а правый край на 4 px ближе к чату
   (зазор 20 px) - ряд встаёт в 198 px, и строка остаётся в две строки, как на 340 */
@media (max-width:339px){
  .ck{right:92px;padding:10px 8px}
  .ck .ck__ok{padding:0 12px}
  .ck .ck__no{padding:0 10px}
}

/* пока баннер на экране, фокус с клавиатуры не уходит под него: браузер докручивает
   ссылку над баннером (на Ритуале под ним прятались ссылки подвала, WCAG 2.4.11) */
html.ck-ask{scroll-padding-bottom:calc(var(--ck-h,0px) + 32px)}

@media (prefers-reduced-motion:reduce){
  .ck{transition:none;transform:none}
  .ck button{transition:none}
}