/* =========================================================
   app.css (Bundle)

   فهرس المحتوى:
   1) CORE
   2) THEME / BASE
   3) COMPONENTS
   4) PAGES: HOME
   5) MOBILE + BOTTOM BAR
   6) CANONICAL BASE (الحاكم)

   قواعد التعديل:
   - أي ستايل جديد: ضعه في مكانه الصحيح (Core/Components/Page)
   - ممنوع !important إلا لو كان حل تعارض مُثبت
   - ممنوع تكرار body/html داخل أي بلوك (الحاكم هو CANONICAL BASE)

   الهدف: إنهاء فوضى الـ overrides بتجميع CSS في ملف واحد مرتب.
   الترتيب مهم جدًا:
   1) Core (Layout/Utilities)
   2) Theme/Base (Typography/Colors)
   3) Components (Navbar/Buttons/Sections)
   4) Pages (Home)
   5) Mobile Fixes + Bottom Bar
   ========================================================= */

/* ========================= 1) CORE ========================= */

/* =========================================================
   core.css
   نواة CSS بديلة عن Bootstrap (جزء صغير فقط)
   الهدف: نحافظ على نفس HTML الحالي بدون Bootstrap
   - Grid بسيط (row/col) يدعم أهم breakpoints
   - أزرار أساسية
   - مسافات Utilities المستخدمة في الصفحات
   ملاحظة: الملف ده مقصود يكون "محدود" ومفهوم
   ========================================================= */

/* ===== Reset بسيط + أساسيات ===== */
*,
*::before,
*::after{ box-sizing: border-box; }

html, body{ height: 100%; }

body{
  margin: 0;
}

/* ===== Container =====
   نفس فكرة Bootstrap: توسيط المحتوى وتحديد عرض أقصى
*/
.container{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* أحجام تقريبية (قريبة من Bootstrap) */
@media (min-width: 576px){ .container{ max-width: 540px; } }
@media (min-width: 768px){ .container{ max-width: 720px; } }
@media (min-width: 992px){ .container{ max-width: 960px; } }
@media (min-width: 1200px){ .container{ max-width: 1140px; } }
@media (min-width: 1400px){ .container{ max-width: 1320px; } }

/* ===== Grid (row / col-*) =====
   الهدف: أي صفحة بتستخدم row/col تفضل شغالة
*/
/* ===== Grid System (بديل Bootstrap) =====
   - row/col بأقل كود ممكن
   - breakpoints الأساسية فقط
*/
.row{
  display: flex;
  flex-wrap: wrap;
  /* جتر افتراضي (يتغير عبر متغيرات) */
  --gutter-x: 24px;
  --gutter-y: 24px;
  margin-left: calc(var(--gutter-x) * -0.5);
  margin-right: calc(var(--gutter-x) * -0.5);
  margin-top: calc(var(--gutter-y) * -1);
}

.row > *{
  padding-left: calc(var(--gutter-x) * 0.5);
  padding-right: calc(var(--gutter-x) * 0.5);
  margin-top: var(--gutter-y);
}

/* gy-4: جتر رأسي أكبر */
.gy-4{ --gutter-y: 24px; }

/* g-4: جتر أفقي/رأسي أكبر */
.g-4{ --gutter-x: 24px; --gutter-y: 24px; }

/* col-12 */
.col-12{ flex: 0 0 auto; width: 100%; }

/* Breakpoints:
   - sm >= 576
   - md >= 768
   - lg >= 992
*/
@media (min-width: 576px){
  .col-sm-6{ flex: 0 0 auto; width: 50%; }
}
@media (min-width: 768px){
  .col-md-4{ flex: 0 0 auto; width: 33.333333%; }
}
@media (min-width: 992px){
  .col-lg-3{ flex: 0 0 auto; width: 25%; }
}

/* ===== Utilities للمسافات (المستخدم فعلاً في المشروع) ===== */
.my-4{ margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.my-5{ margin-top: 3rem !important; margin-bottom: 3rem !important; }
.mb-3{ margin-bottom: 1rem !important; }

/* ===== Buttons =====
   زرار بسيط مطابق للاحتياجات (Outline/Fill)
*/
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 600;
  line-height: 1;
  background: transparent;
}

.w-100{ width: 100% !important; }

/* ===== زرار Outline (الهوية الحمراء) =====
   - لون Accent موحّد
   - Hover خفيف بدون زحمة
*/
.btn-outline-danger{
  color: var(--ik-accent);
  border-color: rgba(217,74,74,.40);
  background: transparent;
}

.btn-outline-danger:hover{
  background: rgba(217,74,74,.08);
  border-color: rgba(217,74,74,.70);
}

.btn-outline-danger:active{
  transform: translateY(1px);
}

/* ===== Cards (حد أدنى) ===== */
.card{ background: var(--ik-surface); border: 1px solid rgba(0,0,0,.06); border-radius: 16px; }
.card-img-top{ width: 100%; display:block; }
.card-body{ padding: 14px; }

.text-center{ text-align: center; }


/* ========================= 2) THEME / BASE ========================= */
/* ملاحظة: تم تجميع الستايلات العامة القديمة داخل طبقة واحدة لضمان الاستقرار.
   لاحقًا هننظفها ونقسمها لتوكنز (ألوان/خطوط/مسافات) بشكل أدق. */

/* =========================
   Global layout fixes
   - لأن الـ navbar ثابتة (fixed-top) لازم ندي للمحتوى مسافة فوقها
   ========================= */
:root{
  /* عدّل القيمة لو غيرت ارتفاع النافبار/اللوجو */
  --ik-navbar-h: 74px;
}

body {
  font-family: 'Roboto', sans-serif;
  padding-top: var(--ik-navbar-h);
}

/* -------------------------------------------------------------------------- */
/* تحسين المسافات على الموبايل (تقليل المسافات بين البانرات والأقسام ~ 80%) */
/* -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  /* مسافات الأقسام/البانرات الرئيسية */
  .macbook-banner-container,
  .bestselling-banner-container,
  .iphone-banner-container {
    margin: 4px auto !important;
  }

  /* الخطوط الفاصلة بين الأقسام */
  .iphone-divider,
  .macbook-divider,
  .ipad-divider,
  .bestselling-divider {
    margin: 4px 0 !important;
  }

  /* كارت بانر الآيباد */
  .ipad-banner-card {
    padding: 8px !important;
  }
}

/* CSS Customizations  navbar تنسيق خاص بالناف بار  */

        /* Increase the logo size */
        .navbar-brand img {
          width: 130px; /* Increased logo width */
          height: auto; /* Maintain aspect ratio */
      }

      /* Add padding to navbar items */
      .navbar-nav .nav-link {
          padding: 0.5rem 1rem;
      }

      /* Style for search input */
      .form-control.bd {
          border: 2px solid #dc3545; /* Add red border */
          border-radius: 20px; /* Rounded input box */
      }

      /* Style for search button */
      .btn-outline-danger {
          border-radius: 20px; /* Rounded button */
      }


      /* تنسيق العنصر عند النقر عليه */
.nav-link.active {
  color: #dc3545 !important; /* تغيير لون النص إلى الأحمر */
  font-weight: bold; /* جعل النص بارز */
  border-bottom: 2px solid #dc3545; /* إضافة خط سفلي */
}


/*-----------------------------------------------------------------*/

/*تنسيق خاص بكروت المنتجات الأساسيه*/
/* ضبط حجم الصور */
.card-img-top {
  width:100%;
  height: 250px; /* توحيد ارتفاع الصورة */
  object-fit: contain; /* تناسب الصورة داخل الإطار بدون تشويه */
  padding: 10px;
}

/* توحيد ارتفاع الكروت */
.card {
  min-height: 250px; /* تحديد ارتفاع أدنى للكروت */
  border: 1px solid #ddd; /* حدود خفيفة */
  border-radius: 8px; /* حواف دائرية */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* ظل خفيف */
}


/* توسيط النصوص */
.card-body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* تحسين الأزرار */
.btn-outline-danger {
  font-weight: bold;
}


/*--------------------------------تنسيق خاص بال ٣ كروت في بدايه الصفحه الرئيسيه-------------------------------------*/
/* إجبار الصورة على تغطية المربع بالكامل */
.img-fit-productcard {
  width: 100%; /* جعل العرض يغطي البطاقة بالكامل */
  height: 100%; /* جعل الارتفاع يغطي البطاقة بالكامل */
  object-fit: contain; /* تغطية كاملة دون تشويه */
  position: absolute; /* تثبيت الصورة داخل البطاقة */
  top: 0;
  left: 0;
}

/* تحسين التصميم العام للبطاقات */
.card-productcard {
  overflow: hidden; /* منع الأجزاء الزائدة من الظهور */
  height: 300px; /* ارتفاع ثابت للبطاقة */
  border-radius: 7px; /* حواف دائرية للبطاقة */
  position: relative; /* لضمان أن الصورة مثبتة داخل البطاقة */
  display: flex; /* محاذاة المحتوى */
  align-items: center; /* مركزية العناصر */
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* ظل خفيف */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* تأثير عند التمرير */
  z-index: 1; /* ✅ تأكد إن الصورة خلف النص */
}

/* تأثير عند التمرير فوق البطاقات */
/*
.card:hover {
  transform: scale(1.05); /* تكبير البطاقة قليلاً */
 /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* زيادة الظل */


/*---------------------------------------------------------------------*/
/* تنسيق عنصر التلت دوائر الكارت العام  تصميم التلت كروت  */
/* تصميم الكارت العام */
/* تصميم الكارت الأساسي */
.card-coach {
  background-color: #fff; /* لون خلفية الكارت أبيض */
  padding: 20px; /* مسافة داخلية من كل الجوانب */
  border-radius: 15px; /* زوايا الكارت دائرية */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* ظل خفيف حول الكارت */
  transition: transform 0.3s, box-shadow 0.3s; /* تأثير ناعم عند المرور بالماوس */
  text-align: center; /* توسيط المحتوى داخل الكارت */

  height: 100%; /* الكارت ياخد أقصى طول داخل العمود */
  display: flex; /* ترتيب المحتوى داخليًا باستخدام Flexbox */
  flex-direction: column; /* ترتيب عمودي (من فوق لتحت) */
  align-items: center; /* توسيط أفقي للمحتويات */
  justify-content: flex-start; /* المحتوى يبدأ من أعلى الكارت */
}

/* تصميم صورة دائرية داخل الكارت */
.card-coach img {
  width: 180px; /* عرض الصورة */
  height: 180px; /* ارتفاع الصورة */
  border-radius: 50%; /* تحويل الصورة إلى شكل دائري */
  object-fit: cover; /* تقطيع الصورة لتملأ الدائرة دون تشوه */
  margin-bottom: 15px; /* مسافة بين الصورة والعنوان */
}

/* تأثير عند تحريك الماوس على الكارت */
.card-coach:hover {
  transform: translateY(-10px); /* تحريك الكارت لأعلى شوية */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* تكبير الظل لتأثير أوضح */
}

/* تنسيق عنوان الكارت */
.card-coach h5 {
  font-size: 1.2rem; /* حجم الخط للعناوين */
  margin-bottom: 10px; /* مسافة بين العنوان والوصف */
  color: #dc3545; /* لون أحمر مشابه لـ Bootstrap danger */
}

/* تنسيق الفقرة (الوصف) داخل الكارت */
.card-coach p {
  font-size: clamp(0.8rem, 1vw, 1rem); 
  /* شرح:
     - clamp(): يحدد حجم الخط التلقائي حسب المساحة المتاحة
     - الحد الأدنى 0.8rem، والحد الأقصى 1rem
     - 1vw = 1% من عرض الشاشة، يعني يتأقلم مع حجم الكارت */

  color: #555; /* لون رمادي للنص */
  text-align: center; /* توسيط الفقرة داخل الكارت */
  line-height: 1.5; /* تحسين تباعد الأسطر لسهولة القراءة */
}


/*-------------------------------------------------------------------------*/
/*تنسيق الكروت الصغيره الخاصه بالعروض والبانر */
/* تحسين عرض الصور تنسيق البانر الجانبي والكروت الصغيه للعروض المميزه   */
.product-card img {
  width: 200px; /* اجعل الصورة تأخذ العرض الكامل */
  height: 170px; /* اجعل الطول تلقائي لتناسب النسبة */
  border-radius: 10px; /* إضافة حواف مستديرة إذا لزم الأمر */
}

/* تحسين ارتفاع الكروت */
.product-card {
  width: 230px; /* عرض الكارت */
  height: 240px; /* ارتفاع الكارت */
  padding: 10px; /* المسافة الداخلية */
  background-color: #fff; /* لون الخلفية */
  border-radius: 10px; /* الحواف المستديرة */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* الظل */
  text-align: center; /* محاذاة النصوص */
}

.product-card h6 {
  font-size: 13px;
  font-weight: bold;
}

.product-card p {
  margin: 10px 0;
}

.product-price {
  font-size: 14px;
  color: #c03333; /* لون السعر الحالي */
  font-weight: bold;
}

.product-old-price {
  font-size: 14px;
  color: #888;
  text-decoration: line-through;
}

.product-card:hover {
  transform: scale(1.1); /* تكبير الكارت بنسبة 10% */
  transition: transform 0.3s ease; /* حركة سلسة */
}


/* تحسين البانر */
.weekly-discount img {
  height: 600px; /* حجم مخصص للبانر */
  object-fit: cover; /* اجعل الصورة تغطي البانر بشكل متناسب */
  border-radius: 10px 10px 0 0;
}

.weekly-discount .card-body {
  padding: 20px;
}


/*--------------------------------------------------------------------*/

/* تنسيق خاص بكروت المنتجات الشفافه */
 

/* تنسيق عام علي جميع كروت المنتجات الشفافه الحلوه في الصفحه الرئيسيه ويشم الايفون والماك بوك والآيباد  */

.custom-container .card {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}
.custom-container .card img {
  width: 100%;
  height: auto;
  padding: 15px;
}
.custom-container .card h6 {
  font-size: 14px;
  margin: 10px 0;
}


/*---------------------------------------------------------*/

/*--------------------------------------------------------------------*/


/* تنسيق حاص بالبانر الي بالعرض الخاص  بالآيفون iphone   */

 /* لضبط حجم الصورة بناءً على حجم الكونتينر */
