/*
 * SharePlay PlayStudio Theme for Chatwoot Help Center (help.shareplay.tv)
 * Brand Primary: Gold Yellow (#FFD700)
 * Surface Base: Deep Dark (#030303, #0F0F0F, #121212)
 * Typography: Lato (Google Font)
 */

@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;500;600;700;900&display=swap");

:root {
  --sp-yellow: #FFD700 !important;
  --sp-yellow-hover: #E6C200 !important;
  --sp-bg-base: #030303 !important;
  --sp-bg-card: #0F0F0F !important;
  --sp-bg-elevated: #121212 !important;
  --sp-border: #262626 !important;
  --sp-border-hover: #333333 !important;
}

/* Force dark canvas over all Tailwind bg-white / light classes */
html,
html body,
html body #portal,
html body main,
html body .main-content,
html.light,
html.light body,
html.light #portal,
html.light main,
html.light .main-content {
  background-color: #030303 !important;
  color: #FFFFFF !important;
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Header & Navbar */
html body header,
html body nav,
html body .portal-header,
html.light body header,
html.light body nav {
  background-color: #0A0A0A !important;
  border-bottom: 1px solid #262626 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
}

/* All Card Containers (Override Tailwind bg-white and dark:bg-slate-900) */
html body .category-card,
html body .article-card,
html body .card,
html body div[id*="category-block"],
html body a[id*="category-block"],
html body .bg-white,
html body .bg-slate-50,
html body .dark\:bg-slate-900,
html body .dark\:bg-slate-800,
html.light body .bg-white,
html.light body .bg-slate-50 {
  background-color: #0F0F0F !important;
  border: 1px solid #262626 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Card Hover Elevation */
html body .category-card:hover,
html body .article-card:hover,
html body .card:hover,
html body div[id*="category-block"]:hover,
html body a[id*="category-block"]:hover {
  border-color: #FFD700 !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 30px rgba(255, 215, 0, 0.18), 0 0 15px rgba(255, 215, 0, 0.1) !important;
}

/* Search Bar & Inputs */
html body input[type="text"],
html body input[type="search"],
html body .search-input,
html body #search-input {
  background-color: #121212 !important;
  border: 1px solid #262626 !important;
  color: #FFFFFF !important;
  border-radius: 9999px !important;
  padding: 0.85rem 1.5rem !important;
  font-size: 0.95rem !important;
  transition: all 0.2s ease-in-out !important;
}

html body input[type="text"]:focus,
html body input[type="search"]:focus,
html body #search-input:focus {
  border-color: #FFD700 !important;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.3), 0 0 20px rgba(255, 215, 0, 0.2) !important;
  outline: none !important;
}

/* Headings & Text Color Overrides */
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body .text-slate-900,
html body .text-slate-800,
html body .text-slate-700,
html body .dark\:text-white,
html.light body .text-slate-900 {
  font-family: "Lato", sans-serif !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

/* Secondary & Muted Body Text */
html body p,
html body span,
html body li,
html body .text-slate-600,
html body .text-slate-500 {
  color: #D1D5DB !important;
}

/* Category Name & Links Accent */
html body #category-name,
html body .category-name,
html body .text-primary-500,
html body a {
  color: #FFD700 !important;
  text-decoration: none !important;
}

html body a:hover {
  color: #E6C200 !important;
}

/* Primary Action Buttons */
html body .btn-primary,
html body button[type="submit"],
html body a.bg-primary-500,
html body .bg-primary-500 {
  background-color: #FFD700 !important;
  color: #000000 !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  border: none !important;
  transition: all 0.2s ease !important;
}

html body .btn-primary:hover,
html body button[type="submit"]:hover,
html body a.bg-primary-500:hover,
html body .bg-primary-500:hover {
  background-color: #E6C200 !important;
  box-shadow: 0 4px 16px rgba(255, 215, 0, 0.35) !important;
}

/* Pills & Badges */
html body .badge,
html body .pill,
html body span[class*="rounded-full"] {
  background-color: rgba(255, 215, 0, 0.15) !important;
  color: #FFD700 !important;
  border: 1px solid rgba(255, 215, 0, 0.3) !important;
  font-weight: 600 !important;
}

/* Footer */
html body footer {
  background-color: #0A0A0A !important;
  border-top: 1px solid #262626 !important;
  color: #A1A1A1 !important;
}

/* Chatwoot Live Widget Launcher Bubble Override */
.woot-widget-bubble,
.woot-elements--bubble,
button.woot-widget-bubble,
div.woot-widget-bubble,
.woot-widget-holder .woot-widget-bubble {
  background-color: #FFD700 !important;
  color: #000000 !important;
  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.4) !important;
}

.woot-widget-bubble svg,
.woot-elements--bubble svg,
.woot-widget-bubble path,
.woot-elements--bubble path {
  fill: #000000 !important;
  stroke: #000000 !important;
  color: #000000 !important;
}