/* Add custom CSS styles below */
/* Add custom CSS styles below */ 
/* تعريف متغيرات الألوان */
:root {
    --main-bg: #EFEEE8; /* الخلفية الأساسية */
    --text-dark: #4A4A4A; /* لون النص الداكن */
    --text-light: #A89E8E; /* لون النص الفاتح - جعله أغمق قليلاً */
    --accent-1: #E0D4B8; /* لون بارز 1 - تم تفتيحه */
    --accent-2: #F0E8D0; /* لون بارز 2 - تم تفتيحه أكثر */
    --border-color: #8A826D; /* لون الحدود - جعله أكثر نعومة */
    --highlight: #C4BAA0; /* لون التمييز */
}

/* ضبط الخلفية والنصوص */
body {
    background-color: var(--main-bg);
    color: var(--text-dark);
    font-size: 18px; /* تكبير حجم الخط */
}

/* تحسين العناوين */
h1, h2, h3 {
    color: var(--text-dark);
    font-weight: bold;
    font-size: 24px; /* تكبير حجم الخط */
}

/* تحسين شريط القائمة */
.navbar {
    background: rgba(255, 255, 255, 0.9); /* جعل الشريط أكثر شفافية */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

/* تحسين عرض المنتجات */
.products-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 20px; /* إضافة فواصل بين المنتجات */
}

.product {
    flex: 1 1 calc(30% - 20px); /* التأكد من أن المنتجات متساوية الحجم */
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.05);
    text-align: center;
    font-size: 18px; /* تكبير حجم الخط */
}

/* تحسين الصور داخل المنتجات */
.product img {
    width: 100%; /* جعل حجم الصور متناسق */
    height: auto;
    max-height: 270px; /* تحديد أقصى ارتفاع للصور */
    object-fit: cover; /* جعل الصور متناسقة دون تشويه */
    border-radius: 8px; /* إضافة حواف مستديرة */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); /* إضافة ظل خفيف */
}

/* تحسين أيقونات البحث، السلة، والحساب */
.icon {
    width: 18px; /* تكبير حجم الأيقونات */
    height: 18px;
    fill: var(--text-dark); /* تحسين تناسق الألوان */
    transition: transform 0.2s ease-in-out;
}

.icon:hover {
    transform: scale(1.1);
}


.sidebar-open .sidebar-logo img {
    max-width: 280px !important;
    height: auto !important;
}

/* إخفاء العناصر المحددة من قبل المستخدم */
.mobile-bottom-nav,
.grid.grid-cols-4.h-16,
#gb-widget-3189,
.sc-sbsi71-0.clcbjV,
.navbar-brand.block,
.sticky-product-bar.hidden.md\:block {
    display: none !important;
}

/* تعديل زر العودة للأعلى */
#scroll-to-top {
    border-radius: 50% !important; /* جعله دائري */
    bottom: 20px !important; /* تنزيله قليلاً للأسفل */
    width: 50px !important; /* تكبير حجمه */
    height: 50px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* تثبيت شريط الشراء في أسفل الشاشة */
.sticky-product-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0;
    width: 100%;
    z-index: 1000;
}

/* تعديل زر السلايدر */
.s-slider-next.s-slider-nav-arrow,
.s-slider-prev.s-slider-nav-arrow {
    background-color: black !important; /* جعل الخلفية سوداء */
    border-radius: 50% !important; /* جعله دائري بالكامل */
    width: 40px !important; /* تحديد الحجم */
    height: 40px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none !important; /* إزالة الظلال */
    border: none !important; /* إزالة الحدود */
}

/* تعديل موضع شريط الشراء (تكرار حسب الحاجة) */
.sticky-product-bar {
    margin-top: -18px !important;
}
.sticky-product-bar {
    margin-top: -50px !important;
    position: relative !important;
}

/* إظهار/إخفاء عناصر حسب حجم الشاشة */
.hidden.md\:flex.items-center.gap-4 {
    display: flex !important;
}
.md\:hidden.flex.items-center.gap-3,
.md\:hidden.flex.items-center.gap-4 {
    display: none !important;
}



/* ===== على اللابتوب فأعلى ===== */
@media (min-width: 768px) {
  /* 1) تأكد من أنه ظاهر */
  .sticky-product-bar {
    display: flex !important;
  }

  /* 2) استخدم position: sticky بدلاً من fixed */
  .sticky-product-bar {
    position: sticky !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
  }

  /* 3) إذا لديك نسخة ثابتة بـ fixed، خبّئها */
  .sticky-product-bar[style*="position: fixed"] {
    display: none !important;
  }
}




@media only screen and (max-width: 767px) {
  /* يصغر العناصر في القائمة السفلية */
  .s-menu-footer-list,
  /* يصغر أي عنصر مستخدم لكلاسات flex flex-col text-center items-center justify-center */
  .flex.flex-col.text-center.items-center.justify-center {
    /* يقلّل الحجم العام */
    transform: scale(0.9) !important;
    transform-origin: center center !important;
    /* يقلّل حجم الخط */
    font-size: 0.9rem !important;
  }
}


@media only screen and (max-width: 767px) {
  .menu-list.space-y-2 {
    /* يصغر القائمة قليلاً */
    transform: scale(1) !important;
    transform-origin: top center !important;
    /* يقلل الفراغات الرأسية */
    gap: 0.25rem !important;
    /* يقلل حجم الخط */
    font-size: 0.90rem !important;
  }
}

@media only screen and (max-width: 767px) {
  /* إخفاء حقل البريد في الطلب السريع */
  .s-form-control.s-quick-order-email-field {
    display: none !important;
  }
}