/* إعداد الكونتينر */
.iphone-banner-container {
  width: 100%; /* عرض الكونتينر بالكامل */
  max-width: 1200px; /* أقصى عرض للكونتينر */
  margin: 0 auto; /* توسيط الكونتينر */
  border-radius: 15px; /* حواف دائرية */
  overflow: hidden; /* منع أي محتوى زائد من الخروج */
  position: relative; /* لجعل الصورة متناسقة داخله */
  height: 300px; /* تحديد ارتفاع الكونتينر بشكل صريح */
}

/* إعداد الصورة */
.banner-wrapper img {
  width: 100%; /* جعل الصورة تغطي عرض الكونتينر */
  height: 100%; /* جعل الصورة تغطي ارتفاع الكونتينر */
  object-fit: cover; /* تغطية الكونتينر بالكامل دون تشويه */
  display: block; /* إزالة أي مسافات افتراضية للصورة */
}

/* و الخط الفاصل  تنسيقات البانر */
.iphone-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 20px 0;
  
}

.iphone-divider::before,
.iphone-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #ddd;
}

.iphone-divider:not(:empty)::before {
  margin-right: 10px;
}

.iphone-divider:not(:empty)::after {
  margin-left: 10px;
}



/*--------------------------------------------------------------------*/


/* --------------------تنسيق زرار ال more details iphone ------------ */
/* تنسيق الزرار */
.moredetailsiphone-btn {
  padding: 15px 20px;
  border-radius: 20px; /* لتصميم دائري */
  font-weight: bold;
  display: inline-block;
}

.container-moredetailsiphone.text-center {
  text-align: center; /* لضمان تمركز العناصر داخل الحاوية */
}

/* عند تمرير الماوس */
.moredetailsiphone-btn:hover {
  background-color: #dc3545; /* لون الخلفية عند التمرير */
  color: white; /* لون النص أبيض */
  box-shadow: 0 4px 10px rgba(220, 53, 69, 0.3); /* ظل خفيف */
}

/* الآيقونة */
.moredetailsiphone-btn i {
  font-size: 14px; /* حجم الآيقونة */
}

/* ---------------نهايه تنسيق زرازر ال more details iphone ----------------- */


/* تنسيق بانر بالعرض  خاص بالما ك بوك Macbook  */

 /* الحاوية العامة للبانر */

 .macbook-banner-container {
  max-width: 1200px; /* عرض الحاوية */
  margin: 20px auto; /* توسيط الحاوية وإضافة مسافة علوية وسفلية */
  padding: 0; /* إزالة الحشوات */
}
/* الغلاف الداخلي للبانر */
.banner-wrapper {
  overflow: hidden; /* منع خروج المحتوى خارج الحاوية */
  border-radius: 15px; /* حواف دائرية للحاوية */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* ظل لإبراز الحاوية */
  transition: transform 0.3s ease; /* تأثير الحركة عند التفاعل */
}
/* الصورة داخل الحاوية */
.banner-wrapper img {
  width: 100%; /* جعل الصورة تأخذ عرض الحاوية بالكامل */
  height: auto; /* الحفاظ على نسبة العرض إلى الارتفاع */
  object-fit: cover; /* تغطية متناسقة داخل الحاوية */
}
/* و الخط الفاصل  تنسيقات البانر */
.macbook-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 20px 0;
  
}

.macbook-divider::before,
.macbook-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #ddd;
}

.macbook-divider:not(:empty)::before {
  margin-right: 10px;
}

.macbook-divider:not(:empty)::after {
  margin-left: 10px;
}



/*--------------------------------------------------------------------*/


/* --------------------تنسيق زرار ال more details Macbook ------------ */
/* تنسيق الزرار */
.moredetailsMacbook-btn {
  padding: 15px 20px;
  border-radius: 20px; /* لتصميم دائري */
  font-weight: bold;
  display: inline-block;
}

.container-moredetailsMacbook.text-center {
  text-align: center; /* لضمان تمركز العناصر داخل الحاوية */
}

/* عند تمرير الماوس */
.moredetailsMacbook-btn:hover {
  background-color: #dc3545; /* لون الخلفية عند التمرير */
  color: white; /* لون النص أبيض */
  box-shadow: 0 4px 10px rgba(220, 53, 69, 0.3); /* ظل خفيف */
}

/* الآيقونة */
.moredetailsMacbook-btn i {
  font-size: 14px; /* حجم الآيقونة */
}

/* ---------------نهايه تنسيق زرازر ال more details Macbook ----------------- */


/*--------------------------------------------------------------------*/
/*ipad تنسيق خاص بالبانر الي بالعرض لعرض منتجات الايباد  */
/* تنسيق كروت البانر الخاصة بالآيباد */
.ibad-banner-card {
  background-color: #f8f9fa; /* لون الخلفية رمادي فاتح */
  border-radius: 10px; /* زوايا مستديرة للكارت */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* ظل خفيف حول الكارت */
  padding: 15px; /* مسافة داخلية للكارت */
  text-align: center; /* محاذاة المحتوى في المنتصف */
}

/* تنسيق صورة البانر داخل كارت البانر */
.ipad-banner-card img {
  border-radius: 10px; /* زوايا الصورة مستديرة */
  width: 100%; /* العرض بالكامل */
  max-height: 520px; /* أقصى ارتفاع للصورة */
  object-fit: cover; /* ملء الكارت مع الحفاظ على الشكل */
}

/* عنوان داخل كارت البانر */
.ipad-banner-card h4 {
  margin-top: 15px;
  font-size: 18px;
  font-weight: bold;
}

/* وصف داخل كارت البانر */
.ipad-banner-card p {
  font-size: 14px;
  color: #6c757d; /* لون رمادي للنص */
  margin-top: 10px;
}

/* خط فاصل مزخرف */
.ipad-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 20px 0;
  width: 100%;
}

/* الخط اللي بيظهر على الجانبين */
.ipad-divider::before,
.ipad-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #ddd; /* خط رفيع رمادي */
}

/* مسافة يمين النص */
.ipad-divider:not(:empty)::before {
  margin-right: 10px;
}

/* مسافة شمال النص */
.ipad-divider:not(:empty)::after {
  margin-left: 10px;
}

/* -------------------------------------------------------------------- */

/* تنسيق صور الآيباد داخل كروت المنتجات (مش البانر) */
.ipad-img {
  height: auto !important; /* خلي الصورة تاخد ارتفاع تلقائي */
  max-height: 280px !important; /* أقصى ارتفاع للصورة */
  width: 100% !important; /* خلي الصورة تاخد كل عرض الكارت */
  object-fit: contain !important; /* عرض الصورة بالكامل بدون قص */
  display: block !important; /* خلي الصورة عنصر بلوك (يبدأ من سطر جديد) */
  margin: 0 auto !important; /* وسّط الصورة داخل الكارت */
}


/* --------------------تنسيق زرار ال more details ipads ------------ */
/* تنسيق الزرار */
.moredetailsipads-btn {
  padding: 15px 20px;
  border-radius: 20px; /* لتصميم دائري */
  font-weight: bold;
  display: inline-block;
}

.container-moredetailsipads.text-center {
  text-align: center; /* لضمان تمركز العناصر داخل الحاوية */
}

/* عند تمرير الماوس */
.moredetailsipads-btn:hover {
  background-color: #dc3545; /* لون الخلفية عند التمرير */
  color: white; /* لون النص أبيض */
  box-shadow: 0 4px 10px rgba(220, 53, 69, 0.3); /* ظل خفيف */
}

/* الآيقونة */
.moredetailsipads-btn i {
  font-size: 14px; /* حجم الآيقونة */
}

/* ---------------نهايه تنسيق زرازر ال more details ipad ----------------- */


/*--------------------------------------------------------------------*/



/*--------------------------------------------------------------------*/


/*  تنسيق بانر بالعرض  خاص بالمنتجات الأكثر مبيعا    Best Selling  */

 /* الحاوية العامة للبانر */
 .bestselling-banner-container {
  max-width: 1200px; /* عرض الحاوية */
  margin: 20px auto; /* توسيط الحاوية وإضافة مسافة علوية وسفلية */
  padding: 0; /* إزالة الحشوات */
}
/* الغلاف الداخلي للبانر */
.banner-wrapper {
  overflow: hidden; /* منع خروج المحتوى خارج الحاوية */
  border-radius: 15px; /* حواف دائرية للحاوية */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* ظل لإبراز الحاوية */
  transition: transform 0.3s ease; /* تأثير الحركة عند التفاعل */
}
/* الصورة داخل الحاوية */
.banner-wrapper img {
  width: 100%; /* جعل الصورة تأخذ عرض الحاوية بالكامل */
  height: auto; /* الحفاظ على نسبة العرض إلى الارتفاع */
  object-fit: cover; /* تغطية متناسقة داخل الحاوية */
}
/* و الخط الفاصل  تنسيقات البانر */
.bestselling-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 20px 0;
  
}

.bestselling-divider::before,
.bestselling-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #ddd;
}

.bestselling-divider:not(:empty)::before {
  margin-right: 10px;
}

.bestselling-divider:not(:empty)::after {
  margin-left: 10px;
}



/*-------------------------------video تنسيق فيديو الكاميرا -------------------------------------*/


/* إعدادات عامة */
body {
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
  margin: 0;
  padding: 0;
}

/* تصميم الكارت */
.card {
  border: none;
  border-radius: 15px; /* الحواف الدائرية */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* تأثير الشادو */
  overflow: hidden; /* لمنع تجاوز المحتوى للحواف */
}

.video-wrapper iframe {
  width: 100%;
  height: 300px; /* ارتفاع الفيديو */
  border-radius: 15px; /* الحواف الدائرية للفيديو */
}

h3 {
  color: #333;
}

p {
  color: #555;
  line-height: 1.6;
}


/*---------------------------------------------------------------------*/

/* تنسيق خاص بكروت البنوك في آخر الصفحه */
.box-img-container {
  display: flex;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
}

.box-img {
  max-height: 60px;
  margin: 0 15px;
  transition: transform 0.3s ease;
}

/*Footer style تنسيق خاص بالفوتير footer*/
  /* Footer Styling */
  /* ===== Footer =====
   - تم استبدال أيقونات FontAwesome بـ SVG لضمان الثبات
*/
.footer {
    background-color: #212529;
    color: #ffffff;
    padding: 60px 0;
}

.footer h2 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #f8f9fa;
}

.footer p, .footer a {
    color: #adb5bd;
    font-size: 14px;
}

.footer a:hover {
    color: #f8f9fa;
    text-decoration: none;
}

.footer ul {
    list-style: none;
    padding: 0;
}

.footer ul li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-social span {
    margin-right: 10px;
}

.footer-social span a {
    color: #adb5bd;
    font-size: 18px;
    display: inline-block;
}

.footer-social span a:hover {
    color: #f8f9fa;
}

.footer-bottom {
    background-color: #181a1d;
    color: #adb5bd;
    padding: 20px 0;
}

.footer-bottom p {
    margin: 0;
    font-size: 14px;
}

.footer .icon {
    color: rgb(236, 61, 61); /* Add a gold color to icons */
    font-size: 16px;
}

.footer .contact-info {
    font-size: 14px;
}

.footer-widget-item img {
    width: 150px;
    height: auto;
}

/*---------------------    نهايه تنسيق الفوتر  --------*/

/*------------------------------------ تنسيق خاص بالواتس اب whats app --------------------------------*/
 /* زر واتساب ثابت */
/* زر واتساب عائم (منسق) */
.whatsapp-float {
  position: fixed; /* تثبيت في الشاشة */
  bottom: 20px; /* المسافة من الأسفل */
  right: 20px; /* المسافة من اليمين */
  width: 60px; /* العرض */
  height: 60px; /* الطول */
  background-color: #25d366; /* لون واتساب */
  color: white; /* لون الأيقونة */
  border-radius: 50%; /* دائرة كاملة */
  display: flex; /* استخدام flex لتوسيط الأيقونة */
  align-items: center; /* توسيط عمودي */
  justify-content: center; /* توسيط أفقي */
  font-size: 26px; /* حجم الأيقونة */
  z-index: 999; /* فوق كل العناصر */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* ظل خفيف */
  transition: transform 0.3s ease, background-color 0.3s ease; /* تأثيرات ناعمة */
}

.whatsapp-float:hover {
  background-color: #1ebe5d; /* لون أفتح عند المرور */
  transform: scale(1.05); /* تكبير خفيف عند المرور */
  text-decoration: none; /* إزالة أي تأثير روابط */
}

/*---------- whats app end نهايه تنسيق الواتس اب ----*/




/* تنسيقات عربه التسوق مجمعه وكل واحده بتفصيلها  */

/* صفحه سله التسوق  Shopping Cart */ 

.cart-table th, .cart-table td {
  vertical-align: middle;
  text-align: center;
}
.quantity-input {
  width: 60px;
  text-align: center;
}
/* صفحه الخروج Checkout */

.checkout-form label {
  font-weight: bold;
}


/*صفحة تفاصيل الطلب (Order Details):*/

.order-summary {
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 10px;
}


/*---------------------------------------------------------*/


/*--------------------- shop تنسيق خاص بصفحه الشوب  -------------*/



/* تنسيقات مخصصة فقط للكروت داخل هذه الصفحة */

/* تنسيقات الحاوية العامة للكروت */
.shop-container-custom {
  margin-top: 20px; /* مسافة أعلى الحاوية */
}

/* تنسيقات الكروت */
.card-custom {
  border: 1px solid #ddd; /* إطار خفيف حول الكارت */
  border-radius: 10px; /* زوايا مستديرة */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* ظل خفيف */
  transition: transform 0.3s, box-shadow 0.3s; /* تأثير الحركة عند التمرير */
  width: 100%; /* ملء المساحة المتاحة */
  max-width: 300px; /* تحديد عرض ثابت للكروت */
  margin: auto; /* جعل الكروت في المنتصف */
}

.card-custom:hover {
  transform: translateY(-5px); /* رفع الكارت قليلاً عند التمرير */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* ظل أعمق عند التمرير */
}

/* تنسيقات الصور داخل الكروت */
.card-custom img {
  border-top-left-radius: 10px; /* زوايا مستديرة للصور */
  border-top-right-radius: 10px;
  object-fit: contain; /* احتواء الصورة */
  height: 200px; /* ارتفاع الصورة */
  width: 100%; /* عرض الصورة */
  background-color: #f8f8f8; /* خلفية خفيفة */
  padding: 10px; /* مسافة داخلية */
}

/* تنسيقات النصوص داخل الكروت */
.card-body-custom {
  text-align: center; /* توسيط النصوص */
  padding: 15px; /* مسافة داخلية */
}

