/* SocialLens shared theme
   Gen Z High-Contrast: Electric Purple → Neon Pink
   Used by: index.html, all-tools-page.html, facebook-tools/*
*/

:root {
  --ep: #6C2BFF;
  --np: #FF2FB3;
  --grad: linear-gradient(135deg, #6C2BFF 0%, #FF2FB3 100%);
  --grad-soft: linear-gradient(135deg, rgba(108, 43, 255, 0.18), rgba(255, 47, 179, 0.18));
  --bg-deep: #0d0618;
  --bg-mid: #160a28;
  --card: #1f0f38;
  --card-2: #271247;
  --border: #4a2578;
  --glow-ep: rgba(108, 43, 255, 0.45);
  --glow-np: rgba(255, 47, 179, 0.45);
}

* {
  font-family: "Roboto", system-ui, sans-serif;
}

/* —— Shared components —— */
.gradient-hero {
  background:
    radial-gradient(ellipse 80% 60% at 15% 20%, rgba(108, 43, 255, 0.45), transparent 55%),
    radial-gradient(ellipse 70% 50% at 90% 80%, rgba(255, 47, 179, 0.35), transparent 50%),
    linear-gradient(135deg, #12061f 0%, #2a0a4a 45%, #3a0a3a 100%) !important;
}

.fb-gradient {
  background: var(--grad);
}

.glass-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 47, 179, 0.2);
}

.yellow-glow {
  box-shadow: 0 0 40px var(--glow-np);
}

.card-hover {
  transition: all 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(108, 43, 255, 0.25);
}

.platform-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.nav-blur {
  background: rgba(13, 6, 24, 0.88);
  backdrop-filter: blur(14px);
}

.section-badge {
  background: var(--grad);
}

