/* =================================================================
   Instant Wins feature — rusboy dark brand overrides
   -----------------------------------------------------------------
   The Instant Wins banner + All Winners modal are PARENT Vue components
   (InstantWins/PrizeGroupCard.vue, InstantWinsContainer.vue,
   shared/WinnersModal.vue, shared/WinnerCard.vue). Some colors are
   hardcoded as arbitrary Tailwind utilities (bg-[#FAFAFA], text-[#D4AF37]…),
   others use semantic success/* tokens that, on this dark theme, end up
   low-contrast (light-lime text on light-lime bg).

   We can't fix them via the child @theme cascade (literal hex), and we
   must NOT recolor the success tokens globally (every badge site-wide
   would change). So we override locally, scoped to stable hooks:
     - banner:  #instant-wins-root  (Vue mount point)
     - modal:   [aria-labelledby="winners-modal-title"]  (dialog root)
   Scoping also lifts specificity above the parent utilities — no !important.

   Target: full dark surfaces + lime primary (#8ac53f) accents.
   ================================================================= */

/* =================================================================
   1. Banner — "X / Y remaining" pill
   -----------------------------------------------------------------
   Was light-lime text (success-text #b4e468) on light-lime bg
   (success-bg) → unreadable. Make it a solid lime chip with dark text
   + dark pulsing dot. Same fix covers the aggregate "… prizes remaining"
   badge, which uses the same success/* token combo.
   ================================================================= */
#instant-wins-root .bg-success-bg.text-success-text {
  background-color: var(--color-primary); /* solid lime */
  border-color: var(--color-primary);
  color: var(--color-on-primary); /* #0a0d0f — dark text */
}

/* Pulsing status dot (ping + solid spans both use bg-success) → dark on lime */
#instant-wins-root .bg-success-bg.text-success-text .bg-success {
  background-color: var(--color-on-primary);
}

/* =================================================================
   2. All Winners modal — full dark + lime accents
   -----------------------------------------------------------------
   Maps the parent's hardcoded-hex utilities to brand tokens.
   ================================================================= */

/* --- Panel / header / footer surfaces (was #FAFAFA cream) --------- */
[aria-labelledby="winners-modal-title"] .bg-\[\#FAFAFA\] {
  background-color: var(--color-background-light); /* #0d1012 — darker than cards so cards lift */
}

/* Panel container gets a real shadow + hairline edge on dark */
[aria-labelledby="winners-modal-title"] .bg-\[\#FAFAFA\].rounded-3xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
  border: 1px solid var(--color-gray-200);
}

/* --- Text that was near-black #1A1A1A → light ---------------------- */
/* Modal title + winner-name (critical: near-black was invisible on dark cards) */
[aria-labelledby="winners-modal-title"] .text-\[\#1A1A1A\] {
  color: var(--color-text-primary); /* #ecf1ed */
}

/* --- Gold accents #D4AF37 → lime primary -------------------------- */
/* Winners count + ticket # */
[aria-labelledby="winners-modal-title"] .text-\[\#D4AF37\] {
  color: var(--color-primary); /* #8ac53f */
}

/* Active pagination dot + active numbered-page button background */
[aria-labelledby="winners-modal-title"] .bg-\[\#D4AF37\] {
  background-color: var(--color-primary);
}

/* Active numbered-page button text (white → dark for contrast on lime) */
[aria-labelledby="winners-modal-title"] .bg-\[\#D4AF37\].text-white {
  color: var(--color-on-primary); /* #0a0d0f */
}

/* Focus rings (Tailwind v4 ring color var) */
[aria-labelledby="winners-modal-title"] .focus\:ring-\[\#D4AF37\]\/50:focus {
  --tw-ring-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
}

/* --- Gradients: trophy badge + hover glow (gold tints → lime) ------ */
/* Trophy icon container: from-[#D4AF37]/10 to-[#D4AF37]/5 */
[aria-labelledby="winners-modal-title"] .from-\[\#D4AF37\]\/10 {
  --tw-gradient-from: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
[aria-labelledby="winners-modal-title"] .to-\[\#D4AF37\]\/5 {
  --tw-gradient-to: color-mix(in srgb, var(--color-primary) 5%, transparent);
}
/* Card hover-glow overlay: from-[#D4AF37]/5 */
[aria-labelledby="winners-modal-title"] .from-\[\#D4AF37\]\/5 {
  --tw-gradient-from: color-mix(in srgb, var(--color-primary) 5%, transparent);
}

/* --- Scrollable winners list: dark scrollbar ---------------------- */
[aria-labelledby="winners-modal-title"] .overflow-y-auto {
  scrollbar-width: thin;
  scrollbar-color: var(--color-gray-300) transparent;
}
[aria-labelledby="winners-modal-title"] .overflow-y-auto::-webkit-scrollbar {
  width: 8px;
}
[aria-labelledby="winners-modal-title"] .overflow-y-auto::-webkit-scrollbar-track {
  background: transparent;
}
[aria-labelledby="winners-modal-title"] .overflow-y-auto::-webkit-scrollbar-thumb {
  background: var(--color-gray-300);
  border-radius: 4px;
}
[aria-labelledby="winners-modal-title"] .overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-400);
}

