/**
 * Connect / pay modal — per-satellite look (not babkavps pink/cyan clone).
 * Requires: html.sat-site.sat-variant-* and --sat-accent* CSS vars.
 */

/* ——— Base: kill main fuchsia utilities on satellites ——— */
html.sat-site #connectModalCard.pay-modal-card {
  border-radius: 1.25rem;
  border: 1px solid rgba(var(--sat-accent-rgb, 255, 122, 92), 0.4) !important;
  background: linear-gradient(165deg, rgba(12, 12, 16, 0.98), rgba(6, 6, 10, 0.96)) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 0 40px rgba(var(--sat-accent-rgb), 0.18) !important;
}
html.sat-site #connectModalTitle {
  color: #f8fafc !important;
  background: linear-gradient(92deg, var(--sat-accent), var(--sat-accent-alt));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html.sat-site #selectedPlan {
  color: var(--sat-accent) !important;
}
html.sat-site #connectPlanPicker {
  border-color: rgba(var(--sat-accent-rgb), 0.22) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.25)) !important;
  box-shadow: none !important;
}
html.sat-site .connect-trial-block {
  border-color: rgba(var(--sat-accent-rgb), 0.42) !important;
  background: linear-gradient(
    145deg,
    rgba(var(--sat-accent-rgb), 0.16),
    rgba(8, 10, 14, 0.9) 55%,
    rgba(var(--sat-accent-alt-rgb), 0.1)
  ) !important;
  box-shadow: 0 0 28px rgba(var(--sat-accent-rgb), 0.14) !important;
}
html.sat-site .connect-trial-block .text-cyan-300\/95,
html.sat-site .connect-trial-block [class*="text-cyan"] {
  color: rgba(var(--sat-accent-alt-rgb), 0.95) !important;
}
html.sat-site .connect-trial-btn {
  border-color: rgba(var(--sat-accent-rgb), 0.7) !important;
  background: linear-gradient(105deg, var(--sat-accent), var(--sat-accent-alt)) !important;
  color: #0a0a0c !important;
  box-shadow: 0 0 22px rgba(var(--sat-accent-rgb), 0.35) !important;
}
html.sat-site .connect-trial-divider span.h-px {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--sat-accent-rgb), 0.35),
    transparent
  ) !important;
}
html.sat-site .connect-plan-picker-pay-btn,
html.sat-site #connectPlanPickerContinue {
  background: linear-gradient(105deg, var(--sat-accent), var(--sat-accent-alt)) !important;
  border: 0 !important;
  color: #0a0a0c !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 28px rgba(var(--sat-accent-rgb), 0.28) !important;
}
html.sat-site .connect-plan-option--selected {
  border-color: transparent !important;
  animation: none !important;
}
html.sat-site .connect-plan-option--selected::before {
  background: linear-gradient(
    125deg,
    var(--sat-accent),
    var(--sat-accent-alt),
    var(--sat-accent)
  ) !important;
  background-size: 220% 220% !important;
  animation: sat-connect-shimmer 3.2s ease infinite !important;
}
@keyframes sat-connect-shimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
html.sat-site #connectPayFlow {
  border-color: rgba(var(--sat-accent-rgb), 0.22) !important;
}
html.sat-site .pay-step-item--current .pay-step-bubble,
html.sat-site .pay-stepper-progress {
  background: linear-gradient(105deg, var(--sat-accent), var(--sat-accent-alt)) !important;
}

/* Plan grid fallback when theme-v2 stack not loaded (vpx/v2ray/vpscloud) */
html.sat-site .connect-plan-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}
@media (min-width: 640px) {
  html.sat-site .connect-plan-picker-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
html.sat-site .connect-plan-option {
  border-radius: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  padding: 0.75rem 0.85rem;
  cursor: pointer;
  text-align: left;
}
html.sat-site .connect-plan-option--featured {
  border-color: rgba(var(--sat-accent-alt-rgb), 0.45);
}

/* ——— happ.gifts — warm coral / soft gift ——— */
html.sat-variant-warm-gift #connectModalCard.pay-modal-card {
  border-radius: 1.6rem;
  background:
    radial-gradient(ellipse 80% 50% at 10% 0%, rgba(255, 122, 92, 0.14), transparent 55%),
    linear-gradient(165deg, #14100f, #0a0808) !important;
  border-color: rgba(255, 122, 92, 0.45) !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55), 0 0 48px rgba(255, 122, 92, 0.16) !important;
}
html.sat-variant-warm-gift .connect-trial-btn {
  border-radius: 999px !important;
  color: #1a0c08 !important;
}
html.sat-variant-warm-gift .connect-plan-option {
  border-radius: 1.1rem;
}
html.sat-variant-warm-gift .connect-plan-option--featured {
  border-color: rgba(94, 234, 174, 0.55) !important;
  box-shadow: 0 0 20px rgba(94, 234, 174, 0.12);
}
html.sat-variant-warm-gift .connect-plan-option--featured .connect-plan-option__price {
  color: #5eeaae !important;
}

