/* Предложение пробного периода при уходе (templates/exit_offer.php). Страницы не все линкуют
   style.css, поэтому у переменных запасные значения из брендбука. Десктоп - модальная карточка по
   центру с затемнением; на телефоне (до 760px) - нижняя панель над кнопкой гостевого чата. */
.eo-root { font-family: var(--font, 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Arial, sans-serif); }
.eo-root[hidden] { display: none !important; }
.eo-backdrop { position: fixed; inset: 0; z-index: 9990; background: rgba(26, 26, 31, .55); }
.eo-card {
  position: fixed; z-index: 9995; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 700px; max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 20px;
  padding: 24px 28px 24px 16px;
  background: var(--bg-card, #fff); color: var(--text, #1A1A1F);
  border: 1px solid var(--border, #E4E2DC); border-radius: var(--r-lg, 14px);
  box-shadow: 0 24px 70px rgba(26, 26, 31, .3);
}
.eo-close {
  position: absolute; top: 10px; right: 10px; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-sm, 6px); background: transparent; color: var(--text-secondary, #55555c); cursor: pointer;
}
.eo-close:hover { background: var(--bg, #F7F6F3); }
.eo-img { width: 260px; height: 260px; flex-shrink: 0; object-fit: contain; }
.eo-body { min-width: 0; }
.eo-title { margin: 0 0 8px; font-family: var(--font-heading, 'Space Grotesk', sans-serif); font-size: 22px; line-height: 1.25; color: var(--primary-dark, #4D237E); }
.eo-text { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--text-secondary, #55555c); }
.eo-cta {
  display: inline-block; padding: 12px 22px; border-radius: 999px;
  background: var(--primary, #5E2B9A); color: #fff; font-weight: 700; font-size: 14px; text-decoration: none;
}
.eo-cta:hover { opacity: .92; }
.eo-cta:focus-visible, .eo-close:focus-visible { outline: 3px solid rgba(94, 43, 154, .35); outline-offset: 2px; }

@media (max-width: 760px) {
  .eo-backdrop { display: none; }
  @@; right: 16px; top: auto; bottom: 84px; transform: none;
    width: auto; max-width: none; gap: 12px; padding: 16px 14px 16px 12px;
    box-shadow: 0 -6px 30px rgba(26, 26, 31, .22);
  }
  .eo-img { width: 88px; height: 88px; }
  .eo-title { font-size: 16px; padding-right: 22px; }
  .eo-text { display: none; }
  .eo-cta { padding: 10px 18px; font-size: 13px; }
}