/* ROO$TER — Ayrshare social linking page theme (Max Pack custom CSS)
   Brand lock: Onyx #0B0B0C / Gold #C8A24B / Champagne #E4C87E / Ivory #F5F1E8 / Graphite #1C1C1E
   Fonts: Cormorant Garamond (display) + Manrope (body)
   Only documented class hooks used (contract selectors). */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Manrope:wght@500;600;700;800&display=swap');

/* Page — CSS file forces the light scheme, so paint EVERYTHING dark ourselves */
.main-content {
  background: #0B0B0C !important;
  min-height: 100vh;
  font-family: 'Manrope', -apple-system, sans-serif !important;
}
.main-content, .main-content p, .main-content span, .main-content li, .main-content div {
  color: #F5F1E8;
}

/* Header */
.heading-social-accounts {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  color: #F5F1E8 !important;
  font-weight: 700 !important;
  font-size: 2rem !important;
  letter-spacing: 0.5px;
}
.additional-info, .additional-info-text {
  color: #E4C87E !important;
  font-family: 'Manrope', sans-serif !important;
}
.additional-info a, .troubleshooting-guide, .troubleshooting-guide a {
  color: #C8A24B !important;
}

/* Cards */
.social-account-card {
  background: #1C1C1E !important;
  border: 1px solid rgba(200, 162, 75, 0.35) !important;
  border-radius: 14px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  /* status pill ("Connected") reads gold-on-onyx */
  --ayr-pill-bg: #C8A24B;
  --ayr-pill-fg: #0B0B0C;
}
.social-account-name {
  color: #F5F1E8 !important;
  font-family: 'Manrope', sans-serif !important;
  font-weight: 700 !important;
}
.click-to-link {
  color: #C8A24B !important;
  font-weight: 600 !important;
}
.unlinked-card:hover {
  border-color: #C8A24B !important;
  box-shadow: 0 0 0 1px #C8A24B, 0 8px 24px rgba(200, 162, 75, 0.18) !important;
}
.connected-card {
  border-color: rgba(200, 162, 75, 0.75) !important;
}

/* Close button = gold pill */
.close-button {
  background: #C8A24B !important;
  color: #0B0B0C !important;
  font-family: 'Manrope', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.4px;
  border: none !important;
  border-radius: 999px !important;
  padding: 12px 30px !important;
  cursor: pointer;
}
.close-button:hover {
  background: #E4C87E !important;
}