/* Coupon ribbon shown only in the authenticated dashboard. */
.ng-eternal-promo {
  direction: rtl;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  width: min(1080px, calc(100% - 24px));
  min-height: 46px;
  margin: 9px auto 0;
  padding: 8px 12px;
  border: 1px solid rgba(255, 54, 76, .58);
  border-radius: 11px;
  background: linear-gradient(100deg, rgba(44, 7, 17, .94), rgba(20, 11, 20, .96) 52%, rgba(52, 9, 20, .94));
  box-shadow: 0 0 16px rgba(255, 37, 61, .12), inset 0 0 16px rgba(255, 37, 61, .05);
  color: #fff7f7;
  font-family: 'Vazirmatn', 'Outfit', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
.ng-eternal-promo .ng-promo-message { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; max-width: 100%; }
.ng-eternal-promo .ng-promo-code-group { display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; }
.ng-eternal-promo .ng-promo-discount {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 2px 9px;
  border: 1px solid rgba(255, 78, 91, .55);
  border-radius: 999px;
  background: rgba(228, 20, 43, .17);
  color: #ff6676;
  white-space: nowrap;
}
.ng-eternal-promo .ng-promo-code {
  display: inline-flex;
  align-items: center;
  min-height: 29px;
  padding: 2px 11px;
  border: 1px solid rgba(255, 93, 109, .82);
  border-radius: 7px;
  background: linear-gradient(145deg, rgba(105, 7, 20, .92), rgba(34, 5, 12, .98));
  color: #fff0f1;
  font-size: 1.08rem;
  font-weight: 1000;
  letter-spacing: .14em;
  line-height: 1;
  text-shadow: 0 0 5px rgba(255, 72, 91, .95), 0 0 13px rgba(255, 26, 50, .78);
  box-shadow: 0 0 9px rgba(255, 38, 62, .36), inset 0 0 9px rgba(255, 44, 66, .13);
  white-space: nowrap;
}
.ng-eternal-promo button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 29px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 73, 91, .6);
  border-radius: 7px;
  background: rgba(241, 29, 53, .16);
  color: #fff;
  font: inherit;
  font-size: 11px;
  white-space: nowrap;
  cursor: pointer;
}
.ng-eternal-promo button:hover { background: rgba(241, 29, 53, .3); }
.ng-eternal-promo button:focus-visible { outline: 2px solid #ff8d99; outline-offset: 2px; }
.ng-vip-plan-modal .ng-eternal-promo { width: 100%; margin: 0 0 16px; }
@media (max-width: 520px) {
  .ng-eternal-promo { flex-direction: column; gap: 7px; padding: 9px 9px; border-radius: 10px; font-size: 12px; }
  .ng-eternal-promo .ng-promo-message { justify-content: center; text-align: center; gap: 5px 7px; }
  .ng-eternal-promo .ng-promo-code-group { max-width: 100%; flex-wrap: wrap; gap: 6px; }
  .ng-eternal-promo button { min-height: 30px; padding-inline: 12px; }
  .ng-eternal-promo .ng-promo-code { min-height: 27px; font-size: 1rem; }
}

/* Keep the dashboard plan chooser as the touch-scroll surface, not the page behind it. */
html.ng-vip-plan-modal-open,
html.ng-vip-plan-modal-open body {
  overflow: hidden !important;
  overscroll-behavior: none;
}
#root .ng-vip-plan-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
#root .ng-vip-plan-modal > .glass-panel {
  max-height: calc(100dvh - 32px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
#ng-dns-recheck.ng-vip-modal-hidden {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
@media (max-width: 700px) {
  #root .ng-vip-plan-modal {
    align-items: flex-start !important;
    justify-content: center !important;
    padding: max(14px, env(safe-area-inset-top)) 12px max(18px, env(safe-area-inset-bottom)) !important;
  }
  #root .ng-vip-plan-modal > .glass-panel {
    width: 100% !important;
    max-width: 650px !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 auto !important;
  }
}