/* ============================================================
   МикМ — уведомление о файлах cookie
   Сайт использует ТОЛЬКО технически необходимые cookie, поэтому это
   информирование с подтверждением, а не менеджер согласий с тумблерами:
   отключаемых категорий нет, и рисовать их было бы обманом.
   Если появится аналитика — её скрипты обязаны спрашивать
   window.mikmCookies.allowed('analytics') перед запуском.
   ============================================================ */

.ck-notice{
  position:fixed; z-index:300;
  left:16px; right:16px; bottom:16px;
  left:max(16px, env(safe-area-inset-left)); right:max(16px, env(safe-area-inset-right));
  bottom:max(16px, env(safe-area-inset-bottom));

  /* Широкая плашка, а не узкая карточка: текст читается в две-три строки,
     кнопка стоит рядом. Ключевое — align-items:center: кнопка выравнивается
     по середине плашки, а не липнет к верхнему краю, как было раньше. */
  max-width:960px; margin-inline:auto;
  display:flex; flex-direction:row; align-items:center; gap:clamp(20px,3vw,40px);

  padding:22px clamp(24px,3vw,32px);
  border-radius:var(--radius-l, 28px);
  background:rgba(10,14,54,.94);
  backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 70px -28px rgba(5,8,30,.8);
  color:#fff;
  font-family:'Golos Text', system-ui, -apple-system, sans-serif;
  font-size:14px; line-height:1.55;
  transform:translateY(20px); opacity:0;
  animation:ck-in .5s cubic-bezier(.22,.61,.36,1) .4s forwards;
}
@keyframes ck-in{ to{ transform:none; opacity:1 } }
.ck-notice[hidden]{ display:none !important; }

/* align-items:flex-start ужимает по контенту и кнопку, и текст, поэтому
   текстовому блоку ширина возвращается явно — иначе абзац съезжает в узкую
   колонку и карточка становится вдвое выше. */
.ck-notice__body{ flex:1 1 auto; min-width:0; }
.ck-notice__title{
  font-family:'Geologica', 'Unbounded', system-ui, sans-serif;
  font-weight:700; font-size:15px; margin:0 0 6px; color:#fff;
}
.ck-notice__text{
  margin:0; color:rgba(255,255,255,.78);
  /* Ровный правый край: браузер не оставляет одинокое слово в последней строке. */
  text-wrap:pretty;
}
.ck-notice__text a{ color:#1FE08A; text-decoration:underline; text-underline-offset:2px; }
.ck-notice__text a:hover{ color:#fff; }

.ck-notice__actions{ display:flex; gap:10px; align-items:center; flex:0 0 auto; }
.ck-notice__btn{
  font-family:'Geologica', 'Unbounded', system-ui, sans-serif;
  font-weight:700; font-size:14px; letter-spacing:.01em;
  min-height:44px; padding:12px 28px; border:0; border-radius:100px;
  background:linear-gradient(135deg,#1FE08A,#15C172); color:#04240f;
  cursor:pointer; white-space:nowrap;
  transition:transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .2s;
  box-shadow:0 12px 28px -14px rgba(21,193,114,.9);
}
.ck-notice__btn:hover{ transform:translateY(-2px); box-shadow:0 18px 36px -14px rgba(21,193,114,.95); }
.ck-notice__btn:active{ transform:none; }
.ck-notice__btn:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* На узком экране в строку не помещается — складываем в колонку,
   кнопка растягивается во всю ширину. Этот вид пользователю нравится. */
@media (max-width:700px){
  .ck-notice{ flex-direction:column; align-items:stretch; gap:14px;
    padding:18px; border-radius:20px; }
  .ck-notice__actions{ width:100%; }
  .ck-notice__btn{ flex:1; padding:12px 24px; }
}
@media (prefers-reduced-motion:reduce){
  .ck-notice{ animation:none; transform:none; opacity:1; }
  .ck-notice__btn:hover{ transform:none; }
}