/* ==========================================================================
   VIP SHOWCASE 3D  —  "EXCLUSIVE OFFERS BASED ON YOUR VIP LEVEL"
   Loaded LAST so it wins over every earlier polish layer.
   Pure CSS: no markup / JS changes needed.
   ========================================================================== */

/* ---------- section wrapper ---------- */
html body #offerModal#offerModal .vip-showcase {
  position: relative !important;
  margin: 18px 0 14px !important;
  perspective: 900px;
}
html body #offerModal#offerModal .vip-showcase::before {
  /* soft stage spotlight behind the whole grid */
  content: "" !important;
  position: absolute !important;
  inset: 40px -6px -10px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(60% 45% at 18% 20%, rgba(255, 190, 80, .13), transparent 70%),
    radial-gradient(60% 45% at 82% 80%, rgba(120, 130, 255, .16), transparent 70%) !important;
  filter: blur(6px);
}

/* ---------- title: embossed gold plate ---------- */
html body #offerModal#offerModal .vip-showcase-title {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  margin: 0 0 14px !important;
  padding: 9px 22px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 226, 150, .55) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .04) 46%, rgba(0, 0, 0, 0) 50%),
    radial-gradient(110% 130% at 50% -40%, rgba(255, 226, 140, .55), transparent 60%),
    linear-gradient(170deg, #8f6d24 0%, #5e4616 40%, #3a2b0e 75%, #221a0a 100%) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 250, 220, .75),
    inset 0 -3px 0 rgba(0, 0, 0, .38),
    inset 0 0 14px rgba(255, 200, 90, .18),
    0 2px 0 #3b2c0e,
    0 10px 18px -4px rgba(0, 0, 0, .6),
    0 0 26px -4px rgba(255, 190, 70, .35) !important;
  transform: none !important;
}
html body #offerModal#offerModal .vip-showcase-title::before {
  /* travelling light sweep */
  content: "" !important;
  display: block !important;
  z-index: 0 !important;
  transform: none !important;
  filter: none !important;
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  opacity: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%) !important;
  background-size: 260% 100% !important;
  background-position: 160% 0 !important;
  mix-blend-mode: soft-light !important;
  animation: vipTitleSweep 4.6s ease-in-out 1s infinite !important;
}
html body #offerModal#offerModal .vip-showcase-title::after {
  /* side gems */
  content: "" !important;
  display: block !important;
  z-index: 0 !important;
  transform: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-position: 0 0 !important;
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  opacity: 1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 13px 50%, #fffbe6 0 1.6px, #ffd873 2.4px, rgba(255, 200, 80, .45) 4px, transparent 7px),
    radial-gradient(circle at calc(100% - 13px) 50%, #fffbe6 0 1.6px, #ffd873 2.4px, rgba(255, 200, 80, .45) 4px, transparent 7px) !important;
  animation: none !important;
}
html body #offerModal#offerModal .vip-showcase-title span.vip-title-gradient {
  position: relative !important;
  z-index: 1 !important;
  display: inline-block !important;
  max-width: none !important;
  padding: 0 1px !important;
  font-family: Inter, "Plus Jakarta Sans", Arial, sans-serif !important;
  font-size: clamp(8px, 2.7vw, 12px) !important;
  font-weight: 900 !important;
  letter-spacing: .025em !important;
  line-height: 1.15 !important;
  text-align: center !important;
  white-space: nowrap !important;
  color: #fff6d2 !important;
  background: linear-gradient(180deg, #ffffff 0%, #fff0b8 45%, #ffd36b 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 1px 0 rgba(70, 45, 5, .9)) drop-shadow(0 2px 3px rgba(0, 0, 0, .55)) !important;
  animation: none !important;
}

