/* تصميم متجاوب لسعر التوصيل - يعمل على جميع الأجهزة */

/* التأكد من أن الجدول لا يضيف مسافات ضمنية */
.faqs-content-inside .tablecollapse {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  width: 100% !important;
}

/* قسم سعر التوصيل - خارج الجدول بعرض كامل */
.shipping-section {
  width: 100% !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* عنوان سعر التوصيل - بنفس تصميم السعر الفرعي */
.shipping-title {
  width: 100% !important;
  text-align: right !important;
  padding: 10px !important;
  font-weight: 600 !important;
  font-size: 15.9px !important;
  border: 1px solid #dfd3ff !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  box-sizing: border-box !important;
  color: #000 !important;
  font-family: "Droid Arabic charov", sans-serif !important;
}

/* Container للخيارات - عرض كامل */
#codplugin_d_has_price {
  width: 100% !important;
  padding: 0 15px !important;
  padding-bottom: 10px !important;
  box-sizing: border-box !important;
  display: block !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* نص "قم بتحديد الولاية" - يظهر في اليسار ويختفي عند ظهور الخيارات */
.summary-select-state {
  display: block !important;
  text-align: left !important;
  font-size: 17px !important;
  color: #666 !important;
  margin-bottom: 10px !important;
  padding: 0 !important;
  font-family: "Cairo Charov Bold" !important;
}

/* نص "مجاني" للشحن المجاني بدلاً من السعر */
.summary-select-state.free-shipping {
  color: #fff !important;
  background-color: #ff1469 !important;
  font-weight: bold !important;
  display: inline-block !important;
  font-size: 14px !important;
  height: 30px !important;
  line-height: 10px !important;
  padding: 9px 22px !important;
  border-radius: 8px !important;
  text-align: center !important;
}

/* إخفاء نص "قم بتحديد الولاية" عندما تظهر خيارات التوصيل (لكن ليس عندما يكون مجاني) */
#codplugin_d_has_price:has(#shipping_method[style*="display: block"]) .summary-select-state:not(.free-shipping),
#codplugin_d_has_price:has(#shipping_method li) .summary-select-state:not(.free-shipping) {
  display: none !important;
}

/* إخفاء خيارات التوصيل عندما يكون الشحن مجاني */
#codplugin_d_has_price:has(.summary-select-state.free-shipping) #shipping_method {
  display: none !important;
}

/* قائمة خيارات التوصيل - بدون padding */
#codplugin_d_has_price #shipping_method {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* كل خيار توصيل في صندوق منفصل - عرض كامل */
#codplugin_d_has_price #shipping_method li {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 12px !important;
  margin: 0 0 8px 0 !important;
  background-color: #ffffff !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid #e5e7eb !important;
  box-sizing: border-box !important;
  gap: 10px !important;
  /* margin-left: 15px !important;*/
}

/* السعر في اليسار داخل صندوق أزرق */
#codplugin_d_has_price #shipping_method li .shipping-cost {
  order: 1 !important;
  margin: 0 !important;
  padding: 6px 18px !important;
  background-color: #259bea !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: bold !important;
  font-family: "Cairo Charov Bold" !important;
  white-space: nowrap !important;
  line-height: 1.5 !important;
  height: auto !important;
  min-height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* الـ label - يحتوي على النص (التوصيل إلى المنزل) */
#codplugin_d_has_price #shipping_method li label {
  order: 4 !important;
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  font-size: 15px !important;
  font-family: "Cairo Charov Bold" !important;
  font-weight: 600 !important;
  text-align: right !important;
  direction: rtl !important;
  justify-content: space-around !important;
}

/* CSS خاص بوضع الهاتف للـ label */
@media (max-width: 768px) {
  #codplugin_d_has_price #shipping_method li label {
    justify-content: space-evenly !important;
    flex-direction: column !important;
    gap: 9px !important;
  }
}

/* الـ input radio - في اليمين */
#codplugin_d_has_price #shipping_method li input[type="radio"] {
  order: 2 !important;
  margin: 0 !important;
  margin-left: 15px !important;
  margin-right: 10px !important;
  flex-shrink: 0 !important;
}

/* تأثير hover على الصندوق */
#codplugin_d_has_price #shipping_method li:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12) !important;
  border-color: #259bea !important;
  transform: translateY(-1px) !important;
  transition: all 0.2s ease !important;
}

/* تأثير على الصندوق المحدد */
#codplugin_d_has_price #shipping_method li:has(input:checked) {
  border-color: #ff6d38 !important;
  background-color: #fff5f0 !important;
  box-shadow: 0 4px 8px rgba(255, 109, 56, 0.15) !important;
}

/* إزالة التأثيرات الافتراضية للمتصفح عند الضغط على صناديق التوصيل */
#codplugin_d_has_price #shipping_method li:active,
#codplugin_d_has_price #shipping_method li:focus,
#codplugin_d_has_price #shipping_method li:focus-visible,
#codplugin_d_has_price #shipping_method li input:active,
#codplugin_d_has_price #shipping_method li input:focus,
#codplugin_d_has_price #shipping_method li input:focus-visible,
#codplugin_d_has_price #shipping_method li label:active,
#codplugin_d_has_price #shipping_method li label:focus,
#codplugin_d_has_price #shipping_method li label:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  background-color: inherit !important;
  border-color: inherit !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

/* تغيير لون السعر عند التحديد */
#codplugin_d_has_price #shipping_method li:has(input:checked) .shipping-cost {
  background-color: #ff6d38 !important;
}

/* ✅ إخفاء شامل وقوي لجميع إشعارات WooCommerce */
.woocommerce-notices-wrapper,
.woocommerce-error,
.woocommerce-message,
.wc-forward,
div[class*="woocommerce-message"],
div[class*="woocommerce-error"],
.woocommerce-info,
.woocommerce-notice,
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.wc-forward,
.entry-content .woocommerce-message,
.entry-content .woocommerce-error,
.brxe-container .woocommerce-notices-wrapper,
div[style*="background-color: #ff"],
div[style*="background: #ff"],
div[style*="background-color: red"],
div[style*="background: red"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
}

/* تغيير لون خلفية النموذج    e2e8f0   */
.woocommerce-billing-fields__field-wrappernew {
  background: #f2f5fe !important;
}

/* ✅ إخفاء فوري للعناصر عند منتج out of stock */
body.single-product .stock.out-of-stock~.checkout.woocommerce-checkout,
body.single-product .stock.out-of-stock~.center {
  display: none !important;
}

/* ************** This Is Class  parent li ya7tawi 3lihom kamel "section biling and section order "*********************** */
.woocommerce-billing-fields__field-wrappernew {
  /* margin: 0 auto; */
  /* padding: 0px; */
  border: 3px solid #3b82f6;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /*  background: #ffffff;*/
  background: #f8f8f8;

  padding-top: 22px;
}

/* 01 -1 /// ******************  Section biling detail ********************* */
/* تحسين حقول شاشة التفعيل للترخيص لتكون متجاوبة وفي المنتصف */
.license-activation-form .form-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
}

.license-activation-form .domain-display,
.license-activation-form .license-display {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 12px;
}

.license-activation-form .domain-input,
.license-activation-form .license-input {
  width: 320px;
  max-width: 90vw;
  min-width: 180px;
  height: 56px;
  font-size: 18px;
  text-align: center;
  border-radius: 8px;
  border: 1.7px solid #bfc7d1;
  background: #f3f3f3;
  margin: 0 0 0 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.license-activation-form .copy-btn,
.license-activation-form .paste-btn {
  height: 44px;
  min-width: 90px;
  font-size: 17px;
  border-radius: 8px;
  background: #2563eb;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}

.license-activation-form .copy-btn:hover,
.license-activation-form .paste-btn:hover {
  background: #1e40af;
}

@media (max-width: 600px) {

  .license-activation-form .domain-input,
  .license-activation-form .license-input {
    width: 98vw;
    min-width: 120px;
    font-size: 16px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .license-activation-form .domain-display,
  .license-activation-form .license-display {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }

  .license-activation-form .copy-btn,
  .license-activation-form .paste-btn {
    width: 100%;
    min-width: 80px;
    font-size: 16px;
    height: 40px;
  }
}

/*  class child  li fih les fields "hna win te9der tet7akm fi width ta3 les fields " */
.ct-customer-details {
  width: 108%;
}

/*  class child  li fih les fields */
.col2-set {}

/*  class child  li fih les fields  hadi obligé bech mayjokech les field motadakhlin or width ta3hom sghir */
.col-1 {
  width: 100% !important;
  /* background: antiquewhite;*/
}

/* Class  child  "col-1" li ya7tawi 3la les fields name */
.woocommerce-billing-fields__field-wrapper {
  /* margin: 0 auto; */
  /* padding: 20px; */
  /* border: 2px solid #0c0a09; */
  /* border-radius: 10px; */
  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
  /* background: #ffffff; */
  /* margin-right: -12px; */
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  /*  width: 107%;  // hada tani te9der hna tet7akem fi width ta3 les field  */
}

/**************************** 01-02  Styling fields  ******************************************   */

/* hadi espace between  label w fields  w sepace 8px m3a  Label w field li ta7tehom   */
body .woocommerce-billing-fields .form-row {
  margin-bottom: 4px !important;
}

.woocommerce-billing-fields__field-wrapper .form-row {}

/* hadi espace between  label w field  li ta7to  tkon binatehom espace 4px" */
body .woocommerce-billing-fields label {
  display: block;
  margin-bottom: 3px !important;
}

/*  hada style ta3 field  fi ro7o */
.woocommerce-billing-fields__field-wrapper .form-row .woocommerce-input-wrapper input.input-text,
.woocommerce-billing-fields__field-wrapper .form-row .woocommerce-input-wrapper select {
  width: calc(100% - 20px);
  /* 20 px  hadi espace bin field w field 3la row x     */
  width: 100% !important;
  /* padding: 10px;*/
  border: 2.7px solid #71595936;
  border-radius: 5px;
  box-sizing: border-box;
  /* transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover and focus */
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
  background-clip: padding-box;
  font-size: 15px !important;
  height: 44px !important;
}

/* Focused state of the fields :   fi 7alet tkon 7a6 mouse fi input fields */
.woocommerce-billing-fields__field-wrapper .form-row .woocommerce-input-wrapper input.input-text:focus,
.woocommerce-billing-fields__field-wrapper .form-row .woocommerce-input-wrapper select:focus {
  /*  border-color: #007BFF; 
           box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); */
  /* border-color: #4ade80;*/
  border-color: #519affc2 !important;
  box-shadow: 0 0 8px rgb(75 89 232 / 35%) !important;
  /*  box-shadow: 0 0 8px rgba(74, 222, 128, 0.5); */
  border-width: 2px !important;
  border-style: solid !important;
  outline: none !important;
}

/* animation lel fields ykber ki teclici 3lih   */
.woocommerce-billing-fields__field-wrapper .form-row .woocommerce-input-wrapper input.input-text:active {
  /*  transform: scale(0.9);*/
  animation: inputPulse 0.9s ease-out;
}

@keyframes inputPulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

/* Hover state of the fields  : hadi ki t7awem moouse brk 3la input or fields */
/*
      .woocommerce-billing-fields input.input-text:hover,
      .woocommerce-billing-fields select:hover {
          border-color: #4ade80; 
         box-shadow: 0 0 8px rgba(74, 222, 128, 0.5); 
      }   
      */

/*   hadi ta3 field county bsah mamchalich style hover fiha  */
/*
      #billing_country option:hover {
        box-shadow: 0 0 10px 100px red inset;
        color: rgb(28, 253, 167) !important;
        background-color: rgb(255, 136, 0) !important;

      }
      #billing_country option {
        box-shadow: 0 0 10px 100px red inset;
        color: blue !important;
        background-color: yellow !important;
      }*/

/* for style select2  country  and city  */
.select2-container--default .select2-selection--single {
  border: 2.7px solid #71595936 !important;
  border-radius: 5px !important;
  box-sizing: border-box !important;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out !important;
  background-clip: padding-box !important;
}

/*   this code for hide border and color original file */
input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="reset"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
textarea:focus,
.wp-block-search__input:focus,
[data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-minimal:focus,
.ast-mobile-popup-drawer.active .menu-toggle-close:focus,
.woocommerce-ordering select.orderby:focus,
#ast-scroll-top:focus,
#coupon_code:focus,
.woocommerce-page #comment:focus,
.woocommerce #reviews #respond input#submit:focus,
.woocommerce a.add_to_cart_button:focus,
.woocommerce .button.single_add_to_cart_button:focus,
.woocommerce .woocommerce-cart-form button:focus,
.woocommerce .woocommerce-cart-form__cart-item .quantity .qty:focus,
.woocommerce .woocommerce-billing-fields .woocommerce-billing-fields__field-wrapper .woocommerce-input-wrapper>.input-text:focus,
.woocommerce #order_comments:focus,
.woocommerce #place_order:focus,
.woocommerce .woocommerce-address-fields .woocommerce-address-fields__field-wrapper .woocommerce-input-wrapper>.input-text:focus,
.woocommerce .woocommerce-MyAccount-content form button:focus,
.woocommerce .woocommerce-MyAccount-content .woocommerce-EditAccountForm .woocommerce-form-row .woocommerce-Input.input-text:focus,
.woocommerce .ast-woocommerce-container .woocommerce-pagination ul.page-numbers li a:focus,
body #content .woocommerce form .form-row .select2-container--default .select2-selection--single:focus,
#ast-coupon-code:focus,
.woocommerce.woocommerce-js .quantity input[type="number"]:focus,
.woocommerce-js .woocommerce-mini-cart-item .quantity input[type="number"]:focus,
.woocommerce p#ast-coupon-trigger:focus {
  border-style: solid !important;
  border-color: inherit;
  border-width: thin;
}

/* Ensure placeholder text not hide when   on focus */
input::placeholder,
textarea::placeholder {
  color: #999 !important;
  /* Adjust the color as needed */
  opacity: 1 !important;
  /* Make sure the placeholder is fully opaque */
}

input:focus::placeholder,
textarea:focus::placeholder {
  color: #999 !important;
  /* Adjust the color as needed */
  opacity: 1 !important;
  /* Make sure the placeholder remains fully opaque */
}

/*width country  */
#billing_country+.select2-container--default .select2-selection--single {}

/* Change border color on focus */
.select2-container--default .select2-selection--single:focus {
  border-color: #519affc2 !important;
  box-shadow: 0 0 8px rgb(75 89 232 / 35%) !important;
}

/* for hover  item in list drop down "country and city"  */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: rgb(8, 224, 91) !important;
  color: white !important;
}

/* hide  icon li fiha photo  */
/*
.select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  display: none; 
}*/
/* Hide the arrow icon */
select,
.select2-container .select2-selection--single {
  background-image: none !important;
  padding-right: 5px !important;
}

/* hide icon close */
.select2-selection__clear {
  display: none !important;
}

/* bech maywelich bayninli 2 drop down select after moment selec2 */
#billing_country {
  visibility: hidden;
}

#billing_city {
  visibility: hidden;
}

/* Change font size of the Select2 not menu */
.select2-container--default .select2-selection--single .select2-selection__rendered {
  font-size: 16px !important;
  text-align: right !important;
  line-height: 21px !important;
  font-family: "Droid Arabic charov", sans-serif !important;
  font-family: "Cairo Semi Bold", sans-serif !important;
  /* line-height: 48px !important; /* hadi item win 7abo yban in top or center or bottom bsah fi  item text input mech fi item ta3 menu  menu  */
  white-space: normal !important;
  /* Override the nowrap  "hadi bech mayhab6elech field city under field country when text is larg"*/
}

/* change height select2 not menu*/
.select2-container--default .select2-selection--single {
  height: 41px !important;
  /* Adjust the height as needed */
  width: 100% !important;
  padding-top: 7px !important;
}

.select2-container {
  width: 100% !important;
}

/* Change font size of the Select2 dropdown items "menu " */
.select2-container--default .select2-results__option {
  font-size: 15.5px !important;
  /* Set your desired font size here */
  /*font-family: "Droid Arabic charov", sans-serif !important;*/
  font-family: "Cairo Semi Bold", sans-serif !important;
  height: 38px !important;
  /* Adjust the height menu */
  color: #000;
  transition: background-color 0.1s ease-in, color 0.1s ease-in !important;
  /*  white-space: nowrap !important;*/
}

/* change bg and color hover item drop down items */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  /* background-color: #32c766 !important; */
  /* background-color: #006400 !important; */
  /*  background-color: #f48024 !important; */
  /* background-color: #0057ff !important; */
  /*background-color: #000 !important; */
  background-color: #ea4c89 !important;

  /*color: #fff !important; */
  color: #ffffff !important;
  /* Optional: Change the text color on hover */
}

/*  for style drop down delivery   */
/* Style for the dropdown */
/* جعل لون نص القائمة أسود */
#custom_dropdown {
  background-color: white !important;
  color: black !important;
  /* يجعل نص العناصر أسود */
}

