/* BrowseOnix Light Theme — overrides compiled Tailwind dark classes */

/* === Kill dark body gradient === */
body {
  background-color: #f5f5f7 !important;
  background-image: none !important;
}

/* === Background surfaces === */
.bg-dark-bg {
  background-color: #f5f5f7 !important;
}
.bg-dark-card {
  background-color: #ffffff !important;
}
.bg-dark-elevated {
  background-color: #f0f0f2 !important;
}

/* Header translucent bg */
.bg-dark-bg\/95 {
  background-color: rgba(245, 245, 247, 0.97) !important;
}

/* Rank badge bg */
.bg-white\/80 {
  background-color: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(4px) !important;
}

/* === Text colors === */
.text-heading {
  color: #1a1a2e;
}
.text-txt-secondary {
  color: #4a4a5a !important;
}
.text-txt-muted {
  color: #8a8a9a !important;
}
.text-accent {
  color: #7c3aed !important;
}

/* === Borders === */
.border-border {
  border-color: #e5e5ea !important;
}
.border-border-hover {
  border-color: #d0d0d5 !important;
}
.hover\:border-border-hover:hover {
  border-color: #c0c0c8 !important;
}

/* === Accent bg overrides === */
.bg-accent {
  background-color: #7c3aed !important;
  color: #ffffff !important;
}
.bg-accent\/10 {
  background-color: rgba(124, 58, 237, 0.08) !important;
}
.hover\:bg-accent\/10:hover {
  background-color: rgba(124, 58, 237, 0.12) !important;
}
.hover\:bg-accent\/20:hover {
  background-color: rgba(124, 58, 237, 0.15) !important;
}

/* Ring accent */
.ring-accent\/40 {
  --tw-ring-color: rgba(124, 58, 237, 0.2) !important;
}

/* Border accent */
.border-accent\/30 {
  border-color: rgba(124, 58, 237, 0.4) !important;
}

/* === Buttons — Visit Site is FILLED, Read Review is outline === */
.btn-primary {
  background-color: #7c3aed !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  transition: background-color 0.15s ease, transform 0.1s ease !important;
}
.btn-primary:hover {
  background-color: #6d28d9 !important;
  transform: translateY(-1px);
}

.btn-outline {
  background-color: transparent !important;
  color: #4a4a5a !important;
  border: 1px solid #d0d0d5 !important;
  border-radius: 10px !important;
}
.btn-outline:hover {
  color: #1a1a2e !important;
  border-color: #b0b0b8 !important;
  background-color: #f5f5f7 !important;
}

.btn-ghost {
  color: #1a1a2e !important;
  font-weight: 500 !important;
}
.btn-ghost:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
  color: #7c3aed !important;
}

/* === Input === */
.input-dark {
  background-color: #f0f0f2 !important;
  border: 1px solid #e5e5ea !important;
  color: #1a1a2e !important;
}
.input-dark::placeholder {
  color: #8a8a9a !important;
}
.input-dark:focus {
  background-color: #ffffff !important;
  border-color: #7c3aed !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1) !important;
}

/* === Cards — stronger shadows, reduced radius, hover lift === */
.card {
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease !important;
}
.card:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04) !important;
  transform: translateY(-2px) !important;
}

/* Cards with rounded-2xl — override to 12px */
.rounded-2xl {
  border-radius: 12px !important;
}
.rounded-xl {
  border-radius: 10px !important;
}

/* === Header — add shadow === */
header.sticky {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

/* === Shadow glow (logo) === */
.shadow-glow {
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.25) !important;
}

/* === Hover backgrounds === */
.hover\:bg-black\/\[0\.04\]:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
}

/* === Gradient override (hero section) — purple instead of pink === */
.from-accent\/\[0\.06\] {
  --tw-gradient-from: rgba(124, 58, 237, 0.04) !important;
}
.bg-accent\/\[0\.04\] {
  background-color: rgba(124, 58, 237, 0.03) !important;
}

/* === Category page — Visit Site button (outline variant used there) === */
a[href^="/go/"] {
  background-color: #7c3aed !important;
  color: #ffffff !important;
  border-color: #7c3aed !important;
  font-weight: 600 !important;
}
a[href^="/go/"]:hover {
  background-color: #6d28d9 !important;
  border-color: #6d28d9 !important;
}

/* === Scrollbar === */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f5f5f7;
}
::-webkit-scrollbar-thumb {
  background: #d0d0d5;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #b0b0b5;
}

/* === Details/FAQ summary === */
details summary {
  color: #1a1a2e;
}

/* === Footer === */
footer.border-t {
  border-color: #e5e5ea !important;
}
footer a {
  transition: color 0.15s ease;
}

/* === Focus visible === */
*:focus-visible {
  outline-color: #7c3aed !important;
}

/* === Hover text-heading === */
.hover\:text-heading:hover {
  color: #1a1a2e !important;
}

/* === Selection === */
::selection {
  background-color: rgba(124, 58, 237, 0.15);
  color: #1a1a2e;
}

/* === Badge tags — proper styling on light bg === */
span[class*="bg-purple-400"] {
  background-color: rgba(124, 58, 237, 0.08) !important;
  color: #6d28d9 !important;
}
span[class*="bg-blue-400"] {
  background-color: rgba(59, 130, 246, 0.08) !important;
  color: #2563eb !important;
}
span[class*="bg-green-400"] {
  background-color: rgba(16, 185, 129, 0.08) !important;
  color: #047857 !important;
}
span[class*="bg-amber-400"] {
  background-color: rgba(245, 158, 11, 0.08) !important;
  color: #b45309 !important;
}
span[class*="bg-cyan-400"] {
  background-color: rgba(6, 182, 212, 0.08) !important;
  color: #0e7490 !important;
}

/* === Gray stars (empty rating) === */
.text-gray-300 {
  color: #d0d0d5 !important;
}