.card-body-custom h6 {
  font-size: 16px; /* حجم عنوان المنتج */
  font-weight: bold; /* نص غامق */
  margin-bottom: 10px; /* مسافة تحت العنوان */
}

.card-body-custom .price-custom {
  font-size: 14px; /* حجم السعر */
  color: #dc3545; /* لون السعر */
  font-weight: bold; /* نص غامق */
}

/* تنسيقات الجزء السفلي للكارت */
.card-footer-custom {
  text-align: center; /* توسيط الزر */
  padding: 10px; /* مسافة داخلية */
}

.card-footer-custom .btn-custom {
  border-radius: 20px; /* زوايا مستديرة للزر */
  font-size: 14px; /* حجم النص داخل الزر */
  padding: 8px 20px; /* مسافة داخلية للزر */
}









/* =========================
   Top Navbar Icons (Search/Cart/Account)
   ========================= */
.ik-nav-actions{
  display:flex;
  align-items:center;
  gap:14px;
}

.ik-nav-icon{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#fff;
  text-decoration:none;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.ik-nav-icon svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.ik-nav-icon:hover{
  background:rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
  transform: translateY(-1px);
}

/* ===== Badge (عدد العناصر في السلة) ===== */
.ik-badge{
  position:absolute;
  top:-5px;
  right:-6px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:#dc3545;
  color:#fff;
  font-size:12px;
  line-height:18px;
  text-align:center;
  display:none;
}

/* Collapsible search bar below navbar */
.ik-nav-search{
  position:fixed;
  top:56px; /* default Bootstrap navbar height */
  left:0;
  right:0;
  z-index:1020;
  background:rgba(33,37,41,.98);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:10px 0;
}

.ik-nav-search-btn:hover{
  background:#dc3545;
  color:#fff;
}

@media (max-width: 991.98px){
  .ik-nav-actions{ margin-top:12px; }
  .ik-nav-search{ top:56px; }
}


/* =====================================================
   iKlinik – SaaS Comfort Light (Ultra Eye Friendly)
   - No dark mode
   - Soft background + low-saturation accents
   - Notion/Linear-ish feel
   ===================================================== */

/* Inter font (clean + readable) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root{
  --ik-bg: #f4f5f7;
  --ik-card: #ffffff;
  --ik-soft: #f8fafc;

  --ik-text: #111827;
  --ik-muted: #6b7280;

  --ik-border: #e9edf3;

  --ik-primary: #4f46e5;
  --ik-primary-soft: #eef2ff;

  --ik-success: #15803d;
  --ik-success-soft: #dcfce7;

  --ik-warning: #b45309;
  --ik-warning-soft: #fef3c7;

  --ik-danger: #b91c1c;
  --ik-danger-soft: #fee2e2;

  --ik-radius-lg: 16px;
  --ik-radius-md: 12px;
}

/* Base */
html, body{
  background: var(--ik-bg) !important;
  color: var(--ik-text);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Reduce harsh contrast */
a{ color: var(--ik-primary); }
a:hover{ color: #4338ca; }

/* Cards (Bootstrap + custom) */
.card, .panel, .box, .widget, .shadow, .shadow-sm{
  border-radius: var(--ik-radius-lg) !important;
}

.card, .panel, .box{
  background: var(--ik-card) !important;
  border: 1px solid var(--ik-border) !important;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04) !important;
}

/* Tables */
.table, table{
  background: var(--ik-card) !important;
}
.table thead th, table thead th{
  background: var(--ik-soft) !important;
  color: var(--ik-muted) !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--ik-border) !important;
}
.table td, .table th, table td, table th{
  border-top: 1px solid var(--ik-border) !important;
}
.table tbody tr:hover, table tbody tr:hover{
  background: #f3f4f6 !important;
}

/* Buttons */
.btn{
  border-radius: 12px !important;
  font-weight: 500 !important;
}
.btn-primary{
  background: var(--ik-primary) !important;
  border-color: var(--ik-primary) !important;
}
.btn-primary:hover{
  background: #4338ca !important;
  border-color: #4338ca !important;
}
.btn-outline-primary{
  border-color: var(--ik-primary) !important;
  color: var(--ik-primary) !important;
}
.btn-outline-primary:hover{
  background: var(--ik-primary-soft) !important;
  color: var(--ik-primary) !important;
}

/* Inputs */
.form-control, input, select, textarea{
  border-radius: 12px !important;
  border: 1px solid var(--ik-border) !important;
  box-shadow: none !important;
}
.form-control:focus, input:focus, select:focus, textarea:focus{
  border-color: rgba(79,70,229,0.6) !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,0.12) !important;
}

/* Checkbox accent */
input[type="checkbox"]{ accent-color: var(--ik-primary); }

