/* ============================================================
   Sufouh Cyber / Sci-Fi Dark Theme
   Injected via Nginx sub_filter before </head>
   ============================================================ */

/* ========== 1. CSS Variables — Dark Cyber Theme ========== */
:root {
  --background: #070b1a;
  --foreground: #e4ecfa;
  --primary: #00d4ff;
  --primary-foreground: #070b1a;
  --secondary: #1a1f3a;
  --secondary-foreground: #c0cdf0;
  --muted: #131833;
  --muted-foreground: #6b7daa;
  --accent: #7c5cff;
  --accent-foreground: #ffffff;
  --destructive: #ff3b6e;
  --border: rgba(100, 160, 255, 0.12);
  --input: rgba(100, 160, 255, 0.08);
  --ring: #00d4ff;
  --card: rgba(15, 20, 45, 0.65);
  --card-foreground: #e4ecfa;
  --popover: rgba(20, 25, 55, 0.95);
  --popover-foreground: #e4ecfa;
  --sidebar: rgba(10, 13, 30, 0.9);
  --sidebar-foreground: #e4ecfa;
  --radius: 1rem;
}

/* ========== 2. HTML & Body — Cosmic Background ========== */
html {
  background: #070b1a;
  color-scheme: dark;
}

body {
  background: #070b1a !important;
  color: #e4ecfa !important;
  min-height: 100vh;
}

/* Animated moving gradient orbs */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 60% 45% at 15% 50%, rgba(0, 212, 255, 0.07) 0%, transparent 55%),
    radial-gradient(ellipse 50% 55% at 80% 25%, rgba(124, 92, 255, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse 45% 40% at 50% 85%, rgba(0, 212, 255, 0.04) 0%, transparent 55%),
    radial-gradient(ellipse 30% 30% at 40% 10%, rgba(99, 130, 255, 0.05) 0%, transparent 60%);
  animation: bgShift 12s ease-in-out infinite alternate;
}

@keyframes bgShift {
  0% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.05);
  }
  100% {
    opacity: 0.7;
    transform: scale(1.02);
  }
}

/* Subtle dot grid overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.025;
  background-image:
    radial-gradient(circle, rgba(0, 212, 255, 0.8) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

/* ========== 3. Header — Glass Morphism ========== */
header.fixed {
  background: rgba(10, 14, 30, 0.65) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid rgba(0, 212, 255, 0.08) !important;
}

header.fixed nav {
  background: transparent !important;
}

/* ========== 4. Hero Section — Gradient Text & Glow ========== */
/* Gradient title */
h1[class*="landing-animate"] {
  background: linear-gradient(135deg, #ffffff 0%, #80e8ff 35%, #b38fff 70%, #80e8ff 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: textShimmer 6s ease-in-out infinite alternate !important;
}

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

/* Hero subtitle */
h1[class*="landing-animate"] ~ p {
  color: #9aafd0 !important;
}

/* ========== 5. Section Headings ========== */
h2[class*="text-2xl"],
h2[class*="text-3xl"],
h2[class*="text-4xl"] {
  color: #e4ecfa !important;
  position: relative;
}

/* ========== 6. Primary Buttons — Neon Glow ========== */
button[class*="bg-primary"],
a[class*="bg-primary"] {
  background: linear-gradient(135deg, #00b8e0 0%, #00d4ff 40%, #7c5cff 100%) !important;
  box-shadow:
    0 0 20px rgba(0, 212, 255, 0.25),
    0 0 50px rgba(124, 92, 255, 0.08) !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: none !important;
}

button[class*="bg-primary"]:hover,
a[class*="bg-primary"]:hover {
  box-shadow:
    0 0 30px rgba(0, 212, 255, 0.45),
    0 0 70px rgba(124, 92, 255, 0.15) !important;
  transform: translateY(-2px) !important;
}

button[class*="bg-primary"]:active,
a[class*="bg-primary"]:active {
  transform: translateY(0) !important;
}

/* ========== 7. Outline/Secondary Buttons ========== */
button[class*="bg-background"],
a[class*="bg-background"],
button[class*="border-border"],
a[class*="border-border"] {
  border-color: rgba(0, 212, 255, 0.18) !important;
  background: rgba(20, 25, 55, 0.4) !important;
  backdrop-filter: blur(8px) !important;
  color: #c0cdf0 !important;
  transition: all 0.3s ease !important;
}

button[class*="bg-background"]:hover,
a[class*="bg-background"]:hover,
button[class*="border-border"]:hover,
a[class*="border-border"]:hover {
  border-color: rgba(0, 212, 255, 0.4) !important;
  background: rgba(30, 35, 65, 0.6) !important;
  box-shadow: 0 0 25px rgba(0, 212, 255, 0.1) !important;
  color: #e4ecfa !important;
}

/* ========== 8. Navigation Links ========== */
nav a[class*="text-foreground"],
nav a:not([class*="bg-"]) {
  color: #8a9fc0 !important;
  transition: all 0.3s ease !important;
}

nav a:hover:not([class*="bg-"]) {
  color: #00d4ff !important;
  text-shadow: 0 0 12px rgba(0, 212, 255, 0.3);
}

nav a[class*="border-blue"] {
  color: #00d4ff !important;
  border-color: #00d4ff !important;
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

/* ========== 9. Cards / Panels — Glass Panels ========== */
section[class*="border-border"] {
  border-color: rgba(0, 212, 255, 0.08) !important;
}

div[class*="rounded"][class*="border"]:not(button):not(a) {
  background: rgba(18, 22, 48, 0.5) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-color: rgba(0, 212, 255, 0.1) !important;
  transition: all 0.35s ease !important;
}

div[class*="rounded"][class*="border"]:not(button):not(a):hover {
  border-color: rgba(0, 212, 255, 0.25) !important;
  box-shadow: 0 0 35px rgba(0, 212, 255, 0.08), 0 8px 32px rgba(0, 0, 0, 0.3) !important;
  transform: translateY(-2px);
}

/* ========== 10. Pricing Cards — Elevated Glow ========== */
div[class*="rounded"]:has(h3) {
  position: relative;
  overflow: hidden;
}

div[class*="rounded"]:has(h3)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.4), rgba(124, 92, 255, 0.4), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

div[class*="rounded"]:has(h3):hover::before {
  opacity: 1;
}

/* ========== 11. Feature Icons / Badges ========== */
div[class*="from-muted"] {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.12), rgba(124, 92, 255, 0.08)) !important;
  border-color: rgba(0, 212, 255, 0.15) !important;
}