@media only screen and (max-width: 767px) {
  /* إنزال شريط المنتج الثابت لأسفل بمقدار 10px */
  .sticky-product-bar.bg-white.p-5.rounded-md.rounded-b-none.md\:hidden.mb-16 {
    transform: translateY(10px) !important;
  }
}
.product__description.p-1.leading-7.mb-3 {
    display: none !important;
}

.s-slider-nav-arrow svg {
    fill: white !important;
    color: white !important;
}

.s-slider-nav-arrow {
    background-color: transparent;
    border-radius: 50%;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.s-slider-nav-arrow:hover {
    background-color: rgba(255, 255, 255, 0.15); /* خلفية شفافة خفيفة */
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6); /* توهج قوي */
    transform: scale(1.15); /* تكبير للزر */
}

.s-slider-nav-arrow svg {
    fill: white !important;
    transition: transform 0.3s ease;
}

.s-slider-nav-arrow:hover svg {
    transform: scale(1.3); /* تكبير للسهم */
    fill: white !important; /* يبقى أبيض */
}

#scroll-to-top {
    border-radius: 50%;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    background-color: #1a1a1a; /* أو استخدم bg-primary إن أردت */
    color: white;
}

#scroll-to-top:hover {
    background-color: #1a1a1a; /* نفس الخلفية بدون شفافية */
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6); /* توهج واضح */
    transform: scale(1.15);
}

#scroll-to-top i {
    transition: transform 0.3s ease;
    color: white !important;
}

#scroll-to-top:hover i {
    transform: scale(1.3);
    color: white !important;
}



input[type="email"] {
    display: none !important;
}



.s-form-group svg[viewBox="0 0 32 32"] {
    display: none !important;
}

/* تكبير الشعار على الجوال */
@media (max-width: 576px) {
  .navbar-brand {
    /* مساحة إضافية حول الشعار (اختياري) */
    padding-top: .2rem;
    padding-bottom: .2rem;
  }

  .navbar-brand img {
    /* حجم الشعار على الجوال */
    width: 35vw !important;   /* يشغل ~نصف عرض الشاشة */
    max-width: 200px !important; /* حد أقصى كي لا يبالغ */
    height: auto !important;  /* يحافظ على التناسُب */
    display: block;
    object-fit: contain;
  }
}



/* إخفاء زر القلب */
a.header-btn[href*="wishlist"] {
    display: none !important;
}


a.inline-flex.items-center.justify-center.gap-4.min-w-\[160px\] {
    display: none !important;
}

h2[data-swiper-parallax="-500"] {
    display: none !important;
}


.description {
  display: none;
}

.s-block--slider-with-bg {
    background-color: rgb(245, 240, 240) !important;
}


.slider-bg::before,
.slider-bg::after {
    background: none !important;
}

.slider-bg h3,
.slider-bg p {
    position: relative;
    top: 27px; /* ينزل العناصر 10px للأسفل */
}
.slider-bg h3, .slider-bg p { color: #FFFFFF !important; }





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

/* الحاوية العامة للعداد والسطر */
#home-countdown-wrapper {
  margin: 20px 0;
}

/* السطر العلوي */
#countdown-header {
  background: #ffefc4;
  color: #8a5300;
  text-align: center;
  padding: 10px 15px;
  font-size: 16px;
  font-weight: bold;
  border: 1px solid #f4d28c;
  border-radius: 8px 8px 0 0;
  margin-bottom: 0;
}

/* صندوق العداد */
#home-countdown-timer {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-top: none; /* دمج مع السطر العلوي */
  padding: 15px;
  text-align: center;
  border-radius: 0 0 8px 8px;
  font-family: 'Cairo', Arial, sans-serif;
  font-size: 16px;
}

#home-countdown-timer p {
  margin: 0 0 8px;
  font-weight: 600;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

#home-countdown-timer #timer {
  font-size: 18px;
  font-weight: bold;
  color: #d9534f;
  display: block;
  margin-top: 4px;
  direction: rtl;
}

.hourglass {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url('https://cdn-icons-png.flaticon.com/128/6393/6393911.png') no-repeat center;
  background-size: contain;
  animation: hourglass-rotate 2.5s infinite ease-in-out;
}

@keyframes hourglass-rotate {
  0% { transform: rotate(0deg); }
  45% { transform: rotate(180deg); }
  55% { transform: rotate(180deg); } 
  100% { transform: rotate(360deg); }
}

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

/* تصميم حاوية العداد لتكون بنفس ستايل الموقع */
#countdown-timer {
  background: #fff; /* خلفية بيضاء مثل بقية البلوكات */
  border: 1px solid #e5e5e5; /* نفس لون حدود الأقسام */
  padding: 15px;
  text-align: center;
  margin: 15px 0;
  border-radius: 8px;
  font-family: 'Cairo', Arial, sans-serif;
  font-size: 16px;
  box-shadow: none; /* إزالة الظل */
}

/* النص العلوي */
#countdown-timer p {
  margin: 0 0 8px;
  font-weight: 600;
  color: #333;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* الوقت */
#countdown-timer #timer {
  font-size: 18px;
  font-weight: bold;
  color: #d9534f; /* لون مميز للأرقام */
  display: block;
  margin-top: 4px;
  direction: rtl;
}

/* أيقونة الساعة الرملية */
.hourglass {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url('https://cdn-icons-png.flaticon.com/128/6393/6393911.png') no-repeat center;
  background-size: contain;
  animation: hourglass-rotate 2.5s infinite ease-in-out;
  vertical-align: middle;
}

/* حركة دوران مع توقف منتصف الدورة */
@keyframes hourglass-rotate {
  0%   { transform: rotate(0deg); }
  45%  { transform: rotate(180deg); }
  55%  { transform: rotate(180deg); } /* توقف مؤقت */
  100% { transform: rotate(360deg); }
}