/* =================================================================
   3. Stats bar — AVAILABLE / WON / Progress (StatsBar.vue)
   -----------------------------------------------------------------
   Parent ships a pale amber "premium" card (rounded-2xl). Remap to
   dark surface + lime/amber accents — mirrors homepage .rb-iw-card.
   Scoped to rounded-2xl only; winner mini-cards use rounded-xl.
   ================================================================= */

#instant-wins-root div.bg-gradient-to-br.from-amber-50.to-yellow-50.border-2.border-amber-200.rounded-2xl {
  position: relative;
  overflow: hidden;
  background-image: none;
  background-color: var(--color-surface);
  border-width: 1px;
  border-color: var(--rb-hairline-strong);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.45);
}

#instant-wins-root div.bg-gradient-to-br.from-amber-50.to-yellow-50.border-2.border-amber-200.rounded-2xl::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(138, 197, 63, 0.12), transparent 70%);
  pointer-events: none;
}

/* Available icon chip */
#instant-wins-root
  div.bg-gradient-to-br.from-amber-50.to-yellow-50.border-2.border-amber-200.rounded-2xl
  .bg-emerald-50 {
  background-color: rgba(138, 197, 63, 0.12);
}

#instant-wins-root
  div.bg-gradient-to-br.from-amber-50.to-yellow-50.border-2.border-amber-200.rounded-2xl
  .border-emerald-200 {
  border-color: rgba(138, 197, 63, 0.35);
}

#instant-wins-root
  div.bg-gradient-to-br.from-amber-50.to-yellow-50.border-2.border-amber-200.rounded-2xl
  .text-emerald-600 {
  color: var(--color-primary);
}

#instant-wins-root
  div.bg-gradient-to-br.from-amber-50.to-yellow-50.border-2.border-amber-200.rounded-2xl
  .text-emerald-700 {
  color: var(--color-text-secondary);
}

/* Won icon chip */
#instant-wins-root
  div.bg-gradient-to-br.from-amber-50.to-yellow-50.border-2.border-amber-200.rounded-2xl
  .bg-amber-50 {
  background-color: color-mix(in srgb, var(--color-warning) 14%, transparent);
}

#instant-wins-root
  div.bg-gradient-to-br.from-amber-50.to-yellow-50.border-2.border-amber-200.rounded-2xl
  .border-amber-200 {
  border-color: color-mix(in srgb, var(--color-warning) 45%, transparent);
}

#instant-wins-root
  div.bg-gradient-to-br.from-amber-50.to-yellow-50.border-2.border-amber-200.rounded-2xl
  .text-amber-600 {
  color: var(--color-warning);
}

#instant-wins-root
  div.bg-gradient-to-br.from-amber-50.to-yellow-50.border-2.border-amber-200.rounded-2xl
  .text-amber-700 {
  color: var(--color-text-secondary);
}

/* Stat values — lime (available) + amber (won) */
#instant-wins-root
  div.bg-gradient-to-br.from-amber-50.to-yellow-50.border-2.border-amber-200.rounded-2xl
  .flex-1:has(.text-emerald-700)
  p.text-3xl {
  color: var(--color-primary);
}

#instant-wins-root
  div.bg-gradient-to-br.from-amber-50.to-yellow-50.border-2.border-amber-200.rounded-2xl
  .flex-1:has(.text-amber-700)
  p.text-3xl {
  color: var(--rb-amber);
}

/* Vertical divider */
#instant-wins-root
  div.bg-gradient-to-br.from-amber-50.to-yellow-50.border-2.border-amber-200.rounded-2xl
  .w-px.bg-gray-200 {
  background-color: var(--rb-hairline);
}

/* Progress row */
#instant-wins-root
  div.bg-gradient-to-br.from-amber-50.to-yellow-50.border-2.border-amber-200.rounded-2xl
  .border-t.border-gray-200 {
  border-color: var(--rb-hairline);
}

#instant-wins-root
  div.bg-gradient-to-br.from-amber-50.to-yellow-50.border-2.border-amber-200.rounded-2xl
  .flex.items-center.justify-between.text-xs.text-gray-600 {
  color: var(--color-text-secondary);
}

#instant-wins-root
  div.bg-gradient-to-br.from-amber-50.to-yellow-50.border-2.border-amber-200.rounded-2xl
  .flex.items-center.justify-between.text-xs
  .font-semibold.text-gray-900 {
  color: var(--color-text-primary);
}

#instant-wins-root
  div.bg-gradient-to-br.from-amber-50.to-yellow-50.border-2.border-amber-200.rounded-2xl
  .h-2.bg-gray-100 {
  background-color: var(--rb-surface-sunk);
  border: 1px solid var(--rb-hairline);
}

/* Progress fill — amber gradient → lime */
#instant-wins-root
  div.bg-gradient-to-br.from-amber-50.to-yellow-50.border-2.border-amber-200.rounded-2xl
  .bg-gradient-to-r.from-amber-400.via-amber-500.to-yellow-500 {
  background-image: linear-gradient(
    to right,
    var(--color-primary),
    var(--color-primary-dark)
  );
}