/* ---------- grid ---------- */
html body #offerModal#offerModal .vip-level-grid {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 2px 0 6px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
@media (max-width: 335px) {
  html body #offerModal#offerModal .vip-level-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ---------- tier palettes ---------- */
html body #offerModal#offerModal .vip-level-card {
  --rgb: 205, 127, 50;           /* tier glow colour (bronze default) */
  --t-light: #ffc994;
  --t-mid: #8a4f24;
  --t-dark: #2e1a10;
  --t-text-a: #ffe2c2;
  --t-text-b: #f09a52;
}
html body #offerModal#offerModal .vip-level-card.vip-silver {
  --rgb: 190, 205, 235; --t-light: #f2f6ff; --t-mid: #5c6788; --t-dark: #1d2236; --t-text-a: #ffffff; --t-text-b: #bcc8e6;
}
html body #offerModal#offerModal .vip-level-card.vip-gold {
  --rgb: 255, 200, 70; --t-light: #fff0a8; --t-mid: #8d6a1e; --t-dark: #2f2410; --t-text-a: #fff3b8; --t-text-b: #ffc43d;
}
html body #offerModal#offerModal .vip-level-card.vip-emerald {
  --rgb: 60, 230, 140; --t-light: #b8ffd8; --t-mid: #1c7a50; --t-dark: #0c2a22; --t-text-a: #d2ffe6; --t-text-b: #3fe08e;
}
html body #offerModal#offerModal .vip-level-card.vip-diamond {
  --rgb: 70, 210, 255; --t-light: #c4f1ff; --t-mid: #1f6f98; --t-dark: #0b2236; --t-text-a: #dcf6ff; --t-text-b: #45cfff;
}
html body #offerModal#offerModal .vip-level-card.vip-black {
  --rgb: 185, 160, 255; --t-light: #efe8ff; --t-mid: #5b4a9a; --t-dark: #1a1536; --t-text-a: #ffffff; --t-text-b: #c3adff;
}

/* ---------- card: glossy 3D slab ---------- */
html body #offerModal#offerModal .vip-level-card {
  position: relative !important;
  isolation: isolate;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 10px 7px 9px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(var(--rgb), .55) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(130% 62% at 50% -6%, rgba(var(--rgb), .5), transparent 62%),
    linear-gradient(168deg, color-mix(in srgb, var(--t-mid) 92%, #fff 8%) 0%, var(--t-mid) 30%, var(--t-dark) 78%, #090d22 100%) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .55),
    inset 0 0 0 1px rgba(255, 255, 255, .05),
    inset 0 -14px 22px rgba(0, 0, 0, .42),
    0 2px 0 rgba(0, 0, 0, .55),
    0 14px 20px -8px rgba(0, 0, 0, .75),
    0 0 22px -6px rgba(var(--rgb), .55) !important;
  transform: perspective(700px) rotateX(2.5deg) !important;
  transform-origin: 50% 100%;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease !important;
  animation: vipCardIn .7s cubic-bezier(.2, .9, .25, 1.1) backwards !important;
  -webkit-tap-highlight-color: transparent;
}
html body #offerModal#offerModal .vip-level-card:nth-child(1) { animation-delay: .02s !important; }
html body #offerModal#offerModal .vip-level-card:nth-child(2) { animation-delay: .09s !important; }
html body #offerModal#offerModal .vip-level-card:nth-child(3) { animation-delay: .16s !important; }
html body #offerModal#offerModal .vip-level-card:nth-child(4) { animation-delay: .23s !important; }
html body #offerModal#offerModal .vip-level-card:nth-child(5) { animation-delay: .30s !important; }
html body #offerModal#offerModal .vip-level-card:nth-child(6) { animation-delay: .37s !important; }

html body #offerModal#offerModal .vip-level-card:hover,
html body #offerModal#offerModal .vip-level-card:active {
  transform: perspective(700px) translateY(-4px) rotateX(0deg) scale(1.025) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .7),
    inset 0 0 0 1px rgba(255, 255, 255, .08),
    inset 0 -14px 22px rgba(0, 0, 0, .38),
    0 2px 0 rgba(0, 0, 0, .55),
    0 20px 26px -8px rgba(0, 0, 0, .8),
    0 0 30px -2px rgba(var(--rgb), .8) !important;
}