/* Badges (soft) */
.badge{
  border-radius: 999px !important;
  padding: .35rem .6rem !important;
  font-weight: 600 !important;
}
.badge-success{ background: var(--ik-success-soft) !important; color: var(--ik-success) !important; }
.badge-primary{ background: var(--ik-primary-soft) !important; color: var(--ik-primary) !important; }
.badge-secondary{ background: #eef2f7 !important; color: #475569 !important; }

/* Tabs / pills */
.nav-pills .nav-link, .nav-tabs .nav-link{
  border-radius: 12px !important;
  color: var(--ik-muted) !important;
  font-weight: 600 !important;
}
.nav-pills .nav-link.active, .nav-tabs .nav-link.active{
  background: var(--ik-primary-soft) !important;
  color: var(--ik-primary) !important;
  border-color: var(--ik-border) !important;
}

/* Small counters (numbers) – calmer */
.badge.bg-secondary, .badge-secondary{
  background: #e8edf6 !important;
  color: #334155 !important;
}

/* Reduce red/green saturation in UI blocks */
.text-success{ color: var(--ik-success) !important; }
.text-danger{ color: var(--ik-danger) !important; }
.text-muted{ color: var(--ik-muted) !important; }

/* Make headings less harsh */
h1,h2,h3,h4,h5{
  letter-spacing: -0.02em;
}

/* =====================================================
   NAVBAR – SaaS Comfort (Darker bar + strong active)
   ===================================================== */

/* شريط علوي أغمق شوية */
.navbar,
.navbar-dark,
.bg-dark{
  background: #e3e7ed !important;
  border-bottom: 1px solid #d5dae1 !important;
}

/* اللوجو */
.navbar .navbar-brand{
  color: #111827 !important;
  font-weight: 600 !important;
}

/* لينكات الناف */
.navbar .nav-link{
  color: #4b5563 !important;
  font-weight: 500 !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  transition: all .15s ease !important;
}

/* Hover */
.navbar .nav-link:hover{
  background: #dce2ea !important;
  color: #111827 !important;
}

/* Active ثابت (واضح جدًا) */
.navbar .nav-link.active,
.navbar .nav-item.active .nav-link{
  background: #2f3a4a !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* مهم: إلغاء أي underline قديم */
.navbar .nav-link.active::after{
  content: none !important;
}

/* زر logout لو معمول btn */
.navbar .btn,
.navbar .btn-outline-light{
  border-color: #cfd6df !important;
  color: #111827 !important;
  background: #f7f8fa !important;
}
.navbar .btn:hover,
.navbar .btn-outline-light:hover{
  background: var(--ik-surface) !important;
}


/* =========================================
   Navbar Active – Soft Highlight Only
   ========================================= */

/* شريط عادي */
.navbar,
.navbar-dark,
.bg-dark{
  background: #e3e7ed !important;
  border-bottom: 1px solid #d5dae1 !important;
}

/* الروابط */
.navbar .nav-link{
  color: #111827 !important;
  font-weight: 500 !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
}

/* Hover خفيف */
.navbar .nav-link:hover{
  background: #dde3ea !important;
}

/* ACTIVE – خلفية فاتحة بس */
.navbar .nav-link.active,
.navbar .nav-item.active .nav-link{
  background: #d6dde6 !important;  /* رمادي فاتح منوّر */
  color: #111827 !important;       /* يفضل أسود */
  font-weight: 600 !important;
}

/* إلغاء أي underline */
.navbar .nav-link.active::after{
  content: none !important;
}



.navbar .nav-link.active,
.navbar .nav-item.active .nav-link{
  background: #fee2e2 !important;
  border: 1px solid #fecaca !important;
  color: #111827 !important;
  font-weight: 600 !important;
}


/* ===========================
   RTL Layout (Admin only)
   =========================== */

/* الصفحة كلها RTL */
body {
    direction: rtl;
    text-align: right;
}

/* الجداول */
table th,
table td {
    text-align: right;
}

/* الفورم */
.form-control,
input,
select,
textarea {
    text-align: right;
}

/* ===========================
   Navbar stays LTR
   =========================== */

.navbar {
    direction: ltr !important;
    text-align: left !important;
}

.navbar .navbar-nav {
    margin-left: auto !important;
    margin-right: 0 !important;
}


/*
  iKlinik Stores - Public UI Glass Theme
  الهدف: شياكة زجاجية + نفس DNA (أسود/فحمي + أحمر) بدون ما نكسر الصفحات.
  IMPORTANT: هذا الملف Override فوق كل CSS السابقة.
*/

:root{
  --ik-dark: #212529;      /* نفس الفوتر */
  --ik-dark-2: #181a1d;    /* نفس footer-bottom */
  --ik-accent: #ec3d3d;    /* الأحمر الأساسي */
  --ik-bg: #f5f6f7;
  --ik-card: rgba(255,255,255,.72);
  --ik-border: rgba(255,255,255,.22);
  --ik-shadow: 0 12px 30px rgba(0,0,0,.12);
}

html, body{
  direction: ltr !important; /* الموقع Public لازم يبقى LTR */
  background: var(--ik-bg);
}

/* =========================
   Navbar (Top)
   ========================= */
.navbar.navbar-expand-lg{
  background: rgba(33,37,41,.72) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.navbar.navbar-expand-lg .navbar-brand{
  font-weight: 800;
  letter-spacing: .2px;
  color: #fff !important;
}

.navbar.navbar-expand-lg .navbar-nav{
  gap: 6px; /* منع الزقّة */
}

.navbar.navbar-expand-lg .nav-link{
  color: rgba(255,255,255,.88) !important;
  padding: .65rem .9rem !important;
  border-radius: 999px;
  transition: background .15s ease, transform .15s ease;
}

.navbar.navbar-expand-lg .nav-link:hover{
  background: rgba(255,255,255,.10);
  transform: translateY(-1px);
}

.navbar.navbar-expand-lg .nav-link.active{
  background: rgba(236,61,61,.18);
  color: #fff !important;
}

/* أي Icon buttons أعلى الناف */
.navbar.navbar-expand-lg .nav-top-icons a{
  color: rgba(255,255,255,.92) !important;
}

/* Mobile: أفضل مسافات داخل الـ collapse */
@media (max-width: 991.98px){
  .navbar.navbar-expand-lg .navbar-collapse{
    padding: .75rem 0 1rem;
  }
  .navbar.navbar-expand-lg .navbar-nav{
    gap: 10px;
  }
  .navbar.navbar-expand-lg .nav-link{
    padding: .75rem 1rem !important;
  }
}

/* =========================
   Section titles
   ========================= */
.home-section-title{
  text-align: left;
  font-size: 28px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 14px;
}
@media (max-width: 576px){
  .home-section-title{ font-size: 22px; }
}

/* =========================
   Glass cards / buttons
   ========================= */

/* كروت الهوم الصغيرة (All Accessories / Apple Product / Technical Support) */
#features .card,
.ipad-mkt-card,
.best-selling-aside .card{
  background: var(--ik-card);
  border: 1px solid var(--ik-border);
  box-shadow: var(--ik-shadow);
  border-radius: 22px;
}

/* كروت الكاتيجوري في أعلى الهوم */
.home-top-cards .card{
  overflow: hidden;
}
.home-top-cards .card-img-top{
  height: 160px;
  object-fit: contain;
  padding: 14px 14px 0;
}
.home-top-cards .card-body{
  padding: 14px;
}
@media (max-width: 576px){
  .home-top-cards .card-img-top{ height: 180px; }
}

/* كروت المنتجات في الهوم */
.home-product-card{
  background: var(--ik-card);
  border: 1px solid var(--ik-border);
  box-shadow: var(--ik-shadow);
}

/* FIX: منع Class name collision مع .footer بتاعة الموقع */
.home-product-card .pc-footer{
  background: transparent;
  border-top: 1px solid rgba(17,24,39,.06);
}

/* أزرار زجاجية */
.btn{
  border-radius: 999px;
}

.btn-outline-danger{
  border-color: var(--ik-outline-danger-border, rgba(236,61,61,.55)) !important;
  /* تعديل لون نص الأزرار من المصدر الفعلي المتحكم */
  color: var(--ik-outline-danger-text, var(--ik-accent)) !important;
  background: rgba(255,255,255,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn-outline-danger:hover{
  background: rgba(236,61,61,.12) !important;
}

.btn-outline-secondary{
  background: rgba(255,255,255,.30);
  border-color: rgba(17,24,39,.12) !important;
}

/* =========================
   Banners on mobile
   ========================= */
@media (max-width: 576px){
  .home-section-banner{ border-radius: 16px; }
  .home-section-banner img{ max-height: 220px; object-fit: cover; }
  .grid-banners img{ max-height: 220px; object-fit: cover; }
}

/* =========================
   Footer unchanged, but make sure it stays dark
   ========================= */
.footer{
  background-color: var(--ik-dark) !important;
}
.footer-bottom{
  background-color: var(--ik-dark-2) !important;
}

/* =========================
   Mobile bottom bar (keep neat)
   ========================= */
.mobile-bottom-bar{
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}


/* ========================= 3) COMPONENTS ========================= */

/* =========================================================
   components.css
   مكوّنات الواجهة (Navbar / Home Sections / Cards ...)
   ملاحظة مهمة:
   - ممنوع استخدام hacks لكسر الكونتينر (100vw + left 50% + -50vw)
   - ممنوع تكرار overrides فوق overrides
   - أي تعديل جديد يكون داخل بلوك واضح بعنوانه
   ========================================================= */

:root{
  --ik-dark:#0f1115;
  --ik-dark-2:#141824;
  --ik-accent:#ff3b3b;
  --ik-glass:rgba(255,255,255,.06);
  --ik-glass-2:rgba(255,255,255,.10);
  --ik-border:rgba(255,255,255,.10);
  --ik-radius:18px;
  --ik-shadow:0 16px 40px rgba(0,0,0,.28);
}

/* ===== Premium Navbar (Dark Glass) ===== */

nav/* ===== Navbar Premium (بديل Bootstrap) =====
   - ثابت أعلى الصفحة
   - خلفية زجاجية + Blur
   - يدعم الموبايل (Collapse) + Dropdown
*/
.navbar{
  /* أقرب لزجاج أسود غامق جدًا */
  background: rgba(5,6,8,.68) !important;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.08);
}
nav.navbar .container{ max-width: 1280px; }
nav.navbar .navbar-brand img{ height: 34px; width:auto; }

nav.navbar .navbar-nav{ gap: 10px; }
nav.navbar .nav-link{
  padding:10px 12px;
  border-radius: 12px;
  color: rgba(255,255,255,.88) !important;
  letter-spacing:.2px;
  transition: background .2s ease, transform .2s ease, color .2s ease;
  position: relative;
}
nav.navbar .nav-link:hover{ background: rgba(255,255,255,.07); color:#fff !important; transform: translateY(-1px); }
nav.navbar .nav-link.ik-active{
  background: rgba(255,59,59,.12);
  color:#fff !important;
}
nav.navbar .nav-link.ik-active::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:4px;
  height:2px;
  background: var(--ik-accent);
  border-radius: 99px;
  opacity:.9;
}

/* Top right icons */
.ik-nav-actions{ display:flex; gap:10px; align-items:center; }
.ik-nav-icon{
  width:42px; height:42px;
  border-radius: 999px;
  background: var(--ik-glass);
  border: 1px solid rgba(255,255,255,.10);
  display:flex; align-items:center; justify-content:center;
  transition: transform .2s ease, background .2s ease;
  position: relative;
}
.ik-nav-icon svg{ width:20px; height:20px; stroke: rgba(255,255,255,.9); fill:none; stroke-width:2; }
.ik-nav-icon:hover{ background: rgba(255,255,255,.12); transform: translateY(-2px); }
.ik-badge{
  position:absolute;
  top:-6px; right:-6px;
  min-width:18px; height:18px;
  padding:0 5px;
  border-radius:999px;
  background: var(--ik-accent);
  color:#fff;
  font-size:11px;
  line-height:18px;
  text-align:center;
  border: 2px solid rgba(15,17,21,.9);
}

/* Search bar polish */
/* ===== شريط البحث (تحت النافبار) =====
   - يظهر/يختفي من أيقونة البحث
   - هدفه سرعة الوصول للمنتجات
*/
.ik-searchbar{
  background: rgba(15,17,21,.88);
  backdrop-filter: blur(16px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.ik-searchbar__input{
  border-radius: 999px;
  padding: 12px 16px;
}
.ik-searchbar__btn{ border-radius: 999px; padding: 10px 16px; }

/* ===== Premium Product Cards (Home + Shop) ===== */
.home-product-grid{ gap: 18px !important; }

.home-product-card{
  border-radius: var(--ik-radius) !important;
  overflow:hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.04);
  background: rgba(255,255,255,.85);
}
.home-product-card img{
  width:100%;
  /* خلي الصورة هي المسيطرة داخل الكارت */
  aspect-ratio: auto;
  height: 200px;
  object-fit: contain;
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(245,245,245,1));
  padding: 10px;
}
.home-product-card .body{ padding: 10px 12px; flex: 0 !important; }
.home-product-card .name{ font-size: 13px; font-weight: 600; margin-bottom: 4px; min-height: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-product-card .price{ font-weight: 700; }
.home-product-card .price .old{ font-weight: 500; }

.pc-footer{
  padding: 10px 12px;
  display:flex;
  gap: 10px;
  align-items:center;
  background: transparent;
  border-top: 1px solid rgba(0,0,0,.05);
}

.ik-qty{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 14px;
  background: rgba(15,17,21,.06);
  border:1px solid rgba(0,0,0,.06);
}
.ik-qty button{
  width:30px; height:30px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.9);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size: 18px;
  line-height: 18px;
  transition: transform .15s ease, background .2s ease;
}
.ik-qty button:hover{ transform: translateY(-1px); background: var(--ik-surface); }
.ik-qty input{
  width: 34px;
  text-align:center;
  border:none;
  background: transparent;
  font-weight: 700;
  outline:none;
}

.ik-add-btn{
  /* زر أيقونة فقط بدون كلمة Add */
  flex:0 0 auto;
  width: 46px;
  border:none;
  border-radius: 14px;
  padding: 10px;
  background: rgba(255,59,59,.95);
  color:#fff;
  font-weight: 700;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  transition: transform .15s ease, filter .2s ease;
}
.ik-add-btn:hover{ transform: translateY(-1px); filter: brightness(.96); }
.ik-add-btn svg{ width:18px; height:18px; stroke:#fff; }
.ik-add-btn span{ display:none !important; }

/* فصل أوضح بين صفين كروت الأقسام العلوية (8 عناصر) */
.home-top-cards .row{ --bs-gutter-y: 2rem; }

/* Shop grid cards */
#productsGrid .card{
  border-radius: var(--ik-radius);
  overflow:hidden;
  border:1px solid rgba(0,0,0,.05);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
#productsGrid .card-img-top{
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: linear-gradient(180deg, #fff, #f6f6f6);
  padding: 12px;
}
#productsGrid .card-footer{
  display:flex;
  align-items:center;
  gap:10px;
  border-top: 1px solid rgba(0,0,0,.05);
}

/* ===== Mini cart drawer ===== */
.ik-drawer-backdrop{
  position: fixed;
  inset:0;
  background: rgba(0,0,0,.42);
  opacity:0;
  pointer-events:none;
  transition: opacity .22s ease;
  z-index: 9998;
}
.ik-drawer{
  position: fixed;
  top:0; right:0;
  height:100vh;
  width: 420px;
  max-width: 92vw;
  background:#ffffff;
  border-left: 1px solid #e5e7eb;
  transform: translateX(102%);
  transition: transform .24s ease;
  z-index: 9999;
  display:flex;
  flex-direction: column;
}
.ik-drawer.open{ transform: translateX(0); }
.ik-drawer-backdrop.open{ opacity:1; pointer-events:auto; }
.ik-drawer header{
  padding: 22px 18px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  border-bottom: 1px solid #eceff3;
}
.ik-drawer h3{ color:#111827; font-size:24px; font-weight:800; margin:0; display:flex; align-items:baseline; gap:10px; }
.ik-drawer h3 small{ color:#4b5563; font-size:17px; font-weight:500; }
.ik-drawer .ik-x{
  width:50px;height:50px;
  border-radius: 10px;
  border:1px solid #b6bcc6;
  background:#fff;
  color:#2f3743;
  cursor:pointer;
  font-size:28px;
  line-height:1;
}
.ik-drawer .ik-x:hover{ background:#f8fafc; }
.ik-drawer .ik-drawer-body{ padding: 18px 18px 14px; overflow:auto; flex:1; }
.ik-mini-item{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:12px 0 18px;
  margin-bottom:16px;
}
.ik-mini-item img{ width:132px;height:132px; border-radius: 20px; object-fit: contain; background:#fff; padding:10px; border:1px solid #e5e7eb; flex:0 0 auto; }
.ik-mini-item .ik-mini-copy{ flex:1; padding-top:8px; }
.ik-mini-item .t{ color:#2f3743; font-weight:500; font-size:20px; line-height:1.45; margin-bottom:20px; }
.ik-mini-item .m{ color:#d12f5b; font-size:20px; font-weight:800; margin-bottom:8px; }
.ik-mini-item .m + .m{ color:#374151; font-size:18px; font-weight:700; }
.ik-mini-item .r{ display:flex; align-items:center; justify-content:flex-end; padding-top:50px; }
.ik-mini-item .rm{ width:50px; height:50px; border-radius:18px; border:1px solid #d6dbe3; background:#fff; color:#404a57; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0; }
.ik-mini-item .rm svg{ width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ik-mini-item .rm:hover{ background:#fff6f5; color:#d12f1f; border-color:#f1c7c2; }
.ik-mini-empty{ color:#6b7280; padding:12px 2px; font-size:15px; }

.ik-drawer footer{
  padding: 20px 18px 24px;
  border-top: 1px solid #eceff3;
  background:#fff;
}
.ik-mini-total{ display:flex; justify-content: space-between; color:#2f3743; font-size:18px; font-weight:800; margin-bottom: 18px; }
.ik-mini-total span:last-child{ color:#d12f5b; font-size:22px; }
.ik-mini-actions{ display:flex; gap:14px; }
.ik-mini-actions a{
  flex:1;
  text-align:center;
  padding: 16px 14px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration:none;
  font-size:17px;
}
.ik-mini-actions .view{ background:#fff; border:2px solid #1f2937; color:#1f2937; }
.ik-mini-actions .chk{ background:#d12f1f; border:2px solid #d12f1f; color:#fff; }

/* Toast */
.ik-toast-wrap{ position: fixed; left: 16px; bottom: 86px; z-index: 10000; display:flex; flex-direction:column; gap:10px; }
@keyframes ikToastIn{ from{ transform: translateY(8px); opacity:0 } to{ transform: translateY(0); opacity:1 } }

/* Mobile tweaks */
@media (max-width: 768px){
  nav.navbar .navbar-nav{ gap: 6px; }
  nav.navbar .nav-link{ padding: 10px 10px; }
  .ik-nav-icon{ width:40px; height:40px; }
  .ik-toast-wrap{ bottom: 96px; }
  .best-selling-wrap{ grid-template-columns: 1fr !important; }
}


/* ===== HOME CATEGORIES PREMIUM SECTION ===== */

.home-categories {
    width: 100%;
    background: var(--ik-surface);
    padding: 120px 0 150px;
    margin-bottom: 160px;
}

.category-row:first-child {
    margin-bottom: 90px; /* strong separation between top 4 and bottom 4 */
}

.category-card img {
    width: 78%;
    max-width: 240px;
    transition: transform 0.3s ease;
}

.category-card:hover img {
    transform: translateY(-8px);
}

.category-btn:hover {
    background: var(--ik-accent);
    color: #ffffff;
}



/* ===== HOME TOP CATEGORY CARDS (تم تنظيفه) ===== */
/* ===== Home: أقسام البزنس الأساسية (8 عناصر) =====
   - Grid: 4 فوق + 4 تحت
   - صور عائمة + زرار بإطار
   - مسافات محسوبة (Minimal)
*/
#home-top-cards{
  --bs-gutter-x: 40px;
  --bs-gutter-y: 90px; /* separation between first row 4 and second row 4 */
}

/* موبايل: نقلل المسافات العمودية/الأفقية بشكل واضح */
@media (max-width: 768px){
  #home-top-cards{
    --bs-gutter-x: 16px;
    --bs-gutter-y: 20px;
  }
  .category-row:first-child{
    margin-bottom: 20px;
  }
}

/* remove card container look */
.home-top-cards .card{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* make image float on white */
.home-top-cards .card-img-top{
  width: 78%;
  max-width: 240px;
  margin: 0 auto;
  padding-top: 10px;
  transition: transform .3s ease;
}

.home-top-cards .card:hover .card-img-top{
  transform: translateY(-8px);
}

/* keep outlined button but smaller (~15%) */
.home-top-cards .btn.btn-outline-danger{
  display: inline-block;
  width: auto !important; /* override w-100 */
  min-width: 170px;
  padding: 7px 20px; /* smaller */
  font-size: 14px;
  border-radius: 10px;
  border-width: 1.5px;
}

/* center button under image */
.home-top-cards .card-body{
  padding-top: 18px;
  padding-bottom: 0;
}


/* ===== HOME TOP CARDS (CATEGORIES) FINAL =====
   هدف نهائي ثابت:
   - جوه الكونتينر (home-container) بدون أي سحب يمين/شمال
   - 4 فوق + 4 تحت على الديسكتوب
   - مسافة قوية بين الصفين
   - صور عائمة على خلفية بيضاء
   - زرار بإطار أصغر ~15%
   - فاصل واضح تحت القسم
*/

/* القسم نفسه */
.home-container .home-top-cards{
  background: var(--ik-surface);
  padding:70px 0 85px;
  border-radius:22px;
  overflow:hidden; /* عشان الحواف */
  margin: 24px 0 90px; /* فصل واضح قبل اللي بعده */
}

/* فاصل واضح زي المرجع */
.home-container /* خط فاصل خفيف تحت قسم الأقسام لتمييزه عن باقي الصفحة */
.home-top-cards::after{
  content:"";
  display:block;
  height:1px;
  background:#f0f0f0;
  margin-top:85px;
}

/* الجريد: 4 أعمدة ثابت */
#home-top-cards.home-top-cards-grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  column-gap:40px;
  row-gap:95px; /* الفاصل بين 4 فوق و 4 تحت */
  justify-items:center;
  align-items:start;
  margin:0;
}

/* responsive */
@media (max-width: 991.98px){
  #home-top-cards.home-top-cards-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
    column-gap:22px;
    row-gap:55px;
  }
}
@media (max-width: 575.98px){
  #home-top-cards.home-top-cards-grid{
    grid-template-columns:1fr;
    row-gap:30px;
  }
}

/* شكل العناصر */
#home-top-cards .home-top-col{ width:100%; text-align:center; }

/* إزالة شكل الكروت */
.home-top-cards .card{
  background:transparent;
  border:0;
  box-shadow:none;
  border-radius:0;
}

/* الصورة عائمة */
.home-top-cards .card img.card-img-top{
  width:78%;
  max-width:240px;
  display:block;
  margin:0 auto 18px;
  transition:transform .28s ease;
}
.home-top-cards .card:hover img.card-img-top{ transform:translateY(-8px); }

/* زرار بإطار أصغر ~15% */
.home-top-cards .btn.btn-outline-danger{
  padding:7px 20px;
  font-size:14px;
  border-radius:10px;
  border-width:1.5px;
}
.home-top-cards .card .btn{
  width:70%;
  max-width:180px;
  margin:0 auto;
  display:inline-flex;
  justify-content:center;
  align-items:center;
}
@media (max-width:575.98px){
  .home-top-cards .card .btn{ width:85%; }
}



/* ===== HOME TOP CARDS FINAL OVERRIDE (v9) =====
   إلغاء كسر الكونتينر (100vw/left:50%/-50vw) لأنّه بيزق المحتوى ويعمل فراغات
   + تثبيت Grid 4 فوق + 4 تحت داخل الكونتينر
*/

.home-container .home-top-cards{
  width: 100% !important;
  max-width: var(--home-max) !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;

  background: var(--ik-surface) !important;
  padding: 70px 0 85px !important;
  margin-bottom: 0 !important; /* هنحط الفاصل بالـ after */
}

/* فاصل واضح تحت القسم */
.home-container .home-top-cards::after{
  content:"";
  display:block;
  height:1px;
  background:#f0f0f0;
  margin-top: 85px;
}

/* grid ثابت */
#home-top-cards{
  /* منع الاعتماد على override ضعيف في هذا القسم */
  /* الإبقاء على حدود الزر الحمراء مع تحويل النص إلى الأسود */
  --ik-outline-danger-text: #000;
  --ik-outline-danger-border: rgba(236,61,61,.55);
  display:grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  column-gap: 40px !important;
  row-gap: 95px !important; /* فاصل بين 4 و4 */
  width: 100% !important;
  justify-items: center !important;
  align-items: start !important;
}

/* الغاء تأثيرات bootstrap col/row */
#home-top-cards > .home-top-col{ width:100% !important; }

/* الصور عائمة */
#home-top-cards .card{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
#home-top-cards .card img.card-img-top{
  width:78% !important;
  max-width:240px !important;
  margin:0 auto 18px !important;
  display:block !important;
  transition: transform .28s ease !important;
}
#home-top-cards .card:hover img.card-img-top{
  transform: translateY(-8px) !important;
}

/* زرار إطار أصغر ~15% */
#home-top-cards .btn.btn-outline-danger{
  padding: 7px 20px !important;
  font-size: 14px !important;
  border-radius: 10px !important;
  border-width: 1.5px !important;
}
#home-top-cards .card .btn{
  width: 70% !important;
  max-width: 180px !important;
  margin: 0 auto !important;
  display: inline-flex !important;
  justify-content:center !important;
}

/* Responsive */
@media (max-width: 991.98px){
  #home-top-cards{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 22px !important;
    row-gap: 55px !important;
  }
  #home-top-cards .card .btn{ width:85% !important; }
}
@media (max-width: 575.98px){
  #home-top-cards{
    grid-template-columns: 1fr !important;
    row-gap: 30px !important;
  }
}



/* ===== HOME TOP CARDS SPACING TUNING v10 =====
   حسب ملاحظات الصورة:
   - تقليل مسافة أعلى القسم (تقريبًا -70%)
   - تقليل المسافة بين الصفين (تقريبًا -70%)
   - تقليل المسافة قبل الفاصل تحت القسم (تقريبًا -90%)
*/

/* أعلى/أسفل القسم */
.home-container .home-top-cards{
  padding-top: 24px !important;   /* كان 70px */
  padding-bottom: 38px !important;/* كان 85px */
}

/* مسافة بين 4 فوق و 4 تحت */
#home-top-cards{
  row-gap: 30px !important; /* كان 95px */
}

/* مسافة قبل خط الفاصل تحت القسم */
.home-container .home-top-cards::after{
  margin-top: 10px !important; /* كان 85px */
}
@media (max-width: 991.98px){
  #home-top-cards{ row-gap: 18px !important; }
}
@media (max-width: 575.98px){
  #home-top-cards{ row-gap: 14px !important; }
}



/* =========================================================
   Navbar (بديل Bootstrap)
   الهدف: نحافظ على نفس HTML الحالي في navbar.php
   - إزالة شكل القوائم الافتراضي (bullets)
   - توزيع العناصر Flex
   - Dropdown بسيط
   - Collapse للموبايل/التابلت
   ========================================================= */

.navbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(30,30,30,.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.navbar .container{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.navbar-brand img{
  height: 34px;
  width: auto;
  display:block;
}

.navbar-toggler{
  display:none;
  background: transparent;
  border: 0;
  color: #fff;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  cursor:pointer;
}
.navbar-toggler:focus-visible{
  outline: 2px solid rgba(255,255,255,.35);
  outline-offset: 2px;
}

/* منطقة الروابط */
.navbar-collapse{
  display:flex;
  align-items:center;
  justify-content: space-between;
  flex: 1;
  gap: 14px;
}

.navbar-nav{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  align-items:center;
  gap: 18px;
}

.nav-item{ position: relative; }
.nav-link{
  color: rgba(255,255,255,.88);
  text-decoration:none;
  font-weight: 500;
  padding: 10px 10px;
  border-radius: 14px;
  display:inline-flex;
  align-items:center;
  gap: 8px;
}
.nav-link:hover{ background: rgba(255,255,255,.06); }

/* Active (نفس منطق الـ underline اللي اتفقنا عليه) */
.nav-link.ik-active,
.nav-link.active{
  background: rgba(255,255,255,.08);
}
.nav-link.ik-active::after,
.nav-link.active::after{
  content:"";
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  height: 2px;
  background: rgba(217,74,74,.9);
  border-radius: 99px;
}

/* Dropdown */
.dropdown-toggle::after{ content:""; }
.dropdown-menu{
  display:none;
  position:absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 220px;
  background: rgba(20,20,20,.95);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.dropdown-menu.is-open{ display:block; }

.dropdown-item{
  display:block;
  padding: 10px 12px;
  border-radius: 12px;
  color: rgba(255,255,255,.92);
  text-decoration:none;
  font-size: 14px;
}
.dropdown-item:hover{ background: rgba(255,255,255,.08); }

/* أيقونات اليمين */
.ik-nav-actions{
  display:flex;
  align-items:center;
  gap: 12px;
}
.ik-nav-icon{
  width: 44px;
  height: 44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.9);
  text-decoration:none;
  position: relative;
}
.ik-nav-icon svg{
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ik-nav-icon:hover{ background: rgba(255,255,255,.06); }

.ik-badge{
  position:absolute;
  top: 5px;
  right: 5px;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--ik-accent);
  color:#fff;
  font-size: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height: 1;
}

/* Collapse للموبايل */
@media (max-width: 991.98px){
  .navbar-toggler{ display:inline-flex; align-items:center; justify-content:center; }

  .navbar-collapse{
    display:none;
    flex-direction: column;
    align-items: stretch;
    padding: 12px 0 6px;
  }
  .navbar-collapse.is-open{ display:flex; }

  .navbar-nav{
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .nav-link{
    width: 100%;
    justify-content: flex-start;
  }
  .dropdown-menu{
    position: static;
    display:none;
    margin-top: 8px;
  }
  .dropdown-menu.is-open{ display:block; }
  .ik-nav-actions{
    justify-content:flex-start;
    padding-top: 10px;
  }
}


/* ===== أيقونات SVG موحّدة (Premium Stroke) ===== */
.ik-ic{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}


/* ========================= 4) PAGES: HOME ========================= */
/* home.css - معزول للهوم فقط */

:root{
  --home-max: 1200px;
}

.home-container{
  max-width: var(--home-max);
  margin: 0 auto;
  padding: 0 16px;
}

/* إصلاح أكبر مشكلة: card-custom كان عامل max-width 300 وبيكسر الجريد */
.card-custom{ max-width: none !important; margin: 0 !important; }

/* توحيد شكل كروت الأقسام العلوية */
.home-top-cards .card{
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.06);
}
.home-top-cards .card img{
  width: 100%;
  height: 220px;
  object-fit: contain;
  background: var(--ik-surface);
}
.home-top-cards .card .btn{
  border-radius: 999px;
}

/* جريد المنتجات */
.home-product-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 992px){
  .home-product-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.home-product-card{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 20px rgba(0,0,0,.05);
  background: var(--ik-surface);
  display:flex;
  flex-direction:column;
  min-height: 100%;
}
.home-product-card img{
  width:100%;
  height: 240px;
  object-fit: contain;
  background: var(--ik-surface);
  padding: 14px;
}
.home-product-card .body{
  padding: 14px 14px 10px;
  flex:1;
}
.home-product-card .name{
  font-size: 14px;
  line-height: 1.35;
  min-height: 40px;
}
.home-product-card .price{
  margin-top: 8px;
  font-weight: 700;
}
.home-product-card .price .old{
  text-decoration: line-through;
  opacity: .55;
  font-weight: 500;
  margin-left: 8px;
}
.home-product-card .pc-footer{
  padding: 10px 14px 14px;
  display:flex;
  gap:10px;
}
.home-product-card .pc-footer .btn{
  border-radius: 999px;
}

/* بانر بعرض السيكشن */
.home-section-banner{
  width:100%;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  background: var(--ik-surface);
}
.home-section-banner img{
  width:100%;
  height: 320px;
  object-fit: cover;
  display:block;
}
@media (max-width: 768px){
  .home-section-banner img{ height: auto; }
  .home-iphones-banner img,
  .home-macbook-banner img,
  .home-best-devices-banner img,
  .home-ipads-banner img{
    height: auto;
    object-fit: contain;
    object-position: center center;
  }
}

/* سيكشن البيست سيلنج + بانر جانبي */
.best-selling-wrap{
  display:grid;
  grid-template-columns: 1fr 280px;
  gap: 18px;
  align-items:start;
}
@media (max-width: 992px){
  .best-selling-wrap{ grid-template-columns: 1fr; }
}
.best-selling-aside .card{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}
.best-selling-aside img{
  width:100%;
  height: 520px;
  object-fit: cover;
  display:block;
}
@media (max-width: 992px){
  .best-selling-aside img{ height: 360px; }
}

/* iPad marketing cards (صورة + نقاط) */
.ipad-marketing{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
  margin-bottom: 18px;
}
@media (max-width: 992px){
  .ipad-marketing{ grid-template-columns: 1fr; }
}
.ipad-mkt-card{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  background: var(--ik-surface);
}
.ipad-mkt-card img{
  width:100%;
  height: 260px;
  object-fit: cover;
  display:block;
}
.ipad-mkt-card .content{
  padding: 14px 16px;
}
.ipad-mkt-card ul{ margin: 10px 0 0; padding-right: 18px; }

/* فيديو */
.home-video{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items:start;
}
@media (max-width: 992px){
  .home-video{ grid-template-columns: 1fr; }
}
.home-video iframe, .home-video video{
  width:100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow:hidden;
  border: 0;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}

/* ========== iKlinik Navbar Search Toggle ========== */
.ik-searchbar{
  display:none;
  position:fixed;
  left:0;
  right:0;
  top: var(--ik-navbar-h);
  z-index:1025;
  background:rgba(33,37,41,.98);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.ik-searchbar.is-open{display:block}
.ik-searchbar__form{display:flex;gap:10px;align-items:center;padding:10px 0}
.ik-searchbar__input{flex:1;min-width:0;border-radius:999px;border:1px solid rgba(220,53,69,.6);padding:10px 14px;outline:none}
.ik-searchbar__btn{border-radius:999px;border:1px solid rgba(220,53,69,.8);background:transparent;color:#dc3545;padding:10px 16px}
.ik-searchbar__btn:hover{background:rgba(220,53,69,.1)}


/* ========================= 5) MOBILE + BOTTOM BAR ========================= */
/* iKlinik Stores — Mobile fixes (DNA-preserving)
   الهدف: منع تكسير الموبايل + تحسين المساحات + إصلاح الكروت/الفلاتر/الكارت/الأكاونت
   ملاحظة: الملف ده Override فقط، ما يغيرش ألوان البراند الأساسية.
*/

html, body{ max-width:100%; overflow-x:hidden; }
img, video{ max-width:100%; height:auto; }
.container{ max-width: 1200px; }

/* منع العناصر اللي بتطلع بره الشاشة */
*{ box-sizing:border-box; }
.row{ --bs-gutter-x: 1rem; }

/* ====== Navbar/Search spacing (على الموبايل) ====== */
@media (max-width: 991.98px){
  .navbar .container{ padding-left: 12px; padding-right: 12px; }
  .ik-searchbar__form{ gap: 10px; }
  .ik-searchbar__input{ min-width: 0; }
}

/* ====== Category bar: سحب أفقي بدل تكسير ====== */
#categoryBar{
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap !important;
  padding-bottom: 6px;
  gap: 8px !important;
}
#categoryBar::-webkit-scrollbar{ display:none; }

/* ستايل خفيف للـ chips لو موجودة كأزرار/روابط */
#categoryBar .btn,
#categoryBar a,
#categoryBar button{
  white-space: nowrap;
  border-radius: 999px !important;
}

/* ====== Products grid/card fixes ====== */
#productsGrid .card{
  border-radius: 18px;
  overflow: hidden;
}
#productsGrid .card-img-top{
  height: 180px;
  object-fit: contain;
  background: var(--ik-surface);
  padding: 10px;
}
#productsGrid .card-footer{
  border-top: 0;
}
#productsGrid .card-footer .btn{
  border-radius: 999px;
}
#productsGrid .card-footer .btn.ik-btn-icon{
  width: 44px;
  min-width: 44px;
  padding-left: 0;
  padding-right: 0;
}

/* على الموبايل: خلي أزرار الكارت ما تكسرش */
@media (max-width: 576px){
  #productsGrid .card-img-top{ height: 150px; }
  #productsGrid .card-footer{ flex-wrap: nowrap; }
  #productsGrid .card-footer .btn{ font-size: 13px; padding: 10px 12px; }
}

/* ====== Cart page: تحويل الجدول لكروت على الموبايل ====== */
@media (max-width: 768px){
  .table-responsive{ border: 0; }
  table.table{ border: 0; }
  table.table thead{ display:none; }
  table.table tbody tr{
    display:block;
    margin: 0 0 12px 0;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 16px;
    overflow:hidden;
    background: var(--ik-surface);
  }
  table.table tbody td{
    display:flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid rgba(0,0,0,.06);
  }
  table.table tbody td:last-child{ border-bottom:0; }
  table.table tbody td::before{
    content: attr(data-label);
    font-weight: 700;
    color: rgba(0,0,0,.65);
    margin-right: 10px;
  }
  /* أول خلية (Product) */
  table.table tbody td.cart-col-product{
    align-items:flex-start;
  }
  table.table tbody td.cart-col-product::before{ content:"Product"; }
  table.table tbody td.cart-col-product > div{ flex:1; }
}

/* Totals card look */
.ik-cart-totals{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  padding: 14px 16px;
  background: var(--ik-surface);
}
.ik-cart-totals .btn{ border-radius: 999px; }

/* ====== Account/Auth: كسر الإيميل الطويل + أزرار كاملة ====== */
.auth-alert, .auth-card{
  word-break: break-word;
  overflow-wrap:anywhere;
}
@media (max-width: 576px){
  .auth-actions{ flex-direction: column; align-items: stretch; }
  .auth-actions .btn{ width: 100%; justify-content: center; }
}

@media (max-width: 576px){
  .home-top-cards .card img{ height: 140px; }
}


/* =========================================
   Mobile Bottom Bar (Soft iOS 17 style)
   - يظهر على الموبايل فقط
   - Glass / Blur + حالات Active واضحة
   - أيقونات SVG Stroke (مش FontAwesome)
   ========================================= */

:root{
  --ik-ios-blue:#0A84FF;
  --ik-ios-text:#1C1C1E;
  --ik-ios-muted:#8E8E93;
}

/* =========================================
   Global safe offset for fixed-top navbar
   - prevents content from sticking under navbar
   - resilient against other CSS overriding body padding
   ========================================= */
:root{ --ik-navbar-h: 88px; }
html{ scroll-padding-top: var(--ik-navbar-h); }
body{ padding-top: var(--ik-navbar-h) !important; }

.mobile-bottom-bar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;

  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);

  border-top: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 -10px 30px rgba(0,0,0,.08);
}

.mobile-bottom-bar .mbb-inner{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 10px 10px 12px;
}

.mobile-bottom-bar a{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  color: var(--ik-ios-muted);

  font-size: 11px;
  line-height: 1.1;
  padding: 6px 4px;
  border-radius: 14px;

  transition: transform .15s ease, color .15s ease, background .15s ease;
}

.mobile-bottom-bar a .mbb-ico{
  width: 22px;
  height: 22px;
  margin-bottom: 4px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mobile-bottom-bar a.active{
  color: var(--ik-ios-blue);
}

.mobile-bottom-bar a.active::after{
  content:"";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--ik-ios-blue);
  margin-top: 3px;
}

.mobile-bottom-bar a:active{
  transform: scale(1.06);
}

.mobile-bottom-bar a:hover{
  background: rgba(10,132,255,.08);
}

/* Badge (العربة) */
.mobile-bottom-bar a .badge{
  position: absolute;
  top: 2px;
  right: 18px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;

  border-radius: 999px;
  background: #FF3B30;
  color: #fff;
  font-size: 10px;
  line-height: 18px;
  text-align: center;
}

/* مهم: اترك مساحة تحت المحتوى حتى لا يغطي البار */
@media (max-width: 991.98px){
  body{ padding-bottom: 86px; }
}

/* على الديسكتوب اخفيه */
@media (min-width: 992px){
  .mobile-bottom-bar{ display: none; }
}

/* ================= Bottom Sheet (المزيد) ================= */

.ik-sheet-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 10000;
}

.ik-sheet{
  position: fixed;
  left: 0;
  right: 0;
  bottom: -100%;
  z-index: 10001;

  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);

  border-radius: 20px 20px 0 0;
  box-shadow: 0 -20px 50px rgba(0,0,0,.18);
  transition: transform .25s ease, bottom .25s ease;
  padding: 14px 14px 18px;
}

