/* Общий попап оплаты для всех страниц «Конструктора ужинов».
   Подключается на каждой странице вместе с checkout.js.
   Переменные берутся из темы страницы, свои цвета тут не заводим. */

/* Закрытое окно не убираем через display:none, а только прячем: иначе у
   заранее загружаемых виджетов не было бы ширины, и GetCourse не смог бы
   посчитать высоту формы до клика. */
.co-overlay{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  visibility:hidden;pointer-events:none;
  padding:24px 16px;overflow-y:auto;
  background:rgba(26,26,26,0);
  transition:background-color .28s ease;
  -webkit-overflow-scrolling:touch;
}
.co-overlay.is-open{visibility:visible;pointer-events:auto}
.co-overlay.is-visible{background:rgba(26,26,26,.62)}
body.co-locked{overflow:hidden}

/* Правило формы: попап обязан помещаться в экран. GetCourse рисует свою форму
   в чужом iframe (своя шапка, свой тариф, своя цена) — поэтому наша обвязка не
   дублирует название и цену, а только даёт закрыть попап и не даёт ему вылезти
   за высоту экрана. Окно широкое, как было на Тильде: на широкой колонке у
   виджета тарифы и согласие занимают меньше строк, и форма ниже. Если она всё
   равно выше экрана, checkout.js уменьшает её целиком (fit), а прокрутка .co-scroll
   остаётся только запасным вариантом на очень низких экранах. */
.co-box{
  position:relative;width:100%;max-width:640px;margin:auto;
  background:var(--surface,#FBF8F2);color:var(--graphite,#1A1A1A);
  border-radius:22px;
  box-shadow:0 24px 60px rgba(0,0,0,.28);
  font-family:"Manrope",ui-sans-serif,system-ui,sans-serif;
  opacity:0;transform:translateY(22px) scale(.97);
  transition:opacity .3s cubic-bezier(.22,.61,.36,1),transform .3s cubic-bezier(.22,.61,.36,1);
  display:flex;flex-direction:column;
  max-height:calc(100vh - 48px);
  max-height:calc(100dvh - 48px);
  overflow:hidden;
}
.co-overlay.is-visible .co-box{opacity:1;transform:translateY(0) scale(1)}
@media (prefers-reduced-motion:reduce){
  .co-overlay,.co-box{transition:none}
}

.co-head{flex:none;position:relative;padding:22px 54px 12px 26px}
.co-hint{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted,#6B6259)}

.co-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 26px 26px;-webkit-overflow-scrolling:touch}

.co-close{
  position:absolute;top:14px;right:14px;width:36px;height:36px;z-index:2;
  display:flex;align-items:center;justify-content:center;
  border:none;border-radius:50%;cursor:pointer;
  background:var(--surface,#FBF8F2);color:var(--muted,#6B6259);
  font-size:26px;line-height:1;font-family:inherit;
}
.co-close:hover{background:var(--sand,#F2EDE4);color:var(--graphite,#1A1A1A)}
.co-close:focus-visible{outline:3px solid var(--violet,#674EA7);outline-offset:2px}

/* сюда GetCourse рисует форму; .co-frame масштабирует checkout.js (fit) */
.co-slot{min-height:80px;position:relative;overflow:hidden}
.co-slot.is-parked{height:0!important;min-height:0;visibility:hidden}
.co-frame{transform-origin:0 0}

/* пока форма грузится: внешний виджет отвечает не мгновенно, показываем это честно */
.co-loading{
  position:absolute;top:0;left:0;right:0;z-index:1;
  display:flex;align-items:center;gap:10px;
  padding:26px 4px;color:var(--muted,#6B6259);font-size:15px;
  background:var(--surface,#FBF8F2);
  opacity:1;transition:opacity .2s ease;
}
.co-loading.is-hiding{opacity:0}
.co-spinner{
  width:18px;height:18px;flex:none;border-radius:50%;
  border:2.5px solid var(--border,#E0D8C9);
  border-top-color:var(--violet,#674EA7);
  animation:co-spin .7s linear infinite;
}
@keyframes co-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .co-spinner{animation-duration:1.4s}
}

/* заглушка: видна, пока в checkout.js не прописан виджет */
.co-todo{
  margin:0;padding:18px 20px;border-radius:12px;
  background:var(--violet-soft,#EDE8F7);
  font-size:15px;line-height:1.55;
}
.co-todo code{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13.5px}

@media (max-width:600px){
  .co-overlay{padding:10px}
  .co-box{border-radius:18px;max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px)}
  .co-head{padding:18px 50px 10px 18px}
  .co-scroll{padding:0 18px 18px}
}