/* استهداف الـ placeholder بلون رمادي */
#custom_dropdown option[value=""] {
  color: #999 !important;
}

/* تغيير لون الخلفية عند تمرير الماوس على العناصر */
#custom_dropdown option:hover {
  background-color: red !important;
  /* يجعل الخلفية حمراء عند تمرير الماوس */
  color: white !important;
  /* يجعل النص أبيض ليكون واضحاً */
}

/* for validation select2  lazem dirha lele field selec2 ta3 country and select*/
.select2-invalid .select2-selection {
  border-color: red !important;
  box-shadow: 0 0 8px 0px rgba(240, 114, 11, 0.5) !important;
}

.select2-valid .select2-selection {
  border-color: rgb(0 255 20) !important;
  box-shadow: 0 0 16px 0px rgba(74, 222, 128, 0.5) !important;
}

/* 02 -1 /// ******************  Section Your Order ********************* */

/* parent div you order */
.ct-order-review {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 2px solid #fed7aa;
  border-radius: 30px;
  /* Your specified border radius */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background: #ffffff;
  margin-top: 400px;
}

/* child div you order */
.woocommerce-checkout-review-order {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 2px solid #18181b;
  /* Your specified border color */
  border-radius: 30px;
  /* Your specified border radius */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background: #ffffff;
}

.woocommerce-checkout-review-order {
  display: none !important;
}

#order_review_heading {
  display: none !important;
}

/* 03  /// ******************  Manager designe checkout woocomerce  ********************* */
/* 03 - 1 **********   Direction  ************************** */
/* Change the text direction of the entire checkout form */
.my-checkout-form {
  direction: rtl !important;
  margin-top: -5px !important;
}

.woocommerce .col2-set .col-1,
.woocommerce-page .col2-set .col-1 {
  width: 100% !important;
}

/* Change direction  the text input fields  "not label "  of the phone field */
.my-checkout-form #billing_phone {
  direction: rtl !important;
}

/* Change direction  price porduct  */
.elementor-widget-container .price {
  direction: rtl !important;
}

/* Change direction  rating  */
.woocommerce-product-rating {
  direction: rtl;
}

/* 03-02  ************  Reorder fields "tartib les field "   *********** */
/* التأكد من أن الـ parent container يستخدم flexbox */
.woocommerce-billing-fields__field-wrapper {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
}

/* في mobile: كل الحقول عمودية */
#billing_first_name_field {
  order: 1 !important;
}

#billing_phone_field {
  order: 2 !important;
}

#billing_email_field {
  order: 3 !important;
  width: 100% !important;
  flex: 1 0 100% !important;
}

#billing_country_field {
  order: 4;
}

#billing_city_field {
  order: 5;
}

#billing_address_1_field {
  order: 6;
}

#custom_dropdown_field {
  order: 7;
}

/* 03 -03  Style  title  "biling detail" */
.checkout-title {
  text-align: center;
  margin-bottom: 20px;
  /* Adjust the margin as needed */
  color: #259bea !important;
  font-family: "Droid Arabic charov", sans-serif !important;
  font-family: "Cairo Charov Bold" !important;
  font-size: 17px !important;
  font-weight: bold !important;
}

/* for hide title "biling detail"  li yji par default m3a checkout   */
.woocommerce-billing-fields h3 {
  display: none;
}

/* Style  title "your order" */
#order_review_heading {
  text-align: center;
  margin-bottom: 20px;
  font-size: 1.125em !important;
  /* Adjust as needed */
}

/* will hide the asterisk (*) for all required fields */
.woocommerce form .form-row .required {
  /* visibility: hidden;*/
  display: none;
}

/* Hide the "(optional)" text on non-required fields */

.woocommerce form .form-row .optional {
  display: none;
}

/* for titile المراجعات  rating   "dirlha none w bel code js t3awed tbayanha " */
.woocommerce-review-link {
  display: none;
}

/* 03- 04  *****************  Manager  font  *************** */

/* Import the Noto Nastaliq Urdu font  "hadi ida 7abit importé font min google bsah mamchatlich "*/
/*@import url('https://fonts.googleapis.com/earlyaccess/notonastaliqurdudraft.css'); */

/* Apply the Noto Nastaliq Urdu font to the body when translatepress-ar class is present */
body.translatepress-ar {
  font-family: "Droid Arabic charov", sans-serif !important;
}

/* إصلاح الفراغات في الشاشات الصغيرة - حل احترافي */
@media (max-width: 768px) {
  body.single-product {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  body.single-product .site-content,
  body.single-product .content-area,
  body.single-product .entry-content {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
  }

  body.single-product .container,
  body.single-product .brxe-container,
  body.single-product .elementor-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    max-width: 100% !important;
  }

  /* إصلاح إضافي للفراغات المتبقية */
  body.single-product .brxe-section,
  body.single-product .brxe-row,
  body.single-product .brxe-column {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.single-product .brxe-section .brxe-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 20px !important;
    padding-right: 15px !important;
  }

  /* إصلاح للعناصر التي قد تحتوي على margins سالبة */
  body.single-product * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* إصلاح خاص للعربية */
  body.single-product.translatepress-ar {
    margin: 0 !important;
    padding: 0 !important;
  }

  body.single-product.translatepress-ar .brxe-container,
  body.single-product.translatepress-ar .container {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* حل أقوى للفراغات المتبقية */
  body.single-product .brxe-container {
    width: 100% !important;
    margin: 0 !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  body.single-product .brxe-container>* {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* إزالة أي margins سالبة قد تسبب الفراغات */
  body.single-product .brxe-container,
  body.single-product .brxe-section,
  body.single-product .brxe-row {
    margin-left: 5px !important;
    margin-right: 0 !important;
  }
}


/* Change the font of the text within the input fields  "hadi ta3 win tekteb"*/
.woocommerce-billing-fields__field-wrapper input {
  font-family: "Droid Arabic charov", sans-serif !important;
  font-size: 16px !important;
}

/* Change the font of the labels */
.woocommerce-billing-fields__field-wrapper p label {
  font-family: "Droid Arabic charov", sans-serif !important;
  /* font-size: 20px !important; */
  font-size: 15px !important;
  font-weight: 600 !important;
  /* This will make the font bold */
  text-align: right !important;
  color: #635d5d !important;
}

/* Change the font of the select dropdown "hadi ta3 drop down soit field text soit fi dropdown list " */
.woocommerce-billing-fields__field-wrapper select {
  font-family: "Droid Arabic charov", sans-serif !important;
  font-size: 16px !important;
}

/* 04  /// ******************  Manager Responsive   ********************* */

/*   04- 01 responsive field in mobile and desctop and tablet  */
/* 01 / (for mobile) :  Make all fields take up 100% of the width by default  */
#billing_first_name_field,
#billing_phone_field,
#billing_country_field,
#billing_city_field,
#billing_address_1_field {
  flex: 1 0 100%;
}

/* 02/  (For desctop and tablet ) : Use a media query to apply different styles for tablet and desktop */
@media (min-width: 768px) {

  /* تغيير اتجاه flexbox في desktop ليكون row */
  .woocommerce-billing-fields__field-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  /* This is the breakpoint for tablets and up. Adjust as needed. */
  /* Make the first name and phone fields take up 50% of the width */
  /* الاسم والهاتف في نفس السطر في desktop */
  #billing_first_name_field,
  #billing_phone_field {
    flex: none !important;
    /* تعطيل flex property تماماً - الاعتماد على width فقط */
    max-width: 50% !important;
    width: 50% !important;
    box-sizing: border-box !important;
  }

  /* إضافة مسافة بين الاسم والهاتف */
  #billing_first_name_field {
    padding-right: 5px !important;
  }

  #billing_phone_field {
    padding-left: 5px !important;
  }

  /* البريد الإلكتروني في سطر كامل */
  #billing_email_field {
    flex: 1 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Make the country and city fields take up 50% of the width */
  #billing_country_field,
  #billing_city_field {
    flex: 1 0 51%;
  }

  /* Make the address field take up 100% of the width */
  #billing_address_1_field {
    flex: 1 0 100%;
  }
}

/* ********  04- 02 responsive title and font and image product *********** */

/* For tablet and mobile devices */
@media (max-width: 1024px) {}

/* Adjustments for mobile screens */
@media (max-width: 767px) {
  .checkout-title {
    font-size: 15px !important;
  }

  /* Change the font of the labels */
  .woocommerce-billing-fields__field-wrapper p label {
    font-size: 13.5px !important;
  }

  .woocommerce-billing-fields__field-wrapper .form-row .woocommerce-input-wrapper input.input-text,
  .woocommerce-billing-fields__field-wrapper .form-row .woocommerce-input-wrapper select {
    width: 100% !important;
  }

  .select2-container--default .select2-selection--single {
    width: 100% !important;
  }
}

/* responjsive meu item */
/* Adjustments for tablet screens */
@media (min-width: 768px) and (max-width: 2200px) {

  /* Change font size of the Select2 dropdown items "menu " */
  .select2-container--default .select2-results__option {}
}

@media (max-width: 412px) {
  .select2-container--default .select2-results__option {
    /*    font-size: 12.5px !important; 
    line-height: 20px !important; */
  }
}

@media (max-width: 480px) {
  .faqs-content-inside .tablecollapse tr:not(:has(#codplugin_d_has_price)) td {
    padding: 10px;
    border: 1px solid #dfd3ff;
    font-size: 15.9px !important;
    text-align: right;
    /* محاذاة النص إلى اليسار */
    border-left: none !important;
    border-right: none !important;
    /*width: 54%;*/
  }

  /* صف سعر التوصيل - عرض كامل بدون قيود */
  .faqs-content-inside .tablecollapse tr:has(#codplugin_d_has_price) td {
    width: 100% !important;
    padding: 0 !important;
  }

  /* إعادة padding فقط للخلية الأولى */
  .faqs-content-inside .tablecollapse tr:has(#codplugin_d_has_price) td:first-child {
    padding: 10px 10px 8px 10px !important;
  }

  #Quantity_number2 {
    display: inline-flex;
    background-color: #259bea;
    color: #fff;
    padding: 3px 5px;
    border-radius: 5px;
    line-height: 15px !important;
    font-size: 12px !important;
    position: relative;
    left: -2px;
    font-weight: 700;
    top: -7px;
  }
}

/* 04- 02  ***** responsive espace between border right and left  field and with border class parent ******** */

/*  ************** Designe toools ************************ */
#billing_first_name {
  background-image: url("../../uploads/CharovMedia/wired-flat-268-avatar-man.gif") !important;
  /* background-image: url(../../uploads/2024/08/wired-flat-268-avatar-man.gif);*/
  /* background-image: url("http://admin2test.local/wp-content/uploads/2024/04/wired-flat-268-avatar-man.gif");*/
  background-repeat: no-repeat;
  background-position: left 10px top 50%;
  /* move the icon to the left */
  padding-left: 35px;
  /* space for the icon on the left */
  padding-right: 10px;
  /* reset the right padding */
  background-size: 34px 34px;
  /* adjust the size of the background image */
  height: 49px;
}

#billing_phone {
  background-image: url("../../uploads/CharovMedia/icons8-phone-1.gif") !important;
  /* background-image: url(../../uploads/2024/08/telephone.gif);*/
  /* background-image: url("http://admin2test.local/wp-content/uploads/2024/04/telephone.gif");*/
  background-repeat: no-repeat;
  background-position: left 5px top 50%;
  /* move the icon to the left */
  padding-left: 35px;
  /* space for the icon on the left */
  padding-right: 10px;
  /* reset the right padding */
  background-size: 37px 37px;
  /* adjust the size of the background image */
  height: 49px;
}

/* Styles for billing_country select2 field */
#billing_country+.select2-container--default .select2-selection--single {
  position: relative;
  padding-left: 35px;
  /* Ensure there's enough space for the icon */
}

#billing_country+.select2-container--default .select2-selection--single .select2-selection__arrow {
  background-image: url("../../uploads/CharovMedia/globe_9346886.png") !important;

  background-repeat: no-repeat;
  background-size: 31px 31px;
  position: absolute;
  left: 8px;
  top: 58%;
  transform: translateY(-50%);
  height: 40px;
  /* Match the background-size height */
  width: 48px;
  /* Match the background-size width */
  padding: 0;
  /* Remove padding */
}

/* Styles for billing_city select2 field */
#billing_city+.select2-container--default .select2-selection--single {
  position: relative;
  padding-left: 35px;
  /* Ensure there's enough space for the icon */
}

#billing_city+.select2-container--default .select2-selection--single .select2-selection__arrow {
  background-image: url("../../uploads/CharovMedia/home_7720752.png") !important;
  background-repeat: no-repeat;
  background-size: 38px 38px;
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  height: 38px;
  /* Match the background-size height */
  width: 58px;
  /* Match the background-size width */
  padding: 0;
  /* Remove padding */
}

.checkout.woocommerce-checkout {
  margin-right: 10px !important;
  margin-left: 10px !important;
}


/*
.country_select {
  background-image: url("http://admin2test.local/wp-content/uploads/2024/04/globe_9346886.png");
  background-repeat: no-repeat;
  background-position: left 10px top 50%; 
  padding-left: 35px; 
  padding-right: 10px; 
  background-size: 32px 32px; 
  height: 49px;
}*/
/*
#billing_city {
  background-image: url("http://admin2test.local/wp-content/uploads/2024/04/worldwide.gif");
  background-repeat: no-repeat;
  background-position: left 10px top 50%; 
  padding-left: 35px; 
  padding-right: 10px;
  background-size: 34px 34px; 
  height: 49px;
}*/

#billing_address_1 {
  background-image: url("../../uploads/CharovMedia/Adress-Icon-new.gif") !important;
  background-repeat: no-repeat;
  background-position: left 5px top 50%;
  /* move the icon to the left */
  padding-left: 35px;
  /* space for the icon on the left */
  padding-right: 10px;
  /* reset the right padding */
  background-size: 39px 39px;
  /* adjust the size of the background image */
  height: 49px;
}

#custom_dropdown+.select2-container--default .select2-selection--single .select2-selection__arrow {
  background-image: url("../../uploads/CharovMedia/icons8-shipped.gif") !important;
  background-repeat: no-repeat;
  background-size: 35px 35px;
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  height: 38px;
  /* نفس حجم الصورة */
  width: 38px;
  padding: 0;
}

/* change bg alert class  hadi alert par default woocomerce*/
.woocommerce-error {
  color: #720806 !important;
  /* Change text color */
  background-color: #ffbbbb !important;
  /* Change background color */
  /* box-shadow: 7px 0 #ff1313  inset !important;*/
  box-shadow: 4px 0px 11px 0px #ff1313 inset !important;
  border: 1px solid #720806 !important;
  /* padding: 10px; */
  /* border-radius: 25px !important;*/
}

/* hadi for style icon  aler par default wwomerce*/
.woocommerce-error::before {
  /* This will remove the icon */
  /*  content: none; */
  /*content: url('http://admin2test.local/wp-content/uploads/2024/04/icons8-phone-1.gif'); */
  color: #000 !important;
  /* Space between icon and text */
  /* padding-right: 60px;  */
  font-size: 30px !important;
  margin-top: 6px;
  margin-left: -4px;
  /*   margin-left: 440px;  */
}

/*This will hide the icon */
/*
  .woocommerce-error i {
display: none; 
color: yellow;
} */

/* ********** change style thank you page : 1/ change direction ************** */
.wopb-product-wrapper {
  direction: rtl;
}

/* change تفاصيل زبون في center   */

.wopb-thankyou-address-container {
  display: flex !important;
  align-content: space-between !important;
  justify-content: center !important;
}

/* إخفاء عنوان تفاصيل الطلبية */
.woocommerce-order-details__title {
  display: none !important;
}

/* إخفاء زر "Order again" */
.order-again {
  display: none !important;
}

/* change margin shipping   */
.wopb-billing-shipping-address {
  margin-top: -20px;
}

.wopb-block-wrapper {
  display: flex;
  justify-content: center;
}

/*   style increase and decrease button   */
.ClsParent {
  display: flex;
  justify-content: center;
  direction: ltr;
  margin-bottom: 29px !important;
  margin-left: -56px !important;
}

.center {
  width: 100%;
}

.input-group {
  display: flex;
  align-items: center;
  justify-content: center;
  /* margin-left: 33px;*/
}

.button-minus {
  color: #fff !important;
  border: 1px solid #ddd !important;
  cursor: pointer !important;
  font-size: 42px !important;
  color: #fff !important;
  background-color: #d9534f !important;
  border-color: #d43f3a;
  font-weight: bold !important;
  line-height: 0px !important;
  text-align: center;
  padding-bottom: 1% !important;
  /*border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;*/
  border-radius: 17px !important;
  transition: transform 0.2s ease !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding-bottom: 25px !important;
  padding-top: 0px !important;
  /* Override default padding */
  padding-right: 3px !important;
  padding-bottom: 12px !important;
  /* Override default padding */
  padding-left: 0 !important;
  /* Override default padding */
  width: 8% !important;
  min-width: 50px !important;
  height: 42px !important;
}

