/* page chrome for phones and tablets: burger menu, thin scrolled bar, the bottom
   action strip, and the reveal-on-scroll effect. */

/* ================= ШАПКА: БУРГЕР И ЕГО МЕНЮ =================
   Всё, что относится к меню, собрано в одном месте и разложено по блокам:
   1) сам бургер;
   2) состояние «меню открыто» — стеклянная шапка, крестик, логотип;
   3) окно меню на планшете и компьютере;
   4) полноэкранное меню на телефоне;
   5) содержимое меню — мессенджеры и почты.
   Правила ниже больше не разбросаны по файлу: правки делаются здесь. */

/* --- 1. бургер ------------------------------------------------------- */
.nav-burger{position:relative;z-index:120;display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:44px;height:13px;padding:0;margin:0 0 0 12px;background:none;border:0;cursor:pointer;flex:none;align-self:center}
.nav-burger span{display:block;width:31px;height:1.5px;border-radius:2px;background:#fff;transition:background-color .2s ease}
.site-header.is-scrolled .nav-burger span{background:var(--ink)}
/* ссылки на разделы живут в меню бургера, а не в строке шапки */
.nav-links{display:none}
.mobile-bar{display:none}

/* флаги стран: те же, что в нижней полоске на планшете и телефоне.
   Серая обводка в один пиксель: без неё светлые флаги (Таиланд) сливаются
   с белым фоном, а тёмные — с синим. Обводка нарисована тенью, поэтому
   размер кружка не меняется. */
.flag{display:block;width:22px;height:22px;border-radius:50%;flex:none;background-size:cover;background-position:center;background-repeat:no-repeat;box-shadow:0 0 0 1px rgba(110,118,140,.9)}
.flag-th{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20' preserveAspectRatio='xMidYMid slice'%3E%3Crect width='30' height='20' fill='%23f4f5f8'/%3E%3Crect width='30' height='3.34' fill='%23a51931'/%3E%3Crect width='30' y='16.66' height='3.34' fill='%23a51931'/%3E%3Crect width='30' y='6.66' height='6.68' fill='%232d2a4a'/%3E%3C/svg%3E")}
.flag-ru{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20' preserveAspectRatio='xMidYMid slice'%3E%3Crect width='30' height='20' fill='%23fff'/%3E%3Crect width='30' y='6.66' height='6.68' fill='%230039a6'/%3E%3Crect width='30' y='13.34' height='6.66' fill='%23d52b1e'/%3E%3C/svg%3E")}

/* Затемнение страницы под поп-апом бургера: 10% чёрного плюс размытие фона.
   Начинается НИЖЕ шапки, поэтому сама шапка не темнеет и не теряет яркость.
   Лежит ниже шапки по слоям (99 против 100), меню и шапка остаются как были. */
/* Матовое стекло: только мягкая синеватая плёнка и размытие. Никакого зерна
   и крупных бликов — они и давали «белый шум». */
.nav-scrim{position:fixed;top:var(--header-h);left:0;right:0;bottom:0;z-index:99;
  /* эффект стекла ослаблен дважды по 30%: плёнка 7% вместо 10, размытие 7 вместо 10 */
  background:rgba(12,20,70,.07);
  -webkit-backdrop-filter:blur(7px) saturate(108%);backdrop-filter:blur(7px) saturate(108%);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease,visibility .2s ease}
.site-header.nav-open ~ .nav-scrim{opacity:1;visibility:visible;pointer-events:auto}
/* на телефоне меню занимает весь экран — затемнение не нужно */
@media (max-width:700px){ .nav-scrim{display:none} }

/* --- 2. меню открыто: шапку НЕ красим в белый ------------------------- */
/* она остаётся стеклянной, снизу появляется разделитель, бургер
   превращается в крестик */
.site-header.nav-open{border-bottom-color:rgba(255,255,255,.30)}
.site-header.nav-open:not(.is-scrolled){background:rgba(255,255,255,.14)}
.site-header.nav-open:not(.is-scrolled) .nav-burger span{background:#fff}
.site-header.nav-open:not(.is-scrolled) .logo{color:#fff}
.site-header.nav-open .nav-burger span:nth-child(1){transform:translateY(5.8px) rotate(45deg)}
.site-header.nav-open .nav-burger span:nth-child(2){opacity:0}
.site-header.nav-open .nav-burger span:nth-child(3){transform:translateY(-5.8px) rotate(-45deg)}
/* логотип и крестик подняты над меню: иначе полноэкранное меню их накрывает */
.site-header.nav-open .logo,
.site-header.nav-open .nav-burger{position:relative;z-index:120}

/* --- 5. содержимое меню: заголовки, мессенджеры, почты ----------------- */
.nav-mess{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding:10px 4px 4px;border-top:1px solid var(--line)}
.nav-mess-title{margin:0;font-size:var(--fs-note);font-weight:600;color:var(--ink-3)}
.nav-mess-row{display:flex;align-items:center;gap:8px}
.nav-mess .mess-btn{width:56px;height:56px;border-radius:12px;border:1px solid var(--line);
  transition:background-color .15s ease-out,border-color .15s ease-out}
.nav-mess .mess-btn+.mess-btn{border-left:1px solid var(--line)}
.nav-mess .mess-btn img{filter:brightness(0);transition:filter .15s ease-out}
.nav-mess .mess-word{color:var(--ink);transition:color .15s ease-out}
/* Наведение в меню — как у мессенджеров в «Частых вопросах» на светлом фоне:
   ячейка наливается тёмно-синим, значки и слово становятся белыми. */
.nav-mess .mess-btn:hover{background:var(--brand-2);border-color:var(--brand-2)}
.nav-mess .mess-btn:hover img{filter:brightness(0) invert(1)}
.nav-mess .mess-btn:hover .mess-word{color:#fff}

.nav-mail-block{display:none;flex-direction:column;gap:8px;margin-top:8px;padding:10px 4px 4px;border-top:1px solid var(--line)}
.nav-mail-row{display:flex;flex-direction:column;gap:6px}
.site-header .nav-links .nav-mail-btn{display:flex;align-items:center;justify-content:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  color:var(--ink);font-size:var(--fs-body-s);text-decoration:none;white-space:nowrap}
/* наведение никогда не делает текст белым */
.site-header .nav-links .nav-mail-btn:hover{background:var(--tint-hover);color:var(--ink);text-decoration:none}
/* три кнопки мессенджеров заполняют ширину окна целиком — и на компьютере,
   и на планшете: пустого места справа не остаётся */
.nav-mess-row{width:100%}
.nav-mess-row .mess-btn{flex:1 1 0;width:auto;min-width:0}

@media (max-width:900px){
  .nav-mail-block{display:flex}
}

/* --- 3. планшет и компьютер: окно под бургером ------------------------ */
@media (min-width:701px){
  .site-header.nav-open:not(.is-scrolled){
    -webkit-backdrop-filter:blur(14px) saturate(125%);backdrop-filter:blur(14px) saturate(125%)}
  .site-header.nav-open .nav-links{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;top:calc(100% + 8px);left:auto;width:248px;
    right:calc(max(0px, (100% - var(--maxw)) / 2) + var(--gutter));
    background:#fff;border-radius:16px;box-shadow:var(--shadow-pop);
    padding:8px;border:1px solid var(--line);z-index:5}
  .site-header.nav-open .nav-links > a{color:var(--ink);font-size:var(--fs-body);font-weight:500;padding:12px;border-radius:8px}
  .site-header.nav-open .nav-links > a + a{border-top:1px solid var(--line);border-radius:0}
  .site-header.nav-open .nav-links > a:hover{background:var(--tint-hover);color:var(--brand);text-decoration:none}
}

/* На компьютере окно бургера выравнивается по точке, которую считает скрипт
   и кладёт в переменную --menu-center; окно сдвигается на половину своей
   ширины влево, поэтому его центр встаёт ровно в эту точку.
   Точка зависит от состояния шапки:
     • прокрученная белая шапка — ЦЕНТР кнопки «Получить расчёт»;
     • шапка первого экрана — ПРАВЫЙ КРАЙ кнопки-крестика: правый край окна
       совпадает с правым краем крестика. Кнопки расчёта там нет, поэтому
       привязаться к ней нельзя. В этом состоянии окно ещё и опущено
       на 10 точек: между прозрачной шапкой и окном больше воздуха.
   Работает при любом масштабе страницы, потому что считает по фактическим
   размерам. До 900 точек кнопка в шапке скрыта, там остаётся прежнее
   выравнивание по правому краю. */
@media (min-width:901px){
  .site-header.nav-open .nav-links{
    left:var(--menu-center,50%);
    right:auto;
    transform:translateX(-50%);
  }
  .site-header.nav-open:not(.is-scrolled) .nav-links{
    top:calc(100% + 18px);
  }
}

/* --- 4. телефон: меню на весь экран ---------------------------------- */
@media (max-width:700px){
  .site-header.nav-open{border-bottom-color:var(--line)}
  .site-header.nav-open:not(.is-scrolled) .nav-burger span{background:var(--ink)}
  .site-header.nav-open:not(.is-scrolled) .logo{color:var(--ink)}
  .site-header.nav-open .nav-links{display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:fixed;inset:0;top:0;background:#fff;
    padding:calc(var(--header-h) + 16px) 24px 28px;z-index:90;overflow:auto}
  /* каждая категория меню заканчивается разделителем на одном и том же
     расстоянии от текста — и ссылки, и блок почты */
  .site-header.nav-open .nav-links > a{color:var(--ink);font-size:var(--fs-body-l);padding:16px 0;border-bottom:1px solid var(--line)}
  /* мессенджеры в мобильном меню не показываем */
  .nav-mess{display:none}
  /* блок почты продолжает тот же ритм: без своего верхнего отступа и линии */
  .nav-mail-block{margin-top:0;padding:0;border-top:0}
  .nav-mail-block .nav-mess-title{padding:16px 0 2px}
  /* почты — строками-категориями: без рамок, без разделителей между собой */
  .site-header .nav-links .nav-mail-btn{border:0;border-radius:0;padding:2px 0;justify-content:flex-start;background:none}
  .site-header .nav-links .nav-mail-btn:hover{background:none;color:var(--ink)}
  .nav-mail-row{gap:1px}
}

  @media (max-width:900px){
    /* the tall button is gone here, so the bar can be thin while scrolling */
    .site-header .header-cta,.site-header.is-scrolled .header-cta{display:none}
    .site-header.is-scrolled .nav{min-height:56px}
    body{padding-bottom:92px}
    /* the buttons live in the bottom strip on phones and tablets only */
    .hero-cta{display:none}
    /* Плашка снизу — сплошное синее поле первого экрана, без стекла.
       Раньше она была полупрозрачной и размывала то, что проезжает под ней:
       в начале страницы это выглядело ярко-синим, а при прокрутке белый текст
       просвечивал через плашку и она бледнела. Теперь заливка та же, что у
       синего поля (--field-1…3), но плотная: цвет плашки одинаковый всегда,
       и на телефоне, и на планшете. */
    .mobile-bar{display:flex;align-items:center;justify-content:center;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:120;
      background-color:var(--field-2);
      background-image:
        radial-gradient(190px 130px at 88% -60%, rgba(120,160,255,.50), transparent 72%),
        linear-gradient(158deg, var(--field-1) 0%, var(--field-2) 46%, var(--field-3) 100%);
      border-top:1px solid rgba(255,255,255,.30);
      padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));
      box-shadow:0 -8px 24px rgba(1,16,110,.22), inset 0 1px 0 rgba(255,255,255,.35)}
    /* зерно первого экрана поверх градиента, но под кнопками */
    .mobile-bar::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
      background-image:var(--grain-image-field);background-size:var(--grain-tile);background-repeat:repeat;
      mix-blend-mode:overlay;opacity:var(--grain-blue)}
    /* the phone toggle lives inside the messengers' bubble, left of MAX */
    .mbar-phone-toggle{background:transparent;border:0;padding:0;cursor:pointer}
    .mbar-phone-toggle .ico-close{display:none}
    .mobile-bar.phones-open .mbar-phone-toggle .ico-phone{display:none}
    .mobile-bar.phones-open .mbar-phone-toggle .ico-close{display:block}
    /* the numbers pop up above the strip, each one as flag + number; the panel's
       left edge is lined up with the handset button's left edge (set from JS) */
    .mbar-phones{position:absolute;bottom:100%;left:0;margin-bottom:8px;
      background:#fff;border-radius:14px;box-shadow:var(--shadow-pop);padding:6px;
      display:flex;flex-direction:column;gap:2px}
    .mbar-phones[hidden]{display:none}
    .mbar-phone{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;color:var(--ink-0);font-weight:500;font-size:var(--fs-small);white-space:nowrap;text-decoration:none}
    .mbar-phone+.mbar-phone{border-top:1px solid var(--line)}
    .mbar-phone:hover{background:var(--paper-2);color:var(--ink-0);text-decoration:none}
    /* messengers keep their bubble; icons shrink with the buttons */
    .mobile-bar-mess{align-items:stretch;border-radius:14px;flex:none;order:1}
    .mobile-bar .mess-btn{width:44px;height:56px}
    .mobile-bar .mess-btn img{height:22px;filter:brightness(0) invert(1)}
    .mobile-bar .mess-btn img.ico-tg{height:20px}
    .mobile-bar .mess-word{font-size:var(--fs-note)}
    /* Кнопка в полосе: шрифт задан явно — у button браузер не наследует
       шрифт от body, а кнопки всей страницы набраны SF UI Display. */
    .mbar-btn{font-family:"SF UI Display",-apple-system,system-ui,"Segoe UI",sans-serif;align-self:stretch;background:#fff;color:var(--ink-0);padding:0 16px;font-size:var(--fs-body-s);border-radius:12px;order:2;min-height:56px}
    .mbar-btn:hover{background:var(--tint-hover);color:var(--ink-0)}
    .mbar-long{display:none}
  }
  /* on phones the strip keeps only the icons, with a little more width per cell */
  @media (max-width:767px){
    .mobile-bar{gap:7px}
    .mobile-bar .mess-btn{width:48px}
    .mbar-btn{font-size:var(--fs-small);padding:0 16px}
  }
  /* the smallest phones: shave a little more so nothing scrolls sideways */
  @media (max-width:380px){
    .mobile-bar{gap:6px;padding-left:12px;padding-right:12px}
    .mobile-bar .mess-btn{width:42px;height:52px}
    .mbar-btn{font-size:var(--fs-caption);padding:0 12px;min-height:52px}
  }
  /* tablet: the numbers are always visible in the strip, no handset button */
  @media (min-width:768px) and (max-width:900px){
    .mbar-phone-toggle{display:none}
    .mobile-bar .mbar-phones{position:static;order:0;margin:0;padding:0;background:transparent;box-shadow:none;align-self:stretch;
      flex-direction:row;gap:0;border:1px solid var(--onblue-frame);border-radius:14px;overflow:hidden}
    .mobile-bar .mbar-phones[hidden]{display:flex !important}
    .mbar-phone{color:#fff;padding:0 12px;font-size:var(--fs-note);border-radius:0}
    .mbar-phone+.mbar-phone{border-top:0;border-left:1px solid var(--onblue-frame)}
    .mbar-phone:hover{background:var(--onblue-hover);color:#fff}
    .mbar-phone .flag{width:18px;height:18px}
    /* a touch more air around the messenger icons */
    .mobile-bar .mess-btn{width:48px}
    .mbar-short{display:none}
    .mbar-long{display:inline}
  }
  /* the narrowest tablets: keep the strip on one line without side scrolling */
  @media (min-width:768px) and (max-width:790px){
    .mobile-bar{gap:6px}
    .mbar-btn{font-size:11px;padding:0 10px}
  }

  /* ---------- reveal ---------- */
  html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
  html.js .reveal.is-in{opacity:1;transform:none}
  /* Карточки «На любом этапе поможем с оплатой»: фото выезжает снизу вверх,
     номер проявляется от прозрачности к полной. Только на компьютере. */
  @media (min-width:901px) and (prefers-reduced-motion: no-preference){
    html.js .fc-card .fc-photo{opacity:0;translate:0 40px;
      transition:opacity .55s ease-out, translate .55s cubic-bezier(.22,.61,.36,1)}
    html.js .fc-card .fc-photo.is-in{opacity:1;translate:0 0}
    /* номера появляются так же, как снимки: выезжают снизу вверх на те же
       40 точек, за то же время и с тем же ускорением */
    html.js .fc-card .fc-num{opacity:0;translate:0 40px;
      transition:opacity .55s ease-out, translate .55s cubic-bezier(.22,.61,.36,1)}
    html.js .fc-card .fc-num.is-in{opacity:1;translate:0 0}
    html.js .fc-card:nth-child(1) .fc-photo{transition-delay:.2s}
    html.js .fc-card:nth-child(2) .fc-photo{transition-delay:.4s}
    html.js .fc-card:nth-child(3) .fc-photo{transition-delay:.6s}
    html.js .fc-card:nth-child(1) .fc-num{transition-delay:.5s}
    html.js .fc-card:nth-child(2) .fc-num{transition-delay:.4s}
    html.js .fc-card:nth-child(3) .fc-num{transition-delay:.6s}
  }
  @media (prefers-reduced-motion: reduce){
    html.js .reveal{opacity:1;transform:none;transition:none}
    *{transition:none !important;animation:none !important}
  }

/* ---------- плашка cookie и настройки ----------
   Скопировано по составу с doverka.com: снизу карточка с заголовком,
   пояснением и тремя кнопками; по «Настроить» открывается окно с тремя
   категориями, где необходимые включены всегда, а две остальные —
   переключатели. Оформление наше: та же палитра, что у остальных карточек. */
.ck{position:fixed;left:16px;right:16px;bottom:16px;z-index:120;
  display:flex;justify-content:flex-end;pointer-events:none}
/* Плашка стала уже: кнопки теперь стоят в два столбца, и на ширину хватает
   320 точек. Текст согласия получает ту же ширину и переносится сам,
   поэтому жёстких переносов в нём нет. */
/* Плашка стоит на синем поле первого экрана: тот же градиент и тот же блик
   в правом верхнем углу, поэтому она читается как ещё один кусок того же
   поля, а не как белая карточка поверх страницы. Весь текст на ней светлый,
   кнопки — светлые с белой обводкой, а «Принять» стала белой с фирменным
   синим текстом: на синем поле это главное действие. */
.ck-card{pointer-events:auto;width:min(100%,320px);padding:20px 22px;
  background-color:var(--field-1);
  background-image:
    radial-gradient(320px 240px at 106% -20%, var(--field-glow), transparent 70%),
    linear-gradient(158deg,var(--field-1) 0%,var(--field-2) 46%,var(--field-3) 100%);
  border:1px solid var(--onblue-line);border-radius:16px;
  box-shadow:0 18px 44px rgba(6,18,44,.38);color:#fff}
.ck-title{margin:0;font-size:clamp(17px,1.5vw,20px);line-height:1.2;font-weight:700;color:#fff}
.ck-text{margin:8px 0 0;font-size:15px;line-height:1.5;color:var(--onblue-soft)}
/* ссылка на политику: подчёркнута сразу — на синем поле это единственный
   способ показать, что по ней можно нажать */
.ck-text a{color:#fff;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(255,255,255,.55);
  transition:text-decoration-color .15s ease}
.ck-text a:hover{text-decoration-color:#fff}
/* Кнопки в два столбца: слева друг под другом «Настроить» и «Отклонить»,
   справа «Принять» на всю высоту — она вдвое выше каждой из них. */
.ck-actions{display:grid;grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto;gap:10px;margin-top:16px}
.ck-actions .ck-btn{min-height:44px}
.ck-actions [data-ck="settings"]{grid-column:1;grid-row:1}
.ck-actions [data-ck="reject"]{grid-column:1;grid-row:2}
.ck-actions [data-ck="accept"]{grid-column:2;grid-row:1 / span 2}
.ck-btn{min-height:44px;padding:0 18px;border:1px solid rgba(255,255,255,.45);border-radius:12px;
  background:rgba(255,255,255,.12);color:#fff;font:inherit;font-size:15px;font-weight:600;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.ck-btn:hover{background:rgba(255,255,255,.22);border-color:#fff;color:#fff}
.ck-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ck-btn--main{background:#fff;border-color:#fff;color:var(--brand);
  position:relative;overflow:hidden}
/* волна внимания у «Принять» идёт чаще, чем у кнопок страницы: 1,5s против 3s.
   Плашка живёт внизу экрана и сама по себе мелкая — так её заметнее, а длина
   самой полосы остаётся прежней. */
.ck-btn--main.btn-pulse::before{animation-duration:1.5s}
.ck-btn--main:hover{background:#eef3ff;border-color:#eef3ff;color:var(--brand)}
/* волна внимания на белой кнопке должна быть синей: белая на белом не видна */
.ck-btn--main.btn-pulse::before{
  background:linear-gradient(100deg,
    rgba(59,97,206,0) 0%,
    rgba(59,97,206,.07) 30%,
    rgba(59,97,206,.26) 50%,
    rgba(59,97,206,.07) 70%,
    rgba(59,97,206,0) 100%)}

.ck-modal{width:min(100% - 32px,560px);padding:0;border:0;border-radius:18px;
  box-shadow:var(--shadow-pop);color:var(--ink)}
.ck-modal::backdrop{background:rgba(16,33,59,.48);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.ck-modal-in{padding:22px}
.ck-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ck-modal-title{margin:0;font-size:20px;font-weight:700;line-height:1.2}
.ck-close{width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:#fff;
  color:var(--ink);font-size:20px;line-height:1;cursor:pointer;transition:background-color .15s ease}
.ck-close:hover{background:var(--tint-hover)}
.ck-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;
  padding:14px 0;border-top:1px solid var(--line);align-items:start}
.ck-modal-head + .ck-row{margin-top:16px}
.ck-row-title{margin:0;font-size:16px;font-weight:600;line-height:1.3}
.ck-row-text{margin:0;grid-column:1/-1;font-size:14px;line-height:1.45;color:var(--ink-3)}
.ck-locked{font-size:13px;color:var(--ink-3);white-space:nowrap;padding-top:2px}
.ck-switch{position:relative;width:48px;height:28px;padding:0;border:1px solid var(--line);
  border-radius:999px;background:#fff;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease}
.ck-switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;
  border-radius:50%;background:var(--ink-3);box-shadow:0 1px 2px rgba(16,33,59,.25);
  transition:transform .15s ease,background-color .15s ease}
.ck-switch[aria-checked="true"]{background:var(--brand);border-color:var(--brand)}
.ck-switch[aria-checked="true"]::after{transform:translateX(20px);background:#fff}
.ck-switch:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.ck-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ck-modal-foot{display:flex;justify-content:flex-end;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--line)}

@media (max-width:700px){
  /* на телефоне плашка стоит над нижней полосой со звонком и кнопкой */
  .ck{left:10px;right:10px;bottom:84px}
  .ck-card{width:100%;padding:16px 16px 18px}
}