@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&family=Outfit:wght@300;400;500;600;700;800&family=Pacifico&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  /* Primary Colors */
  --color-primary: #FF9F1C;
  --color-primary-rgb: 255, 159, 28;
  --color-secondary: #2A9D8F;
  --color-secondary-rgb: 42, 157, 143;
  --color-accent: #4F46E5;
  --color-accent-rgb: 79, 70, 229;
  
  /* Light Theme Specifics */
  --bg-site: #f8fafc;
  --bg-card: rgba(255, 255, 255, 0.7);
  --bg-card-hover: rgba(255, 255, 255, 0.9);
  --text-main: #0f172a;
  --text-muted: #475569;
  --text-inverse: #ffffff;
  --border-light: rgba(241, 245, 249, 0.8);
  --border-card: rgba(226, 232, 240, 0.8);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.04);
}

.dark {
  /* Dark Theme Specifics */
  --bg-site: #0b0f19;
  --bg-card: rgba(15, 23, 42, 0.6);
  --bg-card-hover: rgba(30, 41, 59, 0.7);
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-inverse: #0f172a;
  --border-light: rgba(30, 41, 59, 0.5);
  --border-card: rgba(255, 255, 255, 0.05);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
  --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* Global Styles */
body {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  background-color: var(--bg-site);
  color: var(--text-main);
  transition: background-color 0.3s ease, color 0.3s ease;
  overflow-x: hidden;
}

/* Arabic typography overrides */
html[lang="ar"] body {
  font-family: 'Cairo', 'Inter', sans-serif;
}

/* Headings typography */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  color: var(--text-main);
  transition: color 0.3s ease;
}

html[lang="ar"] h1, 
html[lang="ar"] h2, 
html[lang="ar"] h3, 
html[lang="ar"] h4, 
html[lang="ar"] h5, 
html[lang="ar"] h6 {
  font-family: 'Cairo', sans-serif;
}

/* Logo font */
.font-logo {
  font-family: 'Pacifico', cursive;
}

/* Language Visibility Toggles */
html[lang="en"] .lang-ar {
  display: none !important;
}

html[lang="ar"] .lang-en {
  display: none !important;
}

/* Glassmorphism Panel styles */
.glass-panel {
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-glass);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-panel-hover:hover {
  background: var(--bg-card-hover);
  border-color: rgba(var(--color-primary-rgb), 0.3);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px -10px rgba(var(--color-primary-rgb), 0.15);
}

/* Glowing blurred background blobs for depth */
.glow-blob {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.12;
  z-index: 0;
  pointer-events: none;
  animation: float-blob 20s infinite alternate;
}

.glow-blob.primary {
  background: var(--color-primary);
}

.glow-blob.secondary {
  background: var(--color-secondary);
}

.glow-blob.accent {
  background: var(--color-accent);
}

@keyframes float-blob {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(80px, -50px) scale(1.15);
  }
  100% {
    transform: translate(-40px, 60px) scale(0.9);
  }
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-site);
}

::-webkit-scrollbar-thumb {
  background: var(--text-muted);
  border-radius: 9999px;
  border: 2px solid var(--bg-site);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

/* Hide scrollbar utility */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Floating label/modern inputs styling */
.form-group {
  position: relative;
}

.form-input {
  background: transparent;
  color: var(--text-main);
  border: 1px solid var(--border-card);
  transition: all 0.3s ease;
}

.form-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
  outline: none;
}

/* Service step connector overrides for RTL */
html[lang="ar"] .process-card::before {
  left: -30px;
  right: auto;
}