:root {
  /* 🎨 Modern and calm color system */
  --color-primary: #6366f1; /* Light purple blue */
  --color-primary-dark: #4f46e5; /* Dark purple blue */
  --color-primary-light: #eef2ff; /* Very light blue */
  --color-secondary: #6b7280; /* Medium gray */
  --color-accent: #8b5cf6; /* Light purple */
  --color-background: #f8fafc; /* Light background */
  --color-surface: #ffffff; /* Surface color */
  --color-text-primary: #1e293b; /* Primary text color */
  --color-text-secondary: #64748b; /* Secondary text color */
  --color-border: #e2e8f0; /* Soft border color */
  --color-success: #10b981; /* Success color */
  --color-warning: #f59e0b; /* Warning color */
  --color-error: #ef4444; /* Error color */

  /* Footer and newsletter colors */
  --color-newsletter-bg: rgba(99, 102, 241, 0.9); /* Newsletter background */
  --color-newsletter-bg-end: rgba(139, 92, 246, 0.9); /* Newsletter gradient */
  --color-footer-bg: #0f172a; /* Dark footer background */
  --color-footer-bg-mid: #1e293b; /* Middle footer background */
  --color-footer-bg-end: #334155; /* End footer background */
  --color-footer-text: rgba(255, 255, 255, 0.95); /* Footer text */
  --color-footer-text-light: rgba(255, 255, 255, 0.7); /* Light footer text */

  /* 🖋️ Typography - Fonts */
  --font-primary-ar: "Cairo", sans-serif; /* Primary Arabic font */
  --font-primary-en: "Poppins", sans-serif; /* English text font */
  --font-heading-en: "Playfair Display", serif; /* English headings font */

  /* 📏 Font sizes */
  --fs-h1: 3rem; /* Main heading */
  --fs-h2: 2.2rem; /* Secondary heading */
  --fs-h3: 1.5rem; /* Small headings */
  --fs-body: 1rem; /* Normal text */
  --fs-small: 0.875rem; /* Small text */

  /* 🧱 Spacing (8px scale) */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;

  /* 🔲 Border radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;

  /* 🌫️ Soft and natural shadows */
  --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.05); /* Very light shadow */
  --shadow-medium: 0 2px 8px rgba(0, 0, 0, 0.08); /* Medium shadow */
  --shadow-strong: 0 4px 12px rgba(0, 0, 0, 0.1); /* Strong shadow */
  --shadow-primary: 0 2px 10px rgba(74, 111, 165, 0.15); /* Primary color shadow */

  /* ⚡ Transitions */
  --transition: all 0.3s ease-in-out; /* Smooth hover and change animations */
}

/* 🌍 Global reset & defaults */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 🧍‍♂️ Body settings */
body {
  font-family: var(--font-primary-ar), var(--font-primary-en);
  background-color: var(--color-background);
  color: var(--color-text-primary);
  line-height: 1.6;
  background-image: url("https://www.transparenttextures.com/patterns/cubes.png");
}

/* 🧭 Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading-en), var(--font-primary-ar);
  color: var(--color-text-primary);
}

/* 🔘 Buttons */
.btn {
  display: inline-block;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 600;
  transition: var(--transition);
}

/* Primary button (gold with solid background) */
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-secondary);
  border: none;
}

.btn-primary:hover {
  background-color: #b8994a; /* Darker shade on hover */
}

/* Button with transparent background and gold border */
.btn-outline {
  background-color: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}

.btn-outline:hover {
  background-color: var(--color-primary);
  color: var(--color-secondary);
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
html {
  scroll-behavior: smooth;
}
/*====== Scroll Bar ======*/
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background-color: var(--color-background);
}
::-webkit-scrollbar-thumb {
  background-color: var(--color-primary);
  border-radius: var(--radius-md);
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-secondary);
}

/*====== dark mode ======*/
body.dark-mode {
  background-color: #121212;
  color: #e0e0e0;
}
body.dark-mode {
  color: #bb86fc;
}
/* Dark Mode for Header */
body.dark-mode .main-header {
  background-color: #121212;
  box-shadow: 0 2px 5px rgba(255, 255, 255, 0.05);
}

/* Dark Mode for container and its children */
body.dark-mode .container,
body.dark-mode .container * {
  background-color: transparent; /* Most elements are transparent */
  color: #e0e0e0; /* Light text */
  border-color: #444; /* Slightly lighter borders */
}

/* Logo */
body.dark-mode .logo h1,
body.dark-mode .logo-link {
  color: #bb86fc;
}

/* Search Input */
body.dark-mode .search-input {
  background-color: #1e1e1e;
  color: #e0e0e0;
  border: 1px solid #444;
}
body.dark-mode .search-input::placeholder {
  color: #888;
}
body.dark-mode .search-input:focus {
  background-color: #2c2c2c;
  border-color: #bb86fc;
}