.button-plus {
  color: #fff !important;
  border: 1px solid #ddd;
  cursor: pointer !important;
  font-size: 36px !important;
  background-color: #5cb85c !important;
  border-color: #4cae4c !important;
  font-weight: bold !important;
  line-height: 0px !important;
  text-align: center !important;
  /* border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;*/
  border-radius: 17px !important;
  transition: transform 0.2s ease !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  /* Center the text horizontally */
  padding-bottom: 22px !important;
  padding-top: 0 !important;
  /* Override default padding */
  padding-right: 0 !important;
  /* Override default padding */
  padding-bottom: 9px !important;
  /* Override default padding */
  padding-left: 0px !important;
  /* Override default padding */
  width: 8% !important;
  min-width: 50px !important;
  height: 42px !important;
}

.button-minus:active,
.button-plus:active {
  transform: scale(0.9) !important;
}

/* Keep plugin-defined colors on quantity +/- buttons; prevent white flash on press/focus */
.button-minus,
.button-plus {
  -webkit-tap-highlight-color: transparent;
  /* mobile tap highlight */
  -webkit-appearance: none;
  appearance: none;
  background-image: none !important;
}

.button-minus:active,
.button-minus:focus,
.button-minus:focus-visible,
.button-plus:active,
.button-plus:focus,
.button-plus:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* Stronger override to stop any theme/UA white background on press */
.ClsParent .center .input-group .button-minus:active,
.ClsParent .center .input-group .button-minus:focus,
.ClsParent .center .input-group .button-minus:focus-visible,
.ClsParent .center .input-group .button-plus:active,
.ClsParent .center .input-group .button-plus:focus,
.ClsParent .center .input-group .button-plus:focus-visible {
  background-color: var(--btn-bg-color, inherit) !important;
  /* keep plugin color */
  color: var(--btn-fg-color, inherit) !important;
  border-color: currentColor !important;
  filter: none !important;
}

.input-number {
  box-sizing: border-box !important;
  /* Add this line */
  text-align: center !important;
  border: 1px solid #ddd !important;
  padding: 20px !important;
  width: 25% !important;
  font-size: 15px !important;
  height: 20px !important;
  cursor: pointer;
  font-weight: 600 !important;
  background-color: #ffdcdc !important;
  border-color: #ff8787ab !important;
  box-shadow: -1px -1px 14px 0px rgb(236 51 51 / 50%) !important;
  margin-left: 9px !important;
  margin-right: 9px !important;
}

/*
.woocommerce-Price-amount  {
  color: #8c9191 !important;
}
*/
/*   style According coolaps   */

.faqs-grid {
  /*  width: 93%;
      /* width: 93%; */
  margin-left: 11px !important;
  margin-right: 11px !important;
}

.faqs-item {
  width: 100%;
  margin: 0 0 20px 0;
  padding: 0;
  display: block;
  background: linear-gradient(45deg,
      #318df8 0%,
      #4d9cdf 51%,
      #2989d8 100%,
      #7db9e8 100%,
      #2989d8 100%);
  /*background: linear-gradient(45deg, #85ffec 0%, #edf1f6 51%, #b2dcff 100%, #104873 100%, #d70000 100%);*/
  border-radius: 7px;
  /* height: 52px;*/
}

.faqs-title {
  color: #fff !important;
  font-size: 18px;
  font-family: "Droid Arabic charov", sans-serif !important;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-decoration: none;
  width: 100%;
  outline: none;
  transition: 0.4s;
  padding-right: 28px;
  /* padding-top: 7px;*/
  padding-left: 2px;
  height: 52px;
  text-align: right;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  cursor: pointer !important;
}

.active,
.faqs-title:hover {
  background-color: rgba(46, 86, 216, 0.637);
  border-radius: 7px;
  color: #fff;
}

.faqs-content {
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  /*border: 2px solid rgb(0 64 255 / 81%);
    border-top: none;
  border-bottom: none; */
  background-color: rgb(141 157 255 / 16%);
  /* box-shadow: 0px 0px 7px 0px #2380ff;*/
  /* border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;*/
  color: #000;
  background: #ddefff !important;
}

/* Styles for .faqs-content when active */
.active-faq {
  /* border-bottom: 2px solid rgb(0 64 255 / 81%);*/
  border: 1px solid rgb(53 92 252 / 81%);
  /* max-height: 380px !important;*/
  max-height: fit-content !important;
}

.faqs-content-inside {
  padding: 0px;
}

/* style collapse icon */

.faqs-title .icon {
  display: inline-block;
  width: 45px;
  /* height: 24px;*/
  transition: transform 0.26s;
  /*color: #b8336a;*/
  color: #ffffff;
}

details[open] .faqs-title .icon {
  transform: rotate(180deg);
}

.image-text-container {
  margin-right: -17px;
}

/* table collapse */
.tablecollapse {
  font-family: "Droid Arabic charov", sans-serif !important;
  font-weight: 600;
}

/* Apply styles to the table */

/* Style table cells */
.faqs-content-inside .tablecollapse td {
  padding: 10px;
  border: 1px solid #dfd3ff !important;
  font-size: 15.9px;
  text-align: right;
  /* محاذاة النص إلى اليسار */
  border-left: none !important;
  border-right: none !important;
}

/* تغيير لون خلفية الصفوف الزوجية */
.faqs-content-inside .tablecollapse tr:nth-child(even) {}

/* تغيير لون خلفية الصفوف عند تمرير الماوس */
.faqs-content-inside .tablecollapse tr:hover {}

/* تنسيق خاص لعنوان المنتج */
.faqs-content-inside .tablecollapse .product-title {
  font-weight: bold !important;
  color: #333 !important;
  /* تغيير لون النص */
}

/* Hide the border for the last cell in each row */
.faqs-content-inside .tablecollapse td:last-child {
  border-right: none;
}

/* تنسيق السعر الإجمالي */
.faqs-content-inside .tablecollapse .full-price td {
  font-weight: bold;
  color: #d9534f;
}

/* column left ta3 collaps li fih price "2" bech text ykon fi max left*/
.faqs-content-inside .tablecollapse td:nth-child(2) {
  text-align: left;
  font-size: 17px !important;
  padding-left: 15px !important;
}

/* إزالة padding-left من الخلية الثانية في صف سعر التوصيل */
.faqs-content-inside .tablecollapse tr:has(#codplugin_d_has_price) td:nth-child(2) {
  padding-left: 0 !important;
}

.summary-select-state {
  /* display: flex;*/
  font-family: "Cairo Charov Bold";
  width: max-content;
  white-space: nowrap;
}

#total2 {
  font-size: 17px !important;
  color: #fff !important;
  background-color: #613fff !important;
  font-weight: bold !important;
  display: inline-block !important;
  /* font-size: 14px; */
  height: 31px !important;
  line-height: 14px !important;
  padding: 8px 21px;
  border-radius: 8px;
  font-family: "Cairo Charov Bold";
}

/* style quantity */

#Quantity_number2 {
  display: inline-flex;
  background-color: #259bea;
  color: #fff;
  padding: 3px 5px;
  border-radius: 5px;
  line-height: 15px !important;
  font-size: 12px;
  position: relative;
  left: -2px;
  font-weight: 700;
  top: -7px;
}

#Quantity_number2:after {
  content: "x ";
}

/* style variation section */

.clsVariationNone {
  display: none !important;
}

/* for remove border in table variation*/
table.variations {
  border-width: 0;
}

/* hide add to cart   hadi dirlk hide  lel section variation product "size , color ...etc"*/
form.cart {
  /* display: none !important;*/
}

table.variations th,
table.variations td {
  border-width: 0;
}

.woocommerce-variation-add-to-cart {
  display: none !important;
}

.sku_wrapper {
  display: none !important;
}

.clsVariationCorrectly {
  display: flex !important;
  margin-top: -35px !important;
  /*  margin-right: 6px !important;*/
  margin-left: 26px !important;
  width: 100%;
  /* width: max-content;*/
}

.woocommerce-form-coupon-toggle {
  margin-left: 28px !important;
  margin-right: 28px !important;
}

/* Targeting the labels within the table */
.variations .label label {
  font-size: 16px;
  font-family: "Droid Arabic charov", sans-serif !important;
  /* background: #40B3A2; */
  /* background: #ff7f50;*/
  /* background: #0fd850; */
  /* background: #7d2ae8;*/
  /* background: #259bea !important;
      background: #0BA3FA;*/
  color: #ffffff;
  background-color: #d9534f;
  width: 34%;
  border-radius: 6px;
  text-align: center;
}

.woo-variation-swatches.wvs-show-label .variations th {
  font-size: 15px;
  font-family: "Droid Arabic charov", sans-serif !important;
  font-family: "Cairo Charov Bold", sans-serif !important;
}

/* Change the font size of all items within <td> elements */
table.variations td.value {
  font-size: 15px;
  font-family: "Droid Arabic charov", sans-serif !important;
  font-family: "Cairo Charov Bold", sans-serif !important;
}

/* change color  price variation */
.woocommerce .elementor-4008 .elementor-element.elementor-element-d48c5cf .price {
  color: #0ba3fa !important;
  color: #d9534f !important;
  font-family: "Droid Arabic charov", Sans-serif !important;
  font-size: 31px !important;
  font-weight: 700 !important;
}

/*title clear */
.reset_variations {
  margin-right: 8%;
  text-align: center;
  align-items: center;
  display: inline-block;
  justify-content: center;
  border-radius: 7px !important;
  width: 70px !important;
  border-width: 3px !important;
  border-color: #d9534f !important;
  margin-top: 14px !important;
  background: #0ba3fa !important;
  color: white !important;
  /* box-shadow: 0 0 13px 4px rgb(69 133 248) !important;*/
  box-shadow: 0 0 3px 4px rgb(69 133 248) !important;
}

.single_variation_wrap {
  /* width: 90% !important; */
  margin-right: 40px !important;
  margin-left: 15px;
}

.variations_form {
  width: 100% !important;
}

.single_variation_wrap .woocommerce-variation-price .price {
  display: flex;
  justify-content: center;
  color: aqua;
  color: #0ba3fa !important;
  font-family: "Droid Arabic charov", Sans-serif !important;
  font-family: "Knewave-Regular", Sans-serif !important;
  font-weight: 700 !important;
  font-size: 24px !important;
  border: 2px solid #f0f0f0;
  border-radius: 10px;
  padding: 10px 20px;
  box-shadow: 0px 1px 8px 7px rgb(92 93 163 / 10%);
  background-color: #ffffff;
  margin: 10px 0;
  margin-top: -9px;
  border-color: #5897fb !important;
  border-width: 3px !important;
  margin-left: 33px;
}

/* hide line under price */

.woocommerce-variation-price del {
  text-decoration: none !important;
  /* Remove the line-through */
}

/* تصميم أنيق وعصري لعنصر "غير متوفر في المخزون حاليا" */
.single_variation_wrap .woocommerce-variation-availability .stock.out-of-stock {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  color: #ffffff !important;
  font-family: "Droid Arabic charov", Sans-serif !important;
  font-family: "Cairo Charov Bold", Sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  border: 3px solid #dc3545 !important;
  border-radius: 12px !important;
  padding: 12px 25px !important;
  box-shadow: 0px 4px 15px 8px rgba(220, 53, 69, 0.15) !important;
  background: linear-gradient(135deg, #dc3545 0%, #c82333 50%, #bd2130 100%) !important;
  margin: 15px 0 !important;
  margin-left: 33px !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
}

/* تأثير hover أنيق */
.single_variation_wrap .woocommerce-variation-availability .stock.out-of-stock:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0px 6px 20px 10px rgba(220, 53, 69, 0.25) !important;
  border-color: #b02a37 !important;
}

/* تأثير إضاءة خفيف */
.single_variation_wrap .woocommerce-variation-availability .stock.out-of-stock::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
  transition: left 0.5s ease !important;
}

.single_variation_wrap .woocommerce-variation-availability .stock.out-of-stock:hover::before {
  left: 100% !important;
}

/* تأثير النص مع ظل */
.single_variation_wrap .woocommerce-variation-availability .stock.out-of-stock p {
  margin: 0 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  letter-spacing: 0.5px !important;
}

/* Add space between color options */
.value.woo-variation-items-wrapper li {
  margin-right: 6px !important;
}

/*   Style shipping method          */
#custom-shipping-methods-section ul {
  list-style: none;
  padding: 0;
}

#custom-shipping-methods-section li {
  margin-bottom: 10px;
}

#custom-shipping-methods-section label {
  margin-left: 5px;
}

#shipping_method {
  display: none;
  justify-content: end !important;
  text-align: right !important;
  float: left !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* style radio icon*/

/* Hide the default radio button */
input[type="radio"].shipping_method {
  display: none !important;
}

/* Custom radio button style */
input[type="radio"].shipping_method+label {
  position: relative;
  padding-right: 25px;
  /* Change padding-left to padding-right */
  cursor: pointer;
  font-size: 14px;
  user-select: none;
  /*font-family: "Droid Arabic charov", sans-serif !important;*/
  font-family: "Cairo Charov Bold" !important;
  font-weight: 500;
  margin-left: -20px;
  color: #000;
}

/* Custom radio button */
input[type="radio"].shipping_method+label::before {
  content: "";
  position: absolute;
  right: -5px;
  top: 3px;
  width: 22px;
  height: 21px;
  border: 4px solid #becdff;
  border-radius: 50%;
  background-color: #fff;
  transition: background-color 0.3s, border-color 0.3s;
}

/* Inner circle for checked state */
input[type="radio"].shipping_method:checked+label::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 13px;
  transform: translate(50%, -50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #ff6d38;
  transition: background-color 0.3s;
}

/* Checked state */
input[type="radio"].shipping_method:checked+label::before {
  background-color: #ffffff;
  /* Checked background color */
  border-color: #ff6d38;
  /* Checked border color */
}

/* Label hover state */
input[type="radio"].shipping_method+label:hover::before {
  border-color: #217de2;
}

/* Change the color of the label when hovering */
#shipping_method li label:hover {
  color: #217de2;
  /* Change this to your desired hover color */
}

#shipping_method li input[type="radio"]:checked~label {
  color: #ff6d38;
}

/* Custom style for the shipping cost "هادي تاع قيمة تاع costt " */
.shipping-cost {
  /*
  font-weight: 800;
  /* font-size: 16px; */
  /* font-weight: bold; */
  /* font-size: 15px; 
  color: #fff;
  /*background-color: #d04678;*/
  background-color: #259bea;
  /* font-weight: bold; 
  display: inline-block;
  font-size: 15px;
  height: 23px;
  line-height: 6px;
  width: fit-content;
  padding: 9px 3px;
  border-radius: 4px; 
    margin-right: 37px;
  font-family: 'Cairo Charov Bold';
  
  */

  font-family: "Cairo Charov Bold";
  background-color: #259bea;
  /*background-color: #d04678;*/
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  display: inline-block;
  padding: 3px 30px;
  border-radius: 7px;
  line-height: 26px;
  height: 31px;
  text-align: center;
  padding-left: 5px;
}

/*hadu ma3andhech fayda*/
/*
.summary-select-state {
  font-size: 15px;
  color: #333;
  font-weight: 600;
}
*/
/*  hadi title مجانا*/
.summary-select-state.free-shipping {
  color: #fff;
  background-color: #ff1469;
  font-weight: bold;
  display: inline-block;
  font-size: 14px;
  height: 26px;
  line-height: 8px;
  padding: 9px 21px;
  border-radius: 8px;
}

/** for product bundle */
/*
.cart {
    display: none !important;
}
*/
.elementor-shortcode .cart {
  display: none !important;
}

.asnp-productList-wrapper {
  font-family: "Almarai charov", sans-serif !important;
  font-family: "Cairo Charov Bold", sans-serif !important;
}

.asnp-App-GridItem-wrapper {
  font-family: "Almarai charov", sans-serif !important;
  font-family: "Cairo Charov Bold", sans-serif !important;
}

.asnp-totalPrice-section {
  display: none !important;
}

/* إزالة التأثيرات الافتراضية للمتصفح على الهواتف لصناديق التوصيل */
@media (max-width: 768px) {

  #codplugin_d_has_price #shipping_method li:active,
  #codplugin_d_has_price #shipping_method li:focus,
  #codplugin_d_has_price #shipping_method li input:active,
  #codplugin_d_has_price #shipping_method li input:focus,
  #codplugin_d_has_price #shipping_method li label:active,
  #codplugin_d_has_price #shipping_method li label:focus {
    outline: none !important;
    box-shadow: none !important;
    background-color: inherit !important;
    border-color: inherit !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
  }

  /* إصلاح مشكلة الحدود المزدوجة على الهواتف */
  .woocommerce-billing-fields__field-wrapper .form-row .woocommerce-input-wrapper input.input-text:focus,
  .woocommerce-billing-fields__field-wrapper .form-row .woocommerce-input-wrapper select:focus {
    border-style: solid !important;
    border-width: 2px !important;
    border-color: #519affc2 !important;
    box-shadow: 0 0 8px rgb(75 89 232 / 35%) !important;
    outline: none !important;
  }
}