.ik-sheet .ik-sheet-handle{
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  margin: 6px auto 12px;
}

.ik-sheet .ik-sheet-title{
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ik-ios-text);
  text-align: center;
}

.ik-sheet .ik-sheet-links{
  display: grid;
  gap: 10px;
}

.ik-sheet .ik-sheet-links a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 12px;
  border-radius: 14px;
  text-decoration:none;
  color: var(--ik-ios-text);
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.04);
}

.ik-sheet .ik-sheet-links a:active{
  transform: scale(0.99);
}

.ik-sheet .ik-sheet-links a .chev{
  width: 18px;
  height: 18px;
  fill:none;
  stroke: rgba(0,0,0,.35);
  stroke-width: 2;
}

/* open state */
.ik-sheet-open .ik-sheet-backdrop{
  opacity: 1;
  pointer-events: auto;
}

.ik-sheet-open .ik-sheet{
  bottom: 0;
}

/* ==================================================
   Mobile-only spacing tune (DNA-preserving)
   - No color/brand changes
   - Apply across ALL pages
   - Fix "elements stuck together" + safe area for bottom bar
   ================================================== */
@media (max-width: 768px){
  :root{
    --ik-m-gap-1: 8px;
    --ik-m-gap-2: 12px;
    --ik-m-gap-3: 16px;
    --ik-m-gap-4: 22px;
    --ik-m-gap-5: 28px;
  }

  /* 1) prevent bottom bar overlap (with iPhone safe-area) */
  body{
    padding-bottom: calc(86px + env(safe-area-inset-bottom));
  }

  /* 2) general breathing room for content wrappers */
  .container,
  .container-fluid,
  .page-content,
  .content,
  main{
    padding-left: 14px;
    padding-right: 14px;
  }

  /* 3) consistent vertical rhythm between sections/blocks */
  section,
  .section,
  .content-section,
  .page-section{
    margin-top: var(--ik-m-gap-4);
    margin-bottom: var(--ik-m-gap-4);
  }

  /* 4) typography spacing (reduces the "stuck" look) */
  h1, h2, h3, h4{
    margin-bottom: var(--ik-m-gap-2);
  }
  p{
    margin-bottom: var(--ik-m-gap-3);
  }

  /* 5) rows / grids gaps */
  .row{
    row-gap: var(--ik-m-gap-3);
  }
  .grid,
  .cards,
  .products-grid,
  .home-product-grid{
    gap: var(--ik-m-gap-3);
  }

  /* 6) keep home-specific optimizations (only affect home classes) */
  .home-container{ padding-left: 8px; padding-right: 8px; }
  .home-container > section{
    margin-top: var(--ik-m-gap-4) !important;
    margin-bottom: var(--ik-m-gap-4) !important;
  }
  .home-container h1,
  .home-container h2,
  .home-container h3,
  .home-container h4{
    margin-bottom: var(--ik-m-gap-2) !important;
  }
  .home-container p{ margin-bottom: var(--ik-m-gap-3) !important; }

  .home-top-cards .card img{ height: 150px; }
  .home-top-cards .card .card-body{
    padding-top: var(--ik-m-gap-2);
    padding-bottom: var(--ik-m-gap-3);
  }
  .home-container .card.text-center.p-4{ padding: 16px !important; }
}