.shimmer {
  background: linear-gradient(90deg, #1f0f38 25%, #2a1450 50%, #1f0f38 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.accordion-content {
  display: none;
}

.accordion-content.open {
  display: block;
  animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.floating-card {
  animation: float 4s ease-in-out infinite;
}

.floating-card-2 {
  animation: float 4s ease-in-out infinite 1s;
}

.floating-card-3 {
  animation: float 4s ease-in-out infinite 2s;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* —— Facebook tool page —— */
.tab-btn.active {
  background: var(--grad);
  color: white;
  border-color: var(--np);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.photo-grid-item {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(108, 43, 255, 0.35), rgba(255, 47, 179, 0.35));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s;
}

.photo-grid-item:hover {
  transform: scale(1.03);
}

.reel-item {
  border-radius: 16px;
  overflow: hidden;
  background: #111;
  position: relative;
}

.reel-item .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-skeleton {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 47, 179, 0.25);
}

.cover-animated {
  background: linear-gradient(135deg, #6c2bff, #ff2fb3, #8b3dff);
  background-size: 200% 200%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* —— Remap Tailwind blues / yellows → Electric Purple / Neon Pink —— */
.bg-blue-600,
.bg-blue-500,
.bg-blue-700,
.bg-\[\#1877F2\] {
  background-image: var(--grad) !important;
  background-color: var(--ep) !important;
}

.hover\:bg-blue-700:hover,
.hover\:bg-blue-600:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 24px var(--glow-np) !important;
}

.shadow-blue-500\/30 {
  --tw-shadow-color: var(--glow-ep) !important;
}

.text-blue-600,
.text-blue-500,
.text-blue-700,
.text-blue-400,
.text-blue-300 {
  color: var(--np) !important;
}

.text-yellow-500,
.text-yellow-600 {
  color: var(--np) !important;
}

.bg-yellow-400,
.bg-yellow-500 {
  background-color: var(--np) !important;
}

.bg-yellow-50,
.bg-yellow-100 {
  background: var(--grad-soft) !important;
}

.bg-blue-50,
.bg-blue-100 {
  background: rgba(108, 43, 255, 0.15) !important;
}

.hover\:bg-blue-50:hover,
.hover\:bg-blue-900\/30:hover {
  background: rgba(108, 43, 255, 0.25) !important;
}

.hover\:text-blue-600:hover,
.hover\:text-blue-700:hover,
.hover\:text-blue-400:hover {
  color: var(--np) !important;
}

.from-purple-500 {
  --tw-gradient-from: #6c2bff !important;
}

.to-indigo-600 {
  --tw-gradient-to: #ff2fb3 !important;
}

.from-yellow-400 {
  --tw-gradient-from: #6c2bff !important;
}

.to-orange-500 {
  --tw-gradient-to: #ff2fb3 !important;
}

.hover\:bg-yellow-500:hover {
  background: var(--grad) !important;
  color: #fff !important;
}

.hover\:border-\[\#3b82f6\]:hover {
  border-color: var(--ep) !important;
}

.hover\:border-\[\#ec4899\]:hover {
  border-color: var(--np) !important;
}

.hover\:border-\[\#8b5cf6\]:hover {
  border-color: var(--ep) !important;
}

.hover\:border-\[\#f59e0b\]:hover {
  border-color: var(--np) !important;
}

.bg-blue-500\/20,
.bg-blue-600\/10 {
  background-color: rgba(108, 43, 255, 0.2) !important;
}

.bg-yellow-500\/20 {
  background-color: rgba(255, 47, 179, 0.2) !important;
}

.border-\[\#1877F2\],
.border-\[\#FF2FB3\] {
  border-color: var(--np) !important;
}

.focus\:border-blue-500:focus {
  border-color: var(--np) !important;
}

.focus\:ring-blue-500\/30:focus {
  --tw-ring-color: rgba(255, 47, 179, 0.3) !important;
}

.hover\:shadow-blue-500\/25:hover {
  box-shadow: 0 10px 25px var(--glow-np) !important;
}

/* —— Dark mode — purple-tinted surfaces —— */
html.dark body,
html.dark section,
html.dark header,
html.dark footer {
  background-color: var(--bg-deep) !important;
  background-image: none !important;
  color: #f8fafc !important;
  border: none !important;
}

html.dark section.gradient-hero {
  background:
    radial-gradient(ellipse 80% 60% at 15% 20%, rgba(108, 43, 255, 0.45), transparent 55%),
    radial-gradient(ellipse 70% 50% at 90% 80%, rgba(255, 47, 179, 0.35), transparent 50%),
    linear-gradient(135deg, #12061f 0%, #2a0a4a 45%, #3a0a3a 100%) !important;
}

html.dark section .bg-white,
html.dark section .bg-gray-50,
html.dark section .bg-gray-100,
html.dark section .bg-\[\#f0f2f5\] {
  background-color: transparent !important;
}

html.dark .bg-white,
html.dark .bg-gray-50,
html.dark .bg-gray-100,
html.dark .bg-\[\#f0f2f5\] {
  background-color: var(--bg-mid) !important;
}

html.dark .border-gray-100,
html.dark .border-gray-200 {
  border-color: transparent !important;
}

html.dark .border-b,
html.dark .border-t,
html.dark .border-l,
html.dark .border-r {
  border-color: transparent !important;
}

html.dark .rounded-3xl,
html.dark .rounded-2xl,
html.dark .rounded-xl,
html.dark .glass-card {
  background-color: var(--card) !important;
  border: 1px solid var(--border) !important;
}

html.dark .rounded-lg,
html.dark .rounded-md {
  background-color: var(--card) !important;
}

html.dark .bg-white.rounded-3xl,
html.dark .bg-white.rounded-2xl,
html.dark .bg-white.rounded-xl {
  background-color: var(--card) !important;
  border: 1px solid var(--border) !important;
}

html.dark .text-gray-900,
html.dark .text-gray-800 {
  color: #f8fafc !important;
}

html.dark .text-gray-700,
html.dark .text-gray-600 {
  color: #e9d5ff !important;
}

html.dark .text-gray-500,
html.dark .text-gray-400 {
  color: #c7d1dd !important;
}

html.dark .nav-blur {
  background: rgba(13, 6, 24, 0.92) !important;
  border-bottom: 1px solid rgba(255, 47, 179, 0.25) !important;
}

html.dark .hover\:bg-gray-50:hover,
html.dark .hover\:bg-gray-100:hover {
  background-color: rgba(108, 43, 255, 0.25) !important;
}

html.dark .hover\:text-gray-900:hover,
html.dark .hover\:text-gray-800:hover {
  color: #ffffff !important;
}

html.dark .tab-btn.active {
  background: var(--grad) !important;
  color: #ffffff !important;
  border-color: var(--np) !important;
}

html.dark .tab-content {
  background-color: var(--bg-deep) !important;
}

html.dark #cta-banner {
  background: var(--bg-deep) !important;
}

html.dark .dark-box-how-it-works {
  background-color: var(--card) !important;
  border: 1px solid var(--border) !important;
}

html.dark .dark-mockup-fix {
  background-color: var(--card) !important;
  border-color: rgba(255, 47, 179, 0.25) !important;
}

html.dark .dark-mockup-fix .bg-gray-50 {
  background-color: var(--bg-deep) !important;
}

html.dark .dashboard-text-fix {
  color: #f8fafc !important;
}

.faq-card-custom {
  background-color: #1a0b2e;
  border: 1px solid var(--border);
}

html.dark .faq-card-custom {
  background-color: var(--card-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0.5rem !important;
}

html.dark .faq-card-custom:hover {
  background-color: #32145a !important;
  border-color: var(--np) !important;
}

/* —— Hardcoded slate / surfaces → purple night —— */
.bg-\[\#0b1120\] {
  background: linear-gradient(180deg, #0d0618 0%, #1a0830 100%) !important;
}

.bg-\[\#0f172a\],
.bg-\[\#0d0618\] {
  background-color: var(--bg-deep) !important;
}

.bg-\[\#1e293b\] {
  background-color: var(--card) !important;
}

.border-\[\#334155\] {
  border-color: var(--border) !important;
}

.bg-\[\#151e32\] {
  background-color: var(--card-2) !important;
}

.border-\[\#23304c\] {
  border-color: var(--border) !important;
}

.from-\[\#1e293b\] {
  --tw-gradient-from: #1f0f38 !important;
}

.to-\[\#0f172a\],
.from-\[\#0f172a\],
.from-\[\#0d0618\] {
  --tw-gradient-from: #0d0618 !important;
}

.to-\[\#0f172a\] {
  --tw-gradient-to: #0d0618 !important;
}

footer.bg-gray-900 {
  background: linear-gradient(180deg, #12061f 0%, #1a0530 50%, #0d0618 100%) !important;
}

/* —— Related articles marquee (facebook tool pages) —— */
@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.animate-marquee-container {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}

.animate-marquee-container:hover {
  animation-play-state: paused;
}