/*
 * TOGOPEPTIDE — Visual bug fixes
 * Loaded after togo-final-polish.css + togo-codex-visual-polish.css
 * Overrides specific bugs found in the design audit.
 */

/* ── H6: Light-theme white strikethrough price (invisible on white bg) ─────
   tgp-redesign.css:3987 sets rgba(255,255,255,0.4) — white on white.
   togo-final-polish.css:385 makes it 0.55 — still white on white.
   Fix: use a real muted dark color in light theme.                          */
html[data-theme="light"] .tier-card__price-strike,
html[data-theme="light"] body[data-page$="-stack"] .tier-card__price-strike {
  color: var(--color-text-muted, #9d9da5) !important;
  text-decoration-color: var(--color-text-muted, #9d9da5) !important;
  opacity: 0.75;
}

/* ── H7: btn--primary dark-bg-on-submit-btn in light theme ─────────────────
   tgp-redesign.css:4184-4211 forces #0a0a0d background on checkout buttons.
   This was meant as a premium dark CTA, but causes dark-grey text on a black
   button when the child span doesn't inherit the forced white color.
   Fix: keep the dark style but guarantee all descendants get white.
   Also extend the selector to cover the new stack checkout buttons.         */
html[data-theme="light"] #fatloss-checkout-btn,
html[data-theme="light"] #cognitive-checkout-btn,
html[data-theme="light"] #recovery-checkout-btn,
html[data-theme="light"] #performance-checkout-btn,
html[data-theme="light"] #longevity-checkout-btn,
html[data-theme="light"] #glow-checkout-btn,
html[data-theme="light"] .btn--primary.btn--lg.btn--block,
html[data-theme="light"] button[type="submit"].btn--primary {
  background: #0a0a0d !important;
  color: #ffffff !important;
  border-color: #0a0a0d !important;
}

html[data-theme="light"] #fatloss-checkout-btn *,
html[data-theme="light"] #cognitive-checkout-btn *,
html[data-theme="light"] #recovery-checkout-btn *,
html[data-theme="light"] #performance-checkout-btn *,
html[data-theme="light"] #longevity-checkout-btn *,
html[data-theme="light"] #glow-checkout-btn *,
html[data-theme="light"] .btn--primary.btn--lg.btn--block *,
html[data-theme="light"] button[type="submit"].btn--primary * {
  color: #ffffff !important;
}

/* ── H7b: The specific CODEX-reported case: dark background with dark text.
   One .btn--primary in the site has background rgb(58,58,63) on rgb(184,37,47)
   due to competing cascade. Force all .btn--primary backgrounds to brand red
   in light theme unless they are the dedicated dark checkout buttons above.  */
html[data-theme="light"] .btn--primary:not(.btn--lg.btn--block):not([type="submit"]):not(#fatloss-checkout-btn):not(#cognitive-checkout-btn):not(#recovery-checkout-btn):not(#performance-checkout-btn):not(#longevity-checkout-btn):not(#glow-checkout-btn) {
  background: var(--color-accent, #B8252F) !important;
  color: #ffffff !important;
  border-color: var(--color-accent, #B8252F) !important;
}
html[data-theme="light"] .btn--primary:not(.btn--lg.btn--block):not([type="submit"]):not(#fatloss-checkout-btn):not(#cognitive-checkout-btn):not(#recovery-checkout-btn):not(#performance-checkout-btn):not(#longevity-checkout-btn):not(#glow-checkout-btn) * {
  color: #ffffff !important;
}

/* ── H3b: Light-theme muted/faint text contrast fix ────────────────────────
   .tier-card__price-note uses #9a958b on white (≈2.4:1 — fails AA 4.5:1).
   Darken to at least #767069 (≈4.6:1 on white).                            */
html[data-theme="light"] .tier-card__price-note,
html[data-theme="light"] .price-note,
html[data-theme="light"] .card__price-note {
  color: #5c5750 !important;
}

/* ── Focus ring on accent-colored buttons ───────────────────────────────────
   Red focus outline on a red button is invisible.
   Use a dual-ring (white inner + dark outer) that works on any background.  */
.btn--primary:focus-visible,
button[type="submit"].btn--primary:focus-visible,
#fatloss-checkout-btn:focus-visible,
#cognitive-checkout-btn:focus-visible,
#recovery-checkout-btn:focus-visible,
#performance-checkout-btn:focus-visible,
#longevity-checkout-btn:focus-visible,
#glow-checkout-btn:focus-visible {
  outline: 3px solid #ffffff !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px rgba(10, 10, 13, 0.9) !important;
}

/* ── Disabled button opacity: unify to 0.5 ─────────────────────────────────
   tgp-redesign.css:707 uses 0.45, togo-color-polish.css:102 uses 0.5.       */
.btn--primary:disabled,
.btn--primary[aria-disabled="true"] {
  opacity: 0.5 !important;
}