/****************************************
  0) خط عربي موحّد
*****************************************/
@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@100..900&family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap');

/****************************************
  1) نظام الألوان (Color System)
*****************************************/
:root {
  --font-main: "Alexandria", "IBM Plex Sans Arabic", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ألوان الثيم */
  --main-color: #c51f27;
  --button-color: #c51f27;
  --button-hover-color: #000000;
  --bg-color: #fffbf5;
  --secondary-color: #b7b3ac;
  --not-selected-color: #8e8b86;
  --bg-description-color: #e7e2d9;
  --price-color: #c51f27;
  --bundle-sticker-color: #c51f27;

  /* aliases قديمة */
  --store-primary: var(--main-color);
  --store-bg: var(--bg-color);
}

* {
  box-sizing: border-box;
}

/****************************************
  2) الخلفية الأساسية + الخط
*****************************************/
html,
body {
  background-color: var(--bg-color) !important;
  color: #222222;
  font-family: var(--font-main) !important;
  margin: 0;
  padding: 0;
}

/* عناصر أساسية تمشي على نفس الخط */
.product_name,
.product_price,
.product_description,
.product_tabs_container,
.total_price,
.total_shipping,
.checkout_btn,
.add_to_cart_btn,
.form_checkout_btn,
.fasty_product_card,
.default_footer,
.category_section_header_title,
.checkout_order_summary,
.checkout_cart_items_container,
.checkout_form {
  font-family: var(--font-main) !important;
}

/****************************************
  3) الخلفية في كل الصفحات
*****************************************/
.container_class,
.products_grid_container,
.category_products_grid_container,
.category_page_container,
.home_products_grid_container,
.checkout_bg_right,
.checkout_bg_left,
.checkout_container,
.thanks_container,
.thanks_content,
.order_invoice_container {
  background-color: var(--bg-color) !important;
}

/****************************************
  4) الكروت/الفورمات تبقى بيضا فوق الخلفية
*****************************************/
.fasty_product_card,
.default_category_card,
.category_products_grid_card,
.product_form_checkout,
.product_tabs_container,
.checkout_order_summary,
.checkout_cart_items_container,
.checkout_form {
  background-color: #ffffff !important;
  border-radius: 12px !important;
  border: 1px solid #f0e2d2 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03) !important;
}

/****************************************
  5) الأزرار – ستايل عام
*****************************************/
.add_to_cart_btn,
.checkout_btn,
.checkout_buy_now,
.fasty_product_card_btn,
.form_checkout_btn {
  background-color: var(--button-color) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  cursor: pointer !important;
  text-align: center !important;
  width: 100%;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 0.2s ease, transform 0.1s ease !important;
}

.add_to_cart_btn:hover,
.checkout_btn:hover,
.checkout_buy_now:hover,
.fasty_product_card_btn:hover,
.form_checkout_btn:hover {
  background-color: var(--button-hover-color) !important;
  transform: translateY(-1px);
}

/****************************************
  6) إخفاء أيقونات الأزرار (i / svg / ::before)
*****************************************/
.add_to_cart_btn i,
.checkout_btn i,
.checkout_buy_now i,
.add_to_cart_btn svg,
.checkout_btn svg,
.checkout_buy_now svg,
.fasty_product_card_btn svg {
  display: none !important;
}

.add_to_cart_btn::before,
.checkout_btn::before,
.checkout_buy_now::before,
.fasty_product_card_btn::before {
  content: none !important;
  display: none !important;
}

/****************************************
  7) فورم الشراء جوّه فريم مستطيل
*****************************************/
.product_form_checkout {
  padding: 16px 14px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06) !important;
  background-color: #ffffff !important;
}

/* المدخلات العامة (ماعدا gov_select) */
.global_input,
.global_textarea {
  border-radius: 10px !important;
  border: 1px solid #dddddd !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
}

/****************************************
  8) الـ Upsell – لون النص = لون الثيم
*****************************************/
[class*="upsell"] .helper_text,
[class*="upsell"] .subtext,
[class*="upsell"] small,
[class*="upsell"] p,
[class*="upsell"] span,
.product_form_checkout [class*="upsell"],
.checkout_order_summary [class*="upsell"] {
  color: var(--main-color) !important;
}

/****************************************
  9) الفوتر
*****************************************/
.default_footer {
  background-color: var(--main-color) !important;
  color: var(--bg-color) !important;
  padding: 16px 0 !important;
}

