/**
 * Checkout retheme for satellites only.
 * Requires: html.sat-site.sat-variant-* + --sat-accent* vars from app.js.
 * Hub (babkavps.best) is untouched — these rules never match.
 */

html.sat-site {
  background: var(--sat-bg-tint, #06080f);
}
html.sat-site body {
  background: var(--sat-bg-tint, #06080f) !important;
  font-family: var(--sat-font-body, Onest, Manrope, system-ui, sans-serif);
}
html.sat-site .backdrop {
  background:
    var(--sat-hero-mesh, none),
    radial-gradient(ellipse 46% 52% at 5% 42%, rgba(var(--sat-accent-rgb), 0.18), transparent 75%),
    radial-gradient(ellipse 52% 54% at 98% 18%, rgba(var(--sat-accent-alt-rgb), 0.14), transparent 76%) !important;
}
html.sat-site .promo {
  background: linear-gradient(
    100deg,
    rgba(var(--sat-accent-alt-rgb), 0.22),
    rgba(var(--sat-accent-rgb), 0.12) 54%,
    rgba(0, 0, 0, 0.35)
  ) !important;
  border-bottom-color: rgba(var(--sat-accent-rgb), 0.22) !important;
}
html.sat-site .promo b {
  border-color: rgba(var(--sat-accent-rgb), 0.55) !important;
  color: var(--sat-accent) !important;
  background: rgba(var(--sat-accent-rgb), 0.1) !important;
}
html.sat-site .promo a {
  color: var(--sat-accent) !important;
}

/* Header */
html.sat-site .site-header {
  background: rgba(6, 8, 15, 0.9) !important;
  border-bottom-color: rgba(var(--sat-accent-rgb), 0.2) !important;
}
html.sat-site .brand-avatar-wrap {
  background: var(--sat-logo-gradient) !important;
  box-shadow: 0 0 14px rgba(var(--sat-accent-rgb), 0.4) !important;
}
html.sat-site .text-gradient-cyan,
html.sat-site .brand-title .js-brand-primary {
  background: var(--sat-logo-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
html.sat-site .brand-domain {
  color: var(--sat-accent) !important;
  border-color: rgba(var(--sat-accent-rgb), 0.35) !important;
  background: rgba(var(--sat-accent-rgb), 0.12) !important;
}
html.sat-site .header-status {
  border-color: rgba(var(--sat-accent-rgb), 0.22) !important;
  color: rgba(255, 255, 255, 0.72) !important;
}
html.sat-site .header-status .status-dot {
  background: var(--sat-accent) !important;
  box-shadow: 0 0 8px var(--sat-accent) !important;
}
html.sat-site .nav-link:hover {
  color: var(--sat-accent) !important;
}
html.sat-site .header-auth-link {
  border-color: rgba(var(--sat-accent-rgb), 0.4) !important;
  background: linear-gradient(
    135deg,
    rgba(var(--sat-accent-rgb), 0.16),
    rgba(var(--sat-accent-alt-rgb), 0.12)
  ) !important;
  color: #ecfeff !important;
}
html.sat-site .header-auth-link--ghost {
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #e2e8f0 !important;
}
html.sat-site .header-buy-btn,
html.sat-site .babka-pay-primary,
html.sat-site .cta,
html.sat-site .m-pay-button {
  background: linear-gradient(110deg, var(--sat-accent), var(--sat-accent-alt)) !important;
  color: #041018 !important;
  box-shadow: 0 8px 24px rgba(var(--sat-accent-rgb), 0.32) !important;
  border: 0 !important;
}

/* Layout accents */
html.sat-site .eyebrow,
html.sat-site .m-kicker {
  border-color: rgba(var(--sat-accent-rgb), 0.4) !important;
  background: rgba(var(--sat-accent-rgb), 0.1) !important;
  color: var(--sat-accent) !important;
}
html.sat-site .eyebrow:before,
html.sat-site .m-kicker span {
  background: var(--sat-accent) !important;
  box-shadow: 0 0 10px var(--sat-accent) !important;
}
html.sat-site .intro h1 span,
html.sat-site .m-hero-copy em,
html.sat-site .art-copy h2 em {
  background: linear-gradient(95deg, var(--sat-accent), var(--sat-accent-alt)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
html.sat-site .benefits svg {
  color: var(--sat-accent) !important;
}
html.sat-site .mascot-card,
html.sat-site .checkout,
html.sat-site .m-pay-card,
html.sat-site .babka-pay-panel {
  border-color: rgba(var(--sat-accent-rgb), 0.35) !important;
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.35),
    0 0 40px rgba(var(--sat-accent-rgb), 0.12) !important;
}
html.sat-site .checkout-top,
html.sat-site .babka-pay-top {
  background: linear-gradient(90deg, var(--sat-accent), var(--sat-accent-alt)) !important;
}
html.sat-site .card-top-chip,
html.sat-site .art-eyebrow {
  border-color: rgba(var(--sat-accent-rgb), 0.4) !important;
  color: var(--sat-accent) !important;
}
html.sat-site .mascot-circle,
html.sat-site .emblem-wrap {
  background: var(--sat-logo-gradient) !important;
  box-shadow: 0 0 28px rgba(var(--sat-accent-rgb), 0.35) !important;
}
html.sat-site .bubble {
  border-color: var(--sat-accent) !important;
  box-shadow: 0 8px 25px rgba(var(--sat-accent-rgb), 0.25) !important;
}
html.sat-site .mascot-stats b {
  color: var(--sat-accent) !important;
}
html.sat-site .order,
html.sat-site .m-order,
html.sat-site .babka-pay-order {
  border-color: rgba(var(--sat-accent-rgb), 0.35) !important;
  background: linear-gradient(
    100deg,
    rgba(var(--sat-accent-rgb), 0.16),
    rgba(12, 18, 28, 0.9)
  ) !important;
}
html.sat-site .section-label span,
html.sat-site .babka-pay-section i {
  border-color: rgba(var(--sat-accent-rgb), 0.35) !important;
  background: rgba(var(--sat-accent-rgb), 0.12) !important;
  color: var(--sat-accent) !important;
}
html.sat-site .method.active,
html.sat-site .m-method.m-active,
html.sat-site .babka-pay-method.is-on {
  border-color: rgba(var(--sat-accent-rgb), 0.7) !important;
  background: linear-gradient(
    120deg,
    rgba(var(--sat-accent-rgb), 0.18),
    rgba(var(--sat-accent-alt-rgb), 0.12)
  ) !important;
  box-shadow: 0 0 0 1px rgba(var(--sat-accent-rgb), 0.15) !important;
}
html.sat-site .babka-pay-method.is-on:after {
  background: linear-gradient(135deg, var(--sat-accent), var(--sat-accent-alt)) !important;
}
html.sat-site .babka-pay-plan button.is-active,
html.sat-site .plan-switch button.is-active {
  /* Always rose — sat accents (cyan/green) wash out on dark panels */
  border-color: rgba(255, 90, 154, 0.85) !important;
  background: linear-gradient(
    145deg,
    rgba(228, 92, 255, 0.38),
    rgba(255, 90, 154, 0.32)
  ) !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(255, 90, 154, 0.28), 0 10px 24px rgba(200, 60, 140, 0.35) !important;
}
html.sat-site .babka-pay-plan button.is-active .plan-chip-price {
  /* Keep selected chip readable: rose/pink, not low-contrast accent-on-panel */
  color: #ffd0e4 !important;
}
html.sat-site .babka-pay-amount,
html.sat-site .babka-pay-live {
  /* amount uses gradient clip; live keeps accent */
}
html.sat-site .babka-pay-amount {
  background: linear-gradient(95deg, #f8fbff, var(--sat-accent) 55%, var(--sat-accent-alt)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
html.sat-site .babka-pay-live {
  border-color: rgba(var(--sat-accent-rgb), 0.35) !important;
  background: rgba(var(--sat-accent-rgb), 0.1) !important;
  color: var(--sat-accent) !important;
}
html.sat-site .babka-pay-live i {
  background: var(--sat-accent) !important;
  box-shadow: 0 0 10px var(--sat-accent) !important;
}
html.sat-site .babka-pay-chip {
  border-color: rgba(var(--sat-accent-rgb), 0.4) !important;
  background: rgba(var(--sat-accent-rgb), 0.12) !important;
  color: var(--sat-accent) !important;
}
html.sat-site .support-strip a,
html.sat-site .babka-pay-support a,
html.sat-site .m-support a {
  color: var(--sat-accent) !important;
}

/* Per-variant micro-tuning */
html.sat-variant-ledger-emerald .site-header {
  border-bottom-color: rgba(16, 185, 129, 0.28) !important;
}
html.sat-variant-warm-gift .babka-pay-panel,
html.sat-variant-warm-gift .checkout {
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.4), 0 0 48px rgba(255, 122, 92, 0.14) !important;
}
html.sat-variant-neon-split .header-buy-btn {
  color: #0a0a0c !important;
}
html.sat-variant-v2ray-amber body,
html.sat-variant-v2ray-amber .intro h1 {
  font-family: var(--sat-font-display, inherit);
}