/* ——— happ.finance — emerald ledger (not main pink) ——— */
html.sat-variant-ledger-emerald #connectModalCard.pay-modal-card,
html.sat-variant-neon-finance #connectModalCard.pay-modal-card,
html.sat-variant-gold-ledger #connectModalCard.pay-modal-card {
  border-radius: 0.75rem;
  background:
    linear-gradient(180deg, rgba(16, 185, 129, 0.08), transparent 40%),
    linear-gradient(165deg, #0a1210, #050a08) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(234, 179, 8, 0.12) !important;
}
html.sat-variant-ledger-emerald .connect-trial-btn,
html.sat-variant-neon-finance .connect-trial-btn,
html.sat-variant-gold-ledger .connect-trial-btn {
  border-radius: 0.55rem !important;
  color: #041510 !important;
}
html.sat-variant-ledger-emerald .connect-plan-option,
html.sat-variant-neon-finance .connect-plan-option,
html.sat-variant-gold-ledger .connect-plan-option {
  border-radius: 0.55rem;
  font-variant-numeric: tabular-nums;
}
html.sat-variant-ledger-emerald .connect-plan-option--featured,
html.sat-variant-neon-finance .connect-plan-option--featured,
html.sat-variant-gold-ledger .connect-plan-option--featured {
  border-color: rgba(234, 179, 8, 0.55) !important;
}
html.sat-variant-ledger-emerald .connect-plan-option--featured .connect-plan-option__price,
html.sat-variant-neon-finance .connect-plan-option--featured .connect-plan-option__price,
html.sat-variant-gold-ledger .connect-plan-option--featured .connect-plan-option__price {
  color: #fbbf24 !important;
}

/* ——— vpxhapp.click — electric lime / blue ——— */
html.sat-variant-neon-split #connectModalCard.pay-modal-card {
  border-radius: 1rem;
  background:
    radial-gradient(ellipse 70% 45% at 90% 0%, rgba(163, 230, 53, 0.12), transparent 50%),
    linear-gradient(165deg, #0c1018, #070b12) !important;
  border-color: rgba(163, 230, 53, 0.4) !important;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.55), 0 0 36px rgba(59, 130, 246, 0.15) !important;
}
html.sat-variant-neon-split #connectModalTitle {
  background: linear-gradient(92deg, #a3e635, #60a5fa) !important;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html.sat-variant-neon-split .connect-trial-btn {
  border-radius: 0.65rem !important;
  background: linear-gradient(105deg, #a3e635, #38bdf8) !important;
  color: #0a1208 !important;
}
html.sat-variant-neon-split .connect-plan-option--selected::before {
  background: linear-gradient(125deg, #a3e635, #3b82f6, #a3e635) !important;
}

/* ——— v2ray.sale — amber terminal ——— */
html.sat-variant-v2ray-amber #connectModalCard.pay-modal-card {
  border-radius: 0.4rem;
  font-family: "IBM Plex Sans", "Manrope", sans-serif;
  background:
    linear-gradient(180deg, rgba(251, 191, 36, 0.07), transparent 35%),
    #0b0e12 !important;
  border: 1px solid rgba(251, 191, 36, 0.38) !important;
  box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.12), 0 22px 50px rgba(0, 0, 0, 0.55) !important;
}
html.sat-variant-v2ray-amber #connectModalTitle {
  font-family: "Exo 2", "Rajdhani", sans-serif;
  letter-spacing: 0.02em;
  background: linear-gradient(92deg, #fbbf24, #f97316) !important;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html.sat-variant-v2ray-amber .connect-trial-btn {
  border-radius: 0.25rem !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.92rem !important;
  color: #1a1005 !important;
}
html.sat-variant-v2ray-amber .connect-plan-option {
  border-radius: 0.25rem;
}
html.sat-variant-v2ray-amber .connect-plan-option--selected::before {
  background: linear-gradient(125deg, #fbbf24, #f97316, #fbbf24) !important;
}

/* ——— vpscloud.vip — soft sky ——— */
html.sat-variant-cloud-sky #connectModalCard.pay-modal-card {
  border-radius: 1.35rem;
  background:
    radial-gradient(ellipse 85% 55% at 50% -10%, rgba(56, 189, 248, 0.16), transparent 55%),
    linear-gradient(165deg, #0a101c, #05070f) !important;
  border-color: rgba(56, 189, 248, 0.38) !important;
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.5), 0 0 40px rgba(14, 165, 233, 0.12) !important;
}
html.sat-variant-cloud-sky .connect-trial-btn {
  border-radius: 999px !important;
  color: #041018 !important;
}
html.sat-variant-cloud-sky .connect-plan-option {
  border-radius: 1rem;
}
html.sat-variant-cloud-sky .connect-plan-option--selected::before {
  background: linear-gradient(125deg, #38bdf8, #0ea5e9, #7dd3fc) !important;
}