/* Isolated purchase callout: presentation only; account and redemption stay unchanged. */
body.account-app #recharge-dialog .recharge-purchase {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px;
  margin: 24px 0 8px;
  border: 1px solid #d9b466;
  border-radius: 16px;
  background: radial-gradient(ellipse at 0 0, #b78a3033, transparent 70%), linear-gradient(120deg, #30271b, #171513);
  box-shadow: 0 8px 30px #00000020, inset 0 1px 0 #ffe6b524;
}
body.account-app #recharge-dialog .recharge-purchase > div { flex: 1; min-width: 0; }
body.account-app #recharge-dialog .recharge-purchase strong {
  display: block;
  color: #ffe1a2;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: .3px;
}
body.account-app #recharge-dialog #recharge-purchase-note {
  display: block;
  margin-top: 7px;
  color: #e1d1b6;
  font-size: 14px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
body.account-app #recharge-dialog #recharge-purchase-link:not([hidden]) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex: none;
  overflow: hidden;
  isolation: isolate;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid #ffe8ae;
  border-radius: 11px;
  background: linear-gradient(115deg, #f2c567, #ffe6aa 55%, #edbc58);
  color: #30200d;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 20px #e6b35830, inset 0 1px 0 #fff3d1;
  transition: transform .18s ease, box-shadow .18s ease;
}
body.account-app #recharge-dialog #recharge-purchase-link[hidden] { display: none; }
body.account-app #recharge-dialog #recharge-purchase-link::after { content: '↗'; font-size: 20px; font-weight: 600; }
body.account-app #recharge-dialog[open] #recharge-purchase-link:not([hidden])::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -70% -35%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, #fff9dfb3 48%, transparent 61%);
  transform: translateX(-105%);
  animation: recharge-purchase-sheen 5s ease-in-out infinite;
}
@keyframes recharge-purchase-sheen {
  0%, 55% { transform: translateX(-105%); opacity: 0; }
  61% { opacity: 1; }
  86%, 100% { transform: translateX(105%); opacity: 0; }
}
@media (hover: hover) {
  body.account-app #recharge-dialog #recharge-purchase-link:hover { transform: translateY(-2px); box-shadow: 0 7px 25px #e6b35850, inset 0 1px 0 #fff3d1; }
}
body.account-app #recharge-dialog #recharge-purchase-link:focus-visible { outline: 3px solid #fff4d2; outline-offset: 4px; }
body.account-app #recharge-dialog #recharge-purchase-link:active { transform: translateY(0); }
@media (max-width: 560px) {
  body.account-app #recharge-dialog .recharge-purchase { flex-direction: column; align-items: stretch; gap: 17px; padding: 18px; }
  body.account-app #recharge-dialog .recharge-purchase strong { font-size: 18px; }
  body.account-app #recharge-dialog #recharge-purchase-link:not([hidden]) { width: 100%; min-height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  body.account-app #recharge-dialog #recharge-purchase-link,
  body.account-app #recharge-dialog #recharge-purchase-link::before { animation: none !important; transition: none !important; transform: none !important; }
  body.account-app #recharge-dialog #recharge-purchase-link::before { display: none; }
}