@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  color-scheme: dark;
}

body {
  background-color: #09090b;
  color: #f4f4f5;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow-x: hidden;
}

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

::-webkit-scrollbar-track {
  background: #09090b;
}

::-webkit-scrollbar-thumb {
  background: #27272a;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #3f3f46;
}

/* Gradients and visual effects */
.glow-bg {
  background: radial-gradient(circle at 50% 0%, rgba(120, 119, 198, 0.15) 0%, rgba(9, 9, 11, 0) 70%);
}

.glass-card {
  background: rgba(24, 24, 27, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.glass-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
}

.gradient-text {
  background: linear-gradient(135deg, #ffffff 0%, #a1a1aa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-border {
  position: relative;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.02));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Language selector dropdown animation */
.lang-dropdown {
  transform-origin: top right;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.lang-dropdown.hidden {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
}

/* RTL (Right-to-Left) Support for Arabic */
html[dir="rtl"] {
  direction: rtl;
}

html[dir="rtl"] body {
  font-family: system-ui, -apple-system, 'Segoe UI', Tahoma, 'Noto Sans Arabic', sans-serif;
  text-align: right;
}

html[dir="rtl"] #lang-dropdown-menu {
  transform-origin: top left;
  right: auto !important;
  left: 0 !important;
}

html[dir="rtl"] .text-left {
  text-align: right;
}

html[dir="rtl"] .text-right {
  text-align: left;
}