/* ==================================== */
/* === 1. إعدادات عامة ومتغيرات الألوان === */
/* ==================================== */

:root {
  --color-background-dark: #f0f2f5;
  --color-background-light: #FFFFFF;
  --color-accent: #0A3D62;
  --color-gradient-start: #000000;
  --color-gradient-end: #0D1B2A;
  --color-text-light: #000000;
  --color-text-dark: #000000;
  --shadow-light: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
}

* {
  box-sizing: border-box; 
}

body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  background-color: var(--color-background-dark); 
  color: var(--color-text-light);
  padding-top: 4.6875rem; /* 75px (للحاسوب) */
}

a {
  color: var(--color-accent); 
  text-decoration: none;
  transition: color 0.3s;
}

a:hover {
  color: var(--color-text-light);
}

/* ==================================== */
/* === 2. تصميم شريط التنقل (Navbar) === */
/* ==================================== */

.navbar {
  width: 100%;
  background-color: var(--color-background-light);
  /* DEV-NOTE: (قيمتك) تم الحفاظ على الظل الداكن */
  border: 1px solid rgb(0, 0, 0,0.15); 
  box-shadow: 0rem 0rem 1rem  rgb(0, 0, 0,0.15);
  padding: 0.9375rem 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

.navbar-container {
  width: 90%;
  max-width: 75rem;
  margin: 0 auto;
  display: flex;
  /* DEV-NOTE: هذا هو التعديل الأهم */
  justify-content: space-between; /* يدفع اللوجو يميناً والمجموعة يساراً */
  align-items: center;
  gap: 1.25rem;
}

.navbar .logo {
  font-size: 1rem;
  font-weight: bold;
  background: linear-gradient(90deg, #d7d7d7, #FFF6E5, #f5ae2b, #d7d7d7);
  background-size: 200%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: metallic-shine 7s linear infinite;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

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

/* (الكود القديم لـ .search-bar يبقى كما هو) */

/* DEV-NOTE: هذا الكود "الجديد" للبحث المستدير */
.search-bar.new-style {
    background-color: #f0f2f5; /* خلفية رمادية فاتحة */
    border-radius: 0.5rem; /* مستدير بالكامل */
    padding: 0 0.25rem 0 1rem; /* حشوة لترتيب العناصر */
    max-width: 15.625rem; /* (250px) */
    border: 1px solid rgb(0, 0, 0,0.15); 
    box-shadow: 0rem 0rem 1rem  rgb(0, 0, 0,0.15);
}
.search-bar.new-style input {
    border: none;
    background-color: transparent;
    padding: 0.625rem 0; /* (10px) */
}
.search-bar.new-style button {
    background-color: transparent;
    color: var(--color-text-dark);
    border: none;
    border-radius: 50%;
    padding: 0.5rem; /* (8px) */
}

/* DEV-NOTE: حاوية جديدة لتجميع الأيقونات */
.navbar-left-group {
    display: flex;
    align-items: center;
    gap: 0.9rem; /* (12px) */
}

/* DEV-NOTE: تنسيق أيقونة العربة (المفردة) */
.nav-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem; /* (24px) */
    color: var(--color-text-dark);
    padding: 0.5rem; /* (8px) */
    border-radius: 50%;
    transition: all 0.3s;
    position: relative; /* للعربة */
}
.nav-icon-btn:hover {
    background-color: rgba(0,0,0,0.05); 
    color: var(--color-accent);
}


/* ... (بعد .nav-icon-btn:hover) ... */

/* DEV-NOTE: (هذا هو الكود المفقود لرقم السلة)
  هذا الكود ينسق الدائرة الحمراء (أو الزرقاء)
  التي تظهر فوق أيقونة العربة.
*/
.cart-count {
    position: absolute;
    
    /* (تعديل المكان ليتناسب مع الأيقونة الجديدة) */
    top: 0.25rem; /* (4px) */
    right: 0.25rem; /* (4px) */ 
    
    background-color: var(--color-accent); /* (يمكنك تغييره إلى لون أحمر إذا أردت) */
    color: var(--color-background-light);
    
    /* (لجعله دائرياً وصغيراً) */
    font-size: 0.625rem; /* (10px) */
    font-weight: bold;
    line-height: 1; /* لضمان توسيط الرقم عمودياً */
    padding: 0.125rem 0.375rem; /* (2px 6px) */
    border-radius: 1rem; /* (لجعله دائرياً) */
    
    /* DEV-NOTE: (هذا هو الإصلاح لمشكلة "الوميض" الذي اتفقنا عليه)
      1. إخفاؤه افتراضياً
    */
    opacity: 0;
    /* 2. إضافة حركة "ناعمة" عند ظهوره */
    transition: opacity 0.2s; 
}

/* ... (قبل .menu-toggle-btn) ... */



/* DEV-NOTE: تنسيق زر القائمة (الداكن) */
.menu-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem; /* (24px) */
    background-color: var(--color-text-dark); /* خلفية داكنة */
    color: var(--color-background-light); /* أيقونة بيضاء */
    padding: 0.625rem; /* (10px) */
    border-radius: 0.75rem; /* (12px) زوايا مستديرة */
    border: none;
    cursor: pointer;
    transition: all 0.3s;
}
.menu-toggle-btn:hover {
    background-color: var(--color-accent);
  
}

/* DEV-NOTE: تنسيق القائمة المنسدلة */
.dropdown-menu {
    position: relative;
}
.dropdown-content {
    display: none; /* مخفية افتراضياً */
    position: absolute;
    /* DEV-NOTE: (تم التعديل) 'left: 0' لليمين، 'right: 0' لليسار */
    right: 0; /* <-- الحافة اليمنى للقائمة = الحافة اليمنى للزر */
    left: auto; /* (لضمان عدم تضارب الأوامر) */
    top: 125%;
    background-color: var(--color-background-light);
    box-shadow: var(--shadow-light);
    border-radius: 0.3125rem;
    overflow: hidden;
    z-index: 1001;
    min-width: 150px; /* عرض أدنى للقائمة */
}
.dropdown-content.show {
    display: block;
}
.dropdown-content a {
    display: block;
    padding: 0.75rem 1.5rem;
    color: var(--color-text-dark);
    white-space: nowrap;
}
.dropdown-content a:hover {
    background-color: rgba(0,0,0,0.05);
}

/* ==================================== */
/* === 3. تصميم قسم الـ Hero (للحاسوب) === */
/* ==================================== */
.hero {
  width: 100%;
  background-image: url('../image/hero_new.jpg');
  background-size: cover; 
  background-position: center; 
  background-repeat: no-repeat; 
  min-height: 50.125rem; /* (530px) */
  display: flex;
  align-items: center;
}

.hero-container {
  width: 90%;
  max-width: 75rem;
  margin: 0 auto;
  display: flex;
  justify-content: center; /* (هذا السطر صحيح، يضع الصندوق في المنتصف أفقياً) */
}

.hero-text {
  flex-basis: 45%;
  max-width: 34.375rem;
  color: #F4DFA4;
  text-shadow: 0rem 0rem 2rem  rgb(0, 0, 0,1);
  
  /* === (التعديلات هنا) === */
  
  /* 1. هذا يضع كل المحتوى (النص والزر) في المنتصف */
  text-align: center; 
  
  /* 2. إضافة "بادينج" للصندوق نفسه (كما طلبت) */
  padding: 1rem; 
 
}

.hero-text h1 {
  text-shadow: 0rem 0rem 1rem  rgb(0, 0, 0,1);
  color: #F8ECD8;
  border: 1px solid rgb(0, 0, 0,1); 
  box-shadow: 0rem 0rem 1rem  rgb(0, 0, 0,1);
  font-size: 3rem;
  margin-top: 0;
  margin-bottom: 1.25rem;
  
  
  /* === (التعديلات هنا) === */
  /* 2. إضافة "بادينج" للعنوان */
  padding: 0.5rem;
  /* === (نهاية التعديلات) === */
}

.hero-text p {
  text-shadow: 0rem 0rem 1rem  rgb(0, 0, 0,1);
  font-weight: bold;
  font-size: 1.325rem;
  line-height: 1.6; 
  opacity: 0.9;
  margin-bottom: 1.875rem;
  color:  #F8ECD8;
  border: 1px solid  rgb(0, 0, 0); 
  box-shadow: 0rem 0rem 1rem  rgb(0, 0, 0,1);
  
  
  /* === (التعديلات هنا) === */
  /* 2. إضافة "بادينج" للفقرة */
  padding: 0.5rem;
  /* === (نهاية التعديلات) === */
}

.hero-cta-button {
  display: inline-block;
  background-color: #a57d4b; 
  color: #FFFFFF;
  border: 2px solid rgb(0, 0, 0,0.3); 
  box-shadow: 0rem 0rem 0.5rem  rgb(0, 0, 0,0.2);
  
  /* DEV-NOTE: هذا الزر يحتوي "بالفعل" على بادينج
     (0.75rem فوق/تحت و 1.5rem يمين/يسار)
  */
  padding: 0.85rem 3rem;
   margin-bottom: 24rem;
  
  font-size: 1rem;
  font-weight: bold;
  border-radius: 0.3125rem;
  transition: all 0.3s;
}

.hero-cta-button:hover {
  transform: translateY(-0.125rem);
  box-shadow: 0 0.25rem 0.625rem rgba(0,0,0,0.7);
}


/* ==================================== */
/* === 5. تصميم شريط الأزرار (للحاسوب) === */
/* ==================================== */

/* DEV-NOTE: (إصلاح المسافة) تم تقليل الحشوة */
.button-bar {
  padding: 1.5rem 0; /* (24px) */
  background-color: var(--color-background-dark);
}

.button-container {
  width: 90%;
  max-width: 90rem; /* (1440px) */
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap; 
  gap: 1.25rem; /* (20px) */
}

.bar-button {
  /* DEV-NOTE: (قيمك) تم الحفاظ على الحجم */
  width: 25rem; 
  min-height: 6rem;
  
  display: flex;
  align-items: center; 
  background-color: var(--color-background-light); 
  color: var(--color-text-dark); 
  padding: 0.5rem 1.5rem; 
  border-radius: 1.125rem; 
  justify-content: space-between; 
  border: 1px solid rgb(0, 0, 0,0.15); 
  box-shadow: 0rem 0rem 1rem  rgb(0, 0, 0,0.15);
  transition: transform 0.3s, box-shadow 0.3s, border 0.3s, color 0.3s;
}

/* DEV-NOTE: (قيمك) تم الحفاظ على تأثير الـ hover */
.bar-button:hover {
  background-color: var(--color-background-dark);
  color: var(--color-text-light); /* (تمت الإضافة) تغيير لون النص */
  transform: translateY(-0.30rem); 
  box-shadow: 0 0 1rem rgb(0, 0, 0);
  border: 1px solid #FFFFFF;
}

.bar-button:hover .button-icon {
  color: var(--color-text-light); /* (تمت الإضافة) تغيير لون الأيقونة */
}

.button-icon {
  order: 2;
  font-size: 2.4rem; 
  border-radius: 50%; 
  padding: 0.75rem; 
  color: var(--color-text-dark); /* (تمت الإضافة) */
}

.button-text {
  order: 1;
}

.button-text h3 {
  margin: 0 0 0.25rem 0;
  font-size: 1.3rem; 
  font-weight: bold;
}

.button-text p {
  display: block; 
  margin: 0;
  font-size: 1rem; 
  opacity: 0.7;
}

/* ==================================== */
/* === 6. قسم عينة المنتجات (للحاسوب) === */
/* ==================================== */

/* DEV-NOTE: (إصلاح المسافة) تم تقليل الحشوة */
.product-preview {
  background-color: var(--color-background-dark);
  padding: 1.5rem 0; /* (24px) */

}

.product-preview h2 {
  font-size: 2rem; 
  color: var(--color-text-light);
  text-align: center;
  margin-top: 0;
  /* DEV-NOTE: (إصلاح المسافة) تم تقليل الهامش السفلي */
  margin-bottom: 1.5rem; /* (24px) */
  
}

/* DEV-NOTE: (قيمتك) تم اعتماد الكاروسيل الأفقي للحاسوب */
.preview-container {
  display: flex; 
  overflow-x: auto; 
  gap: 1.5rem; 
  padding: 0 5%;
  width: 90%; 
  margin: 0 auto;
  scroll-snap-type: x mandatory;
}

.product-card {
  background-color:#FFFFFF;
  border-radius: 0.5rem; 
  box-shadow: var(--shadow-light);
  padding: 1rem; 
  text-align: center;
  /* DEV-NOTE: (قيمتك) تم اعتماد عرض الكاروسيل */
  flex: 0 0 17.5rem; 
  scroll-snap-align: center;
  width: auto; /* (إلغاء width: 100%) */
  border: 1px solid rgb(0, 0, 0,0.15); 
  box-shadow: 0rem 0rem 1rem  rgb(0, 0, 0,0.15);

}

.product-image-container {
  width: 100%;
  height: 15.625rem; /* (250px) */
  background-color: #FFFFFF; 
  border-radius: 0.3125rem; 
  margin-bottom: 1rem;
   
}
/*
هذا هو "الابن" (الصورة نفسها)
*/
.product-image-container img {
  /* هذه الأسطر تخبر الصورة:
    "خذ 100% من عرض وارتفاع الأب (الـ 250px)،
    وقم بملء المربع دون أن "تمط" الصورة".
  */
  width: 60%;
  height: 100%;
  object-fit: cover; 
  border-radius: 0.3125rem; 
}

.product-card h3 {
  font-size: 1.125rem; 
  color: var(--color-text-dark);
  margin: 0 0 1rem 0; 
}

.add-to-cart-btn {
  width: 100%;
  background-color: var(--color-text-dark); 
  color: var(--color-background-light); 
  font-size: 1rem; 
  font-weight: bold;
  padding: 0.75rem; 
  border-radius: 0.3125rem; 
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

.add-to-cart-btn:hover {
  background-color: var(--color-accent);
}

.product-card,
.grid-card {
    cursor: pointer;
}


/* ==================================== */
/* === 7. تنسيقات حالة المنتج (جديد) === */
/* ==================================== */

/* DEV-NOTE: (1. تنسيق الشريط الترويجي الأحمر) */
.product-image-container {
    /* (مهم جداً لجعل الشريط يطفو فوقه) */
    position: relative; 
}

.promo-banner {
    position: absolute;
    top: 1rem; /* (16px) */
    right: 0; /* (لصقه باليمين) */
    background-color: #d9534f; /* (لون أحمر) */
    color: white;
    padding: 0.375rem 0.75rem; /* (6px 12px) */
    font-size: 0.875rem; /* (14px) */
    font-weight: bold;
    border-radius: 0 0.25rem 0.25rem 0;
    z-index: 2; /* (فوق الصورة) */
}

/* DEV-NOTE: (2. تنسيق "نفذت الكمية") */

/* (جعل البطاقة تبدو "باهتة") */
.product-card.out-of-stock,
.grid-card.out-of-stock {
    opacity: 0.6;
    /* (منع النقر على البطاقة) */
    pointer-events: none; 
}

/* (تنسيق الزر الرمادي "نفذت الكمية") */
.disabled-btn {
    width: 100%;
    background-color: #d9534f; /* (رمادي) */
    color: #ffffff;
    font-size: 1rem; 
    font-weight: bold;
    padding: 0.75rem; 
    border-radius: 0.3125rem; 
    border: none;
    cursor: not-allowed; /* (تغيير شكل الماوس) */
}

/* ==================================== */
/* === 7. التذييل (Footer) === */
/* ==================================== */
.footer {
  text-align: center;
  padding: 2rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.875rem;
  color: var(--color-text-light);
  opacity: 0.7;
}

/* ==================================== */
/* === 8. التصميم المتجاوب (Mobile) === */
/* ==================================== */

@media (max-width: 48rem) {

  /* --- 1. إصلاحات الـ Navbar --- */

  .navbar {
    height: auto; 
    padding: 0.7rem 0; /* (10px) */
    display: flex;
    align-items: center; 
  }

  .navbar-container {
    flex-wrap: nowrap; 
    gap: 0.625rem;
    width: 90%;
    display: flex;
    align-items: center; 
  }

  .search-bar {
    order: 2; 
    flex-basis: 70%; 
    max-width: 70%;
    display: flex;
  }

  .search-bar input {
    padding: 0.5rem; 
    font-size: 0.875rem; 
    width: 100%;
  }
  
  .search-bar button {
    padding: 0.5rem 0.625rem; 
    font-size: 0.875rem; 
  }

  /* DEV-NOTE: (تم الإصلاح) ترتيب الـ HTML الجديد */
  .navbar-right {
    order: 3;
    flex-basis: auto;
    justify-content: flex-start;
    margin-left: auto; 
    display: flex;
    align-items: center;
    gap: 0.9375rem; 
  }

  .navbar-right a {
    font-size: 0.875rem; 
    font-weight: 600;
  }

  /* DEV-NOTE: (تم الإصلاح) ترتيب الـ HTML الجديد */
  .navbar .logo {
    order: 1; 
    flex-basis: auto; 
    flex-shrink: 0; 
    font-size: 1.25rem; 
  }

  body {
    padding-top: 3.8125rem; /* (61px) - اضبط هذا الرقم */
  }

  /* --- 2. إصلاحات الـ Hero --- */
      
 /* --- 2. إصلاحات الـ Hero (للهاتف) --- */
.hero {
    min-height: 55.8125rem;
    background-image: url('../image/hero_new_mob.jpg');
    border: 1px solid rgb(0, 0, 0,0.15); 
    box-shadow: 0rem 0rem 1rem  rgb(0, 0, 0,0.15);
    /* (ملاحظة: الـ display: flex و align-items: center موروثة من الحاسوب) */
}
      
.hero-text {
    flex-basis: 100%; 
    max-width: 100%;
    
    
    /* === (التعديلات هنا) === */
    
    /* 1. هذا يضع كل المحتوى (النص والزر) في المنتصف */
    text-align: center; 
    
    /* 2. إضافة "بادينج" للصندوق نفسه (كما طلبت) */
    padding: 1rem;
    

}

.hero-text h1 {
    color: #D6A939;
    font-size: 1.5rem; /* (ملاحظة: 3rem قد يكون كبيراً جداً للهاتف) */
    border: 1px solid rgb(0, 0, 0,1); 
    box-shadow: 0rem 0rem 1rem  rgb(0, 0, 0,1);

    
    /* === (التعديلات هنا) === */
    padding: 0.5rem;
    margin-top: 0;
    margin-bottom: 1rem; /* (إضافة هامش سفلي) */
    /* === (نهاية التعديلات) === */
}

.hero-text h2 {
    font-size: 2.9rem;
    color: #D6A939;
    border: 1px solid rgb(0, 0, 0,1); 
    box-shadow: 0rem 0rem 1rem  rgb(0, 0, 0,1);
    /* === (التعديلات هنا) === */
    padding: 0.5rem;
    margin-top: 0;
    margin-bottom: 1.5rem; /* (إضافة هامش سفلي) */
    /* === (نهاية التعديلات) === */
}

  /* DEV-NOTE: (تم الإصلاح) هذا هو الكود "النهائي" للكاروسيل */
  .preview-container {
    display: flex;
    overflow-x: auto; 
    gap: 0.6rem; /* (12.8px) */
    padding: 0 0%;
    width:100%; 
    margin: 0 auto;
    scroll-snap-type: x mandatory;
    grid-template-columns: none; /* (إلغاء Grid) */
  }

  .product-card {
    flex-basis: 14rem; /* (240px) */
    scroll-snap-align: center;
    width: auto; /* (إلغاء width: 100%) */
  }

  .product-image-container {
    height: 10.5rem; /* (200px) */
  }

  .product-card h3 {
    font-size: 0.8rem; /* (16px) */
  }

  .add-to-cart-btn {
    font-size: 0.775rem; /* (14px) */
    padding: 0.525rem; /* (10px) */
  }
}