/* =========================================================
   6) CANONICAL BASE (النسخة النهائية الحاكمة)
   الهدف: إنهاء أي تعارضات ناتجة عن CSS قديم كان بيكرر body/html
   - قواعد قليلة لكنها حاسمة
   - ممنوع إضافة ستايلات عامة خارج هذا البلوك إلا للضرورة
   ========================================================= */

:root{
  /* ===== ألوان أساسية (Tokens) ===== */
  --ik-bg: #f6f7f9;
  --ik-surface: #ffffff;
  --ik-text: #0f1115;
  --ik-muted: rgba(15,17,21,.68);
  --ik-accent: var(--ik-accent);

  /* ===== مسافات (8px system) ===== */
  --ik-s-1: 8px;
  --ik-s-2: 16px;
  --ik-s-3: 24px;
  --ik-s-4: 32px;
  --ik-s-5: 48px;
  --ik-s-6: 64px;

  /* ارتفاع النافبار (موجود عندك سابقًا) */
  --ik-navbar-h: 74px;
}

html, body{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body{
  margin: 0;
  background: var(--ik-bg);
  color: var(--ik-text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Arial, sans-serif;
  padding-top: var(--ik-navbar-h);
  line-height: 1.45;
}

/* روابط */
a{ color: inherit; }
a:hover{ text-decoration: none; }

/* صور */
img{ max-width: 100%; height: auto; }

/* قوائم: منع bullets الافتراضية في أي nav/collapsible */
nav ul{ list-style: none; padding: 0; margin: 0; }


/* ===== تقرير تنضيف CSS (v8) =====
   تم حذف 11 بلوك (Selectors بسيطة غير مستخدمة: .class أو #id فقط)
   ملاحظة: تم التنضيف بحذر شديد ولم يتم لمس الـ selectors المركبة.
*/



/* =========================================================
   تحسينات Premium مطلوبة (A)
   1) حزم المسافات بين أجزاء الهوم
   2) Best Selling: كروت مميزة مربعة (4x2) + متقاربة
   3) كل كروت المنتجات: الصورة تاخد مساحة أكبر + تحكمات أصغر
   ========================================================= */

/* ===== 1) حزم مسافات الهوم (بدون كسر باقي الصفحات) ===== */
.home-container section.my-5{ margin-top: 2rem !important; margin-bottom: 2rem !important; }
.home-container section.my-4{ margin-top: 1.1rem !important; margin-bottom: 1.1rem !important; }
.home-container .home-section-title{ margin-bottom: .75rem !important; }

/* ===== 2) Best Selling (مميز) =====
   الهدف: الكارت يبقى أقرب للمربع + شكله متقارب (featured grid)
*/
.best-selling-wrap .home-product-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px; /* أقرب لبعض */
}

/* نجبر الكارت يبقى مربع تقريباً */
.best-selling-wrap .home-product-card{
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  padding: 12px !important;
}

/* الصورة بطل الكارت */
.best-selling-wrap .home-product-card img{
  flex: 1 1 auto;
  height: auto !important;
  max-height: 62%;
  object-fit: contain;
  padding: 8px !important;
}

/* جسم الكارت أقل */
.best-selling-wrap .home-product-card .body{
  padding: 6px 6px 0 !important;
}
.best-selling-wrap .home-product-card .name{
  font-size: 13px !important;
  min-height: auto !important;
  margin-bottom: 4px;
}
.best-selling-wrap .home-product-card .price{
  font-size: 13px !important;
  margin-top: 0 !important;
}
.best-selling-wrap .home-product-card .price .old{ font-size: 12px; }

/* footer أصغر */
.best-selling-wrap .home-product-card .pc-footer{
  padding: 8px 6px 6px !important;
}

/* ===== 3) جميع كروت المنتجات (عام) =====
   - تكبير مساحة الصورة
   - تصغير عناصر التحكم (qty + cart)
   - إزالة كلمة Add (أيقونة فقط)
*/
.home-product-card img{
  height: 260px !important;   /* أكبر */
  padding: 12px !important;
  object-fit: contain;
}

.home-product-card .body{
  padding: 10px 12px 8px !important;  /* أقل */
}

.home-product-card .name{
  font-size: 14px !important;
  min-height: 34px !important;
}

.home-product-card .pc-footer{
  padding: 10px 12px 12px !important;
  gap: 10px !important;
}

/* Quantity أصغر */
.home-product-card .ik-qty{
  transform: scale(.92);
  transform-origin: left center;
}

/* زر السلة أصغر + بدون نص */
.home-product-card .ik-add-btn{
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
}

.home-product-card .ik-add-btn svg{
  width: 18px !important;
  height: 18px !important;
}

.home-product-card .ik-add-btn span{
  display: none !important; /* إلغاء كلمة Add */
}

/* Responsive للـ Best Selling */
@media (max-width: 991.98px){
  .best-selling-wrap .home-product-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .best-selling-wrap .home-product-card{ aspect-ratio: auto; }
}
/* =========================================================
   PATCH v10 - إصلاحات Premium حسب الملاحظات
   المطلوب:
   - "حزام أبيض" (Rounded white panel) لقسم Best Selling
   - تقليل مساحة الـ body داخل الكارت (الوصف/الاسم) + تكبير مساحة الصورة
   - تصغير + / - و زر السلة
   ========================================================= */

/* ===== الحزام الأبيض لقسم Best Selling ===== */
.best-selling-wrap{
  background: var(--ik-surface);
  border-radius: 28px;
  padding: 28px;
  box-shadow: 0 18px 50px rgba(0,0,0,.06);
}

/* المسافات الداخلية تكون مضغوطة */
.best-selling-wrap .home-section-title{ margin-top: 0 !important; }

/* ===== Best Selling: Grid مضغوط + كروت مربعة ===== */
.best-selling-wrap .home-product-grid{
  gap: 14px; /* أقرب */
}

/* كارت المميز */
.best-selling-wrap .home-product-card{
  aspect-ratio: 1 / 1;
  padding: 10px !important;
  border-radius: 18px !important;
}

/* الصورة: أكبر مساحة */
.best-selling-wrap .home-product-card img{
  max-height: 68%;
  padding: 6px !important;
}

/* body أصغر جدًا */
.best-selling-wrap .home-product-card .body{
  padding: 4px 6px 0 !important;
}
.best-selling-wrap .home-product-card .name{
  font-size: 12.5px !important;
  line-height: 1.2 !important;
  margin-bottom: 3px !important;
  min-height: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.best-selling-wrap .home-product-card .price{
  font-size: 12.5px !important;
  margin-top: 0 !important;
}

/* ===== تصغير الـ controls (Qty + Cart) ===== */
.best-selling-wrap .home-product-card .pc-footer{
  padding: 6px !important;
  gap: 8px !important;
}

/* Qty: تصغير أبعاد بدل scale */
.home-product-card .ik-qty{
  height: 42px !important;
  padding: 6px !important;
  border-radius: 16px !important;
}
.home-product-card .ik-qty button{
  width: 28px !important;
  height: 28px !important;
  border-radius: 12px !important;
  font-size: 16px !important;
}
.home-product-card .ik-qty input{
  width: 28px !important;
  font-size: 14px !important;
}

/* زر السلة أصغر */
.home-product-card .ik-add-btn{
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
}
.home-product-card .ik-add-btn svg{
  width: 16px !important;
  height: 16px !important;
}

/* ===== حزام أبيض للأقسام اللي تحت مباشرة (عشان يحسسك بالتجميع) ===== */
.home-container .home-product-grid{
  /* لا نغير layout، فقط نضمن إن الكروت مش متمددة */
}



/* =========================================================
   PATCH v11 - حزام أبيض لقسم AirPods (Featured) + إصلاح Best Selling
   ========================================================= */

/* ===== حزام أبيض لقسم Featured (AirPods) ===== */
.featured-wrap{
  background: var(--ik-surface);
  border-radius: 28px;
  padding: 28px;
  box-shadow: 0 18px 50px rgba(0,0,0,.06);
}

/* ===== Best Selling: إصلاح تكسير المحتوى داخل الكروت =====
   السبب: الكارت مربع + overflow hidden + عناصر Footer كبيرة => كان بيقص المحتوى.
   الحل: Flex column + footer في الأسفل + تصغير controls داخل best selling فقط.
*/
.best-selling-wrap .home-product-card{
  display:flex;
  flex-direction: column;
  overflow: hidden; /* نحافظ على الشكل النظيف */
}

.best-selling-wrap .home-product-card img{
  flex: 1 1 auto;
  min-height: 0;
  max-height: 64%; /* توازن: صورة كبيرة لكن تسيب مساحة للفوتر */
}

.best-selling-wrap .home-product-card .body{
  flex: 0 0 auto;
}

.best-selling-wrap .home-product-card .pc-footer{
  margin-top: auto; /* يثبت الفوتر في الأسفل */
  flex: 0 0 auto;
  border-top: 1px solid rgba(0,0,0,.05);
}

/* تصغير الـ controls داخل Best Selling فقط */
.best-selling-wrap .home-product-card .ik-qty{
  height: 38px !important;
  padding: 5px 8px !important;
  border-radius: 14px !important;
}
.best-selling-wrap .home-product-card .ik-qty button{
  width: 26px !important;
  height: 26px !important;
  border-radius: 11px !important;
  font-size: 15px !important;
}
.best-selling-wrap .home-product-card .ik-qty input{
  width: 26px !important;
  font-size: 13px !important;
}

.best-selling-wrap .home-product-card .ik-add-btn{
  width: 32px !important;
  height: 32px !important;
  border-radius: 12px !important;
  padding: 0 !important;
}
.best-selling-wrap .home-product-card .ik-add-btn svg{
  width: 15px !important;
  height: 15px !important;
}



/* =========================================================
   PATCH v12 - Navbar أسود غامق + تثبيت اللوجو + تحسين مساحة الصورة داخل الكروت
   ========================================================= */

/* ===== Navbar: أسود أسود ===== */
.navbar{
  background: #000 !important;          /* أسود كامل */
  backdrop-filter: none !important;     /* مفيش شفافية/بلور */
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* اللوجو */
.navbar-brand img{
  height: 32px !important;
  width: auto !important;
  display: block;
}

/* ===== كروت المنتجات: الصورة تاخد حقها ===== */
.home-product-card img{
  height: 290px !important;   /* زيادة بسيطة */
  padding: 10px !important;
}

/* Best Selling: صورة أكبر داخل الكارت المربع */
.best-selling-wrap .home-product-card img{
  max-height: 72% !important;
  padding: 4px !important;
}

/* تقليل مساحة النص داخل Best Selling أكثر */
.best-selling-wrap .home-product-card .body{
  padding: 2px 6px 0 !important;
}



/* =========================================================
   PATCH v13 - Premium Fixes (حسب الملاحظات الأخيرة)
   - Navbar أسود فاحم + لوجو أكبر ومكانه مضبوط
   - Best Selling: الصورة أكبر، النص أصغر، التحكمات أصغر
   ========================================================= */

/* ===== Navbar: أسود فاحم (Override أقوى) ===== */
body .navbar{
  background: #000 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* تحسين توزيع النافبار */
.navbar .container{
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* اللوجو: أكبر + ثابت يسار */
.navbar-brand{
  display:flex !important;
  align-items:center !important;
  gap: 10px !important;
  min-width: 180px;
}
.navbar-brand img{
  height: 44px !important;
  width: auto !important;
}

/* ===== Best Selling: المنتج ياخد حقه ===== */
.best-selling-wrap .home-product-card{
  padding: 10px !important;
}

/* الصورة أكبر بوضوح */
.best-selling-wrap .home-product-card img{
  width: 100% !important;
  max-width: none !important;
  max-height: 80% !important;
  padding: 2px !important;
  object-fit: contain !important;
}

/* النص أصغر */
.best-selling-wrap .home-product-card .name{
  font-size: 12px !important;
  font-weight: 600 !important;
}
.best-selling-wrap .home-product-card .price{
  font-size: 12px !important;
}
.best-selling-wrap .home-product-card .price .old{
  font-size: 11px !important;
}

/* footer أنحف */
.best-selling-wrap .home-product-card .pc-footer{
  padding: 6px !important;
  gap: 6px !important;
}

/* qty أصغر */
.best-selling-wrap .home-product-card .ik-qty{
  height: 34px !important;
  padding: 4px 6px !important;
  border-radius: 14px !important;
}
.best-selling-wrap .home-product-card .ik-qty button{
  width: 24px !important;
  height: 24px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
}
.best-selling-wrap .home-product-card .ik-qty input{
  width: 22px !important;
  font-size: 13px !important;
}

/* السلة أصغر */
.best-selling-wrap .home-product-card .ik-add-btn{
  width: 30px !important;
  height: 30px !important;
  border-radius: 12px !important;
}
.best-selling-wrap .home-product-card .ik-add-btn svg{
  width: 14px !important;
  height: 14px !important;
}



/* =========================================================
   CLEAN NAVBAR (بدون أي Bootstrap Classes)
   - تم استبدال .navbar/.navbar-nav/... بـ ik-*
   - اللون: أسود فاحم 100%
   ========================================================= */

.ik-navbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: #000; /* أسود كامل */
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.ik-navbar .container{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.navbar-brand{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 180px;
}

.navbar-brand img{
  height: 43px;
  width: auto;
  display:block;
}

.ik-nav-toggle{
  display:none;
  background: transparent;
  border: 1px solid rgba(255,255,255,.10);
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: rgba(255,255,255,.92);
  cursor:pointer;
}
.ik-nav-toggle:hover{ background: rgba(255,255,255,.06); }
.ik-nav-toggle:focus-visible{
  outline: 2px solid rgba(255,255,255,.35);
  outline-offset: 2px;
}
.ik-nav-toggle svg{ width: 22px; height: 22px; }

.ik-nav{
  display:flex;
  align-items:center;
  justify-content: space-between;
  flex: 1;
  gap: 14px;
}

.ik-nav-links{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  align-items:center;
  gap: 18px;
  flex-wrap: nowrap;
}

.ik-nav-item{ position: relative; }

.ik-nav-link{
  color: rgba(255,255,255,.90);
  text-decoration:none;
  font-weight: 500;
  padding: 10px 14px;
  border-radius: 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  white-space: nowrap;
  line-height: 1.2;
  transition: background .2s ease, box-shadow .2s ease, color .2s ease;
}
.ik-nav-link:hover{ background: rgba(255,255,255,.06); }

.ik-nav-link.ik-active,
.ik-nav-link.active{
  background: rgba(255,255,255,.07);
  color: #fff;
  position: relative;
  box-shadow: 0 0 0 1px rgba(57, 255, 202, .18), 0 0 26px rgba(57, 255, 202, .22), 0 0 38px rgba(57, 255, 202, .12);
}
.ik-nav-link.ik-active::after,
.ik-nav-link.active::after{
  content: none;
}

/* Dropdown */
.ik-dropdown-menu{
  display:none;
  position:absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 220px;
  background: rgba(10,10,10,.98);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.ik-dropdown-menu.is-open{ display:block; }

.ik-dropdown-item{
  display:block;
  padding: 10px 12px;
  border-radius: 12px;
  color: rgba(255,255,255,.92);
  text-decoration:none;
  font-size: 14px;
}
.ik-dropdown-item:hover{ background: rgba(255,255,255,.08); }

/* موبايل */
@media (max-width: 991.98px){
  .ik-nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .ik-nav{
    display:none;
    flex-direction: column;
    align-items: stretch;
    padding: 12px 0 6px;
  }
  .ik-nav.is-open{ display:flex; }
  .ik-nav-links{
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .ik-nav-link{
    width: 100%;
    justify-content: flex-start;
  }
  .ik-dropdown-menu{
    position: static;
    display:none;
    margin-top: 8px;
  }
  .ik-dropdown-menu.is-open{ display:block; }
  .ik-nav-actions{
    justify-content:flex-start;
    padding-top: 10px;
  }
}



/* =========================================================
   PATCH v16 - Logo أكبر + أعلى قليلاً + أقرب لكلمة Home
   ========================================================= */

/* توزيع الناف بار: نقرّب اللوجو من الروابط */
.ik-navbar .container{
  justify-content: flex-start !important;
}

/* الروابط تبدأ بعد اللوجو مباشرة */
.ik-nav{
  justify-content: flex-start !important;
}

/* نخلي أيقونات اليمين تروح أقصى اليمين */
.ik-nav-actions{
  margin-left: auto !important;
}

/* اللوجو: أكبر وأقرب */
.navbar-brand{
  min-width: auto !important;
  margin-right: 18px !important; /* قربه من Home */
}

/* أكبر وعريض (العرض هيزيد تلقائيًا مع زيادة الارتفاع) */
.navbar-brand img{
  height: 58px !important;
  width: auto !important;
  transform: translateY(-3px); /* لفوق شويه */
}



/* =========================================================
   PATCH v18 - Product Cards System
   الهدف:
   - الصورة = 80% من مساحة الكارت (Visual-first)
   - المعلومات + التحكمات = 20%
   - زر السلة: Outline أحمر (بدون fill) بنفس درجة الـ accent
   ملاحظة: ينطبق على جميع كروت المنتجات (غير Best Selling له قواعده الخاصة إن وُجدت).
   ========================================================= */

/* ===== هيكلة الكارت ===== */
.home-product-card{
  display: flex;
  flex-direction: column;
}

/* الصورة تاخد أغلب المساحة */
.home-product-card img{
  flex: 1 1 80%;
  min-height: 0;
  height: auto !important;
  max-height: 78%;
  object-fit: contain !important;
  padding: 10px !important;
}

/* جسم المعلومات: أقل */
.home-product-card .body{
  flex: 0 0 auto;
  padding: 8px 12px 6px !important;
}

/* الاسم/السعر: أصغر شوية علشان ما يزاحم الصورة */
.home-product-card .name{
  font-size: 13.5px !important;
  line-height: 1.25 !important;
  margin-bottom: 4px !important;
}
.home-product-card .price{
  font-size: 13.5px !important;
}

/* الفوتر: نحيف */
.home-product-card .pc-footer{
  flex: 0 0 auto;
  padding: 8px 12px 12px !important;
  gap: 10px !important;
}

/* ===== زر السلة: Outline Accent بدل Fill ===== */
.home-product-card .ik-add-btn{
  background: transparent !important;
  border: 1.5px solid var(--ik-accent) !important;
  color: var(--ik-accent) !important;
  box-shadow: none !important;
}

/* Hover خفيف Apple-like */
.home-product-card .ik-add-btn:hover{
  background: rgba(217,74,74,.08) !important;
}

/* الأيقونة تاخد نفس اللون */
.home-product-card .ik-add-btn svg{
  stroke: currentColor !important;
}

/* ===== تصغير خفيف للـ qty في كل الموقع ===== */
.home-product-card .ik-qty{
  height: 40px !important;
  border-radius: 16px !important;
}
.home-product-card .ik-qty button{
  width: 28px !important;
  height: 28px !important;
  border-radius: 12px !important;
}



/* =========================================================
   PATCH v19 - Panels (الحزام الأبيض) + Spacing System
   الهدف: تجميع (حزم) أقسام الصفحة داخل Rounded White Panels
   ========================================================= */

.ik-panel{
  background: var(--ik-surface);
  border-radius: 28px;
  padding: 28px;
  box-shadow: 0 18px 50px rgba(0,0,0,.06);
}

/* حزم المسافات بين الأقسام */
.home-container section.my-5{
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}

/* مسافات داخلية: عناوين الأقسام */
.home-container .home-section-title,
.home-container h4.mb-3.home-section-title,
.home-container .home-section-title.mb-3{
  margin-bottom: 14px !important;
}

/* تقليل الفراغات بين البانر والمنتجات */
.home-container .home-section-banner{
  margin-bottom: 18px !important;
}

/* زر View More يكون أقرب ومايكسر التدفق */
.home-container .text-center.mt-3{
  margin-top: 14px !important;
}

/* Responsive: padding أقل على الشاشات الصغيرة */
@media (max-width: 575.98px){
  .ik-panel{ padding: 18px; border-radius: 22px; }
}



/* =========================================================
   FOOTER PREMIUM (مثل النسخة القديمة)
   - لوجو + وصف + Social
   - أيقونات حمراء للروابط
   - بدون Underline
   ========================================================= */
.footer{
  background: linear-gradient(180deg, #0b0c0e, #121417);
  color: rgba(255,255,255,.78);
}
.footer a{ color: rgba(255,255,255,.80); text-decoration:none; }
.footer a:hover{ color: #fff; }
.footer .footer-top{ padding-top: 70px; padding-bottom: 20px; }
.footer .footer-widget-item h2{
  color:#fff;
  font-size: 22px;
  margin-bottom: 18px;
}
.footer .f-logo img{
  height: 54px;
  width: auto;
  display:block;
}
.footer .footer-widget-item p{ line-height: 1.8; margin-top: 12px; max-width: 320px; }

.footer .footer-widget-item ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: 12px; }
.footer .footer-widget-item li{ display:flex; align-items:center; gap: 12px; }

.ik-ic{ width: 18px; height: 18px; fill:none; stroke: rgba(255,255,255,.78); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ik-ic-red{ stroke: var(--ik-accent); }

.footer .footer-social{ display:flex; gap: 14px; margin-top: 18px; }
.footer .footer-social a{ display:inline-flex; width: 36px; height: 36px; border-radius: 12px; align-items:center; justify-content:center; background: rgba(255,255,255,.06); }
.footer .footer-social a:hover{ background: rgba(255,255,255,.10); }

.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 26px 0;
}
.footer-bottom .copyright-text p{ margin:0; color: rgba(255,255,255,.65); }

/* WhatsApp Floating */
.ik-wa-float{
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #25D366;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
  z-index: 1200;
}
.ik-wa-float svg{ width: 34px; height: 34px; fill: #fff; }
.ik-wa-float:hover{ filter: brightness(1.05); }



/* =========================================================
   PATCH v21 - Footer Alignment Fix
   المطلوب:
   - Useful Links العنوان فوق اللينكات
   - Product Catalog العنوان فوق العناصر
   - Copyright في النص (Center)
   ========================================================= */

/* كل عمود في الفوتر يبدأ من فوق */
.footer .footer-widget-item{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* العناوين فوق القوائم بوضوح */
.footer .footer-widget-item h2{
  width: 100%;
  margin-bottom: 18px !important;
}

/* القوائم عمودي من فوق */
.footer .footer-widget-item ul{
  width: 100%;
  align-items: flex-start !important;
}

/* عناصر القائمة: الأيقونة + النص في سطر واحد لكن من اليسار */
.footer .footer-widget-item li{
  width: 100%;
  justify-content: flex-start;
}

/* ===== Copyright Center ===== */
.footer-bottom .copyright-text{
  width: 100%;
  text-align: center !important;
}
.footer-bottom .copyright-text p{
  width: 100%;
  text-align: center !important;
  display: block;
}



/* =========================================================
   PATCH v22 - Footer: تثبيت المحاذاة 100% + إلغاء أيقونة Apple
   ========================================================= */

/* تثبيت صف الفوتر من فوق */
.footer .footer-top .row{
  align-items: flex-start !important;
}

/* العمود يبدأ من فوق */
.footer .footer-widget-item{
  align-items: flex-start !important;
}

/* Useful Links و Product Catalog: العنوان فوق القوائم */
.footer .footer-widget-item h2{
  display:block;
  text-align:left !important;
}

/* القوائم تبدأ من فوق وتحت العنوان مباشرة */
.footer .footer-widget-item ul{
  margin-top: 0 !important;
}

/* Copyright في النص */
.footer-bottom .copyright-text,
.footer-bottom .copyright-text p{
  text-align: center !important;
  justify-content: center !important;
}



/* =========================================================
   PATCH v23 - Copyright Center (Footer Bottom)
   المطلوب: "Copyright © Telal Software Solutions" في منتصف الفوتر بالأسفل
   ========================================================= */
.footer-bottom .container,
.footer-bottom .row{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
.footer-bottom .copyright-text{
  width: 100% !important;
  text-align: center !important;
}
.footer-bottom .copyright-text p{
  width: 100% !important;
  text-align: center !important;
  margin: 0 !important;
}



/* =========================================================
   PATCH v24 - Mobile Bottom Nav + Mobile Layout Fix
   - Bottom nav مثل دبي فون لكن Apple-like (minimal)
   ========================================================= */

:root{
  --ik-bn-h: 74px;
}

/* امنع تراكب البوتوم بار على المحتوى */
@media (max-width: 768px){
  body{ padding-bottom: calc(var(--ik-bn-h) + 14px) !important; }
}

/* Bottom Nav */
.ik-bottom-nav{
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 10px;
  height: var(--ik-bn-h);
  z-index: 1300;
  display: none;
  gap: 6px;
  padding: 10px 10px;
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
@media (max-width: 768px){
  .ik-bottom-nav{ display:flex; }
}

.ik-bn-item{
  flex: 1;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: 6px;
  text-decoration:none;
  color: rgba(0,0,0,.52);
  border-radius: 16px;
  position: relative;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 8px 4px;
}
.ik-bn-item:hover{ background: rgba(0,0,0,.04); }

.ik-bn-ic{
  width: 22px; height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ik-bn-txt{
  font-size: 11px;
  line-height: 1;
}

.ik-bn-dot{
  width: 6px; height: 6px;
  border-radius: 99px;
  background: transparent;
  position: absolute;
  bottom: 6px;
}

.ik-bn-item.is-active{
  color: rgba(0,0,0,.92);
}
.ik-bn-item.is-active .ik-bn-dot{
  background: var(--ik-accent);
}

/* WhatsApp highlight */
.ik-bn-whatsapp{ color: rgba(0,0,0,.72); }
.ik-bn-whatsapp .ik-bn-ic{ stroke: #22c55e; } /* اخضر واتساب */
.ik-bn-whatsapp.is-active .ik-bn-dot{ background: #22c55e; }

/* Cart badge */
.ik-bn-badge{
  position:absolute;
  top: 6px;
  right: 18px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 99px;
  background: var(--ik-accent);
  color: #fff;
  font-size: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ===== Mobile top navbar tweaks ===== */
@media (max-width: 768px){
  .ik-navbar .container{
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .navbar-brand img{
    height: 44px !important; /* تقليل بسيط ~5% */
    transform: translateY(-1px) !important;
  }
  .ik-nav-toggle{
    margin-left: auto;
  }
}



/* ====== الموبايل: ٢ جنب بعض للأقسام الـ8 ====== */
@media (max-width: 768px){
  .home-top-cards-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .home-top-col{ width: 100% !important; }
  .home-top-cards .card{ height: 100%; }
  .home-top-cards .card img{
    max-height: 120px;
    object-fit: contain;
  }
}

/* ====== الموبايل: ٢ جنب بعض لكل كروت المنتجات ====== */
@media (max-width: 768px){
  .home-product-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  /* لو في صفحات تانية بتستخدم نفس الكلاس */
  .product-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

/* ====== Bottom Nav: شكل أنضف زي DubaiPhone لكن minimal ====== */
@media (max-width: 768px){
  .ik-bottom-nav{
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 10px 12px;
    border-radius: 18px;
    background: rgba(255,255,255,.96);
  }
  .ik-bn-item{
    gap: 5px;
    padding: 10px 6px;
    border-radius: 14px;
  }
  .ik-bn-ic{
    width: 24px;
    height: 24px;
  }
  .ik-bn-txt{
    font-size: 12px;
    color: rgba(0,0,0,.58);
  }
  .ik-bn-item.is-active{
    background: rgba(59,130,246,.12); /* إحساس iOS/DubaiPhone */
    color: rgba(0,0,0,.92);
  }
  .ik-bn-item.is-active .ik-bn-txt{
    color: rgba(0,0,0,.92);
  }
  .ik-bn-dot{ display:none; } /* دبي فون بيستخدم خلفية بدل النقطة */
  .ik-bn-badge{
    top: 6px;
    right: 16px;
    background: #ef4444; /* badge أحمر */
  }
}



/* الموبايل: خلي الأقسام الـ8 عنصرين جنب بعض لحد شاشات صغيرة */
@media (max-width: 575.98px){
  .home-top-cards-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 12px !important; }
  .best-selling-wrap .home-product-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .home-product-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
/* شاشات صغيرة جداً: عمود واحد فقط */
@media (max-width: 360px){
  .home-top-cards-grid{ grid-template-columns: 1fr !important; }
  .best-selling-wrap .home-product-grid{ grid-template-columns: 1fr !important; }
  .home-product-grid{ grid-template-columns: 1fr !important; }
}

/* الأقسام الـ8: لازم نكسر rule القديمة اللي بتخليها عمود واحد */
  #home-top-cards.home-top-cards-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; column-gap: 12px !important; row-gap: 18px !important; }
}
@media (max-width: 360px){
  #home-top-cards.home-top-cards-grid{ grid-template-columns: 1fr !important; }
}


/* =========================================================
   تخطيط الأقسام والمنتجات - النسخة v29 (تصحيح الديسكتوب + موبايل)
   ملاحظة: الهدف الأساسي
   - الديسكتوب: ٤ عناصر في الصف (4x2 للـ 8 عناصر)
   - الموبايل: عنصرين جنب بعض
   - شاشات صغيرة جدًا: عمود واحد
   ========================================================= */

/* ✅ الأقسام الـ 8 في بداية الصفحة (الديسكتوب: 4 أعمدة) */
#home-top-cards.home-top-cards-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

/* ✅ تابلت/شاشات متوسطة: 2 أعمدة (يحافظ على تناسق العرض) */
@media (max-width: 992px){
  #home-top-cards.home-top-cards-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

/* ✅ الموبايل: 2 أعمدة */
@media (max-width: 768px){
  #home-top-cards.home-top-cards-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .home-top-col{ width: 100%; }
  .home-top-cards .card{ height: 100%; }
  .home-top-cards .card img{
    max-height: 120px;
    object-fit: contain;
  }
}

/* ✅ شاشات صغيرة جدًا: عمود واحد لتجنب الزحمة */
@media (max-width: 360px){
  #home-top-cards.home-top-cards-grid{
    grid-template-columns: 1fr;
  }
}

/* ✅ كروت المنتجات في كل الأقسام: (الديسكتوب) */
.home-product-grid,
.product-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

/* ✅ تابلت: 2 أعمدة */
@media (max-width: 992px){
  .home-product-grid,
  .product-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

/* ✅ الموبايل: 2 أعمدة */
@media (max-width: 768px){
  .home-product-grid,
  .product-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

/* ✅ شاشات صغيرة جدًا: عمود واحد */
@media (max-width: 360px){
  .home-product-grid,
  .product-grid{
    grid-template-columns: 1fr;
  }
}

/* ✅ شريط التنقل السفلي (Bottom Nav) - شكل أنضف على الموبايل */
@media (max-width: 768px){
  .ik-bottom-nav{
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 10px 12px;
    border-radius: 18px;
    background: rgba(255,255,255,.96);
  }
  .ik-bn-item{
    gap: 5px;
    padding: 10px 6px;
    border-radius: 14px;
  }
  .ik-bn-ic{
    width: 24px;
    height: 24px;
  }
  .ik-bn-txt{
    font-size: 12px;
    color: rgba(0,0,0,.58);
  }
  .ik-bn-item.is-active{
    background: rgba(59,130,246,.12);
    color: rgba(0,0,0,.92);
  }
  .ik-bn-item.is-active .ik-bn-txt{ color: rgba(0,0,0,.92); }
  .ik-bn-dot{ display:none; }
  .ik-bn-badge{ top: 6px; right: 16px; background:#ef4444; }
}




/* =========================================================
   ✅ FIX FINAL (v30) - تخطيط الأقسام الـ8 + كروت المنتجات
   الهدف:
   - Desktop: 4 فوق + 4 تحت (4 columns)
   - Mobile/Tablet: عنصرين جنب بعض (2 columns)
   - Very small: عمود واحد
   ملاحظة: بنستخدم !important عشان نقفل أي قواعد قديمة
   ========================================================= */

/* ===== أقسام البزنس الأساسية (8 عناصر) ===== */
#home-top-cards.home-top-cards-grid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  column-gap: 40px !important;
  row-gap: 90px !important; /* مسافة واضحة بين الصفين */
  justify-items: center !important;
  align-items: start !important;
}

/* تابلت / لابتوب صغير */
@media (max-width: 992px){
  #home-top-cards.home-top-cards-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 18px !important;
    row-gap: 40px !important;
  }
}

/* موبايل */
@media (max-width: 768px){
  #home-top-cards.home-top-cards-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    row-gap: 18px !important;
  }
  #home-top-cards .home-top-col{ width:100% !important; }
}

/* شاشات صغيرة جداً */
@media (max-width: 360px){
  #home-top-cards.home-top-cards-grid{
    grid-template-columns: 1fr !important;
  }
}

/* ===== كروت المنتجات (كل الأقسام) ===== */
/* الديسكتوب: نحافظ على الجريد الأساسي (الملف الأصلي) */
/* الموبايل: عنصرين جنب بعض */
@media (max-width: 768px){
  .home-product-grid,
  .product-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}
@media (max-width: 360px){
  .home-product-grid,
  .product-grid{
    grid-template-columns: 1fr !important;
  }
}



/* =========================================================
   Bottom Nav Premium Refresh v2
   ========================================================= */
@media (max-width: 768px){
  :root{ --ik-bn-h: 82px; }

  body{ padding-bottom: calc(var(--ik-bn-h) + 20px + env(safe-area-inset-bottom)) !important; }

  .ik-bottom-nav{
    left: 12px;
    right: 12px;
    bottom: max(10px, env(safe-area-inset-bottom));
    min-height: var(--ik-bn-h);
    height: auto;
    gap: 4px;
    padding: 9px 10px calc(10px + env(safe-area-inset-bottom));
    border-radius: 26px;
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 18px 45px rgba(15,23,42,.14), 0 4px 10px rgba(15,23,42,.05);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }

  .ik-bn-item{
    min-height: 60px;
    gap: 6px;
    padding: 8px 4px 10px;
    border-radius: 18px;
    color: rgba(15,23,42,.58);
    position: relative;
    isolation: isolate;
    transition: transform .18s ease, color .18s ease, box-shadow .18s ease, background-color .18s ease;
  }

  .ik-bn-item::before{
    content: "";
    position: absolute;
    inset: 1px 2px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,246,246,.94));
    border: 1px solid rgba(239,68,68,.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
    opacity: 0;
    transform: scale(.94);
    transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    z-index: -1;
  }

  .ik-bn-item:focus-visible{ outline: none; }

  .ik-bn-ic{
    width: 30px;
    height: 30px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
  }

  .ik-bn-txt{
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1;
    color: currentColor;
    white-space: nowrap;
  }

  .ik-bn-dot{ display: none; }

  .ik-bn-item.is-active,
  .ik-bn-item[aria-current="page"]{
    color: #151515;
    outline: none;
  }

  .ik-bn-item.is-active::before,
  .ik-bn-item[aria-current="page"]::before{
    opacity: 1;
    transform: scale(1);
    border-color: rgba(220,38,38,.30);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.96),
      0 0 0 1px rgba(255,255,255,.74),
      0 10px 24px rgba(220,38,38,.18),
      0 0 0 1px rgba(248,113,113,.18),
      0 0 20px rgba(239,68,68,.22),
      0 0 34px rgba(239,68,68,.14);
  }

  .ik-bn-item.is-active .ik-bn-txt,
  .ik-bn-item[aria-current="page"] .ik-bn-txt{ color: #202020; }

  .ik-bn-item.is-active .ik-bn-ic,
  .ik-bn-item[aria-current="page"] .ik-bn-ic{
    filter: drop-shadow(0 0 10px rgba(220,38,38,.18)) drop-shadow(0 5px 12px rgba(239,68,68,.12));
  }

  .ik-bn-ic .ik-bn-fill{ fill: rgba(15,23,42,.10); stroke: none; }

  .ik-bn-whatsapp{
    color: rgba(15,23,42,.62);
  }

  .ik-bn-whatsapp .ik-bn-ic{
    stroke: none;
    fill: none;
  }

  .ik-bn-whatsapp .ik-bn-wa-bubble{ fill: #25D366; }
  .ik-bn-whatsapp .ik-bn-wa-phone{ fill: #ffffff; }

  .ik-bn-whatsapp.is-active::before,
  .ik-bn-whatsapp[aria-current="page"]::before{
    border-color: rgba(220,38,38,.32);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.96),
      0 0 0 1px rgba(255,255,255,.74),
      0 10px 26px rgba(220,38,38,.18),
      0 0 0 1px rgba(248,113,113,.18),
      0 0 22px rgba(239,68,68,.24),
      0 0 36px rgba(239,68,68,.16);
  }

  .ik-bn-badge{
    top: 8px;
    right: calc(50% - 20px);
    min-width: 19px;
    height: 19px;
    padding: 0 4px;
    border: 2px solid rgba(255,255,255,.98);
    border-radius: 999px;
    background: #f25555;
    box-shadow: 0 6px 16px rgba(242,85,85,.28);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    transform: translateX(50%);
  }
}