/* ==========================================================================
   تخصيص شامل لألوان وترتيب الأقسام والمنتجات لمتجر Doctor Sat على EasyOrders
   مستوحى من الهوية اللونية (الكحلي الداكن #162B48 + البرتقالي الذهبي #FE9E08 + الثلجي #EDF1FC)
   ========================================================================== */

:root {
  /* الألوان الأساسية للهوية */
  --brand-navy-dark: #162b48;
  --brand-navy-primary: #0f2b4e;
  --brand-orange-cta: #fe9e08;
  --brand-orange-hover: #e58a00;
  --brand-ice-bg: #edf1fc;
  --brand-page-bg: #f8faff;
  --brand-text-gray: #697180;
  --brand-white: #ffffff;
  --brand-border: #dce3f2;

  /* متغيرات لوحة ألوان EasyOrders الرسمية (22 متغير) */
  --ann-bg: #162b48 !important;
  --ann-text: #ffffff !important;
  --hd-bg: #ffffff !important;
  --hd-text: #0f2b4e !important;
  --ft-bg: #162b48 !important;
  --ft-text: #edf1fc !important;
  --body-bg: #f8faff !important;
  --body-text: #0f2b4e !important;
  --buy-btn-bg: #fe9e08 !important;
  --buy-btn-text: #0f2b4e !important;
  --buy-btn-border: #fe9e08 !important;
  --crt-btn-bg: #0f2b4e !important;
  --crt-btn-text: #ffffff !important;
  --crt-btn-border: #0f2b4e !important;
  --product-name-text: #0f2b4e !important;
  --product-price-text: #0f2b4e !important;
  --product-sale-price-text: #fe9e08 !important;
  --input-bg: #ffffff !important;
  --input-text: #0f2b4e !important;
  --input-border: #dce3f2 !important;
  --checkout-form-bg: #edf1fc !important;
  --checkout-heading-text: #0f2b4e !important;
}

/* ==========================================================================
   1. الإعدادات العامة وعناوين الأقسام الاحترافية
   ========================================================================== */
body {
  background-color: var(--brand-page-bg) !important;
  color: var(--brand-navy-primary) !important;
}

/* تنسيق عناوين الأقسام الرئيسية مع خط ذهبي سفلي مميز */
.home_section_top_container,
.category_section_header {
  margin-top: 28px !important;
  margin-bottom: 22px !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid var(--brand-border) !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.home_section_top_title,
.category_section_header_title {
  color: var(--brand-navy-primary) !important;
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  position: relative !important;
  padding-bottom: 6px !important;
}

.home_section_top_title::after,
.category_section_header_title::after {
  content: "" !important;
  position: absolute !important;
  bottom: -12px !important;
  right: 0 !important;
  width: 65px !important;
  height: 4px !important;
  background-color: var(--brand-orange-cta) !important;
  border-radius: 4px !important;
}

/* ==========================================================================
   2. الشريط العلوي والهيدر
   ========================================================================== */
.luxify_top_header,
.fasty_header_top_text,
.top-bar,
.announcement-bar {
  background-color: var(--brand-navy-dark) !important;
  color: var(--brand-white) !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
}

.sphinx_header,
.luxify_header,
.luxify_header_container,
.fasty_header,
header {
  background-color: var(--brand-white) !important;
  color: var(--brand-navy-primary) !important;
  border-bottom: 1px solid var(--brand-border) !important;
  box-shadow: 0 4px 16px rgba(15, 43, 78, 0.06) !important;
}

/* ==========================================================================
   3. ترتيب وتصميم بطاقات الأقسام (Categories Layout & Styling)
   ========================================================================== */
.default_category_card,
.luxify_category_card {
  background: linear-gradient(180deg, #ffffff 0%, #edf1fc 100%) !important;
  border: 2px solid var(--brand-border) !important;
  border-radius: 18px !important;
  padding: 14px 10px !important;
  text-align: center !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  box-shadow: 0 4px 12px rgba(15, 43, 78, 0.04) !important;
  overflow: hidden !important;
}

.default_category_card:hover,
.luxify_category_card:hover {
  transform: translateY(-6px) !important;
  border-color: var(--brand-orange-cta) !important;
  box-shadow: 0 12px 24px rgba(254, 158, 8, 0.18) !important;
}

.default_category_card_img,
.luxify_category_card_img {
  border-radius: 14px !important;
  transition: transform 0.35s ease !important;
  object-fit: contain !important;
  background-color: var(--brand-white) !important;
  padding: 6px !important;
}

.default_category_card:hover .default_category_card_img,
.luxify_category_card:hover .luxify_category_card_img {
  transform: scale(1.07) !important;
}

.luxify_category_card_name,
.default_category_card h3,
.default_category_card p,
.default_category_card span {
  color: var(--brand-navy-primary) !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  margin-top: 10px !important;
  display: block !important;
}

/* ==========================================================================
   4. ترتيب وتوحيد شبكة وبطاقات المنتجات (Products Grid & Cards)
   ========================================================================== */
.home_products_grid_container,
.products_grid_container,
.category_products_grid_container,
.default_product_list_container {
  gap: 18px !important;
}

.home_products_grid_card,
.products_grid_card,
.category_products_grid_card,
.default_product_list_card,
.default_product_featured_card,
.luxify_product_featured_card,
.fasty_product_card,
.home_products_carousel_card {
  background-color: var(--brand-white) !important;
  border: 1.5px solid var(--brand-border) !important;
  border-radius: 18px !important;
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: 0 6px 18px rgba(15, 43, 78, 0.05) !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.home_products_grid_card:hover,
.products_grid_card:hover,
.category_products_grid_card:hover,
.default_product_list_card:hover,
.fasty_product_card:hover,
.home_products_carousel_card:hover {
  transform: translateY(-6px) !important;
  border-color: var(--brand-orange-cta) !important;
  box-shadow: 0 14px 28px rgba(15, 43, 78, 0.12) !important;
}

/* تنسيق صور المنتجات داخل البطاقات لتكون متناسقة تماماً */
.home_products_grid_card img,
.products_grid_card img,
.category_products_grid_card img,
.fasty_product_card_img,
.luxify_product_featured_card_img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  background-color: #ffffff !important;
  border-radius: 12px !important;
  padding: 8px !important;
  margin-bottom: 10px !important;
  transition: transform 0.35s ease !important;
}

.home_products_grid_card:hover img,
.products_grid_card:hover img,
.category_products_grid_card:hover img,
.fasty_product_card:hover .fasty_product_card_img {
  transform: scale(1.05) !important;
}

/* توحيد طول أسماء المنتجات في سطرين كحد أقصى لمنع تفاوت ارتفاع البطاقات */
.product_name,
.home_products_grid_card h3,
.products_grid_card h3 {
  color: var(--brand-navy-primary) !important;
  font-weight: 700 !important;
  font-size: 0.98rem !important;
  line-height: 1.45 !important;
  margin: 6px 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 2.9em !important;
}

/* إبراز الأسعار وشارات الخصم بشكل احترافي */
.product_price_container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 8px 0 12px 0 !important;
  padding-top: 8px !important;
  border-top: 1px dashed var(--brand-border) !important;
}

.product_price,
#salePrice,
.total_price {
  color: var(--brand-navy-primary) !important;
  font-weight: 900 !important;
  font-size: 1.15rem !important;
}

#basePrice {
  color: var(--brand-text-gray) !important;
  text-decoration: line-through !important;
  font-size: 0.9rem !important;
}