/* Search Button */
body.dark-mode .search-btn,
body.dark-mode .search-btn-mobile {
  color: #e0e0e0;
}
body.dark-mode .search-btn:hover,
body.dark-mode .search-btn-mobile:hover {
  color: #bb86fc;
  background-color: rgba(187, 134, 252, 0.1);
}

/* Cart & User */
body.dark-mode .cart-link-container,
body.dark-mode .user-link-container {
  background-color: #1e1e1e;
  color: #e0e0e0;
  border: 1px solid #444;
}
body.dark-mode .cart-link-container:hover,
body.dark-mode .user-link-container:hover {
  background-color: #2c2c2c;
}

/* Icons */
body.dark-mode #cart-icon,
body.dark-mode #user-icon {
  color: #bb86fc;
}
body.dark-mode .cart-count {
  background-color: #bb86fc;
  color: #121212;
}

/* Dark Mode button icon */
body.dark-mode .dark-mode-btn i {
  color: #bb86fc;
}

/* Dark Mode for Featured Categories */
body.dark-mode .categories {
  background-color: #1e1e1e;
  color: #e0e0e0;
}

body.dark-mode .categories-title,
body.dark-mode .categories-subtitle,
body.dark-mode .selection-title {
  color: #bb86fc;
}

body.dark-mode .category-card {
  background-color: #2c2c2c;
  color: #e0e0e0;
  box-shadow: 0 2px 5px rgba(255, 255, 255, 0.05);
}

body.dark-mode .category-card:hover {
  box-shadow: 0 2px 10px #bb86fc;
}

body.dark-mode .category-card p {
  color: #e0e0e0;
}

body.dark-mode .category-card:hover p {
  color: #bb86fc;
}

body.dark-mode .category-card-img img {
  filter: brightness(0.8); /* Slightly darken images in dark mode */
}

body.dark-mode .selection-title::after {
  background: linear-gradient(90deg, #bb86fc, #7c3aed);
}

/* Dark Mode for Products Section */
body.dark-mode .products-section {
  background-color: #121212;
  color: #e0e0e0;
}

body.dark-mode .section-title,
body.dark-mode .section-subtitle,
body.dark-mode .view-all,
body.dark-mode .view-all-link {
  color: #bb86fc;
}

body.dark-mode .products-flex,
body.dark-mode .products-sec-container {
  background-color: transparent;
}

body.dark-mode .product-card {
  background-color: #1e1e1e;
  color: #e0e0e0;
  border: 1px solid #333;
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.05);
}

body.dark-mode .product-card:hover {
  box-shadow: 0 2px 10px #bb86fc;
  border-color: #bb86fc66;
}

body.dark-mode .product-info {
  background-color: #1e1e1e;
}

body.dark-mode .product-name {
  color: #e0e0e0;
}

body.dark-mode .current-price {
  color: #bb86fc;
}

body.dark-mode .original-price {
  color: #a0a0a0;
}