.default_footer_link,
.default_footer a,
.footer_store_info,
.default_footer_social_link {
  color: var(--bg-color) !important;
}

.default_footer_link:hover,
.default_footer a:hover,
.default_footer_social_link:hover {
  color: #ffffff !important;
  text-decoration: underline;
}

/****************************************
  10) الهيدر + شريط العروض
*****************************************/
.fasty_header,
.fasty_header_container,
.header,
.site-header {
  background-color: var(--bg-color) !important;
  border-bottom: 1px solid #f0e2d2 !important;
}

.fasty_header_top_text {
  background-color: var(--main-color) !important;
  color: var(--bg-color) !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/****************************************
  11) كروت الجريد
*****************************************/
.fasty_product_card_img img,
.default_category_card_img img {
  width: 100%;
  display: block;
  border-radius: 10px;
}

.category_products_grid_card {
  padding: 12px !important;
}

/****************************************
  12) Inputs عامة إضافية
*****************************************/
.total_shipping_container,
.total_shipping {
  margin-top: 8px;
  font-size: 14px;
  color: #2e7d32;
  font-weight: 600;
}

.total_price_container .total_price,
.total_price {
  font-size: 16px;
  font-weight: 700;
  color: #111111;
}

.pb-12 {
  background-color: var(--bg-color) !important;
}

/****************************************
  13) Override لكل السكاشن اللي كانت بيضا
*****************************************/
.bg-white,
.bg-gray-50 {
  background-color: var(--bg-color) !important;
}

.bg-white.rounded-med,
.bg-white.rounded-med.p-4 {
  background-color: var(--bg-color) !important;
}

.product_description.bg-white,
.product_description.rounded-b-md.bg-white,
.product_description.rounded-b-md.bg-white.p-5 {
  background-color: var(--bg-color) !important;
}

.mx-auto.w-full.max-w-full.flex-1.py-8.px-4.sm\:py-10.sm\:px-6.xl\:max-w-7xl.xl\:px-8,
.relative.py-16.bg-white.flex-1,
.flex-1.overflow-y-auto.py-6.px-4,
.flex-1.overflow-y-auto.py-6.px-4.sm\:px-6,
.checkout_order_summary.bg-gray-50,
.checkout_form.px-4.pt-16.pb-36,
.checkout_form.px-4.pt-16.pb-36.sm\:px-6.lg\:col-start-1.lg\:row-start-1.lg\:px-0.lg\:pb-16 {
  background-color: var(--bg-color) !important;
}

/* الكروت المهمة تفضل بيضا */
.product_form_checkout,
.product_tabs_container,
.fasty_product_card,
.category_products_grid_card,
.default_category_card,
.checkout_order_summary,
.checkout_cart_items_container,
.checkout_form {
  background-color: #ffffff !important;
}

/****************************************
  14) صف كل منتج في السلة
*****************************************/
.cart-item.flex.py-6,
.cart-item {
  background-color: var(--bg-color) !important;
  padding: 20px !important;
}

/****************************************
  15) الـ Select بتاع المحافظة – حل مشكلة البوكسين
*****************************************/

/* البوكس الخارجي gov_select – نشيل منه أي padding / border / خلفية */
.gov_select {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* البوكس الحقيقي بتاع الاختيار */
.gov_select .select__control {
  margin: 0 !important;                   /* مفيش مسافة بينه وبين البوكس الخارجي */
  padding: 6px 10px !important;           /* مسافة داخلية للنص نفسه */
  border-radius: 10px !important;
  border: 1px solid #e0d2c0 !important;
  background-color: var(--bg-color) !important;
  box-shadow: none !important;
}

/* جوّه الـ select نفسه */
.gov_select .select__control * {
  background-color: transparent !important;
}

/****************************************
  16) زرار "تحديد الخيارات" في الهوم
*****************************************/
.fasty_product_card_btn {
  background-color: var(--button-color) !important;
  color: var(--store-bg) !important;
  border-radius: 10px !important;
  border: 1px solid var(--button-color) !important;
  padding: 10px 16px !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  text-align: center !important;
  width: 100%;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease !important;
}

.fasty_product_card_btn:hover {
  background-color: var(--button-hover-color) !important;
  color: var(--store-bg) !important;
  border-color: var(--button-hover-color) !important;
  transform: translateY(-1px);
}

/****************************************
  17) زرار "إضافة إلى السلة" في صفحة المنتج
*****************************************/
.add_to_cart_btn {
  background-color: var(--store-bg) !important;
  color: var(--button-color) !important;
  border-radius: 10px !important;
  border: 2px solid var(--button-color) !important;
  padding: 12px 16px !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  text-align: center !important;
  width: 100%;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.1s ease !important;
}

.add_to_cart_btn:hover {
  background-color: var(--store-bg) !important;
  border-color: var(--button-hover-color) !important;
  color: var(--button-hover-color) !important;
  transform: translateY(-1px);
}

/****************************************
  18) زرار "إكمال الطلب" (checkout_btn)
*****************************************/
.checkout_btn {
  background-color: var(--button-color) !important;
  color: var(--store-bg) !important;
  border-radius: 10px !important;
  border: none !important;
  padding: 12px 16px !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  text-align: center !important;
  width: 100%;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 0.2s ease, transform 0.1s ease !important;
}

.checkout_btn:hover {
  background-color: var(--button-hover-color) !important;
  color: var(--store-bg) !important;
  transform: translateY(-1px);
}

/****************************************
  19) Sticky buttons + زرار إتمام الطلب بتاع السلة
*****************************************/
.flex.items-center.justify-center.gap-2.py-3.px-8.text-base.font-medium.border.border-transparent.bg-skin-primary.rounded-md.py-2.flex-1,
.flex.items-center.justify-center.gap-2.py-3.px-8.text-base.font-medium.w-full.bg-skin-primary.rounded-md.py-2 {
  background-color: var(--button-color) !important;
  color: var(--store-bg) !important;
  border-radius: 10px !important;
  border: none !important;
  padding: 12px 16px !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  text-align: center !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 0.2s ease, transform 0.1s ease !important;
}

.flex.items-center.justify-center.gap-2.py-3.px-8.text-base.font-medium.border.border-transparent.bg-skin-primary.rounded-md.py-2.flex-1:hover,
.flex.items-center.justify-center.gap-2.py-3.px-8.text-base.font-medium.w-full.bg-skin-primary.rounded-md.py-2:hover {
  background-color: var(--button-hover-color) !important;
  color: var(--store-bg) !important;
  transform: translateY(-1px);
}

/****************************************
  20) إزالة أيقونات cart + wallet من معظم الزراير
*****************************************/
.flex.items-center.justify-center.gap-2.py-3.px-8.text-base.font-medium.border.border-transparent.bg-skin-primary.rounded-md.py-2.flex-1 svg,
.flex.items-center.justify-center.gap-2.py-3.px-8.text-base.font-medium.w-full.bg-skin-primary.rounded-md.py-2 svg {
  display: none !important;
}

/****************************************
  21) زرار إتمام الطلب (checkout_buy_now) + أيقونة TRUE BEIGE
*****************************************/
.checkout_buy_now {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 12px 20px !important;
  width: 100% !important;
  background-color: var(--button-color) !important;
  color: var(--store-bg) !important;
  border-radius: 10px !important;
  border: none !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  cursor: pointer !important;
  text-align: center !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease, transform 0.1s ease !important;
}

.checkout_buy_now:hover {
  background-color: var(--button-hover-color) !important;
  color: var(--store-bg) !important;
  transform: translateY(-1px);
}

.checkout_buy_now::before,
.checkout_buy_now:hover::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url("https://files.easy-orders.net/1764207316068918737beige%20true.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/****************************************
  22) فريم فورم الشراء + المسافات
*****************************************/
.checkout_form {
  border: 2px solid var(--store-primary) !important;
  border-radius: 16px !important;
  padding: 0 !important;
  margin-left: 20px !important;
  margin-right: 20px !important;
  margin-top: 40px !important;
  margin-bottom: 40px !important;
  background-color: transparent !important;
}

.checkout_form > .mx-auto {
  background-color: var(--bg-color) !important;
  border-radius: 12px !important;
  padding: 20px !important;
}

/* ملخص الطلب – padding داخلي 20px */
.checkout_order_summary {
  margin-left: 20px !important;
  margin-right: 20px !important;
  padding: 20px !important;
}

/****************************************
  23) إلغاء الـ sticky في صفحة الـ Checkout
*****************************************/
.checkout_form .fixed.bottom-0.left-0.right-0 {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  border-top: none !important;
  background-color: transparent !important;
  padding: 16px 0 0 0 !important;
  margin-top: 16px !important;
}

/****************************************
  24) فريم كارت الـ Upsell + ألوان الـ Radio
*****************************************/
.mb-4.flex.w-full.cursor-pointer.flex-col.rounded-xl.border.p-3 {
  border-color: var(--not-selected-color) !important;
  border-width: 1px !important;
}

.mb-4.flex.w-full.cursor-pointer.flex-col.rounded-xl.border.p-3[class*="!border-[3px]"],
.mb-4.flex.w-full.cursor-pointer.flex-col.rounded-xl.border.p-3[class*="!border-skin-primary"] {
  border-width: 2px !important;
  border-color: var(--store-primary) !important;
}

.radio_container.border-skin-primary,
.radio_container.border-blue-500,
.radio_container.border-indigo-500,
.radio_container[style*="border-color"] {
  border-color: var(--store-primary) !important;
}

.radio_container.border-skin-primary .radio_circle,
.radio_circle.bg-skin-primary,
.radio_circle.bg-blue-500,
.radio_circle.bg-indigo-500,
.radio_circle[style*="background-color"] {
  background-color: var(--store-primary) !important;
}

/****************************************
  25) لون سعر العرض = price color
*****************************************/
.flex.items-center.gap-x-1.text-red-400,
.flex.items-center.gap-x-1.text-red-400 *,
#sale-price {
  color: var(--price-color) !important;
}

/****************************************
  26) نص تحت السلة + البادجات الصغيرة
*****************************************/
.mt-8.text-center.text-base.text-gray-400 {
  color: var(--store-bg) !important;
}

.absolute.flex.items-center.justify-center.top-1.text-xs.font-medium.bg-skin-primary.h-4.w-4.rounded-full.text-white.right-0 {
  background-color: var(--store-primary) !important;
}

.font-bold.text-skin-primary.underline {
  color: var(--store-primary) !important;
}

/****************************************
  27) سيكشن تفاصيل المنتج – التاب بار
*****************************************/
.flex.justify-start.gap-2[role="tablist"] {
  background-color: var(--bg-description-color) !important;
  border-radius: 10px 10px 0 0 !important;
  border-bottom: 1px solid var(--store-primary) !important;
  overflow: hidden !important;
}

.flex.justify-start.gap-2[role="tablist"] > button {
  background-color: transparent !important;
  box-shadow: none !important;
  width: 100% !important;
  display: block !important;
  position: relative !important;
  color: #000000 !important;
  text-align: right !important;
  padding: 8px 16px !important;
  padding-left: 16px !important;
}

.flex.justify-start.gap-2[role="tablist"] > button svg {
  display: none !important;
}

/****************************************
  28) إخفاء الأيقونات الإضافية (قلب / بحث / شير)
*****************************************/
svg.h-5.w-5.md\:w-5.md\:h-5 {
  display: none !important;
}

button.product_gallery_wishlist_btn svg {
  display: none !important;
}

span.rounded-xl.border.p-2 svg {
  display: none !important;
}

/* أيقونة السيرش – نستثني المنيو (الهامبورجر) md:h-8 / md:w-8 */
svg.w-5.h-5[viewBox="0 0 24 24"][stroke-width="1.5"]:not(.md\:h-8):not(.md\:w-8) {
  display: none !important;
}

/****************************************
  29) شارة "ضمان معاينة قبل الاستلام"
*****************************************/
div[class*="bg-red-600"][class*="rounded-b-md"][class*="py-1.5"] {
  background-color: var(--bundle-sticker-color) !important;
}

div[class*="bg-red-600"][class*="rounded-b-md"][class*="py-1.5"]
  span[class*="border-red-600"] {
  border-bottom-color: var(--bundle-sticker-color) !important;
}

/****************************************
  30) بوكس "تكلفة الشحن + الإجمالي" تحت الفورم
*****************************************/
.eo-inline-summary {
  margin: 16px 0 12px 0;
  padding: 12px 16px;
  border-radius: 10px;
  background-color: #fff7f5;
  border: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 14px;
  font-weight: 500;
}

.eo-inline-summary .eo-inline-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.eo-inline-summary .eo-inline-total {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed rgba(0, 0, 0, 0.12);
  font-weight: 700;
  color: var(--main-color);
}