/* diagonal glass sheen that glides across every card */
html body #offerModal#offerModal .vip-level-card::before {
  content: "" !important;
  display: block !important;
  transform: none !important;
  filter: none !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  opacity: 1 !important;
  background:
    linear-gradient(112deg, transparent 34%, rgba(255, 255, 255, .26) 48%, rgba(255, 255, 255, .06) 54%, transparent 64%) 160% 0 / 260% 100% no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 30%) !important;
  mix-blend-mode: screen !important;
  background-repeat: no-repeat !important;
  animation: vipCardSheen 6s ease-in-out infinite !important;
}
html body #offerModal#offerModal .vip-level-card:nth-child(2n)::before { animation-delay: 1.4s !important; }
html body #offerModal#offerModal .vip-level-card:nth-child(3n)::before { animation-delay: 2.8s !important; }
/* bottom rim light */
html body #offerModal#offerModal .vip-level-card::after {
  content: "" !important;
  display: block !important;
  transform: none !important;
  filter: none !important;
  position: absolute !important;
  left: 14% !important;
  right: 14% !important;
  bottom: 0 !important;
  top: auto !important;
  width: auto !important;
  height: 2px !important;
  z-index: 3 !important;
  border: 0 !important;
  border-radius: 2px !important;
  pointer-events: none !important;
  opacity: .9 !important;
  background: linear-gradient(90deg, transparent, rgba(var(--rgb), .95), transparent) !important;
  filter: blur(.4px);
}

/* ---------- card head: floating emblem ---------- */
html body #offerModal#offerModal .vip-level-card .vip-level-head {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  text-align: center !important;
}
html body #offerModal#offerModal .vip-level-card .vip-level-head::before {
  /* glowing halo behind the emblem */
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: -6px !important;
  left: 50% !important;
  width: 74px !important;
  height: 74px !important;
  transform: translateX(-50%) !important;
  z-index: -1 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(var(--rgb), .75) 0%, rgba(var(--rgb), .25) 42%, transparent 70%) !important;
  filter: blur(5px);
  animation: vipHalo 3.4s ease-in-out infinite !important;
}
html body #offerModal#offerModal .vip-level-card .vip-level-head::after { content: none !important; }
html body #offerModal#offerModal .vip-level-card .vip-tier-icon {
  display: block !important;
  width: 56px !important;
  height: 56px !important;
  max-width: none !important;
  margin: 0 !important;
  object-fit: contain !important;
  filter:
    drop-shadow(0 6px 5px rgba(0, 0, 0, .6))
    drop-shadow(0 0 9px rgba(var(--rgb), .65)) !important;
  animation: vipEmblemFloat 3.6s ease-in-out infinite !important;
}
html body #offerModal#offerModal .vip-level-card:nth-child(2n) .vip-tier-icon { animation-delay: -.9s !important; }
html body #offerModal#offerModal .vip-level-card:nth-child(3n) .vip-tier-icon { animation-delay: -1.8s !important; }

html body #offerModal#offerModal .vip-level-card .vip-level-head b {
  display: block !important;
  max-width: 100% !important;
  font-size: clamp(11px, 3.4vw, 14px) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: .01em !important;
  white-space: nowrap !important;
  color: var(--t-text-b) !important;
  background: linear-gradient(180deg, var(--t-text-a) 0%, var(--t-text-b) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .8)) drop-shadow(0 0 6px rgba(var(--rgb), .35)) !important;
}
html body #offerModal#offerModal .vip-level-card .vip-level-head > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 38px !important;
  padding: 2px 10px !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: 999px !important;
  font-size: 8.5px !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  line-height: 1.3 !important;
  color: rgba(255, 255, 255, .88) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .88) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(0, 0, 0, .28)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -2px 3px rgba(0, 0, 0, .3), 0 2px 4px rgba(0, 0, 0, .35) !important;
}

