/* The offer is portalled out of the tariff page and occupies no grid space. */
.youvpn-term-modal {
  --offer-top: max(16px, var(--tg-safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px));
  --offer-bottom: max(16px, var(--tg-safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px));
  --offer-viewport: min(100dvh, var(--tg-viewport-height, 100dvh), var(--tg-viewport-stable-height, 100dvh));
  position: fixed;
  z-index: 60;
  top: calc(var(--offer-top) + (var(--offer-viewport) - var(--offer-top) - var(--offer-bottom)) / 2);
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, calc(100% - 32px));
  max-height: calc(var(--offer-viewport) - var(--offer-top) - var(--offer-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px;
  border: 1px solid rgba(187, 136, 57, .4);
  border-radius: 22px;
  background: var(--background, #262626);
  color: var(--foreground, #fff);
  box-shadow: 0 20px 70px rgba(0, 0, 0, .4);
}
.youvpn-term-modal-overlay { z-index: 59; background: rgba(0, 0, 0, .55); }
.youvpn-term-modal-eyebrow { color: var(--primary, #bb8839); font-size: 12px; margin-bottom: 10px; }
.youvpn-term-modal-title { margin: 0; font-size: 21px; font-weight: 700; line-height: 1.25; }
.youvpn-term-modal-description { margin: 12px 0 20px; font-size: 14px; line-height: 1.5; }
.youvpn-term-modal-actions { display: grid; gap: 10px; }
.youvpn-term-modal-actions > button {
  width: 100%;
  height: auto;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.4;
  white-space: normal;
}
.youvpn-subscription-page .youvpn-tariff-pay > button { height: 44px; min-height: 44px; font-size: 16px; }
/* Keep the payment action inside short Telegram frames, including safe areas. */
.youvpn-subscription-route.youvpn-tma .youvpn-subscription-page {
  max-height: var(--youvpn-available-height);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}
.youvpn-subscription-route.youvpn-tma .youvpn-subscription-page::-webkit-scrollbar { display: none; }
.youvpn-subscription-route.youvpn-tma .youvpn-tariff-pay {
  position: sticky;
  bottom: 0;
  z-index: 10;
  padding-block: 8px 4px;
  background: var(--background, #262626);
}