.asnp-bundle-title h1 {
  font-family: "Almarai charov", sans-serif !important;
  font-family: "Cairo Charov Bold", sans-serif !important;
}

.elementor-widget-container #asnp_easy_product_bundle>hr {
  background: rgb(99 99 255 / 58%) !important;
}

.elementor-shortcode {
  margin-bottom: -10px !important;
}

.asnp-productInfo-wrapper a {
  color: #ff6d38 !important;
}

.asnp-productInfo-wrapper a:hover {
  color: rgb(190,
      129,
      14) !important;
  /* Change to your desired color for the hover state */
}

.elementor-products-grid nav.woocommerce-pagination {
  display: flex !important;
  justify-content: center !important;
}

.star-rating {
  display: inline-block !important;
}

/* hadi ta3 shop page between box and button */
.elementor-2357 .elementor-element.elementor-element-8d96f33.elementor-wc-products ul.products li.product {
  padding-bottom: 17px !important;
}

/* hadi direction shop product  ta3 elmntor*/
.elementor-products-grid ul.products.elementor-grid {
  direction: rtl !important;
}

.woocommerce-js div.product .product_meta {
  border-top: none !important;
}

/* style lanidg page*/
/*Title*/
/*
.brz-wp-title-content {

    font-family: "Droid Arabic charov", sans-serif !important;
    font-weight: bold;
    font-family: "Cairo Charov", sans-serif !important;
    font-family: "Almarai charov", sans-serif !important;
  
} */

/* Change font family for product short description */
.woocommerce-product-details__short-description h3 {
  font-family: "Cairo Charov", sans-serif !important;
}

/* Change font family for product main description */

/* Additionally, if there are specific elements in the main description you want to target, you can add them here. For example: */

.brz-wp-post-content h1,
.brz-wp-post-content h2,
.brz-wp-post-content h3,
.brz-wp-post-content h4,
.brz-wp-post-content h5,
.brz-wp-post-content h6,
.brz-wp-post-content p,
.brz-wp-post-content li {
  font-family: "Cairo Charov Bold", sans-serif !important;
  font-size: 16px !important;
}

/* for responsive  image in tablet in top in brizy builder */
/* Styles for tablets */
@media only screen and (min-width: 768px) and (max-width: 1300px) {
  .ParentClassOne1 .brz-row {
    flex-direction: column-reverse !important;
  }

  .ParentClassOne1 .ChildImageright {
    /* width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: 30px; */
    width: 100% !important;
    max-width: 94% !important;
    align-self: center;
    flex: 0 0 100% !important;
    margin-bottom: -10px;
  }

  .ParentClassOne1 .ChildCheckoutLeft {
    /*  width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;*/
    width: 100% !important;
    max-width: 88% !important;
    flex: 0 0 100% !important;
    align-self: center;
  }

  /* Ensure the gallery images are responsive */
  .ChildImageright .brz-woo-gallery img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* change selection bg and selection color for my all cite web */
::selection {
  background-color: rgb(89, 118, 248);
  color: white;
}

::-moz-selection {
  background-color: rgb(89, 118, 248);
  color: white;
}

/* thiis style  for alert danger notification */
#alertwarning {
  margin-bottom: 16px;
  border: 1px solid rgba(241, 6, 6, 0.81);
  padding: 15px;
  background-color: rgba(220, 17, 1, 0.16);
  color: #ff0303;
  box-shadow: 0px 0px 2px #ff0303;
  border-radius: 10px;
  direction: rtl;
  display: flex;
  padding: 5px 13px 13px 13px;
  position: relative;
}

#alertwarning .closeWarn {
  position: absolute;
  top: -3px;
  left: -15px;
  font-size: 21px;
  color: #ff0303;
  text-shadow: none;
  cursor: pointer;
  animation: blink-1 2s infinite both;
  background-color: unset;
  display: none;
}

#alertwarning .alert-contentdanger {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

#alertwarning .alert-headerdanger {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: bold;
  font-size: 21px;
  color: #ff0303;
}

#alertwarning .titlledanger {
  font-size: 20px;
  font-family: "Cairo Charov Bold";
  font-weight: bold;
}

#alertwarning .alert-descriptiondanger {
  flex-grow: 1;
  /* width: 100%;*/
  font-size: 16px;
  font-family: "Cairo Charov Bold";
  font-weight: bold;
  margin-top: 8px;
  text-align: start;
  padding-right: 11px;
}

#alertwarning .message-inner-separatordanger {
  border: 0 !important;
  height: 1px !important;
  background-image: -webkit-linear-gradient(left,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0.15),
      rgba(0, 0, 0, 0)) !important;
  margin: 0 !important;
  background-color: transparent !important;
}

.alert-simple.alert-danger:hover {
  background-color: rgba(220, 17, 1, 0.33) !important;
  transition: 0.5s !important;
}

/* Vertical line before alert content */
.alert-simple:before {
  content: "";
  position: absolute;
  width: 0;
  height: calc(100% - 44px);
  border-left: 5px solid #ff3434;
  border-right: 5px solid transparent;
  border-bottom-right-radius: 12px;
  border-top-right-radius: 12px;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  height: 40px;
}

/* Blink animation for close button */
@keyframes blink-1 {

  0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

/* Responsive Styles */
@media (max-width: 768px) {
  #alertwarning .alert-descriptiondanger {
    font-size: 14px;
  }
}

@media (min-width: 443px) and (max-width: 491px) {
  #alertwarning .alert-contentdanger {}
}

@media (min-width: 601px) and (max-width: 768px) {
  #alertwarning .alert-contentdanger {}
}

@media (min-width: 768px) {
  #alertwarning .message-inner-separatordanger {
    height: 1px;
  }
}

@media (min-width: 992px) {
  #alertwarning .message-inner-separatordanger {
    height: 2px;
  }
}

/* this code css for style alert Sucéés*/
#alertYes {
  margin-bottom: 16px;
  border: 1px solid rgba(36, 241, 6, 0.46);
  background-color: rgba(7, 149, 66, 0.12156862745098039);
  box-shadow: 0px 0px 2px #259c08;
  color: #0ad406;
  padding: 15px;
  border-radius: 10px;
  direction: rtl;
  display: flex;
  padding: 5px 13px 13px 13px;
  position: relative;
}

#alertYes .closeYes {
  position: absolute;
  top: -3px;
  left: -15px;
  font-size: 21px;
  color: #00d212;
  text-shadow: none;
  cursor: pointer;
  animation: blink-1 2s infinite both;
  background-color: unset;
  display: none;
}

#alertYes .alert-contentYes {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

#alertYes .alert-headerYes {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: bold;
  font-size: 21px;
  color: #0ad406;
}

#alertYes .titlleYes {
  font-size: 18px;
  font-family: "Cairo Charov Bold";
  font-weight: bold;
}

#alertYes .alert-descriptionYes {
  flex-grow: 1;
  /*width: 90%;*/
  font-size: 17px;
  font-family: "Cairo Charov Bold";
  font-weight: bold;
  margin-top: 8px;
  text-align: start;
  padding-right: 9px;
}

#alertYes .message-inner-separatorYes {
  border: 0 !important;
  height: 1px !important;
  background-image: -webkit-linear-gradient(left,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0.15),
      rgba(0, 0, 0, 0)) !important;
  margin: 0 !important;
  background-color: transparent !important;
  margin-top: 5px !important;
}

.alert-simpleYes.alert-Yes:hover {
  background-color: rgba(7, 149, 66, 0.35) !important;
  transition: 0.5s !important;
}

/* Vertical line before alert content */
.alert-simpleYes:before {
  content: "";
  position: absolute;
  width: 0;
  height: calc(100% - 44px);
  border-left: 5px solid #00d212 !important;
  border-right: 5px solid transparent;
  border-bottom-right-radius: 12px;
  border-top-right-radius: 12px;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  height: 40px;
}

/* Blink animation for close button */
@keyframes blink-1 {

  0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

/* Responsive Styles */
@media (max-width: 600px) {
  #alertwarning .alert-descriptionYes {
    font-size: 15px;
  }
}

@media (min-width: 443px) and (max-width: 491px) {
  #alertwarning .alert-contentYes {}
}

@media (min-width: 601px) and (max-width: 768px) {
  #alertwarning .alert-contentYes {}
}

@media (min-width: 768px) {
  #alertwarning .message-inner-separatorYes {
    height: 1px !important;
  }
}

@media (min-width: 992px) {
  #alertwarning .message-inner-separatorYes {
    height: 1px !important;
  }
}

/* Loading Spinner Overlay */

.loading-spinner-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  /* Black overlay with opacity */
  z-index: 9998;
  display: none;
}

/* Spinner Container */
.loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  width: 90%;
  /* Responsive width */
  max-width: 400px;
  /* Maximum width for larger screens */
  font-family: "Cairo Charov Bold", sans-serif;
  /* Apply custom font */
  padding-top: 13px;
  height: 101px;
}

/* Spinner Icon - Dual Rings */
.loading-spinner .spinner {
  margin: 0 auto;
  /* Center the spinner */
  width: 44px;
  height: 44px;
  border: 6px solid rgba(0, 0, 0, 0.1);
  border-left-color: #21a6ff;
  border-right-color: #cd4e16c4;
  /*   615353*/
  border-radius: 50%;
  animation: dualSpin 1.5s linear infinite;
}

/* Spinner Text */
.loading-spinner p {
  margin-top: 1px;
  font-size: 16px;
  font-family: "Cairo Charov Bold", sans-serif;
  /* Apply custom font */
}

/* Keyframes for Dual Spinning Animation */
@keyframes dualSpin {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Preventing Clicks on the Page When Spinner is Visible */
body.loading-active {
  pointer-events: none;
  /* Prevent all interactions */
}

/* Responsive Styles */
@media (max-width: 768px) {
  .loading-spinner {
    width: 80%;
    max-width: 300px;
  }
}

@media (max-width: 480px) {
  .loading-spinner {
    width: 95%;
    max-width: 250px;
  }
}

/* for cite web*/
/* Header container RTL styling */
.site-header {
  direction: rtl;
}

/* space between logo and title*/

.site-header .site-logo-img {
  margin-left: 20px;
}

/* space between item dakhel  menu*/
.site-header .main-header-menu .menu-item {
  margin-left: 0px;
}

.site-header .ast-header-account {
  margin-left: 200px;
}

/* Loading indicator for form area */
.form-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(240, 242, 247, 0.92);
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 999;
  border-radius: 15px;
}

.form-loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.form-loading-text {
  color: #635d5d;
  font-size: 16px;
  font-family: 'Droid Arabic charov', sans-serif;
  text-align: center;
  margin: 0;
  font-weight: 600;
}

.my-checkout-form {
  position: relative;
}

.my-checkout-form.loading .form-loading-overlay {
  display: flex;
}

.my-checkout-form:not(.loading) .form-loading-overlay {
  display: none;
}

/* Button disabled state during loading - تم إزالة CSS للزر المعطل */
/* #my-btncharov:disabled {
  background: inherit !important;
  cursor: not-allowed !important;
  opacity: 0.7;
}

#my-btncharov:disabled:hover {
  background: inherit !important;
} */

/* this style for bricks cite web */

/* Edit some style for checkout form when use bricks*/
.woocommerce-checkout #customer_details {
  float: none !important;
  margin-right: 0 !important;
  width: 100% !important;
}


/*Display coupou */
.woocommerce .before-cart,
.woocommerce .before-checkout {
  display: none !important;
}

/* hadi row sghira tji fi field checkout  */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none !important;
}

@media (min-width: 768px) {
  #billing_first_name {
    width: calc(100% - 10px) !important;
  }

  #billing_country+.select2-container--default .select2-selection--single {
    width: calc(100% - 10px) !important;
  }
}

/* for style font  bar manager hadi nakhdem b plugin */
#ancr-1915 .ancr-inner h5 {
  font-family: "Cairo Charov Bold" !important;
  font-size: 15px !important;
}

/* for style font  bar manager*/
#ancr-1923 .ancr-inner h5 {
  font-family: "Cairo Charov Bold" !important;
  font-size: 15px !important;
}

/* ALSO FOR BAR MANAGER */
.ancr-container {
  font-family: "Cairo Charov Bold" !important;
  column-gap: 21px !important;
  direction: rtl !important;
  align-items: flex-start !important;
  height: 30px !important;
  /*height alert*/
}

/* Responsive Styles */
@media (max-width: 770px) {
  .ancr-container {
    height: fit-content !important;
    /*height alert*/
  }

  .ancr-content {
    margin-bottom: -38px !important;
  }
}

/*hide  element alert li tji m3a plugin bundle  "ma3ejbetnich" thi ta7et grid w fiha text chose elemtnt ...etc*/
.asnp-alert {
  display: none !important;
}

/* ******* style 2 for variation ******** */
/*HADI  HIDE LINE YJI FI VARIATION SECTION*/
.woocommerce table {
  border-collapse: unset !important;
}

/* hada padding ta3 section variation*/
form.cart table.variations td,
form.woocommerce-cart-form table.variations td {
  padding: 5px 0 !important;
}

/* Hide images in variation radio buttons */
.variable-items-wrapper .radio-variable-item img {
  display: none !important;
}

/* Hide regular price  in variation result "when chose any variation i see result price in section " */
.single_variation_wrap .woocommerce-variation-price del {
  display: none !important;
}

/* Table Styles */
table.variations {
  width: 100% !important;
}

table.variations tr,
table.variations td {
  padding: 10px !important;
}

/* Reset Variations Link */
.reset_variations {
  display: inline-block !important;
  margin-top: 10px !important;
}

/* Wrapper Styles */
.woo-variation-items-wrapper .radio-variable-item {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 97%;
  margin: 3px 0 !important;
  padding: 5px 15px !important;
  border: 3px solid #bce0f7;
  border-radius: 5px !important;
  background: #fff !important;
  cursor: pointer !important;
  transition: border-color 0.3s ease !important;
}

.woo-variation-items-wrapper .radio-variable-item:hover {
  /* border-color: #0e1011a8 !important;*/
  border-color: #e95a41f5 !important;
}

.woo-variation-items-wrapper .radio-variable-item.selected {
  border-color: #259bea !important;
  /* Change to red if you prefer red */
  border-color: #52df52 !important;
  /* Change to red if you prefer red */
}

/* Style for all variation labels */
.variable-items-wrapper .variable-item-radio-value {
  color: #333333;
  /* Default color for all labels */
}

/* Hover effect for all variation labels */
.variable-items-wrapper .variable-item:hover .variable-item-radio-value {
  /* color: #259bea; 
  color: #52df52; */
}

/* Style for sale prices */
.variable-items-wrapper .price ins {
  color: #3094ff !important;
  text-decoration: none;
  /* Remove the default underline from sale prices */
  font-size: 17px;
}

/* Contents Styles */
.woo-variation-items-wrapper .radio-variable-item .variable-item-contents {
  align-items: baseline !important;
  width: 100% !important;
}

/* Radio Input Wrapper */
.woo-variation-items-wrapper .radio-variable-item .variable-item-radio-input-wrapper {
  margin-left: 10px !important;
}

/* Radio Value Wrapper */
.variable-item-radio-value-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-grow: 1 !important;
}

.variable-item-radio-value-wrapper>* {
  margin-left: 0px !important;
}

/* Image Styles */
.woo-variation-items-wrapper .radio-variable-item img,
.variable-item-radio-value-wrapper img {
  order: -2 !important;
  margin-right: 10px !important;
  vertical-align: middle !important;
}

/* Text Styles */
.variable-item-radio-value {
  order: -1 !important;
}

/* Price Styles */
.variable-item-radio-value-wrapper .price {
  order: 1 !important;
}

/* RTL Language Support */
[dir="rtl"] .variable-item-radio-value-wrapper {
  flex-direction: row !important;
}

/* ... (previous CSS remains the same) ... */

/* Custom  variation spécific "Radio Button" Styles "hadi ne7tajha when upsells" */
.woo-variation-items-wrapper .radio-variable-item .variable-item-radio-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 19px !important;
  /* Adjust the width as needed */
  height: 28px !important;
  /* Adjust the height as needed */
  border: 3px solid #bce0f7;
  border-radius: 50%;
  outline: none;
  margin-right: -10px !important;
  position: relative;
  cursor: pointer;
}

.woo-variation-items-wrapper .radio-variable-item .variable-item-radio-input:checked {
  border-color: #259bea;
  /* Change this to your preferred color */
  border-color: #52df52;
  /* Change this to your preferred color */
}