body.dark-mode .discount-badge {
  background: linear-gradient(135deg, #cf6679, #bb86fc);
}

body.dark-mode .add-to-cart {
  background: linear-gradient(300deg, #bb86fc, #3700b3);
  color: #fff;
}

body.dark-mode .add-to-cart:hover {
  background: #2c2c2c;
  color: #bb86fc;
}

body.dark-mode .catigory-container,
body.dark-mode .filter-group,
body.dark-mode select,
body.dark-mode input,
body.dark-mode .filter-btn {
  background-color: #1e1e1e;
  color: #e0e0e0;
  border-color: #333;
}

body.dark-mode .filter-btn {
  background: linear-gradient(135deg, #bb86fc, #3700b3);
}

body.dark-mode .filter-btn:hover {
  background: linear-gradient(135deg, #3700b3, #bb86fc);
}

/* Dark Mode for Features Section */
body.dark-mode .features-section {
  background-color: #121212;
  color: #e0e0e0;
}

body.dark-mode .features-title {
  color: #bb86fc;
}

body.dark-mode .features-title::after {
  background-color: #bb86fc;
}

body.dark-mode .features-sec-container {
  background-color: transparent;
}

body.dark-mode .feature-card {
  background-color: #1e1e1e;
  box-shadow: 0 10px 20px rgba(255, 255, 255, 0.05);
  color: #e0e0e0;
}

body.dark-mode .feature-card i {
  color: #bb86fc;
}

body.dark-mode .feature-card h3 {
  color: #bb86fc;
}

body.dark-mode .feature-card p {
  color: #cfcfcf;
}

body.dark-mode .feature-card:hover {
  box-shadow: 0 10px 20px rgba(187, 134, 252, 0.3);
}

body.dark-mode .feature-card:hover i {
  color: #bb86fc;
}

body.dark-mode .feature-card:hover h3 {
  color: #bb86fc;
}

body.dark-mode .feature-card:hover p {
  color: #e0e0e0;
}

body.dark-mode .feature-card:active {
  box-shadow: 0 5px 10px rgba(187, 134, 252, 0.2);
}

/* Dark Mode - Cart Page */
body.dark-mode .cart-main {
  background-color: #121212;
  color: #e0e0e0;
}

body.dark-mode .cart-header,
body.dark-mode .cart-items-section,
body.dark-mode .summary-card,
body.dark-mode .shipping-info,
body.dark-mode .security-info {
  background-color: #1e1e1e;
  color: #e0e0e0;
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.05);
  border-color: #333;
}

body.dark-mode .cart-title,
body.dark-mode .cart-items-header h2,
body.dark-mode .summary-title,
body.dark-mode .info-content h3 {
  color: #bb86fc;
}

body.dark-mode .cart-title::after,
body.dark-mode .summary-title::after {
  background: linear-gradient(90deg, #bb86fc, #bb86fc);
}

body.dark-mode .cart-subtitle,
body.dark-mode .summary-label,
body.dark-mode .info-content p,
body.dark-mode .cart-item-category {
  color: #cfcfcf;
}

body.dark-mode .cart-item,
body.dark-mode .cart-items-list {
  background-color: #1e1e1e;
  border: 1px solid #333;
}
.cart-item-title {
  color: rgb(255, 255, 255);
}
.cart-item-quantity {
  color: #a196ad !important;
}
body.dark-mode .cart-item-price,
body.dark-mode .summary-value.total,
body.dark-mode .summary-value.discount {
  color: #bb86fc;
}
body.dark-mode #cart-subtotal,
body.dark-mode .cart-shipping {
  color: white;
}
body.dark-mode .cart-item-actions,
body.dark-mode .quantity-controls {
  background-color: #2c2c2c;
  border-color: #444;
}

body.dark-mode .quantity-btn,
body.dark-mode .remove-item-btn,
body.dark-mode .clear-cart-btn,
body.dark-mode .checkout-btn,
body.dark-mode .btn-shopping,
body.dark-mode .continue-shopping-link {
  background-color: #2c2c2c;
  border-color: #555;
  color: #e0e0e0;
}

body.dark-mode .quantity-btn:hover,
body.dark-mode .remove-item-btn:hover,
body.dark-mode .clear-cart-btn:hover,
body.dark-mode .checkout-btn:hover,
body.dark-mode .btn-shopping:hover,
body.dark-mode .continue-shopping-link:hover {
  background-color: #bb86fc;
  color: #121212;
  border-color: #bb86fc;
}

body.dark-mode .info-icon {
  background: linear-gradient(135deg, #bb86fc, #9b5de5);
}

body.dark-mode .empty-cart h3,
body.dark-mode .empty-cart p {
  color: #e0e0e0;
}

body.dark-mode .empty-cart-icon {
  color: #888;
}

/* Dark Mode - All Products Section */
body.dark-mode .all-products-sec {
  background-color: #121212; /* Dark background */
  color: #e0e0e0; /* Light text */
  background-image: url("https://www.transparenttextures.com/patterns/cubes.png");
}

body.dark-mode .products-sec-container {
  color: #e0e0e0; /* Inner text */
}

/* Dark Mode - Product Details */
body.dark-mode .product-details {
  background-color: #121212;
  color: #e0e0e0;
}

body.dark-mode .product-container {
  background-color: #1e1e1e;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

body.dark-mode .product-image-container,
body.dark-mode .product-main-image {
  background-color: #2a2a2a;
  border: 1px solid #444;
}

body.dark-mode .product-thumbnail {
  border-color: transparent;
}

body.dark-mode .product-thumbnail:hover,
body.dark-mode .product-thumbnail.active {
  border-color: #3498db;
}

body.dark-mode .product-title {
  color: #f5f5f5;
}

body.dark-mode .product-price {
  color: #e74c3c;
}

body.dark-mode .original-price {
  color: #aaaaaa;
}

body.dark-mode .discount-badge {
  background-color: #e74c3c;
  color: white;
}

body.dark-mode .product-description {
  color: #cccccc;
}

body.dark-mode .add-to-cart {
  background: linear-gradient(300deg, #3498db, #2980b9);
  color: #fff;
}

body.dark-mode .back-button {
  background-color: #2980b9;
  color: #fff;
}

/* Dark Mode - Checkout Page */
body.dark-mode .checkout-container {
  background-color: #121212;
  color: #e0e0e0;
}

body.dark-mode .checkout-form-section,
body.dark-mode .order-summary,
body.dark-mode .popup-content {
  background-color: #1e1e1e;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

body.dark-mode .checkout-title,
body.dark-mode .section-title h2,
body.dark-mode .summary-title,
body.dark-mode .order-item-title,
body.dark-mode .popup-content h2,
body.dark-mode .popup-content p {
  color: #f5f5f5;
}

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background-color: #2a2a2a;
  color: #e0e0e0;
  border: 1px solid #444;
}

body.dark-mode .apply-coupon,
body.dark-mode .place-order-btn,
body.dark-mode .close-popup {
  background: linear-gradient(300deg, #3498db, #2980b9);
  color: #fff;
}

body.dark-mode .clear-cart-btn:hover,
body.dark-mode .terms a:hover {
  color: #3498db;
}
body.dark-mode .checkout-form-section label {
  color: white;
}