#discountPercent,
.percentage {
  background-color: var(--brand-orange-cta) !important;
  color: var(--brand-navy-primary) !important;
  font-weight: 800 !important;
  font-size: 0.8rem !important;
  padding: 3px 10px !important;
  border-radius: 50px !important;
  box-shadow: 0 2px 8px rgba(254, 158, 8, 0.3) !important;
}

/* ==========================================================================
   5. أزرار الشراء والإضافة للسلة (CTA & Checkout Buttons)
   ========================================================================== */
.checkout_btn,
.form_checkout_btn,
.checkout_buy_now,
#x-checkout-btn {
  background-color: var(--brand-orange-cta) !important;
  color: var(--brand-navy-primary) !important;
  border: 2px solid var(--brand-orange-cta) !important;
  border-radius: 50px !important;
  font-weight: 800 !important;
  padding: 10px 20px !important;
  box-shadow: 0 4px 14px rgba(254, 158, 8, 0.3) !important;
  transition: all 0.25s ease-in-out !important;
  width: 100% !important;
  text-align: center !important;
}

.checkout_btn:hover,
.form_checkout_btn:hover,
.checkout_buy_now:hover,
#x-checkout-btn:hover {
  background-color: var(--brand-orange-hover) !important;
  border-color: var(--brand-orange-hover) !important;
  color: var(--brand-navy-dark) !important;
  transform: translateY(-2px) !important;
}

.add_to_cart_btn {
  background-color: var(--brand-navy-primary) !important;
  color: var(--brand-white) !important;
  border: 2px solid var(--brand-navy-primary) !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  padding: 9px 18px !important;
  transition: all 0.25s ease-in-out !important;
}

.add_to_cart_btn:hover {
  background-color: var(--brand-orange-cta) !important;
  border-color: var(--brand-orange-cta) !important;
  color: var(--brand-navy-primary) !important;
}

/* ==========================================================================
   6. تحسين العرض على الجوال (Mobile Responsiveness)
   ========================================================================== */
@media (max-width: 768px) {
  .home_section_top_title,
  .category_section_header_title {
    font-size: 1.2rem !important;
  }

  .home_products_grid_card,
  .products_grid_card,
  .category_products_grid_card,
  .fasty_product_card {
    padding: 9px !important;
    border-radius: 14px !important;
  }

  .product_name,
  .home_products_grid_card h3 {
    font-size: 0.88rem !important;
  }

  .product_price,
  #salePrice {
    font-size: 1rem !important;
  }
}

/* ==========================================================================
   7. نموذج الشراء والفوتر
   ========================================================================== */
.product_form_checkout,
.checkout_form,
.checkout_order_summary {
  background-color: var(--brand-ice-bg) !important;
  border: 1.5px solid var(--brand-border) !important;
  border-radius: 18px !important;
  padding: 18px !important;
}

.global_input,
.global_textarea,
.gov_select {
  background-color: var(--brand-white) !important;
  color: var(--brand-navy-primary) !important;
  border: 1.5px solid var(--brand-border) !important;
  border-radius: 10px !important;
}

.global_input:focus,
.global_textarea:focus,
.gov_select:focus {
  border-color: var(--brand-orange-cta) !important;
  box-shadow: 0 0 0 3px rgba(254, 158, 8, 0.2) !important;
  outline: none !important;
}

.swiper-pagination-bullet-active {
  background-color: var(--brand-orange-cta) !important;
}

.default_footer,
.luxify_footer,
footer {
  background-color: var(--brand-navy-dark) !important;
  color: var(--brand-ice-bg) !important;
  border-top: 4px solid var(--brand-orange-cta) !important;
}