/* ========== 12. Footer ========== */
footer {
  background: rgba(10, 14, 30, 0.75) !important;
  border-top: 1px solid rgba(0, 212, 255, 0.08) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

footer * {
  color: #8a9fc0 !important;
}

footer a:hover {
  color: #00d4ff !important;
}

/* ========== 13. Scrollbar ========== */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #0b0f20;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #00d4ff, #7c5cff);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #40e0ff, #9c80ff);
}

/* ========== 14. Text Selection ========== */
::selection {
  background: rgba(0, 212, 255, 0.25);
  color: #ffffff;
}

::-moz-selection {
  background: rgba(0, 212, 255, 0.25);
  color: #ffffff;
}

/* ========== 15. Input Fields ========== */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  background: rgba(20, 25, 55, 0.5) !important;
  border-color: rgba(0, 212, 255, 0.12) !important;
  color: #e4ecfa !important;
}

input:focus:not([type="checkbox"]):not([type="radio"]),
textarea:focus,
select:focus {
  border-color: rgba(0, 212, 255, 0.4) !important;
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.1) !important;
  outline: none !important;
}

/* ========== 16. Tables ========== */
table {
  border-color: rgba(0, 212, 255, 0.08) !important;
}

th {
  background: rgba(20, 25, 55, 0.5) !important;
  color: #a0b8e0 !important;
  font-weight: 600 !important;
}

td {
  border-color: rgba(0, 212, 255, 0.06) !important;
}

tr:hover td {
  background: rgba(0, 212, 255, 0.03) !important;
}

/* ========== 17. Tabs ========== */
button[class*="border-b-2"]:not([class*="border-blue"]) {
  color: #6b7daa !important;
  border-color: transparent !important;
}

button[class*="border-b-2"]:hover:not([class*="border-blue"]) {
  color: #a0b8e0 !important;
}

button[class*="border-blue"] {
  border-color: #00d4ff !important;
  color: #00d4ff !important;
}

/* ========== 18. Divider Lines ========== */
hr, [class*="border-t"], [class*="border-b"], [class*="border-l"], [class*="border-r"] {
  border-color: rgba(0, 212, 255, 0.08) !important;
}

/* ========== 19. Tooltips / Popovers ========== */
[class*="popover"],
[role="tooltip"] {
  background: rgba(20, 25, 55, 0.95) !important;
  border: 1px solid rgba(0, 212, 255, 0.12) !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 212, 255, 0.05) !important;
}

/* ========== 20. Code Blocks / Pre ========== */
code, pre {
  background: rgba(15, 20, 45, 0.7) !important;
  border: 1px solid rgba(0, 212, 255, 0.1) !important;
  color: #80e8ff !important;
}

/* ========== 21. Links (general) ========== */
a[href]:not([class*="bg-"]):not(nav a) {
  color: #80d8ff !important;
  transition: color 0.3s ease !important;
}

a[href]:not([class*="bg-"]):not(nav a):hover {
  color: #00d4ff !important;
}

/* ========== 22. Logo glow ========== */
header img[alt="logo"] {
  filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.3));
  transition: filter 0.3s ease;
}

header img[alt="logo"]:hover {
  filter: drop-shadow(0 0 16px rgba(0, 212, 255, 0.5));
}

/* ========== 23. Theme toggle / Language button ========== */
button[aria-label*="theme" i],
button[aria-expanded] {
  color: #8a9fc0 !important;
  transition: all 0.3s ease !important;
}

button[aria-label*="theme" i]:hover,
button[aria-expanded]:hover {
  color: #00d4ff !important;
  background: rgba(0, 212, 255, 0.08) !important;
}

/* Force center alignment for custom footer text on all screen sizes */
footer .custom-footer {
  text-align: center !important;
  width: 100% !important;
}
footer > div > div {
  justify-content: center !important;
}