/* ============================================
   REACT APP NEON OVERRIDES
   Overrides for the Vite-built React frontend
   Kill ALL orange, hide fire icon
   ============================================ */

/* ---- Force neon background on React root ---- */
#root {
  position: relative;
  z-index: 1;
  min-height: 100vh;
}

/* ============================================
   HIDE FIRE / FLAME ICON in hero section
   ============================================ */
#root svg.lucide-flame,
#root [class*="lucide-flame"] {
  display: none !important;
}
/* But allow flame icons inside the pricing toggle */
#pricing .inline-flex svg.lucide-flame,
#pricing .inline-flex [class*="lucide-flame"] {
  display: inline-block !important;
}

/* Target the flame icon container in hero - it's typically in a centered flex div */
#root section:first-of-type .flex.justify-center > .flex.items-center.justify-center:has(svg) {
  display: none !important;
}

/* ---- Hero Section ---- */
#root section:first-of-type,
#root > div > div:first-child {
  position: relative;
}

/* ---- Pricing Cards ---- */
#root .rounded-2xl,
#root .rounded-xl {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#root .rounded-2xl:hover,
#root .rounded-xl:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.08),
              0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

/* ============================================
   KILL ALL ORANGE - Replace with neon cyan
   ============================================ */

/* ---- Text orange -> neon cyan (all shades) ---- */
#root .text-orange-300,
#root .text-orange-400,
#root .text-orange-500,
#root .text-orange-600,
#root .text-orange-700,
#root [class*="text-orange"] {
  color: #00f0ff !important;
}

/* ---- Border orange -> neon cyan (all shades) ---- */
#root .border-orange-300,
#root .border-orange-400,
#root .border-orange-500,
#root .border-orange-600,
#root [class*="border-orange"] {
  border-color: rgba(0, 240, 255, 0.3) !important;
}

/* ---- Background orange -> neon (all shades) ---- */
#root .bg-orange-300,
#root .bg-orange-400,
#root .bg-orange-500,
#root .bg-orange-600,
#root [class*="bg-orange"] {
  background: rgba(0, 240, 255, 0.15) !important;
}

/* ---- Gradient from-orange -> neon (all shades) ---- */
#root .from-orange-400,
#root .from-orange-500,
#root .from-orange-600,
#root [class*="from-orange"] {
  --tw-gradient-from: rgba(0, 240, 255, 0.2) !important;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.15), rgba(123, 45, 255, 0.15)) !important;
  border: 1px solid rgba(0, 240, 255, 0.25) !important;
  color: #00f0ff !important;
}

#root [class*="from-orange"]:hover {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.25), rgba(123, 45, 255, 0.25)) !important;
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.2),
              0 0 60px rgba(0, 240, 255, 0.1) !important;
  color: #fff !important;
}

/* ---- to-orange / to-red gradients ---- */
#root .to-orange-400,
#root .to-orange-500,
#root .to-orange-600,
#root .to-red-500,
#root .to-red-600,
#root [class*="to-orange"],
#root [class*="to-red-5"],
#root [class*="to-red-6"] {
  --tw-gradient-to: rgba(123, 45, 255, 0.2) !important;
}

/* ---- Gradient text override (DragoHost title etc) ---- */
#root .bg-gradient-to-r.from-orange-400,
#root .bg-gradient-to-r.from-orange-500,
#root .bg-gradient-to-r[class*="from-orange"],
#root .bg-clip-text[class*="from-orange"] {
  background: linear-gradient(135deg, #00f0ff, #7b2dff) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  border: none !important;
}

/* ---- Ring/glow orange -> neon ---- */
#root .ring-orange-400,
#root .ring-orange-500,
#root [class*="ring-orange"] {
  --tw-ring-color: rgba(0, 240, 255, 0.3) !important;
}

#root [class*="shadow-orange"] {
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.15) !important;
}