.woo-variation-items-wrapper .radio-variable-item .variable-item-radio-input:checked::after {
  content: "";
  width: 14px;
  /* Adjust size of the inner circle */
  height: 14px;
  /* Adjust size of the inner circle */
  background-color: #259bea;
  /* Change this to your preferred color */
  background-color: #52df52;
  /* Change this to your preferred color */

  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Adjust the radio button wrapper to accommodate the new radio style */
.woo-variation-items-wrapper .radio-variable-item .variable-item-radio-input-wrapper {
  display: flex !important;
  align-items: center !important;
  margin-right: 10px !important;
}

/****  this for colapps "bech tweli responsive"***/
/* Styling for smaller screens */
@media screen and (max-width: 360px) {
  .faqs-content-inside {
    overflow-x: scroll;
    /* Horizontal scroll on small screens */
  }

  /* Ensure the table does not shrink too much */
  .tablecollapse {
    min-width: 300px;
    /* A bit wider for better visibility on small screens */
  }
}

/* Optional styling for table cells */
.tablecollapse td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

/* إزالة padding من خلايا صف سعر التوصيل */
.tablecollapse tr:has(#codplugin_d_has_price) td {
  padding: 0 !important;
}

/*****************  product archive style *****************/
/* تم حذف الكود القديم واستبداله بالكود الديناميكي الجديد */

/* Change the color of the current (sale) price */
ins .woocommerce-Price-amount {
  color: #2196f3 !important;
  /* Replace with your desired color */
  margin-left: 3px;
}

/* Change the color of the regular (original) price */
del .woocommerce-Price-amount {
  color: #999999 !important;
  /* Replace with your desired color */
}

/* Remove underline from the sale price for all product widgets */
.dynamic ins {
  text-decoration: none !important;
  /* Remove underline from <ins> elements */
}

.brxe-woocommerce-products .products {
  direction: rtl;
}

/* Ensure WooCommerce prices use flexbox for layout */
/* Target the price wrapper to use flexbox */
.dynamic[data-field-id="1da319"] {
  display: flex !important;
  /* Use inline-flex for alignment */
  flex-direction: row-reverse !important;
  /* Reverse the order for RTL */
  justify-content: center;
}

/* for pagination  product archive  */
/* Center the pagination container */
.bricks-products-widgets.after {
  display: flex !important;
  /* Use flex to align items */
  justify-content: center !important;
  /* Center the pagination container */
  width: 100% !important;
  /* Full width to ensure centering works */
  margin: 20px 0 !important;
  /* Vertical spacing */
}

.bricks-products-widgets .woocommerce-pagination ul li {
  margin: 10 7px !important;
  /* Space between pagination items */
}

.bricks-products-widgets .woocommerce-pagination .page-numbers {
  text-decoration: none;
  /* Remove underline from links */
  padding: 8px 12px;
  /* Add padding for clickable area */
  border: 1px solid #ccc;
  /* Optional: Add a border for better visibility */
  border-radius: 14px;
  /* Optional: Rounded corners */
  border-color: #dcdcdc;
  font-family: "Cairo Charov Bold";
  font-size: 17px;
}

.woocommerce-pagination .current {
  background-color: #2196f3;
  /* Highlight current page */
  color: white;
  /* Text color for current page */
}

.woocommerce-pagination .page-numbers li .page-numbers {
  padding: 0 12px !important;
}

/*product archive */
/*product archive */
.woocommerce .button {
  background-color: #03a9f4 !important;
  color: #f5f5f5 !important;
  border-radius: 5px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  padding-right: 30px !important;
  padding-left: 30px !important;
  transition: background-color 0.3s ease, color 0.3s ease !important;
  /* Smooth hover effect */
}

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

/* Change button background color when hovering over the product item 222 */
/*
.related ul.products li.product:hover .add_to_cart_button {
  background-color: #000000 !important; 
  color: #fff;
}*/

/* *********** proudct related ******************/
.related.products ul.products li.product {
  padding: 15px;
  /* Add padding inside each product item to create space between the button and the border */
  border: 1px solid #ccc;
  /* Optional: add a border to the product item */
  margin-bottom: 20px;
  /* Add space between product items */
  box-sizing: border-box;
  /* Ensure padding and border are included in the item width */
}

/*  change price landing page to right left */
.brxe-ilmbmi {
  display: flex !important;
  flex-direction: row-reverse !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 10px !important;
  direction: rtl !important;
  justify-content: center !important;
}

/*
.woocommerce-Price-amount {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px !important;
}
*/

/* Optional: Style the current price */
ins {
  text-decoration: none !important;
}

/*reverse menus hmburger item */
.bricks-mobile-menu {
  flex-direction: column-reverse;
  display: flex;
}

/*************** for change sale badge for product archive ****************/

/* Show WooCommerce/plugin sale badges (allow alongside custom yellow badge) */

.onsale,
.woocommerce-onsale {
  display: inline-flex !important;
  /* ensure visible if a plugin sets display:none */
}

/* Ensure proper positioning on single product page */
.single-product .product .images {
  position: relative;
}

/* Style 1: Modern Circle Badge - Custom Yellow Badge */

.products .product.sale:before,
.single-product .product.sale .images:before {
  content: var(--custom-badge-text, "🎁خصم 25%") !important;
  display: var(--custom-badge-display, flex);
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 5px;
  left: 10px;
  width: 50px;
  height: 50px;
  background: var(--custom-badge-bg, #f9df74) !important;
  color: var(--custom-badge-color, #000) !important;
  border-radius: 50%;
  padding: 4px;
  z-index: 9;
  font-size: 12px;
  line-height: 14px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transform: rotate(5deg);
  transition: transform 0.3s ease;
  font-family: "Cairo Charov Bold" !important;
}

/* تم حذف التأثير اللامع للبادج الأصفر بناءً على طلب المستخدم */

/* Modern Elegant Bricks Badge Design مع Shiny Effect */
.badge.onsale {
  position: absolute !important;
  top: 12px !important;
  overflow: hidden !important;
  right: 12px !important;
  background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 6px 10px !important;
  border-radius: 20px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3) !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  z-index: 10 !important;
  transform: translateY(0) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  font-family: "Cairo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  line-height: 1.2 !important;
  min-width: 45px !important;
  text-align: center !important;
}

/* Shiny Effect للبادج */
.badge.onsale:after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  animation: badgeShiny 2.5s ease-in-out infinite;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

/* Hover Effect for Bricks Badge */
.badge.onsale:hover {
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4) !important;
  background: linear-gradient(135deg, #c0392b, #a93226) !important;
}

/* Gold SKU Badge next to product title - only when SKU has text */
.product_title .sku:not(:empty),
span.sku:not(:empty) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  margin-inline-start: 3px;
  min-width: 52px;
  height: 24px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  color: #833506;
  background: linear-gradient(135deg, #f7e99a, #e1b150 45%, #ffc44d 55%, #f4e07a);
  border: 1px solid rgba(184, 137, 43, 0.5);
  box-shadow: 0 2px 10px rgba(184, 137, 43, 0.25);
  position: relative;
  overflow: hidden;
  vertical-align: top;
  transform: translateY(2px);
}

/* Shiny sweep on gold badge */
.product_title .sku:not(:empty):after,
span.sku:not(:empty):after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 120%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  animation: badgeShiny 2.6s ease-in-out infinite;
  pointer-events: none;
}

/* Hide empty SKU completely */
.product_title .sku:empty,
span.sku:empty {
  display: none !important;
}

/* ✅ ميزة المنتجات غير المتوفرة في المخزون */
.charov-out-of-stock {
  position: relative;
  opacity: 0.8;
  filter: grayscale(0.2);
  transition: all 0.3s ease;
}

.charov-out-of-stock-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /*background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.7) 100%);*/
  background: linear-gradient(135deg, rgb(207 49 49 / 60%) 0%, rgb(35 0 0 / 50%) 50%, rgba(0, 0, 0, 0.7) 100%) !important;
  backdrop-filter: blur(1px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: inherit;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2);
}

.charov-out-of-stock-content {
  text-align: center;
  color: #ffffff;
  padding: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.charov-out-of-stock-icon {
  font-size: 40px;
  margin-bottom: 10px;
  animation: pulse 2s infinite;
  filter: drop-shadow(0 0 8px rgba(185, 28, 28, 0.6));
}

.charov-out-of-stock-text {
  font-size: 16px;
  font-weight: bold;
  font-family: "Cairo Charov Bold", sans-serif;
  color: #ffd9d9;
  text-shadow: 0 2px 8px rgba(185, 28, 28, 0.5);
  background: linear-gradient(135deg, #b91c1c, #dc2626);
  background-clip: text;
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
    filter: drop-shadow(0 0 8px rgba(185, 28, 28, 0.6));
  }

  50% {
    transform: scale(1.1);
    opacity: 1;
    filter: drop-shadow(0 0 12px rgba(185, 28, 28, 0.8));
  }
}

/* منع التفاعل مع المنتجات غير المتوفرة */
.charov-out-of-stock a,
.charov-out-of-stock button {
  pointer-events: none;
  cursor: not-allowed;
}

/* ضمان ظهور التأثير بوضوح */
.charov-out-of-stock {
  position: relative !important;
  opacity: 0.8 !important;
  filter: grayscale(0.2) !important;
  transition: all 0.3s ease !important;
}

.charov-out-of-stock-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.7) 100%) !important;
  backdrop-filter: blur(1px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
  border-radius: inherit !important;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2) !important;
}

/* Advanced Woo Labels - Red and Black Badge Styling */
.awl-product-label.awl-type-label.awl-type-label-rounded {
  font-family: "Cairo Charov Bold" !important;
  position: relative;
  overflow: hidden;
}

/* Black Badge - Convert to Red Gradient Design (only for "متراطيش فرصة") */
.awl-label-wrap.awl-label-id-4508 .awl-label-text {
  background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3) !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
}

/* Shiny effect for red and black badges */
.awl-product-label.awl-type-label.awl-type-label-rounded:after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  animation: badgeShiny 2.5s ease-in-out infinite;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

/* Animation for Bricks Badge */
@keyframes badgePulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

/* Animation للبادج الجديد */
@keyframes badgeShiny {
  0% {
    left: -100%;
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    left: 100%;
    opacity: 0;
  }
}

