/* نرتب الحاوية التي فيها اللوغو والعنوان */
.flex.items-center.justify-start {
  display: flex;
  align-items: center;
  gap: 1rem; /* مسافة بين اللوغو والعنوان */
  margin-bottom: 1.5rem;
}

/* تحسين مظهر اللوغو */
.max-w-\[85px\].max-h-\[85px\].lg\:max-w-\[175px\].lg\:max-h-\[175px\] {
  max-width: 100px !important;
  max-height: 100px !important;
  object-fit: contain !important;
  border-radius: 0.5rem; /* زوايا ناعمة */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* ظل بسيط */
}

/* تنسيق العنوان بالإنجليزي والعربي معًا */
.text-xl.md\:text-3xl.font-bold::after {
  content: "نور ناتشورال";
  display: block;
  font-family: Tahoma, Arial, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  color: #555;
  margin-top: 0.5rem;
}

.text-xl.md\:text-3xl.font-bold::after {
  content: "نور ناتشورال"; /* النص العربي */
  display: block;
  font-family: 'Tajawal', sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  color: #555;
  margin-top: 0.5rem;
}


/* add to cart button */
button[quick-buy] {
  all: unset; /* Remove ALL inherited styles */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background-color: orange !important;
  border: 2px solid orange !important;
  color: white !important;
  padding: 12px 24px !important;
  border-radius: 6px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Make sure icon and text are white */
button[quick-buy] * {
  color: white !important;
  fill: white !important;
}

/* Hover effect */
button[quick-buy]:hover {
  background-color: #cc5500 !important;
  border-color: #cc5500 !important;
  transform: scale(1.05);
}

/* Custom style for "اتمام الطلب" button */
button[loader-position="center"] {
  all: unset;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background-color: orange !important;
  border: 2px solid orange !important;
  color: white !important;
  padding: 12px 24px !important;
  border-radius: 6px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
  opacity: 1 !important;
  visibility: visible !important;
  text-align: center;
}

/* Ensure inner text and icons are white */
button[loader-position="center"] * {
  color: white !important;
  fill: white !important;
}

/* Hover effect */
button[loader-position="center"]:hover {
  background-color: #cc5500 !important;
  border-color: #cc5500 !important;
  transform: scale(1.05);
}

/* Hide the "تخفيضات" (Offers) tab in the home tabs menu*/
a.offers-link {
  display: none !important;
}

/* Target the hero-area container */
.hero-area.container {
    position: relative; /* Enable positioning for the announcement */
}

/*
.hero-area.container::before {
    content: " تبغى خصم؟ استخدم كود noorsa وخلك على كيفك";
    background-color: #FF5733;
    color: #ffffff;
    display: block;
    text-align: center;
    padding: 15px 0;
    font-size: 18px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    z-index: 10;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid red;
}

.hero-area.container::before strong {
    color: #FFD700;
}
*/

/* hide the text تعذر جلب المزيد😢 */
.s-infinite-scroll-error.infinite-scroll-error {
    display: none !important;
}


/* "More Comments Loading" Button Style */
.s-infinite-scroll-btn.s-button-btn.s-button-primary {
  all: unset; /* Remove inherited styles */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background-color: orange !important;
  border: 2px solid orange !important;
  color: white !important;
  padding: 12px 24px !important;
  border-radius: 6px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Make sure icon and text are white */
.s-infinite-scroll-btn.s-button-btn.s-button-primary * {
  color: white !important;
  fill: white !important;
}

/* Hover effect for "More Comments Loading" button */
.s-infinite-scroll-btn.s-button-btn.s-button-primary:hover {
  background-color: #cc5500 !important; /* Darker orange on hover */
  border-color: #cc5500 !important;
  transform: scale(1.05); /* Slightly increase button size */
}


/* 
  This CSS is used to display a custom message about potential customs fees 
  for orders to Qatar, Kuwait, and Bahrain under the .cart-item section.
  The message will appear below the cart item in the checkout page.
  
  The message is displayed as:
  "قد يتم احتساب رسوم جمركية رمزية على طلبات قطر، الكويت، والبحرين 
   (تُفرض أحيانًا، وأحيانًا لا، وذلك حسب نظام الجمارك في كل دولة).
   A small customs fee may be charged on orders to Qatar, Kuwait, and Bahrain 
   (sometimes applied, and sometimes not — depending on the customs regulations in each country)."
*/

.cart-item.border.border-gray-200.dark\:border-white\/\[0\.15\].overflow-hidden.p-5.sm\:p-7.rounded.mb-5.relative::after {
    content: "قد يتم احتساب رسوم جمركية رمزية على طلبات قطر، الكويت، والبحرين (تُفرض أحيانًا، وأحيانًا لا، وذلك حسب نظام الجمارك في كل دولة).\A\
    A small customs fee may be charged on orders to Qatar, Kuwait, and Bahrain (sometimes applied, and sometimes not — depending on the customs regulations in each country).";
    display: block !important; /* Force the message to be displayed as a block element */
    margin-top: 15px !important; /* Add space above the message */
    padding: 15px !important; /* Add padding inside the message box */
    background-color: #f8f8f8 !important; /* Set background color */
    color: #333 !important; /* Set text color */
    font-size: 14px !important; /* Set font size */
    border: 1px solid #ddd !important; /* Border around the message */
    border-radius: 5px !important; /* Rounded corners for the message box */
    text-align: center !important; /* Center the message */
    white-space: pre-wrap !important; /* Ensure text wraps correctly */
}