/* ============================================================
   offer.css — экран-оффер: затемнение и карточка по центру (js/offer.js).
   Цвета берутся из переменных темы, акцент — --accent (#2AABEE).
   ============================================================ */

.offer {
  position: absolute; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--safe-top) + 16px) var(--gutter) calc(var(--safe-bottom) + 16px);
  background: rgba(8, 14, 22, .56);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .25s ease;
}
.offer.is-open { opacity: 1; }

.offer__card {
  width: 100%; max-width: 360px; max-height: 100%;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 26px 20px 8px;
  background: var(--card);
  border-radius: 26px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  text-align: center;
  outline: none;
  opacity: 0; transform: translateY(20px) scale(.94);
  transition: transform .4s cubic-bezier(.2, .9, .3, 1.12), opacity .25s ease;
}
.offer__card::-webkit-scrollbar { display: none; }
.offer.is-open .offer__card { opacity: 1; transform: none; }

/* Эмодзи: крупная, по центру, на мягком акцентном круге; один раз «выскакивает» */
.offer__emoji {
  display: flex; align-items: center; justify-content: center;
  width: 96px; height: 96px; margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--accent-soft);
  font-size: 56px; line-height: 1;
}
.offer.is-open .offer__emoji { animation: offer-pop .55s .15s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes offer-pop { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }

.offer__title {
  font-size: 24px; line-height: 1.15; font-weight: 800; letter-spacing: -.01em;
  text-wrap: balance;
}
.offer__text {
  margin-top: 10px;
  font-size: 16px; line-height: 1.4; color: var(--hint);
  text-wrap: balance;
}

/* Выгоды подписки */
.offer__list {
  list-style: none; margin: 20px 0 0; padding: 6px 14px;
  background: var(--bg); border-radius: 16px;
  text-align: left;
}
.offer__list li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 9px 0;
  font-size: 15px; line-height: 1.35;
}
.offer__list li + li { border-top: 1px solid var(--sep); }
.offer__tick {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-top: 0;
  border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-text);
}
.offer__tick svg { width: 14px; height: 14px; stroke-width: 2.4; }

/* Кнопки */
.offer__cta {
  display: block; width: 100%; min-height: 52px; margin-top: 20px; padding: 0 16px;
  border-radius: var(--r-btn);
  background: var(--accent); color: var(--on-accent);
  font-size: 17px; font-weight: 700; text-align: center;
  box-shadow: 0 8px 20px rgba(42, 171, 238, .35);
  transition: transform .12s ease, filter .12s ease;
}
.offer__cta:active { transform: scale(.98); filter: brightness(.94); }
.offer__skip {
  display: block; width: 100%; min-height: 48px; margin-top: 4px;
  border-radius: var(--r-btn);
  color: var(--hint); font-size: 15px; font-weight: 500; text-align: center;
}
.offer__skip:active { background: var(--press); }

/* Невысокие экраны: компактнее, чтобы всё помещалось без прокрутки */
@media (max-height: 640px) {
  .offer__card { padding-top: 18px; }
  .offer__emoji { width: 72px; height: 72px; font-size: 42px; margin-bottom: 12px; }
  .offer__list { margin-top: 14px; }
  .offer__list li { padding: 6px 0; }
  .offer__cta { margin-top: 14px; }
}