/* Digital Product Badge - Elegant gold gradient badge */
.charov-digital-product-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 16px;
  min-width: 110px;
  height: 32px;
  border-radius: 999px;
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
  color: #1a1a1a;
  font-family: "Droid Arabic charov", sans-serif;
  background: linear-gradient(135deg, #ffd89b, #f7a643 30%, #ffb347 50%, #ffd700 70%, #ffc966);
  border: 1px solid rgba(212, 175, 55, 0.6);
  box-shadow: 0 2px 12px rgba(212, 175, 55, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  transform: translateY(0);
  transition: all 0.3s ease;
}

/* Hover effect for digital product badge */
.charov-digital-product-badge:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 18px rgba(212, 175, 55, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  background: linear-gradient(135deg, #ffc966, #ffb347 30%, #ffd700 50%, #f7a643 70%, #ffd89b);
}

/* Shiny sweep animation on digital product badge */
.charov-digital-product-badge:after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 120%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  animation: badgeShiny 2.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

/* Wrapper for badge positioning */
.charov-digital-product-badge-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 15px;
  margin-bottom: 10px;
}

/* Ensure badge appears below product images */
.single-product .woocommerce-product-gallery~.charov-digital-product-badge-wrapper,
.single-product .product .images~.charov-digital-product-badge-wrapper {
  margin-top: 15px;
}

/* Social Order Section - WhatsApp & Telegram buttons below Order Now button */
.charov-social-order-section {
  width: 100%;
  margin-top: -25px !important;
  margin-bottom: 0px !important;
  padding: 0 10px;
}

.charov-social-order-text {
  text-align: center;
  font-size: 16px !important;
  color: #0c0c0d !important;
  margin: 0 0 15px !important;
  font-family: "Droid Arabic charov", sans-serif;
  font-weight: bold !important;
  line-height: 1.5;
}

.charov-social-order-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.charov-social-order-btn {
  flex: 1;
  max-width: 180px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border: none;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  font-family: "Droid Arabic charov", sans-serif;
  transition: all 0.3s ease;
  cursor: pointer;
}

.charov-whatsapp-btn {
  background: #25D366;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3);
}

.charov-whatsapp-btn:hover {
  background: #20ba5a;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
}

.charov-telegram-btn {
  background: #0088cc;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 136, 204, 0.3);
}

.charov-telegram-btn:hover {
  background: #0077b5;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 136, 204, 0.4);
}

.charov-social-order-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.charov-social-order-btn span {
  white-space: nowrap;
}

@media (max-width: 480px) {
  .charov-social-order-buttons {
    flex-direction: column;
    gap: 10px;
  }

  .charov-social-order-btn {
    max-width: 100%;
    width: 100%;
  }
}

/* الحفاظ على Animation القديم في حالة احتجناه */
@keyframes shiny {
  0% {
    transform: translateX(-150%) translateY(-50%) rotate(45deg) scale(0.8);
    opacity: 0;
  }

  25% {
    opacity: 0.4;
  }

  50% {
    transform: translateX(-50%) translateY(-50%) rotate(45deg) scale(1);
    opacity: 0.8;
  }

  75% {
    opacity: 0.4;
  }

  100% {
    transform: translateX(50%) translateY(-50%) rotate(45deg) scale(0.8);
    opacity: 0;
  }
}

/* تم دمج animation مع التعريف الرئيسي للبادج */

/* Responsive Design for Custom Yellow Badge */
@media (max-width: 768px) {

  .products .product.sale:before,
  .single-product .product.sale .images:before {
    top: 3px !important;
    left: 6px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 9px !important;
    line-height: 11px !important;
    padding: 3px !important;
  }
}

/* Responsive Design for Bricks Badge */
@media (max-width: 768px) {
  .badge.onsale {
    top: 8px !important;
    right: 8px !important;
    font-size: 10px !important;
    padding: 4px 8px !important;
    border-radius: 15px !important;
  }
}

/* PhotoSwipe legacy block removed in favor of unified overlay rules */

/* Unified overlay color for PhotoSwipe (semi-transparent like overlay) */
/* Elegant overlay: tint only the dedicated PhotoSwipe background layer */
.pswp__bg {
  background: rgba(0, 0, 0, 0.65) !important;
  /* darker, elegant overlay */
  background-color: rgba(0, 0, 0, 0.65) !important;
  /* explicit property for stubborn styles */
  opacity: 1 !important;
  /* keep PS opacity logic intact */
}

/* Extra specificity to win against inline/third‑party styles */
.pswp.pswp--open .pswp__bg {
  background: rgba(0, 0, 0, 0.65) !important;
  background-color: rgba(0, 0, 0, 0.65) !important;
}

/* Keep all other PhotoSwipe layers transparent so the image isn’t darkened twice */
.pswp,
.pswp__scroll-wrap,
.pswp__container,
.pswp__item,
.pswp__zoom-wrap,
.pswp__ui,
.pswp__top-bar,
.pswp__caption,
.pswp * {
  background: transparent !important;
}

/* Hide filename/caption inside PhotoSwipe */
.pswp__caption,
.pswp__caption__center {
  display: none !important;
}

/* Hide share, fullscreen, and close buttons, keep only zoom */
.pswp__button--share,
.pswp__button--fs,
.pswp__button--close {
  display: none !important;
}

/* Force PSWP to show even if inline style injects display:none */
.pswp.pswp--open,
.pswp.pswp--visible {
  display: block !important;
}

/* Ensure overlay is full-screen and on top */
.pswp {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
}

/* (removed): previous attempts to force-show close button via CSS. Kept minimal rules elsewhere. */

/* Custom toolbar for PhotoSwipe injected by CharovScript.js */
.charov-pswp-toolbar {
  position: absolute !important;
  top: 56px !important;
  /* أسفل من الشريط العلوي */
  left: 8px !important;
  /* أعلى اليسار */
  display: flex !important;
  gap: 10px !important;
  z-index: 10030 !important;
}

.charov-pswp-tool {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  /* زر دائري */
  background: rgba(30, 30, 30, 0.85) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  line-height: 1 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(2px);
}

.charov-pswp-tool.is-close {
  background: #d93025 !important;
  /* أحمر */
  border-color: #d93025 !important;
}

.charov-pswp-tool:hover {
  filter: brightness(1.1);
}

.charov-pswp-tool:active {
  transform: scale(0.98);
}

/* Fix WooCommerce Product Gallery FlexSlider on Mobile */
@media (max-width: 768px) {
  .woocommerce-product-gallery .flex-viewport {
    overflow: visible !important;
  }

  .woocommerce-product-gallery__wrapper {
    transform: translate3d(0px, 0px, 0px) !important;
    transition-duration: 0.3s !important;
  }

  .woocommerce-product-gallery__image {
    width: 100% !important;
    margin-right: 0 !important;
    float: none !important;
    display: block !important;
  }

  .woocommerce-product-gallery__image.flex-active-slide {
    transform: translate3d(0px, 0px, 0px) !important;
  }

  /* إخفاء الصور غير النشطة فقط للمنتجات التي تحتوي على flex-viewport (ألبوم صور) */
  .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image:not(.flex-active-slide) {
    display: none !important;
  }

  /* إظهار جميع الصور للمنتجات التي لا تحتوي على flex-viewport (صورة واحدة) */
  .woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__image {
    display: block !important;
  }
}

/* Style 3: Modern Corner Badge */
/*
.products .product.sale:before,
.single-product .product.sale .images:before {
    content:   "تخفيض 50 % " !important;
    position: absolute;
    top: 0;
    right: 0;
    background: #F9DF74;
    color: #000 !important;
    z-index: 9;
    padding-left: 20px;
    font-size: 16px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0);
    width: 80px;
    height: 100px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    text-align: right;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    font-family: 'Cairo Charov Bold' !important;

}
*/

/*  ****************************     Dynamic Product Styling  ************** */

/* لون حدود بطاقة المنتجات الرئيسية - ديناميكي لجميع عناصر المنتجات */
.products li.product,
.brxe-woocommerce-products .products li.product,
.woocommerce ul.products li.product {
  border: 2px solid var(--product-border-color, #e0e0e0) !important;
  transition: border-color 0.3s ease !important;
}

/* لون حدود بطاقة المنتجات عند تمرير الفأرة - ديناميكي */
.products li.product:hover,
.brxe-woocommerce-products .products li.product:hover,
.woocommerce ul.products li.product:hover {
  border-color: var(--product-border-hover-color, #007cba) !important;
}

/* لون خلفية زر "إشتري الآن" - ديناميكي */
.products li.product .add_to_cart_button,
.brxe-woocommerce-products .products li.product .add_to_cart_button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce .button.add_to_cart_button {
  background-color: var(--button-bg-color, #007cba) !important;
  color: var(--button-text-color, #ffffff) !important;
  transition: background-color 0.3s ease, color 0.3s ease !important;
}

/* لون خلفية زر "إشتري الآن" عند تمرير الفأرة على الزر نفسه فقط - ديناميكي */
.woocommerce .button.add_to_cart_button:hover {
  background-color: var(--button-bg-hover-color, #005a87) !important;
  color: var(--button-text-hover-color, #ffffff) !important;
}

/* إصلاح: لا نلوّن خلفية حاوية الترقيم (ul) */
.woocommerce-pagination ul.page-numbers {
  background: transparent !important;
}

/* القيم الافتراضية للأرقام: خلفية شفافة، لون نص افتراضي (لا يستخدم متغيرات) */
.bricks-products-widgets .woocommerce-pagination ul.page-numbers li a.page-numbers,
.woocommerce-pagination ul.page-numbers li a.page-numbers {
  background-color: transparent !important;
  color: inherit !important;
  transition: color 0.2s ease !important;
}

/* منع أي تغيير لون عند التحويم على الأرقام غير النشطة */
.bricks-products-widgets .woocommerce-pagination ul.page-numbers li a.page-numbers:hover,
.woocommerce-pagination ul.page-numbers li a.page-numbers:focus {
  background-color: transparent !important;
  color: inherit !important;
}

/* لون خلفية ونص الدائرة النشطة (span.current) يتحكم بهما الإعدادات العامة */
.bricks-products-widgets .woocommerce-pagination ul.page-numbers li span.current,
.woocommerce-pagination ul.page-numbers li span.current {
  background-color: var(--pagination-bg-color, #007cba) !important;
  color: var(--pagination-text-color, #ffffff) !important;
}

/*  ****************************     style button  ************** */

/* Center the place order button */
.form-row.place-order {
  text-align: center !important;
}

.button-wrapper {
  /* text-align: center !important; */
  margin-bottom: 50px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 50px !important;
  /* Adjust this value to change the space between the buttons */
  margin-left: 22px;
  margin-right: 20px;
}

/* ***** btn 111************/
.btn-default {
  outline: 0;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  /* background: #40B3A2;*/
  background: #ff7f50;
  /* background: #0fd850;*/
  /* background: #7d2ae8;*/
  height: 60px !important;
  min-width: 100px;
  width: 100%;
  /* Button will take up the full width of its container */
  max-width: 400px;
  border: 0;
  border-radius: 7px;
  /*box-shadow: 0 4px 12px rgba(0, 0, 0, .1);*/
  box-sizing: border-box;
  padding: 16px 20px;
  color: #fff;
  /*  font-family: "Almarai charov", sans-serif !important; */
  /* font-family: "Cairo Charov Bold", sans-serif !important;*/
  font-family: "Droid Arabic charov", sans-serif !important;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 1.9px;
  /* text-transform: uppercase;*/
  overflow: hidden;
  cursor: pointer;
  transition: all 0.8s !important;
  box-shadow: rgb(0 0 0 / 5%) 0 0 8px;
}

.btn-default:hover {
  opacity: 0.95;
  color: #fff;
  font-size: 20px;

  letter-spacing: 4px;
  background-color: rgb(24, 191, 220);
  color: hsl(0, 0%, 100%);
  box-shadow: rgb(24, 191, 220) 0px 7px 29px 0px;
  /*  letter-spacing: 5px; */

  /* shadaw hayel tani */
  /*  
  background: #ff7f50;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px #ff7f50,
              0 0 25px #ff7f50,
              0 0 50px #ff7f50,
              0 0 100px #ff7f50;
      */
}

.btn-default .animation {
  border-radius: 100%;
  animation: ripple 0.6s linear infinite;
}

@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1),
      0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0.1),
      0 0 0 60px rgba(255, 255, 255, 0.1);
  }

  100% {
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.1),
      0 0 0 40px rgba(255, 255, 255, 0.1), 0 0 0 60px rgba(255, 255, 255, 0.1),
      0 0 0 80px rgba(255, 255, 255, 0);
  }
}

.btn-default:focus {
  /* outline: none;*/
  outline: none !important;
  /* إزالة الخط الخارجي */
  box-shadow: 0 0;
  background: inherit !important;
  /* يحتفظ بلون الخلفية الحالي */
}

/* CSS شامل لجميع أنواع الأزرار - focus state */
button:focus,
.btn:focus,
.btn-default:focus,
.btn-style-2:focus,
.btn-style-3:focus,
.btn-style-4:focus,
.ui-btn:focus,
.ring-futuristic-button:focus,
.btn-modern-animated:focus {
  outline: none !important;
  /* إزالة الخط الخارجي */
  background: inherit !important;
  /* يحتفظ بلون الخلفية الحالي */
}

/* حل جذري - لون رمادي عصري للزر المعطل */
#my-btncharov:disabled {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
  /* رمادي عصري متدرج */
  cursor: not-allowed !important;
  opacity: 1 !important;
  color: #ffffff !important;
  /* نص أبيض للوضوح */
  box-shadow: 0 4px 15px rgba(107, 114, 128, 0.4) !important;
  /* ظل رمادي ناعم */
}

#my-btncharov:disabled:hover {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
  /* نفس اللون الرمادي */
  color: #ffffff !important;
}

/* حل إضافي - منع جميع تغييرات المظهر للزر المعطل */
#my-btncharov:disabled,
#my-btncharov:disabled:hover,
#my-btncharov:disabled:focus,
#my-btncharov:disabled:active {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
  color: #ffffff !important;
  border: initial !important;
  box-shadow: 0 4px 15px rgba(107, 114, 128, 0.4) !important;
}

/* إصلاح مشكلة الضغطة المطولة - لون رمادي عصري */
#my-btncharov:active {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(107, 114, 128, 0.6) !important;
}

/* إصلاح مشكلة التركيز - لون رمادي عصري */
#my-btncharov:focus {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
  color: #ffffff !important;
  outline: none !important;
  box-shadow: 0 4px 15px rgba(107, 114, 128, 0.4) !important;
}

.btn-default:active {
  transform: scale(0.8) !important;
  /*  transform: translateY(10px);  hadi tkhali button yahbe6 btasalsol hayla tani */
  letter-spacing: 0px;
  font-size: 20px;
  transition: 500ms;
  background: inherit !important;
  /* يحتفظ بلون الخلفية الحالي */
}

/*  responsive button */
/* For tablet devices */
@media only screen and (max-width: 768px) {
  .btn-default {
    padding: 0.8em 2.5em !important;
    /* slightly smaller size for tablets */
    max-width: 300px;
    /* Button will not be wider than 200px on tablets */
  }

  .button-wrapper {}
}

/* For mobile devices */
@media (min-width: 400px) and (max-width: 480px) {
  .btn-default {
    padding: 0.6em 2em !important;
    /* even smaller size for mobile phones */
    max-width: 250px;
    /* Button will not be wider than 150px on mobile phones */
  }

  .button-wrapper {}
}

/* Adjustments for small mobile screens */
@media (min-width: 100px) and (max-width: 399px) {
  .btn-default {
    padding: 0.4em 1.5em !important;
    /* even smaller size for small mobile screens */
    max-width: 240px;
    /* Button will not be wider than 100px on small mobile screens */
    font-size: 15px;
  }

  .button-wrapper {}
}

/**************************** نمط الزر الثاني -********************  */
/* From Uiverse.io by Botwe-Felix5820 */
.btn-style-2 {
  height: 3em;
  width: 8em;
  border: none;
  border-radius: 1em;
  background: #016dd9;
  font-size: 20px;
  color: #ffffff;
  font-family: inherit;
  font-weight: 500;
  /* أضف الخصائص التالية للتوافق مع بنية زرك */
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  min-width: 100px;
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  padding: 16px 20px;
  font-family: "Cairo", sans-serif !important;
}

.btn-style-2:hover {
  animation: shake3856 0.3s linear infinite both;
  background: #feb47b;

}

@keyframes shake3856 {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }

  20% {
    -webkit-transform: translate(-2px, 2px);
    transform: translate(-2px, 2px);
  }

  40% {
    -webkit-transform: translate(-2px, -2px);
    transform: translate(-2px, -2px);
  }

  60% {
    -webkit-transform: translate(2px, 2px);
    transform: translate(2px, 2px);
  }

  80% {
    -webkit-transform: translate(2px, -2px);
    transform: translate(2px, -2px);
  }

  100% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}

/*/**************************** نمط الزر الثالث - الأزرق  /*****************************/
.btn-style-3 {
  background: #eb7575;
  border-radius: 3px;
  font-family: "Cairo", sans-serif !important;
  box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
  position: relative;
  overflow: hidden;

  outline: 0;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  /* أضف الخصائص التالية للتوافق مع بنية زرك */
  height: 60px !important;
  min-width: 100px;
  width: 100%;
  /* Button will take up the full width of its container */
  max-width: 400px;
  border: 0;
  border-radius: 7px;
  /*box-shadow: 0 4px 12px rgba(0, 0, 0, .1);*/
  box-sizing: border-box;
  padding: 16px 20px;
  color: #fff;
  /*  font-family: "Almarai charov", sans-serif !important; */
  /* font-family: "Cairo Charov Bold", sans-serif !important;*/
  font-family: "Droid Arabic charov", sans-serif !important;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 1.9px;
  /* text-transform: uppercase;*/
  overflow: hidden;
  cursor: pointer;
  transition: all 0.8s !important;
  box-shadow: rgb(0 0 0 / 5%) 0 0 8px;
}

.btn-style-3:hover {
  background: #0069d9;
  letter-spacing: 2.5px;
}

.btn-style-3:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0) 100%);
  transition: left 0.7s;
}

.btn-style-3:hover:before {
  left: 100%;
}

/*/**************************** نمط الزر الرابع - /**************************** */

/* From Uiverse.io by xueyuantan */
.btn-style-4 {
  width: 9em;
  height: 3em;
  background: #5d71f1;
  color: #ffffff;

  border-radius: 10px;
  font-size: 18px;
  font-family: inherit;
  border: none;
  position: relative;
  overflow: hidden;
  z-index: 1;
  box-shadow: 6px 6px 12px transparent, -6px -6px 12px transparent;
  /* أضف الخصائص التالية للتوافق مع بنية زرك */
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  min-width: 100px;
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  padding: 16px 20px;
  font-family: "Cairo", sans-serif !important;
}

