/*
  DJC skin for DJC_GiftArray.
  Adopt the DJM design tokens (color-3 = gold, --boxshadow, --btnshadow)
  so the component matches landing-page styling without per-page overrides.
*/

.djc-gift-array.djc {
  --ga-bg: var(--color-light, #ffffff);
  --ga-bg-selected: var(--color-light, #ffffff);
  --ga-border: var(--color-n2, #e8ecf2);
  --ga-border-hover: var(--color-3, #f9a825);
  --ga-border-selected: var(--color-3, #f9a825);
  --ga-accent: var(--color-3, #f9a825);
  --ga-accent-soft: rgba(var(--rgb-3, 249, 168, 37), 0.12);
  --ga-text: var(--text-strong, #0f172a);
  --ga-text-muted: var(--text-muted, #64748b);
  --ga-shadow-hover: var(--btnshadow, 0 4px 15px rgba(249, 168, 37, 0.3));
  --ga-shadow-selected: var(--btnshadow, 0 4px 15px rgba(249, 168, 37, 0.3));
}

.djc-gift-array.djc .djc-gift-array__match {
  background: var(--gradientX3, linear-gradient(to right, #f9a825, #ef6c00));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}