/* ---- Hover states orange -> neon ---- */
#root [class*="hover\\:text-orange"]:hover,
#root [class*="hover\\:border-orange"]:hover {
  color: #00f0ff !important;
  border-color: rgba(0, 240, 255, 0.5) !important;
}

#root [class*="hover\\:bg-orange"]:hover,
#root [class*="hover\\:from-orange"]:hover {
  background: rgba(0, 240, 255, 0.2) !important;
}

/* ---- Focus states orange -> neon ---- */
#root [class*="focus\\:ring-orange"]:focus,
#root [class*="focus\\:border-orange"]:focus {
  --tw-ring-color: rgba(0, 240, 255, 0.4) !important;
  border-color: rgba(0, 240, 255, 0.5) !important;
}

/* ---- Background colors ---- */
#root .bg-gray-950,
#root .bg-\[\#0a0a0f\] {
  background: #050510 !important;
}

#root .bg-gray-900 {
  background: rgba(10, 10, 30, 0.7) !important;
}

#root .bg-gray-800 {
  background: rgba(15, 15, 35, 0.6) !important;
}

/* ---- Border overrides ---- */
#root .border-gray-800 {
  border-color: rgba(0, 240, 255, 0.08) !important;
}

#root .border-gray-700 {
  border-color: rgba(0, 240, 255, 0.1) !important;
}

/* ---- Feature dots ---- */
#root [class*="bg-orange"][class*="rounded-full"] {
  background: #00f0ff !important;
  box-shadow: 0 0 6px rgba(0, 240, 255, 0.5);
}

/* ---- Nav links in React app ---- */
#root nav a {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#root nav a:hover {
  color: #00f0ff !important;
  text-shadow: 0 0 15px rgba(0, 240, 255, 0.4);
}

/* ---- Radial gradient backgrounds (only override orange-tinted ones) ---- */
#root [style*="249, 115, 22"],
#root [style*="251, 146, 60"],
#root [style*="f97316"],
#root [style*="fb923c"] {
  background: radial-gradient(ellipse at center, rgba(0, 240, 255, 0.04), transparent 70%) !important;
}

/* ---- Badge/pill overrides ---- */
#root [class*="bg-orange-500\\/"],
#root [class*="bg-orange-400\\/"] {
  background: rgba(0, 240, 255, 0.1) !important;
}

#root [class*="border-orange-500\\/"],
#root [class*="border-orange-400\\/"] {
  border-color: rgba(0, 240, 255, 0.2) !important;
}

/* ---- Red to neon red ---- */
#root .text-red-400,
#root .text-red-500 {
  color: #ff3131 !important;
}

#root .border-red-500\/30 {
  border-color: rgba(255, 49, 49, 0.3) !important;
}

/* ---- Green to neon green ---- */
#root .text-green-400,
#root .text-green-500 {
  color: #39ff14 !important;
}

/* ---- Catch-all: override inline orange styles ---- */
#root [style*="rgb(249, 115, 22)"],
#root [style*="rgb(251, 146, 60)"],
#root [style*="#f97316"],
#root [style*="#fb923c"] {
  color: #00f0ff !important;
  border-color: rgba(0, 240, 255, 0.3) !important;
}

/* ============================================
   MISSING TAILWIND CLASSES (replacements for orange)
   These classes don't exist in compiled CSS
   ============================================ */