.btn-style-4::before {
  content: "";
  width: 0;
  height: 3em;
  border-radius: 10px;
  position: absolute;
  top: 0;
  left: 0;
  background-image: linear-gradient(to right, #0fd850 0%, #f9f047 100%);
  transition: 0.5s ease;
  display: block;
  z-index: -1;
}

.btn-style-4:hover::before {
  width: 30em;
}

/*/**************************** نمط الزر الخامس - /**************************** */
.glow-on-hover {
  width: 220px;
  height: 50px;
  border: none;
  outline: none;
  color: #fff;
  background: #006cff !important;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10px;
  font-weight: 600;
  /* أضف الخصائص التالية للتوافق مع بنية زرك */
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  min-width: 100px;
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  padding: 16px 20px;
  font-family: "Cairo", sans-serif !important;
}

.glow-on-hover:before {
  content: "";
  background: linear-gradient(45deg,
      #ff0000,
      #ff7300,
      #fffb00,
      #48ff00,
      #00ffd5,
      #002bff,
      #7a00ff,
      #ff00c8,
      #ff0000);
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing_54134 20s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  border-radius: 10px;
}

.glow-on-hover:active {
  color: #fff;
}

.glow-on-hover:active:after {
  background: transparent;
}

.glow-on-hover:hover:before {
  opacity: 1;
}

.glow-on-hover:after {
  z-index: -1;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #000000;
  left: 0;
  top: 0;
  border-radius: 10px;
}

@keyframes glowing_54134 {
  0% {
    background-position: 0 0;
  }

  50% {
    background-position: 400% 0;
  }

  100% {
    background-position: 0 0;
  }
}

/*/**************************** نمط الزر السادس - /**************************** */
.buttonsix {
  padding: 15px 32px;
  font-size: 20px;
  color: white;
  border: none;
  border-radius: 6px;
  background-size: 200% 100%;
  background-image: linear-gradient(145deg, #ff53eb, #4b4bff, #5de7ff);
  box-shadow: 3px 3px 10px 2px #4b4bff, -3px -3px 10px 2px #ff53eb;
  transition: 0.5s;
  /* أضف الخصائص التالية للتوافق مع بنية زرك */
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  min-width: 100px;
  width: 80%;
  max-width: 400px;
  box-sizing: border-box;
  padding: 16px 20px;
  font-family: "Cairo", sans-serif !important;
}

.buttonsix:hover {
  background-position: 99%;
  box-shadow: 3px 3px 10px 2px #5de7ff, -3px -3px 10px 2px #4b4bff;
}

.buttonsix:active {
  transform: scale(0.8) rotate(5deg);
  box-shadow: 3px 3px 15px 3px #5de7ff, -3px -3px 15px 3px #4b4bff;
  background: inherit !important;
  /* يحتفظ بلون الخلفية الحالي */
}

/*/**************************** نمط الزر السابع - /**************************** */
.ui-btn {
  cursor: pointer;
  border-radius: 5px;
  color: rgb(219, 218, 218);
  border-style: solid;
  background-color: #338bea;
  border-color: rgb(219, 218, 218);
  width: 120px;
  height: 48px;
  transition: 0.2s ease;
  text-transform: uppercase;
  border-width: 2px;
  font-weight: 500;
  font-size: 22px;

  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  min-width: 100px;
  width: 80%;
  max-width: 400px;
  box-sizing: border-box;
  padding: 16px 20px;
  font-family: "Cairo", sans-serif !important;
}

.ui-btn:hover {
  color: rgb(247, 247, 247);
  background-color: rgb(201, 147, 31);
  border-color: rgb(201, 147, 31);
  text-shadow: 0 0 50px white, 0 0 20px white, 0 0 15px white;
  box-shadow: 0 0 50px rgb(201, 147, 31), 0 0 30px rgb(201, 147, 31),
    0 0 60px rgb(201, 147, 31), 0 0 120px rgb(201, 147, 31);
  font-size: 23px;
  width: 80%;
  height: 55px;
  letter-spacing: 3px;

}

.ui-btn:active {
  width: 60%;
  height: 38px;
  letter-spacing: 0px;
  background: inherit !important;
  /* يحتفظ بلون الخلفية الحالي */
}

/*/**************************** نمط الزر الثامن - /**************************** */

/* From Uiverse.io by mRcOol7 */
.ring-futuristic-button {
  width: 200px;
  height: 60px;
  background: linear-gradient(to bottom right, #7d2ae8, #7d2ae8);
  color: white;
  font-size: 19px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  outline: none;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  letter-spacing: 1px;
  transition: transform 0.5s, background 0.5s, color 0.3s, box-shadow 0.3s;
  position: relative;
  z-index: 1;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  min-width: 100px;
  width: 80%;
  max-width: 400px;
  box-sizing: border-box;
  padding: 16px 20px;
  font-family: "Cairo", sans-serif !important;
}

.ring-futuristic-button::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  box-sizing: border-box;
  opacity: 0;
  transform: scale(0);
  transition: transform 0.5s, opacity 0.5s;
}

.ring-futuristic-button:hover {
  background: linear-gradient(to bottom right, #feb47b, #ff7e5f);
  color: #fff;
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.ring-futuristic-button:hover::before {
  opacity: 1;
  transform: scale(2);
}

.ring-futuristic-button:active {
  transform: scale(0.95);
  transition: transform 0.1s;
  background: inherit !important;
  /* يحتفظ بلون الخلفية الحالي */
}

/* ===== أنماط الكوبونات في ملخص الطلب ===== */

/* سطر خصم الكوبون */
.coupon-discount-row {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  color: white;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.coupon-discount-row td {
  padding: 12px 15px !important;
  border: none !important;
  font-weight: 600;
}

.coupon-discount-row:hover {
  background: linear-gradient(135deg, #218838 0%, #1e7e34 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}

#coupon-discount-label {
  font-size: 14px;
  display: inline-block;
  margin-right: 10px;
}

#coupon-discount-amount {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}

.remove-coupon-button {
  background: rgba(220, 53, 69, 0.8);
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  margin-right: 8px;
  transition: all 0.3s ease;
  vertical-align: middle;
}

.remove-coupon-button:hover {
  background: #dc3545;
  transform: scale(1.1);
}

.remove-coupon-button .remove-icon {
  font-size: 12px;
  font-weight: bold;
  display: inline-block;
  transition: transform 0.2s ease;
}

.remove-coupon-button:hover .remove-icon {
  transform: rotate(90deg);
}

/* قسم تطبيق الكوبون */
.coupon-section {
  margin-top: 15px;
  padding: 15px;
  background: #ddefff;
  border-radius: 8px;
  border: 1px solid #dfd3ff;
  border-top: 0 !important;
}

.apply-coupon-link-container {
  text-align: center;
}

.apply-coupon-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  font-family: "Cairo Charov Bold" !important;
  padding: 10px 20px;
  border: 2px solid #3b82f6;
  border-radius: 8px;
  background: #3b82f6;
  transition: all 0.3s ease;
}

.apply-coupon-link:hover {
  background: #2563eb;
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
}

.apply-coupon-link .coupon-icon {
  font-size: 16px;
  display: inline-block;
  transform: rotate(-10deg);
  transition: transform 0.3s ease;
}

.apply-coupon-link:hover .coupon-icon {
  transform: rotate(0deg) scale(1.1);
}

/* نموذج تطبيق الكوبون */
.coupon-form-container {
  margin-top: 15px;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.coupon-input-group {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.coupon-code-input {
  flex: 1;
  min-width: 150px;
  padding: 12px 15px;
  border: 2px solid #ced4da;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: white;
  transition: all 0.3s ease;
}

.coupon-code-input:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  outline: none;
}

.coupon-code-input::placeholder {
  text-transform: none;
  letter-spacing: normal;
  font-weight: normal;
  color: #6c757d;
}

.apply-coupon-btn {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  font-family: "Cairo Charov Bold" !important;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.apply-coupon-btn:hover {
  background: linear-gradient(135deg, #218838 0%, #1e7e34 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}

.apply-coupon-btn:disabled {
  background: #6c757d;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.cancel-coupon-btn {
  background: #6c757d;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.cancel-coupon-btn:hover {
  background: #5a6268;
  transform: translateY(-1px);
}

/* رسائل الكوبون */
.coupon-message {
  margin-top: 10px;
  padding: 10px 15px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  transition: all 0.3s ease;
}

.coupon-message.success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.coupon-message.error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.coupon-message.info {
  background: #d1ecf1;
  color: #0c5460;
  border: 1px solid #bee5eb;
}

/* تحسينات للشاشات الصغيرة */
@media (max-width: 768px) {
  .coupon-input-group {
    flex-direction: column;
    align-items: stretch;
  }

  .coupon-code-input {
    min-width: auto;
    margin-bottom: 10px;
  }

  .apply-coupon-btn,
  .cancel-coupon-btn {
    width: 100%;
    margin-bottom: 5px;
  }

  .apply-coupon-link {
    padding: 4px 18px;
    font-size: 16px;
  }
}

/* تأثيرات التحميل */
.coupon-loading {
  position: relative;
  pointer-events: none;
}

.coupon-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* ✅ تصميم معلومات الخصم في تفاصيل الطلبية */
.order-details-container {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  font-family: 'Cairo', sans-serif;
}

.order-details-container .customer-info h3 {
  color: #2c3e50;
  font-size: 18px;
  margin-bottom: 15px;
  border-bottom: 2px solid #3498db;
  padding-bottom: 8px;
}

.order-details-container .customer-info p {
  margin: 8px 0;
  color: #34495e;
  font-size: 14px;
}

.order-details-container .customer-info strong {
  color: #2c3e50;
  font-weight: 600;
}

.order-coupon-info {
  margin-top: 20px;
  padding: 15px;
  border-radius: 8px;
  border-right: 4px solid;
}

.order-coupon-info.success {
  background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
  border-right-color: #28a745;
  color: #155724;
}

.order-coupon-info.no-coupon {
  background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
  border-right-color: #dc3545;
  color: #721c24;
}

.order-coupon-info h3 {
  margin: 0 0 15px 0;
  font-size: 16px;
  font-weight: 700;
}

.order-coupon-info p {
  margin: 8px 0;
  font-size: 14px;
  line-height: 1.4;
}

.order-coupon-info strong {
  font-weight: 600;
}

.order-coupon-info .final-price {
  color: #28a745;
  font-weight: 700;
  font-size: 16px;
}

.order-not-found {
  background: #fff3cd;
  color: #856404;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #ffeaa7;
  text-align: center;
  font-size: 16px;
}

/* ✅ تصميم معلومات الخصم التلقائية في تفاصيل الطلبية WooCommerce */
.order-coupon-summary {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 2px solid #28a745;
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.15);
}

.order-coupon-summary h3 {
  color: #28a745;
  font-size: 18px;
  margin: 0 0 15px 0;
  text-align: center;
  font-weight: 700;
}

.coupon-summary-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.coupon-summary-table td {
  padding: 10px;
  border-bottom: 1px solid #dee2e6;
  vertical-align: top;
}

.coupon-summary-table td:first-child {
  font-weight: 600;
  color: #495057;
  width: 40%;
}

.coupon-summary-table td:last-child {
  color: #212529;
  text-align: left;
}

.final-price-highlight {
  color: #28a745;
  font-weight: 700;
  font-size: 16px;
  background: #d4edda;
  padding: 4px 8px;
  border-radius: 4px;
}

.order-no-coupon-info {
  background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
  border: 2px solid #dc3545;
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
  text-align: center;
  color: #721c24;
}

.order-no-coupon-info p {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

/* ✅ تصميم صفحة "شكراً لك" */
.thankyou-coupon-info {
  background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
  border: 3px solid #28a745;
  border-radius: 15px;
  padding: 25px;
  margin: 30px 0;
  text-align: center;
  box-shadow: 0 6px 20px rgba(40, 167, 69, 0.2);
}

.thankyou-coupon-info h2 {
  color: #155724;
  font-size: 24px;
  margin: 0 0 20px 0;
  font-weight: 800;
}

.coupon-details p {
  margin: 12px 0;
  font-size: 16px;
  color: #155724;
}

.coupon-details strong {
  font-weight: 700;
  color: #0f5132;
}

.final-price-thankyou {
  color: #28a745;
  font-weight: 800;
  font-size: 20px;
  background: #ffffff;
  padding: 8px 16px;
  border-radius: 8px;
  border: 2px solid #28a745;
  display: inline-block;
  margin-top: 10px;
}

/* ===== أنماط الـ Patterns الجديدة للأزرار (option9, option10, option11) ===== */

/* الزر التاسع - نمط نجوم وصلبان */
.btn-default.btn-pattern-stars {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.3'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: 40px 40px !important;
  position: relative !important;
}

/* الزر العاشر - نمط أمواج متدرجة */
.btn-default.btn-pattern-waves {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1' stroke-opacity='0.3'%3E%3Cpath d='M0,30 Q15,0 30,30 T60,30 M0,40 Q15,10 30,40 T60,40 M0,20 Q15,-10 30,20 T60,20'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: 60px 60px !important;
  position: relative !important;
}

/* الزر الحادي عشر - نمط شبكة معينات */
.btn-default.btn-pattern-diamonds {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'30\' height=\'30\' viewBox=\'0 0 30 30\'%3E%3Cg fill=\'none\' stroke=\'%23ffffff\' stroke-width=\'2\' stroke-opacity=\'0.3\'%3E%3Cpath d=\'M0,0 L30,30 M10,0 L40,30 M-10,0 L20,30 M0,10 L30,40 M0,-10 L30,20\'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: 24px 65px !important;
  position: relative !important;
}

/* ===== الزر العصري المتحرك الجديد (option12, option13, option14) ===== */

/* الكلاس الأساسي للزر العصري المتحرك */
.btn-modern-animated {
  display: block;
  width: 62% !important;
  padding: 16px 32px;
  border: none;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 700;
  font-family: "Cairo", sans-serif !important;
  text-align: center;
  text-decoration: none;
  color: #ffffff !important;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

  /* أنيميشن حركة يمين-يسار دائم */
  animation: slideLeftRight 3s ease-in-out infinite;
}

/* أنيميشن الحركة اليمين-يسار */
@keyframes slideLeftRight {

  0%,
  100% {
    transform: translateX(0px);
  }

  25% {
    transform: translateX(3px);
  }

  50% {
    transform: translateX(0px);
  }

  75% {
    transform: translateX(-3px);
  }
}

/* تأثير hover للزر العصري */
.btn-modern-animated:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  animation: slideLeftRight 1.5s ease-in-out infinite;
  /* تسريع الحركة عند hover */
}

/* تأثير active للزر العصري */
.btn-modern-animated:active {
  transform: translateY(0px) scale(0.98);
}

/* العنصر 12 - خطوط متقطعة عصرية */
.btn-modern-animated.btn-pattern-lines {
  background-image: url("data:image/svg+xml,%3Csvg width=\'100\' height=\'100\' viewBox=\'0 0 100 100\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z\' fill=\'%23ffffff\' fill-opacity=\'0.3\' fill-rule=\'evenodd\'/%3E%3C/svg%3E") !important;

}

/* العنصر 13 - دوائر متداخلة عصرية */
.btn-modern-animated.btn-pattern-circles {
  /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1' stroke-opacity='0.3'%3E%3Ccircle cx='30' cy='30' r='25'/%3E%3Ccircle cx='30' cy='30' r='15'/%3E%3Ccircle cx='30' cy='30' r='8'/%3E%3Ccircle cx='15' cy='15' r='5'/%3E%3Ccircle cx='45' cy='45' r='5'/%3E%3C/g%3E%3C/svg%3E") !important;
    background-size: 60px 60px !important;*/
  background-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'60\' height=\'60\' viewBox=\'0 0 60 60\'%3E%3Cg fill=\'none\' stroke=\'%23ffffff\' stroke-width=\'1\' stroke-opacity=\'0.3\'%3E%3Cpath d=\'M0,30 Q15,0 30,30 T60,30 M0,40 Q15,10 30,40 T60,40 M0,20 Q15,-10 30,20 T60,20\'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: 60px 60px !important;
  /*24 65 */
}

/* العنصر 14 - أشكال متموجة أنيقة */
.btn-modern-animated.btn-pattern-curves {
  background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.3'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: 52px 26px !important;
}

/* العنصر 15 - نجوم اغلاق متقدمة */
.btn-modern-animated.btn-pattern-stars-advanced {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.3'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: 40px 40px !important;


}

/* العنصر 16 - شبكة هندسية معقدة */
.btn-modern-animated.btn-pattern-grid-complex {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 304 304' width='304' height='304'%3E%3Cpath fill='%239C92AC' fill-opacity='0.4' d='M44.1 224a5 5 0 1 1 0 2H0v-2h44.1zm160 48a5 5 0 1 1 0 2H82v-2h122.1zm57.8-46a5 5 0 1 1 0-2H304v2h-42.1zm0 16a5 5 0 1 1 0-2H304v2h-42.1zm6.2-114a5 5 0 1 1 0 2h-86.2a5 5 0 1 1 0-2h86.2zm-256-48a5 5 0 1 1 0 2H0v-2h12.1zm185.8 34a5 5 0 1 1 0-2h86.2a5 5 0 1 1 0 2h-86.2zM258 12.1a5 5 0 1 1-2 0V0h2v12.1zm-64 208a5 5 0 1 1-2 0v-54.2a5 5 0 1 1 2 0v54.2zm48-198.2V80h62v2h-64V21.9a5 5 0 1 1 2 0zm16 16V64h46v2h-48V37.9a5 5 0 1 1 2 0zm-128 96V208h16v12.1a5 5 0 1 1-2 0V210h-16v-76.1a5 5 0 1 1 2 0zm-5.9-21.9a5 5 0 1 1 0 2H114v48H85.9a5 5 0 1 1 0-2H112v-48h12.1zm-6.2 130a5 5 0 1 1 0-2H176v-74.1a5 5 0 1 1 2 0V242h-60.1zm-16-64a5 5 0 1 1 0-2H114v48h10.1a5 5 0 1 1 0 2H112v-48h-10.1zM66 284.1a5 5 0 1 1-2 0V274H50v30h-2v-32h18v12.1zM236.1 176a5 5 0 1 1 0 2H226v94h48v32h-2v-30h-48v-98h12.1zm25.8-30a5 5 0 1 1 0-2H274v44.1a5 5 0 1 1-2 0V146h-10.1zm-64 96a5 5 0 1 1 0-2H208v-80h16v-14h-42.1a5 5 0 1 1 0-2H226v18h-16v80h-12.1zm86.2-210a5 5 0 1 1 0 2H272V0h2v32h10.1zM98 101.9V146H53.9a5 5 0 1 1 0-2H96v-42.1a5 5 0 1 1 2 0zM53.9 34a5 5 0 1 1 0-2H80V0h2v34H53.9zm60.1 3.9V66H82v64H69.9a5 5 0 1 1 0-2H80V64h32V37.9a5 5 0 1 1 2 0zM101.9 82a5 5 0 1 1 0-2H128V37.9a5 5 0 1 1 2 0V82h-28.1zm16-64a5 5 0 1 1 0-2H146v44.1a5 5 0 1 1-2 0V18h-26.1zm102.2 270a5 5 0 1 1 0 2H98v14h-2v-16h124.1zM242 149.9V160h16v34h-16v62h48v48h-2v-46h-48v-66h16v-30h-16v-12.1a5 5 0 1 1 2 0zM53.9 18a5 5 0 1 1 0-2H64V2H48V0h18v18H53.9zm112 32a5 5 0 1 1 0-2H192V0h50v2h-48v48h-28.1zm-48-48a5 5 0 0 1-9.8-2h2.07a3 3 0 1 0 5.66 0H178v34h-18V21.9a5 5 0 1 1 2 0V32h14V2h-58.1zm0 96a5 5 0 1 1 0-2H137l32-32h39V21.9a5 5 0 1 1 2 0V66h-40.17l-32 32H117.9zm28.1 90.1a5 5 0 1 1-2 0v-76.51L175.59 80H224V21.9a5 5 0 1 1 2 0V82h-49.59L146 112.41v75.69zm16 32a5 5 0 1 1-2 0v-99.51L184.59 96H300.1a5 5 0 0 1 3.9-3.9v2.07a3 3 0 0 0 0 5.66v2.07a5 5 0 0 1-3.9-3.9H185.41L162 121.41v98.69zm-144-64a5 5 0 1 1-2 0v-3.51l48-48V48h32V0h2v50H66v55.41l-48 48v2.69zM50 53.9v43.51l-48 48V208h26.1a5 5 0 1 1 0 2H0v-65.41l48-48V53.9a5 5 0 1 1 2 0zm-16 16V89.41l-34 34v-2.82l32-32V69.9a5 5 0 1 1 2 0zM12.1 32a5 5 0 1 1 0 2H9.41L0 43.41V40.6L8.59 32h3.51zm265.8 18a5 5 0 1 1 0-2h18.69l7.41-7.41v2.82L297.41 50H277.9zm-16 160a5 5 0 1 1 0-2H288v-71.41l16-16v2.82l-14 14V210h-28.1zm-208 32a5 5 0 1 1 0-2H64v-22.59L40.59 194H21.9a5 5 0 1 1 0-2H41.41L66 216.59V242H53.9zm150.2 14a5 5 0 1 1 0 2H96v-56.6L56.6 162H37.9a5 5 0 1 1 0-2h19.5L98 200.6V256h106.1zm-150.2 2a5 5 0 1 1 0-2H80v-46.59L48.59 178H21.9a5 5 0 1 1 0-2H49.41L82 208.59V258H53.9zM34 39.8v1.61L9.41 66H0v-2h8.59L32 40.59V0h2v39.8zM2 300.1a5 5 0 0 1 3.9 3.9H3.83A3 3 0 0 0 0 302.17V256h18v48h-2v-46H2v42.1zM34 241v63h-2v-62H0v-2h34v1zM17 18H0v-2h16V0h2v18h-1zm273-2h14v2h-16V0h2v16zm-32 273v15h-2v-14h-14v14h-2v-16h18v1zM0 92.1A5.02 5.02 0 0 1 6 97a5 5 0 0 1-6 4.9v-2.07a3 3 0 1 0 0-5.66V92.1zM80 272h2v32h-2v-32zm37.9 32h-2.07a3 3 0 0 0-5.66 0h-2.07a5 5 0 0 1 9.8 0zM5.9 0A5.02 5.02 0 0 1 0 5.9V3.83A3 3 0 0 0 3.83 0H5.9zm294.2 0h2.07A3 3 0 0 0 304 3.83V5.9a5 5 0 0 1-3.9-5.9zm3.9 300.1v2.07a3 3 0 0 0-1.83 1.83h-2.07a5 5 0 0 1 3.9-3.9zM97 100a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-48 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 96a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-144a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM49 36a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM33 68a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 240a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm80-176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm112 176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 180a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 84a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'%3E%3C/path%3E%3C/svg%3E") !important;
  background-size: 304px 304px !important;


}

/* العنصر 17 - أوراق شجر   */
.btn-modern-animated.btn-pattern-waves-triple {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 80 40\' width=\'80\' height=\'40\'%3E%3Cpath fill=\'%23ffffff\' fill-opacity=\'0.48\' d=\'M0 40a19.96 19.96 0 0 1 5.9-14.11 20.17 20.17 0 0 1 19.44-5.2A20 20 0 0 1 20.2 40H0zM65.32.75A20.02 20.02 0 0 1 40.8 25.26 20.02 20.02 0 0 1 65.32.76zM.07 0h20.1l-.08.07A20.02 20.02 0 0 1 .75 5.25 20.08 20.08 0 0 1 .07 0zm1.94 40h2.53l4.26-4.24v-9.78A17.96 17.96 0 0 0 2 40zm5.38 0h9.8a17.98 17.98 0 0 0 6.67-16.42L7.4 40zm3.43-15.42v9.17l11.62-11.59c-3.97-.5-8.08.3-11.62 2.42zm32.86-.78A18 18 0 0 0 63.85 3.63L43.68 23.8zm7.2-19.17v9.15L62.43 2.22c-3.96-.5-8.05.3-11.57 2.4zm-3.49 2.72c-4.1 4.1-5.81 9.69-5.13 15.03l6.61-6.6V6.02c-.51.41-1 .85-1.48 1.33zM17.18 0H7.42L3.64 3.78A18 18 0 0 0 17.18 0zM2.08 0c-.01.8.04 1.58.14 2.37L4.59 0H2.07z\'%3E%3C/path%3E%3C/svg%3E") !important;
  background-size: 80px 40px !important;
}

/* ===== العناصر الجديدة (18, 19, 20, 21) ===== */

/* العنصر 18 - زجاج متعرج على الزر الافتراضي */
.btn-default.btn-pattern-zigzag {
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%) !important;
  background-size: 12px 12px !important;
}

/* العنصر 19 - شبكة عنكبوتية على الزر الافتراضي */
.btn-default.btn-pattern-spider-web {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px) !important;
  background-size: 15px 15px !important;
}

/* العنصر 20 - زجاج متعرج على الزر العصري */
.btn-modern-animated.btn-pattern-zigzag-modern {
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%) !important;
  background-size: 12px 12px !important;
}

/* العنصر 21 - شبكة عنكبوتية على الزر العصري */
.btn-modern-animated.btn-pattern-spider-web-modern {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px) !important;
  background-size: 15px 15px !important;
}

/* =========================================================
   Charov Custom Badges Styles
   تصميم البادجات المخصصة (أفضل عرض)
   ========================================================= */

/* الحاوية الرئيسية للبادج */
.charov-badge-container {
  display: inline-block !important;
  margin-right: 10px !important;
  vertical-align: middle !important;
  z-index: 10 !important;
}

/* التنسيق الأساسي للبادج */
.charov-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  font-size: 14px !important;
  font-weight: bold !important;
  font-family: 'Cairo Charov Bold', sans-serif !important;
  line-height: 1 !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.3s ease !important;
  animation: charovPopIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* حركة ظهور البادج */
@keyframes charovPopIn {
  from {
    opacity: 0;
    transform: scale(0.5) translateY(10px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* 1. تصميم العروض (أحمر) - Style Offers */
.charov-badge.style_offers {
  background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* 2. تصميم المناسبات (ذهبي) - Style Occasions */
.charov-badge.style_occasions {
  background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%) !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

/* 3. تصميم عام (أزرق) - Style General */
.charov-badge.style_general {
  background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* تأثير عند المرور */
.charov-badge:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2) !important;
}

/* تنسيق خاص للبادج داخل صفحة المنتج */
.single_variation_wrap .charov-badge-container {
  margin-bottom: 12px !important;
  display: block !important;
}

/* تحسين الظهور على الموبايل */
@media (max-width: 600px) {
  .charov-badge {
    font-size: 13px !important;
    padding: 5px 12px !important;
  }
}

/* =========================================================
   Charov Mini Badges for Options (Pre-selection)
   البادجات المصغرة التي تظهر فوق الخيارات قبل الاختيار
   ========================================================= */

/* استراتيجية البادج العائم: مظهر احترافي ومستقر (مثل المواقع العالمية) */
.variations_form .variable-item,
.variations_form .viwc-item,
.variations_form .swatch-wrapper,
.variations_form .woo-variation-items-wrapper>div,
.variations_form .tm-extra-product-options-checkbox {
  padding-top: 14px !important;
  /* مساحة داخلية رشيقة */
  position: relative !important;
  box-sizing: border-box !important;
  vertical-align: top !important;
  overflow: visible !important;
  /* السماح للبادج بالبروز للأعلى (Floating Effect) */
  transition: all 0.3s ease !important;
}

/* إضافة نبض (Throb) بسيط وعصري للعناصر المميزة فقط */
.charov-best-offer-item {
  animation: charovPulseElegant 1.5s infinite ease-in-out !important;
  will-change: transform, box-shadow !important;
  backface-visibility: hidden !important;
}

/* حماية حاوية المتغيرات مع السماح بالبروز الداخلي الآمن */
.variations_form .variable-items-wrapper,
.variations_form .radio-variable-items-wrapper,
.variations_form .woo-variation-items-wrapper {
  overflow: visible !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* حماية شاملة لصفحة الجوال من أي إزاحة عرضية */
body,
html {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

@keyframes charovPulseElegant {
  0% {
    transform: scale(1);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  }

  50% {
    transform: scale(1.012);
    /* نبض خفيف جداً للحفاظ على استقرار الجوال */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  }
}

.charov-mini-badge {
  position: absolute !important;
  top: -16px !important;
  /* البادج الآن يطفو بمسافة أكبر قليلاً لمظهر أكثر احترافية */
  font-size: 11px !important;
  padding: 4px 9px !important;
  /* زيادة الحشو لجعله أبرز وأكثر توازناً */
  border-radius: 13px !important;
  /* حواف عصرية ناعمة */
  color: white !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  z-index: 50 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  pointer-events: none !important;
  font-family: 'Cairo Charov Bold', sans-serif !important;
  line-height: normal !important;
  animation: charovPulseElegant 1.5s infinite ease-in-out !important;
  /* سرعة 1.5 ثانية كما طلب المستخدم */
}

/* تحديد المواضع بدقة (داخل حدود الشاشة لمنع التكرار والإزاحة) */
.charov-badge-right {
  right: 0 !important;
  left: auto !important;
}

.charov-badge-left {
  left: 0 !important;
  right: auto !important;
}

.charov-mini-badge.style_offers {
  background: linear-gradient(135deg, #ff416c, #ff4b2b) !important;
}

.charov-mini-badge.style_occasions {
  background: linear-gradient(157deg, #f7971e, #ffd200) !important;
  color: #000000 !important;
  /* تحويل النص للأسود ليتناسق مع الذهبي */
}

/* ستايل عام (أزرق) - منفصل الآن عن الشحن المجاني */
.charov-mini-badge.style_general {
  background: linear-gradient(135deg, #00c6ff, #0072ff) !important;
}

/* ستايل ثابت للشحن المجاني (أخضر) */
.charov-mini-badge.style_free_shipping {
  background: linear-gradient(135deg, #158d64, #11df47) !important;
}

/* --- تصميمات الربونات الاحترافية الجديدة (نمط 4 إلى 8) --- */

/* 4. ريبون مقوس (Pattern 4) */
.charov-mini-badge.style_ribbon_vibrant {
  --c: #8e44ad;
  /* لون بنفسجي ملكي أنيق */
  --r: .6em;
  --a: 60deg;
  --d: .4em;
  padding-inline: .6em;
  line-height: 1.6;
  background: var(--c) !important;
  width: fit-content !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 auto !important;
  top: -12px !important;
  font-size: 10px !important;
  white-space: nowrap;
  color: #fff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.charov-mini-badge.style_ribbon_vibrant:before,
.charov-mini-badge.style_ribbon_vibrant:after {
  content: "" !important;
  position: absolute !important;
  width: calc(1.6em + var(--d)) !important;
  height: calc(2.4em + var(--r)) !important;
  top: 0 !important;
  border: solid var(--c) !important;
  box-sizing: border-box !important;
  display: block !important;
}

.charov-mini-badge.style_ribbon_vibrant:before {
  left: 98% !important;
  border-width: 1.6em 1.6em 0 0 !important;
  border-radius: 0 999px 0 0 !important;
  clip-path: polygon(calc(999px*cos(var(--a))) calc(1.6em + var(--d) - 999px*sin(var(--a))), 999px 100%, 100% 100%, calc(50% + var(--d)/2) calc(100% - var(--r)), var(--d) 100%, 0 100%, 0 calc(1.6em + var(--d))) !important;
  transform-origin: 0 calc(1.6em + var(--d)) !important;
  rotate: calc(var(--a) - 90deg) !important;
}

.charov-mini-badge.style_ribbon_vibrant:after {
  right: 98% !important;
  border-width: 1.6em 0 0 1.6em !important;
  border-radius: 999px 0 0 0 !important;
  clip-path: polygon(calc(100% - 999px*cos(var(--a))) calc(1.6em + var(--d) - 999px*sin(var(--a))), -999px 100%, 0 100%, calc(50% - var(--d)/2) calc(100% - var(--r)), calc(100% - var(--d)) 100%, 100% 100%, 100% calc(1.6em + var(--d))) !important;
  transform-origin: 100% calc(1.6em + var(--d)) !important;
  rotate: calc(90deg - var(--a)) !important;
}

/* 5. ريبون كلاسيكي مقوس (Pattern 5) */
.charov-mini-badge.style_ribbon_classic {
  --c: #F07818;
  --r: .6em;
  --a: 60deg;
  --d: .4em;
  padding-inline: .6em;
  line-height: 1.6;
  background: var(--c) !important;
  width: fit-content !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 auto !important;
  top: -12px !important;
  font-size: 10px !important;
  white-space: nowrap;
  color: #fff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.charov-mini-badge.style_ribbon_classic:before,
.charov-mini-badge.style_ribbon_classic:after {
  content: "" !important;
  position: absolute !important;
  width: calc(1.6em + var(--d)) !important;
  height: calc(2.4em + var(--r)) !important;
  border: solid var(--c) !important;
  box-sizing: border-box !important;
  display: block !important;
}

.charov-mini-badge.style_ribbon_classic:before {
  left: 98% !important;
  bottom: 0 !important;
  border-width: 0 1.6em 1.6em 0 !important;
  border-radius: 0 0 999px 0 !important;
  clip-path: polygon(calc(999px*cos(var(--a))) calc(100% - 1.6em - var(--d) + 999px*sin(var(--a))), 999px 0, 100% 0, calc(50% + var(--d)/2) var(--r), var(--d) 0, 0 0, 0 calc(100% - 1.6em - var(--d))) !important;
  transform-origin: 0 calc(100% - 1.6em - var(--d)) !important;
  rotate: calc(90deg - var(--a)) !important;
}

.charov-mini-badge.style_ribbon_classic:after {
  right: 98% !important;
  top: 0 !important;
  border-width: 1.6em 0 0 1.6em !important;
  border-radius: 999px 0 0 0 !important;
  clip-path: polygon(calc(100% - 999px*cos(var(--a))) calc(1.6em + var(--d) - 999px*sin(var(--a))), -999px 100%, 0 100%, calc(50% - var(--d)/2) calc(100% - var(--r)), calc(100% - var(--d)) 100%, 100% 100%, 100% calc(1.6em + var(--d))) !important;
  transform-origin: 100% calc(1.6em + var(--d)) !important;
  rotate: calc(90deg - var(--a)) !important;
}

/* 6. تصميم "ريبون الرقي" (Pattern 6) - اقتراح عصري وأنيق (أسود) */
.charov-mini-badge.style_badge_6 {
  background: #000 !important;
  background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%) !important;
  padding: 4px 22px !important;
  border-radius: 3px !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 auto !important;
  width: max-content !important;
  top: -15px !important;
  font-size: 10px !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
  border-bottom: 2px solid #444 !important;
  /* لمسة معدنية أسفل البادج */
  z-index: 10 !important;
}

.charov-mini-badge.style_badge_6:before,
.charov-mini-badge.style_badge_6:after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  width: 12px !important;
  height: 100% !important;
  background: #111 !important;
  top: 4px !important;
  z-index: -1 !important;
}

.charov-mini-badge.style_badge_6:before {
  left: -8px !important;
  clip-path: polygon(100% 0, 0 50%, 100% 100%) !important;
}

.charov-mini-badge.style_badge_6:after {
  right: -8px !important;
  clip-path: polygon(0 0, 100% 50%, 0 100%) !important;
}

/* 7. تصميم علامة (Pattern 7) */
.charov-mini-badge.style_badge_7 {
  --r: .6em;
  border-inline: .4em solid #0000 !important;
  padding: .4em .3em calc(var(--r) + .3em) !important;
  clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - .4em) 100%, 50% calc(100% - var(--r)), .4em 100%, 0 100%) !important;
  background: radial-gradient(50% .2em at top, #000a, #0000) border-box, #2699dc padding-box !important;
  width: fit-content !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 auto !important;
  top: -20px !important;
  font-size: 10px !important;
  color: #fff !important;
  border-radius: 0 !important;
}

/* 8. تصميم "البطاقة المشطوفة" (Pattern 8) - أسود */
.charov-mini-badge.style_badge_8 {
  --r: .8em;
  border-block: .4em solid #0000 !important;
  padding-inline: calc(var(--r) + .25em) .5em !important;
  line-height: 1.8;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 calc(100% - .25em), var(--r) 50%, 0 .25em) !important;
  background: radial-gradient(.2em 50% at right, #000a, #0000) border-box, #000 padding-box !important;
  /* خلفية سوداء */
  width: fit-content !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 auto !important;
  top: -15px !important;
  font-size: 10px !important;
  color: #fff !important;
  border-radius: 0 !important;
}

.charov-mini-badge.style_badge_8:before,
.charov-mini-badge.style_badge_8:after {
  display: none !important;
}

/* --- Custom Loop Badge (Bottom Center) --- */
.charov-custom-loop-badge-wrapper {
  position: absolute !important;
  bottom: 12px !important;
  /* نضعه في الأسفل مع مسافة بسيطة عن الحافة */
  top: auto !important;
  /* إلغاء أي توسيط عمودي تلقائي */
  left: 0 !important;
  right: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-end !important;
  z-index: 50 !important;
  /* التأكد من ظهوره فوق كل شيء */
  pointer-events: none !important;
  padding-bottom: 0 !important;
  width: 100% !important;
}


.charov-custom-loop-badge,
.charov-v2-badge-span {
  background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
  color: #ffffff !important;
  padding: 6px 16px !important;
  border-radius: 30px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  font-family: "Cairo", sans-serif !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35) !important;
  white-space: nowrap !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  text-transform: none !important;
  letter-spacing: 0px !important;
  line-height: 1 !important;
  animation: charov-pulse-badge 2s infinite;
  display: inline-block !important;
  /* التأكد من ظهوره كعنصر */
}


@keyframes charov-pulse-badge {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

/* Ensure containers are relative */
.products .product,
.bricks-layout-item,
.product-item {
  position: relative !important;
}