/* ---------- reward chips: raised glass pills ---------- */
html body #offerModal#offerModal .vip-level-card .benefit {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-width: 0 !important;
  min-height: 40px !important;
  margin: 0 0 6px !important;
  padding: 5px 6px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .11) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, .03) 46%, rgba(0, 0, 0, 0) 50%),
    linear-gradient(150deg, rgba(var(--rgb), .16), rgba(0, 0, 0, 0) 55%),
    linear-gradient(150deg, #1c2868 0%, #0e1544 55%, #080d2c 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    inset 0 -3px 5px rgba(0, 0, 0, .4),
    0 1px 0 rgba(255, 255, 255, .06),
    0 5px 8px -2px rgba(0, 0, 0, .55) !important;
}
html body #offerModal#offerModal .vip-level-card .benefit:last-child { margin-bottom: 0 !important; }
html body #offerModal#offerModal .vip-level-card .benefit-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 28px !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
}
html body #offerModal#offerModal .vip-level-card .benefit-icon img,
html body #offerModal#offerModal .vip-level-card .benefit-icon svg,
html body #offerModal#offerModal .vip-level-card .benefit-icon .icon-inline {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .6)) drop-shadow(0 0 5px rgba(var(--rgb), .35)) !important;
}
html body #offerModal#offerModal .vip-level-card .benefit-icon .icon-cash { transform: scale(1.18) !important; }
html body #offerModal#offerModal .vip-level-card .benefit-copy {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 2px !important;
  min-width: 0 !important;
}
html body #offerModal#offerModal .vip-level-card .benefit-copy strong {
  font-size: clamp(11px, 3.3vw, 14px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  color: #fff !important;
  background: linear-gradient(180deg, #ffffff 0%, var(--t-light) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .75)) !important;
}
html body #offerModal#offerModal .vip-level-card .benefit-copy small {
  font-size: clamp(6.5px, 1.9vw, 8.5px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  color: rgba(214, 224, 255, .7) !important;
  -webkit-text-fill-color: rgba(214, 224, 255, .7) !important;
}

@media (max-width: 380px) {
  html body #offerModal#offerModal .vip-level-grid { gap: 8px !important; }
  html body #offerModal#offerModal .vip-level-card { padding: 9px 5px 8px !important; border-radius: 17px !important; }
  html body #offerModal#offerModal .vip-level-card .vip-tier-icon { width: 50px !important; height: 50px !important; }
  html body #offerModal#offerModal .vip-level-card .benefit { padding: 5px 4px !important; gap: 4px !important; }
  html body #offerModal#offerModal .vip-showcase-title { padding-inline: 18px !important; }
  html body #offerModal#offerModal .vip-showcase-title span.vip-title-gradient { font-size: 8.5px !important; letter-spacing: .01em !important; }
}

/* ---------- motion ---------- */
@keyframes vipCardIn {
  from { opacity: 0; transform: perspective(700px) translateY(18px) rotateX(-22deg) scale(.92); }
}
@keyframes vipCardSheen {
  0%, 55% { background-position: 160% 0, 0 0; }
  85%, 100% { background-position: -60% 0, 0 0; }
}
@keyframes vipTitleSweep {
  0%, 45% { background-position: 160% 0; }
  85%, 100% { background-position: -60% 0; }
}
@keyframes vipEmblemFloat {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-3px) rotate(1.5deg); }
}
@keyframes vipHalo {
  0%, 100% { opacity: .75; transform: translateX(-50%) scale(.94); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  html body #offerModal#offerModal .vip-level-card,
  html body #offerModal#offerModal .vip-level-card::before,
  html body #offerModal#offerModal .vip-level-card .vip-tier-icon,
  html body #offerModal#offerModal .vip-level-card .vip-level-head::before,
  html body #offerModal#offerModal .vip-showcase-title::before { animation: none !important; }
}

/* Final visual pass: keep tier color, remove the card halos and title frame. */
html body #offerModal#offerModal .vip-showcase::before { display: none !important; }
html body #offerModal#offerModal .vip-level-card {
  border: 0 !important;
  outline: 0 !important;
  background: linear-gradient(160deg, color-mix(in srgb, var(--t-mid) 88%, #fff 12%) 0%, var(--t-mid) 34%, var(--t-dark) 100%) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
}
html body #offerModal#offerModal .vip-level-card:hover,
html body #offerModal#offerModal .vip-level-card:active {
  box-shadow: none !important;
  transform: none !important;
}
html body #offerModal#offerModal .vip-level-card::before,
html body #offerModal#offerModal .vip-level-card::after,
html body #offerModal#offerModal .vip-level-card .vip-level-head::before {
  display: none !important;
  content: none !important;
  animation: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Make the offer heading read as a clear, premium 3D plaque. */
html body #offerModal#offerModal .vip-showcase-title {
  position: relative !important;
  min-height: 64px !important;
  margin: 0 0 14px !important;
  padding: 9px 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(174, 205, 255, .28) !important;
  border-radius: 15px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 48%),
    radial-gradient(ellipse at 50% 0%, rgba(73,146,255,.38), transparent 68%),
    linear-gradient(145deg, #243d69 0%, #1a2b50 48%, #111b34 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -5px 10px rgba(3,8,22,.52),
    0 3px 0 #0b1328,
    0 8px 18px rgba(0,0,0,.38),
    0 0 20px rgba(73,146,255,.16) !important;
}
html body #offerModal#offerModal .vip-showcase-title::before {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  inset: 1px 9px auto !important;
  width: auto !important;
  height: 1px !important;
  border: 0 !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.54), transparent) !important;
  opacity: .8 !important;
  animation: none !important;
}
html body #offerModal#offerModal .vip-showcase-title::after {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  inset: auto 18% 4px !important;
  width: auto !important;
  height: 2px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: linear-gradient(90deg, transparent, rgba(126,190,255,.9), rgba(255,255,255,.8), rgba(126,190,255,.9), transparent) !important;
  box-shadow: 0 0 9px rgba(105,174,255,.52) !important;
  opacity: .72 !important;
  animation: none !important;
}
html body #offerModal#offerModal .vip-showcase-title span.vip-title-gradient {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  color: #fff !important;
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: clamp(10px, 3vw, 15px) !important;
  font-weight: 900 !important;
  letter-spacing: .012em !important;
  line-height: 1.2 !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.85),
    0 2px 0 rgba(173,192,226,.92),
    0 3px 0 rgba(70,91,133,.86),
    0 5px 8px rgba(0,0,0,.72) !important;
  filter: none !important;
}
@media (max-width: 360px) {
  html body #offerModal#offerModal .vip-showcase-title span.vip-title-gradient {
    font-size: 10px !important;
    letter-spacing: 0 !important;
  }
}
html body #offerModal#offerModal .vip-level-card .vip-tier-icon {
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.48)) !important;
  animation: none !important;
}
html body #offerModal#offerModal .vip-showcase-title {
  min-height: 50px !important;
  padding: 7px 8px !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  background: radial-gradient(ellipse at 50% 50%, rgba(255,202,75,.2), rgba(255,202,75,.07) 45%, transparent 78%) !important;
  box-shadow: none !important;
  overflow: visible !important;
}
html body #offerModal#offerModal .vip-showcase-title::before,
html body #offerModal#offerModal .vip-showcase-title::after {
  display: none !important;
  content: none !important;
  animation: none !important;
  box-shadow: none !important;
}
html body #offerModal#offerModal .vip-showcase-title span.vip-title-gradient {
  max-width: 100% !important;
  color: #fff !important;
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  font-size: clamp(10px, 3.7vw, 17px) !important;
  font-weight: 900 !important;
  letter-spacing: .035em !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.92), 0 2px 0 rgba(195,202,219,.86), 0 3px 0 rgba(79,88,117,.82), 0 5px 8px rgba(0,0,0,.72) !important;
  filter: none !important;
}

