/* Remove underline from all links */
a {
  text-decoration: none;
}

/* =========================================================
   🧱 Navbar - Dark Mode Simplified
   ========================================================= */

/* Navbar default (hero section) - دايماً أبيض */
#main-nav {
  color: #ffffff;
}

#main-nav .nav-link,
#main-nav .logo-text,
#main-nav #login-btn,
#main-nav #theme-toggle-desktop,
#main-nav #theme-toggle-mobile,
#main-nav #mobile-menu-btn {
  color: #ffffff; /* دايماً أبيض */
}

/* Navbar scrolled - في جميع الأحوال */
.nav-scrolled {
  background: var(--bg-nav);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

/* Dark Mode فقط - النص أبيض دائمًا */
.dark #main-nav,
.dark #main-nav .nav-link,
.dark #main-nav .logo-text,
.dark #main-nav #login-btn,
.dark #main-nav #theme-toggle-desktop,
.dark #main-nav #theme-toggle-mobile,
.dark #main-nav #mobile-menu-btn,
.dark .nav-scrolled,
.dark .nav-scrolled .nav-link,
.dark .nav-scrolled .logo-text,
.dark .nav-scrolled #login-btn,
.dark .nav-scrolled #theme-toggle-desktop,
.dark .nav-scrolled #theme-toggle-mobile,
.dark .nav-scrolled #mobile-menu-btn {
  color: #ffffff !important; /* أبيض في الدارك مود فقط */
}

/* Light Mode - يبقى كما هو */
html:not(.dark) .nav-scrolled,
html:not(.dark) .nav-scrolled .nav-link,
html:not(.dark) .nav-scrolled .logo-text,
html:not(.dark) .nav-scrolled #login-btn,
html:not(.dark) .nav-scrolled #theme-toggle-desktop,
html:not(.dark) .nav-scrolled #theme-toggle-mobile,
html:not(.dark) .nav-scrolled #mobile-menu-btn {
  color: #0f172a !important; /* أسود في اللايت مود */
}

/* في Dark Mode - جعل "تسوق بذكاء" أبيض */
.dark #home h1:first-child {
  color: white !important;
}

/* أو بشكل أكثر تحديداً */
.dark #home .text-black {
  color: white !important;
}

/* =========================================================
   🎨 Design Tokens (Light / Dark)
   ========================================================= */

:root {
  /* Brand */
  --primary: #008ccf;
  --primary-hover: #006b9e;

  /* Light mode */
  --bg: #f8fafc;
  --bg-card: #ffffff;
  --bg-nav: rgba(255, 255, 255, 0.85);

  --text-main: #0f172a;
  --text-muted: #475569;

  --border: #e2e8f0;
  --shadow-soft: 0 4px 30px rgba(0, 0, 0, 0.05);
}

.dark {
  /* Dark mode */
  --bg: #020617;
  --bg-card: rgba(30, 41, 59, 0.75);
  --bg-nav: rgba(2, 6, 23, 0.85);

  --text-main: #f8fafc;
  --text-muted: #94a3b8;

  --border: rgba(255, 255, 255, 0.08);
  --shadow-soft: 0 4px 30px rgba(0, 0, 0, 0.25);
}

/* =========================================================
   🌍 Global
   ========================================================= */

body {
  font-family: "Playpen Sans Arabic", cursive;
  background-color: var(--bg);
  color: var(--text-main);
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

/* =========================================================
   🧭 Scrollbar
   ========================================================= */

::-webkit-scrollbar {
  width: 8px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 10px;
}

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

/* =========================================================
   ✨ Animations
   ========================================================= */

.will-change-transform {
  will-change: transform;
}

@keyframes blob {
  0% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -50px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0, 0) scale(1); }
}

.animate-blob {
  animation: blob 7s infinite;
}

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

.animate-float-y {
  animation: float-y 4s ease-in-out infinite;
}

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

.animate-shimmer {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

/* =========================================================
   🧱 Navbar
   ========================================================= */

#main-nav {
  transition: all 0.3s ease;
  color: var(--text-main);
}

.nav-scrolled {
  background: var(--bg-nav);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

/* Nav links */
.nav-link {
  color: var(--text-main);
  font-weight: 700;
  transition: color 0.3s;
}

.nav-link:hover {
  color: var(--primary);

}

/* Active link */
.active-nav-link {
  color: var(--primary);
  font-weight: 800;
  position: relative;
}

.active-nav-link::after {
  content: "";
  position: absolute;
  bottom: -4px;
  right: 0;
  width: 100%;
  height: 3px;
  background: var(--primary);
  border-radius: 99px;
}

/* Login button */
#login-btn {
  border: 1px solid var(--border);
  color: var(--text-main);
  transition: all 0.3s;
}

#login-btn:hover {
  background: var(--text-main);
  color: var(--bg);
}

/* =========================================================
   🧩 Cards
   ========================================================= */

.modern-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.modern-card:hover {
  transform: translateY(-8px);
  border-color: var(--primary);
  box-shadow: 0 20px 40px -5px rgba(0, 140, 207, 0.25);
}

/* =========================================================
   💬 Chat Bubble
   ========================================================= */

.chat-bubble {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px 20px 2px 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.chat-bubble::before {
  content: "";
  position: absolute;
  bottom: -10px;
  right: 0;
  width: 20px;
  height: 20px;
  background: inherit;
  border-right: inherit;
  border-bottom: inherit;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* =========================================================
   👀 Reveal Animation
   ========================================================= */

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   📝 Forms
   ========================================================= */

input,
textarea {
  background: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
}

input:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary);
}

/* =========================================================
   🧠 Utility
   ========================================================= */

.text-muted {
  color: var(--text-muted);
}

.bg-primary {
  background: var(--primary);
  color: #fff;
}

.bg-primary:hover {
  background: var(--primary-hover);
}


/* Navbar default (hero section) */
#main-nav {
  color: #ffffff;
}

#main-nav .nav-link,
#main-nav .logo-text,
#main-nav #login-btn,
#main-nav #theme-toggle-desktop,
#main-nav #theme-toggle-mobile,
#main-nav #mobile-menu-btn {
  color: #000000;
}

/* Navbar scrolled - LIGHT MODE */
.nav-scrolled {
  background: var(--bg-nav);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

html:not(.dark) .nav-scrolled,
html:not(.dark) .nav-scrolled .nav-link,
html:not(.dark) .nav-scrolled .logo-text,
html:not(.dark) .nav-scrolled #login-btn,
html:not(.dark) .nav-scrolled #theme-toggle-desktop,
html:not(.dark) .nav-scrolled #theme-toggle-mobile,
html:not(.dark) .nav-scrolled #mobile-menu-btn {
  color: #0f172a !important; /* أسود أنيق */
}


/* Navbar scrolled - DARK MODE */
.dark .nav-scrolled {
  background: rgba(2, 6, 23, 0.85);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.dark .nav-scrolled,
.dark .nav-scrolled .nav-link,
.dark .nav-scrolled .logo-text,
.dark .nav-scrolled #login-btn,
.dark .nav-scrolled #theme-toggle-desktop,
.dark .nav-scrolled #theme-toggle-mobile,
.dark .nav-scrolled #mobile-menu-btn {
  color: #ffffff !important;
}


html:not(.dark) .nav-scrolled #login-btn {
  border-color: #e2e8f0;
}

html:not(.dark) .nav-scrolled #login-btn:hover {
  background: #0f172a;
  color: #ffffff;
}