/* ═══════════════════════════════════════════════════════════════════════════
   Task #1381054 — CTA Button WCAG AA Contrast Fix

   Problem: #00B37D background + white text = 2.71:1 (fails AA 4.5:1)
   Fix:     #00875A background + white text = ~5.5:1 (passes AA)

   This file catches ALL inline-styled elements that hardcode #00B37D as
   a background color. The design-system.css variable was also updated,
   but 174 inline occurrences across 30 EJS templates need this override.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Inline background overrides (attribute selectors + !important) ─────── */
[style*="background:#00B37D"],
[style*="background: #00B37D"],
[style*="background-color:#00B37D"],
[style*="background-color: #00B37D"],
[style*="background:#00b37d"],
[style*="background: #00b37d"],
[style*="background-color:#00b37d"],
[style*="background-color: #00b37d"] {
  background: #00875A !important;
  background-color: #00875A !important;
}

/* ── Hover states for inline-styled buttons ────────────────────────────── */
[style*="background:#00B37D"]:hover,
[style*="background: #00B37D"]:hover,
[style*="background-color:#00B37D"]:hover,
[style*="background-color: #00B37D"]:hover,
[style*="background:#00b37d"]:hover,
[style*="background: #00b37d"]:hover,
[style*="background-color:#00b37d"]:hover,
[style*="background-color: #00b37d"]:hover {
  background: #006B4D !important;
  background-color: #006B4D !important;
}

/* ── Ensure white text on all green CTA buttons ────────────────────────── */
[style*="background:#00B37D"],
[style*="background: #00B37D"],
[style*="background-color:#00B37D"],
[style*="background-color: #00B37D"],
[style*="background:#00b37d"],
[style*="background: #00b37d"],
[style*="background-color:#00b37d"],
[style*="background-color: #00b37d"],
[style*="background:#00875A"],
[style*="background: #00875A"],
[style*="background-color:#00875A"],
[style*="background-color: #00875A"] {
  color: #FFFFFF !important;
}

/* ── Named CTA classes that may still reference old green ──────────────── */
.btn-emerald,
.btn-accent,
.cta-emerald,
.cta-primary,
.btn-cta {
  background: #00875A !important;
  background-color: #00875A !important;
  color: #FFFFFF !important;
}

.btn-emerald:hover,
.btn-accent:hover,
.cta-emerald:hover,
.cta-primary:hover,
.btn-cta:hover {
  background: #006B4D !important;
  background-color: #006B4D !important;
}

/* ── Gradient buttons with #00B37D endpoint ────────────────────────────── */
/* Catches linear-gradient buttons that use #00B37D as an endpoint */
[style*="gradient"][style*="#00B37D"],
[style*="gradient"][style*="#00b37d"] {
  background: linear-gradient(135deg, #006B4D, #00875A) !important;
  color: #FFFFFF !important;
}
[style*="gradient"][style*="#00B37D"]:hover,
[style*="gradient"][style*="#00b37d"]:hover {
  background: linear-gradient(135deg, #005A40, #006B4D) !important;
}

/* ── Paywall & mobile CTA bar overrides ────────────────────────────────── */
#srPaywallCTA,
#sr-mobile-cta-bar {
  background: linear-gradient(135deg, #006B4D, #00875A) !important;
  color: #FFFFFF !important;
}
#srPaywallCTA:hover {
  background: linear-gradient(135deg, #005A40, #006B4D) !important;
}

/* ── FOMO CTA buttons on settlement/card pages ─────────────────────────── */
.fomo-cta-btn,
[data-fomo-cta] {
  background: #00875A !important;
  color: #FFFFFF !important;
}
.fomo-cta-btn:hover,
[data-fomo-cta]:hover {
  background: #006B4D !important;
}