/* Last cascade rule: compact, readable VIP title plate. */
html body #offerModal#offerModal .vip-showcase-title {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 58px !important;
  margin: 0 0 14px !important;
  padding: 10px 14px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 44%),
    linear-gradient(145deg, #344d77 0%, #23395f 52%, #19294a 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -4px 8px rgba(3,8,22,.36),
    0 3px 0 #101a30,
    0 6px 12px rgba(0,0,0,.28) !important;
}
html body #offerModal#offerModal .vip-showcase-title::before {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  inset: 1px 10px auto !important;
  width: auto !important;
  height: 1px !important;
  border: 0 !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.64), transparent) !important;
  opacity: .9 !important;
  animation: none !important;
}
html body #offerModal#offerModal .vip-showcase-title::after {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  inset: auto 17% 4px !important;
  width: auto !important;
  height: 2px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: linear-gradient(90deg, transparent, rgba(126,190,255,.88), rgba(255,255,255,.9), rgba(126,190,255,.88), transparent) !important;
  box-shadow: 0 0 9px rgba(105,174,255,.5) !important;
  opacity: .75 !important;
  animation: none !important;
}
html body #offerModal#offerModal .vip-showcase-title span.vip-title-gradient {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  color: #fff !important;
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  font-size: clamp(14px, 4.6vw, 18px) !important;
  font-weight: 800 !important;
  letter-spacing: .015em !important;
  line-height: 1.18 !important;
  text-align: center !important;
  white-space: normal !important;
  text-wrap: balance !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.72), 0 2px 0 rgba(87,107,145,.72), 0 3px 5px rgba(0,0,0,.42) !important;
  filter: none !important;
}