/* ---- Hero blur glow fixes (make very subtle) ---- */
.bg-cyan-900\/3 {
  background-color: rgba(22, 78, 99, 0.03) !important;
}
.bg-purple-900\/3 {
  background-color: rgba(88, 28, 135, 0.03) !important;
}
.bg-cyan-500\/3 {
  background-color: rgba(0, 240, 255, 0.03) !important;
}
.bg-cyan-500\/5 {
  background-color: rgba(0, 240, 255, 0.05) !important;
}
.from-cyan-950\/10 {
  --tw-gradient-from: rgba(8, 51, 68, 0.1) var(--tw-gradient-from-position);
}
.from-cyan-950\/5 {
  --tw-gradient-from: rgba(8, 51, 68, 0.05) var(--tw-gradient-from-position);
}
.from-cyan-950\/20 {
  --tw-gradient-from: rgba(8, 51, 68, 0.2) var(--tw-gradient-from-position);
}
.border-cyan-500\/8 {
  border-color: rgba(0, 240, 255, 0.08) !important;
}
.border-cyan-500\/10 {
  border-color: rgba(0, 240, 255, 0.1) !important;
}
.border-cyan-500\/15 {
  border-color: rgba(0, 240, 255, 0.15) !important;
}
.border-cyan-500\/20 {
  border-color: rgba(0, 240, 255, 0.2) !important;
}
.shadow-cyan-500\/5 {
  --tw-shadow-color: rgba(0, 240, 255, 0.05);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-cyan-500\/10 {
  --tw-shadow-color: rgba(0, 240, 255, 0.1);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-cyan-500\/15 {
  --tw-shadow-color: rgba(0, 240, 255, 0.15);
  --tw-shadow: var(--tw-shadow-colored);
}
.hover\:bg-cyan-500\/5:hover {
  background-color: rgba(0, 240, 255, 0.05) !important;
}
.group:hover .group-hover\:bg-cyan-500\/5 {
  background-color: rgba(0, 240, 255, 0.05) !important;
}
.hover\:border-cyan-500\/15:hover {
  border-color: rgba(0, 240, 255, 0.15) !important;
}
.hover\:border-cyan-500\/10:hover {
  border-color: rgba(0, 240, 255, 0.1) !important;
}

/* ---- Force hero background blur elements to be very subtle ---- */
#root section:first-of-type .absolute.blur-3xl,
#root section:first-of-type .absolute.blur-xl,
#root section:first-of-type .absolute.rounded-full[class*="blur"] {
  opacity: 0.15 !important;
  background-color: rgba(0, 240, 255, 0.02) !important;
}

/* ---- Remove right-side orange/cyan stripe (scrollbar or decorative) ---- */
#root ::-webkit-scrollbar {
  width: 6px;
}
#root ::-webkit-scrollbar-track {
  background: #050510;
}
#root ::-webkit-scrollbar-thumb {
  background: rgba(0, 240, 255, 0.15);
  border-radius: 3px;
}
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #050510;
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 240, 255, 0.15);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 240, 255, 0.25);
}

/* ---- Fix gradient text for DragoHost brand ---- */
.from-cyan-400.via-purple-500.to-cyan-400 {
  background: linear-gradient(135deg, #00f0ff, #7b2dff, #00f0ff) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ---- Fix "MOST POPULAR" badge ---- */
.from-cyan-500.to-purple-600 {
  background: linear-gradient(to right, #00d4e6, #7b2dff) !important;
}

/* ---- Pricing card featured border ---- */
.border-cyan-500\/40 {
  border-color: rgba(0, 240, 255, 0.3) !important;
}

/* ---- Override compiled Tailwind orange via attribute selectors ---- */
#root [class*="orange"] {
  --tw-text-opacity: 1;
  --tw-border-opacity: 1;
}

/* ============================================
   FIX: Pricing Toggle (Budget Plans / High Performance) visibility
   The toggle container uses framer-motion with opacity:0 initial state.
   Force the toggle to be visible in the pricing section.
   ============================================ */
#pricing .inline-flex {
  display: inline-flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

#pricing .inline-flex button {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Ensure the toggle parent (flex justify-center mb-12) is visible */
#pricing > div > div:nth-child(2) {
  opacity: 1 !important;
  transform: none !important;
}

/* Fix active toggle button styling - ensure gradient shows properly */
#pricing .inline-flex button.bg-gradient-to-r {
  background: linear-gradient(to right, #00d4e6, #7b2dff) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Fix inactive toggle button text visibility */
#pricing .inline-flex button:not(.bg-gradient-to-r) {
  color: #9ca3af !important;
  -webkit-text-fill-color: #9ca3af !important;
}

#pricing .inline-flex button:not(.bg-gradient-to-r):hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}