/* ══════════════════════════════════════════════════════════════════════════
   Task #1381130: White text on white background + Payout ticker + Share bar

   Fix 3: Payout card avatars — colorful initials instead of black blobs
   Fix 4: Sitewide share strip — proper centering
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Fix 3: Payout Card Avatars ────────────────────────────────────────── */
/* Replace solid black (#0A0A0A) circles with varied, colorful backgrounds
   that look like proper initial avatars. Using nth-child for color rotation. */

.hp-payout-card__avatar {
  background: #047857 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  letter-spacing: 0 !important;
}

/* Color rotation using nth-child on the parent card */
.hp-payout-card:nth-child(8n+1) .hp-payout-card__avatar { background: #047857 !important; } /* emerald */
.hp-payout-card:nth-child(8n+2) .hp-payout-card__avatar { background: #1D4ED8 !important; } /* blue */
.hp-payout-card:nth-child(8n+3) .hp-payout-card__avatar { background: #7C3AED !important; } /* purple */
.hp-payout-card:nth-child(8n+4) .hp-payout-card__avatar { background: #B45309 !important; } /* amber */
.hp-payout-card:nth-child(8n+5) .hp-payout-card__avatar { background: #0E7490 !important; } /* cyan */
.hp-payout-card:nth-child(8n+6) .hp-payout-card__avatar { background: #BE185D !important; } /* pink */
.hp-payout-card:nth-child(8n+7) .hp-payout-card__avatar { background: #4338CA !important; } /* indigo */
.hp-payout-card:nth-child(8n+8) .hp-payout-card__avatar { background: #15803D !important; } /* green */

/* Ensure settlement name doesn't truncate too aggressively */
.hp-payout-card__settlement {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  line-height: 1.3 !important;
}

/* ── Fix 4: Sitewide Share Strip Centering ─────────────────────────────── */
/* The design-system.css (only loaded CSS) lacks share strip centering rules.
   These ensure proper centering at all breakpoints. */

.sr-sitewide-share-strip {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 1rem 1.5rem !important;
  background: #FFFFFF !important;
  border-top: 1px solid #E5E7EB !important;
}

.sr-sitewide-share-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

.sr-sitewide-share-text {
  font-size: 0.875rem !important;
  color: #1F2A37 !important;
  -webkit-text-fill-color: #1F2A37 !important;
  text-align: center !important;
}

.sr-sitewide-share-text strong {
  color: #0A0A0A !important;
  -webkit-text-fill-color: #0A0A0A !important;
}

/* Share buttons row centering */
.sr-sitewide-share-inner .share-btns,
.sr-sitewide-share-inner .share-buttons,
.sr-sitewide-share-inner [class*="share-btn"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

@media (max-width: 640px) {
  .sr-sitewide-share-strip {
    padding: 0.85rem 1rem !important;
  }
  .sr-sitewide-share-inner {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .sr-sitewide-share-text {
    text-align: center !important;
    font-size: 0.82rem !important;
  }
}

/* ── Additional: Ensure all homepage section text is visible on white ──── */
/* Safety net for any sections between payout ticker and final CTA */

html body .hp-sotd .section-heading,
html body .hp-sotd .section-label,
html body .hp-sotd .section-subheading,
html body .hp-steps .section-heading,
html body .hp-steps .section-label,
html body .hp-steps .section-subheading,
html body .hp-feed .section-heading,
html body .hp-categories .section-heading,
html body .hp-categories .section-label,
html body .hp-categories .section-subheading,
html body .hp-testimonials .section-heading,
html body .hp-testimonials .section-label,
html body .hp-testimonials .section-subheading,
html body .hp-pricing .section-heading,
html body .hp-pricing .section-label,
html body .hp-pricing .section-subheading,
html body .hp-stats .section-heading,
html body .hp-stats .section-label,
html body .hp-payouts .section-heading,
html body .hp-payouts .section-label,
html body .hp-payouts .section-subheading {
  color: #0A0A0A !important;
  -webkit-text-fill-color: #0A0A0A !important;
}

/* Body text in white-bg sections */
html body .hp-step__title,
html body .hp-step__desc,
html body .hp-sotd__title,
html body .hp-sotd__company,
html body .hp-testimonial-card__quote,
html body .hp-testimonial-card__name,
html body .hp-testimonial-card__location,
html body .hp-pricing-card__name,
html body .hp-pricing-card__features li,
html body .hp-payout-card__name,
html body .hp-payout-card__settlement {
  color: #1F2A37 !important;
  -webkit-text-fill-color: #1F2A37 !important;
}

/* Ensure pricing card amounts are dark */
html body .hp-pricing-card__amount {
  color: #0A0A0A !important;
  -webkit-text-fill-color: #0A0A0A !important;
}

/* Payout card amount stays emerald for emphasis */
html body .hp-payout-card__amount {
  color: #047857 !important;
  -webkit-text-fill-color: #047857 !important;
}

/* Payout card label */
html body .hp-payout-card__label {
  color: #6B7280 !important;
  -webkit-text-fill-color: #6B7280 !important;
}