/* ===== Iqraa Header — Utility Bar (Above Header) ===== */
/* Root-cause fix: Astra's inner ".ast-above-header-bar" ships a default
   white background that sits directly on top of ".ast-above-header-wrap"
   and was hiding our navy bar + white text. Target both. */
.ast-above-header-wrap,
.ast-above-header-bar {
  background-color: #082D59 !important;
}
.ast-above-header-bar {
  padding-top: 7px !important;
  padding-bottom: 7px !important;
  min-height: unset !important;
}
.iqraa-utility-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.iqraa-utility-left a {
  color: #FFFFFF;
  font-size: 12.5px;
  text-decoration: none;
  white-space: nowrap;
}
.iqraa-utility-left a:hover {
  color: #D9A62E;
}
.iqraa-sep {
  color: rgba(255,255,255,0.35);
  margin: 0 10px;
  font-size: 12px;
}
.iqraa-lang-switch {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.iqraa-lang-switch a {
  color: #F8F4EB;
  font-size: 12.5px;
  text-decoration: none;
  white-space: nowrap;
}
.iqraa-lang-switch a.iqraa-lang-active {
  color: #D9A62E;
  font-weight: 700;
}
.iqraa-lang-switch a:hover {
  color: #D9A62E;
}

/* ===== Iqraa Header — Main Header (Primary) — compact + vertically centered ===== */
.ast-primary-header-bar {
  background-color: #FFFFFF;
}
.site-primary-header-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
.site-header-primary-section-left {
  flex: 0 0 auto !important;
}
.site-header-primary-section-center {
  flex: 1 1 auto !important;
  max-width: none !important;
  width: auto !important;
  padding: 0 28px !important;
}
.site-header-primary-section-right {
  flex: 0 0 auto !important;
}
/* Real fix: Astra's primary header positions left/center/right via a
   nested CSS Grid row (".ast-builder-grid-row-has-sides"), not the outer
   wrap. Override its column tracks so center absorbs all extra space —
   this is what actually makes the search bar dominant. */
.ast-primary-header-bar .ast-builder-grid-row-has-sides {
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  width: 100% !important;
  display: grid !important;
}
.ast-site-identity {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Logo size now controlled natively via Customizer > Logo Width (140px desktop). */

/* Prominent, dominant product search */
.header-widget-area {
  width: 100%;
}
.header-widget-area .wp-block-search {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
}
.header-widget-area .wp-block-search__inside-wrapper {
  border: 2px solid #154734;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.header-widget-area .wp-block-search__input {
  border: none;
  padding: 12px 16px 12px 38px;
  font-size: 15px;
  background: #F8F4EB;
  color: #082D59;
  width: 100%;
}
.header-widget-area .wp-block-search__input:focus {
  outline: none;
  background: #FFFFFF;
}
.header-widget-area .wp-block-search__inside-wrapper::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 50%;
  width: 15px;
  height: 15px;
  transform: translateY(-50%);
  background-color: #154734;
  opacity: 0.55;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'><path d='M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'><path d='M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z'/></svg>"&quot;) no-repeat center / contain;
  pointer-events: none;
}
.header-widget-area .wp-block-search__button {
  background-color: #154734 !important;
  color: #FFFFFF !important;
  border: none;
  padding: 12px 24px;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 0;
  cursor: pointer;
}
.header-widget-area .wp-block-search__button:hover {
  background-color: #D9A62E !important;
  color: #082D59 !important;
}

/* الحساب وعربة التسوق — أيقونة + تسمية نصية، باللون الكحلي مع لمسات ذهبية خفيفة */
.ast-header-account-wrap,
.ast-site-header-cart {
  display: flex;
  align-items: center;
}
.ast-header-account-link {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
.ast-header-account-link svg,
.ast-header-account-link svg path {
  fill: #082D59 !important;
}
.ast-header-account-link::after {
  content: &quot;الحساب&quot;;
  font-size: 13px;
  font-weight: 600;
  color: #082D59;
  white-space: nowrap;
}
.ast-header-account-link:hover svg,
.ast-header-account-link:hover svg path {
  fill: #D9A62E !important;
}
.ast-header-account-link:hover::after {
  color: #D9A62E;
}
.ast-site-header-cart .cart-container {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
.ast-site-header-cart .ast-addon-cart-wrap {
  position: relative;
  display: inline-flex;
}
.ast-site-header-cart svg,
.ast-site-header-cart svg path,
.ast-site-header-cart .astra-icon.ast-icon-shopping-bag,
.ast-site-header-cart .astra-icon.ast-icon-shopping-bag path {
  fill: #082D59 !important;
}
.ast-site-header-cart .cart-container::after {
  content: &quot;سلة التسوق&quot;;
  font-size: 13px;
  font-weight: 600;
  color: #082D59;
  white-space: nowrap;
}
.ast-site-header-cart:hover svg,
.ast-site-header-cart:hover svg path {
  fill: #D9A62E !important;
}
.ast-site-header-cart:hover .cart-container::after {
  color: #D9A62E;
}
.ast-site-header-cart .count,
.ast-site-header-cart-li .count {
  background-color: #D9A62E !important;
  color: #082D59 !important;
}
.ast-site-header-cart .ast-addon-cart-wrap {
  border-color: #082D59 !important;
}

/* ===== رأس Iqraa — أسفل الرأس: شريط تنقل أخضر بعرض كامل ===== */
/* يغطي غلاف الصف بالفعل عرض المتصفح بالكامل من الحافة إلى الحافة؛
   قم بطلائه باللون الأخضر هناك بحيث يمتد الشريط إلى أقصى الحدود، بينما تظل عناصر القائمة
   تظل داخل حاوية المحتوى العادية (علامات القائمة الضخمة دون تغيير). */
.ast-below-header-wrap,
.ast-below-header-bar {
  background-color: #154734 !important;
}
.ast-below-header-bar {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.main-header-menu.ast-nav-menu &gt; .menu-item &gt; a {
  color: #FFFFFF;
}
.main-header-menu.ast-nav-menu &gt; .menu-item &gt; a:hover,
.main-header-menu.ast-nav-menu &gt; .menu-item &gt; a:focus,
.main-header-menu.ast-nav-menu &gt; .menu-item.current-menu-item &gt; a {
  color: #D9A62E !important;
}
.main-header-menu.ast-nav-menu &gt; .menu-item &gt; a:focus-visible {
  outline: 2px solid #D9A62E;
  outline-offset: 2px;
}

/* ===== الاستعداد لـ RTL لعناصر رأس Iqraa المخصصة ===== */
[dir=&quot;rtl&quot;] .iqraa-utility-left,
[dir=&quot;rtl&quot;] .iqraa-lang-switch {
  flex-direction: row-reverse;
}
[dir=&quot;rtl&quot;] .header-widget-area .wp-block-search__inside-wrapper {
  flex-direction: row-reverse;
}
[dir=&quot;rtl&quot;] .header-widget-area .wp-block-search__input {
  text-align: right;
  padding: 12px 38px 12px 16px;
}
[dir=&quot;rtl&quot;] .header-widget-area .wp-block-search__inside-wrapper::before {
  left: auto;
  right: 13px;
}
[dir=&quot;rtl&quot;] .ast-header-account-link,
[dir=&quot;rtl&quot;] .ast-site-header-cart .cart-container {
  flex-direction: row-reverse;
}

/* ===== التجاوب مع الأجهزة المختلفة ===== */
@media (max-width: 768px) {
  .header-widget-area .wp-block-search {
    max-width: 100%;
  }
  .iqraa-utility-left,
  .iqraa-lang-switch {
    justify-content: center;
    font-size: 12px;
  }
  .site-primary-header-wrap {
    flex-wrap: wrap;
  }
}


/* ===== لوحة ألوان "إقرا" العالمية — تنظيف الألوان الزرقاء الافتراضية المتبقية في WP/WooCommerce ===== */
/* زر التمرير "العودة إلى الأعلى" */
#ast-scroll-top {
  background-color: #154734 !important;
}
#ast-scroll-top:hover {
  background-color: #D9A62E !important;
}
/* أيقونة صغيرة للإجراءات السريعة على البطاقة (تظهر عند تمرير الماوس فوق الصور المصغرة للمنتجات) */
.ast-on-card-button {
  color: #154734 !important;
}
.ast-on-card-button:hover {
  color: #D9A62E !important;
}

/* ===== تحسينات صفحة المتجر / الكتالوج (شبكة أرشيف المنتجات، البطاقات، الحالات الفارغة) ===== */
.woocommerce ul.products {
      display: grid !important;
	  grid-template-columns: repeat(4, 1fr);
      gap: 26px;
}
.woocommerce ul.products li.product {
      float: none !important;
      width: auto !important;
	  margin: 0 !important;
      padding: 0 !important;
      display: flex;
      flex-direction: column;
      background: #fff;
      border: 1px solid #E4DFD1;
	  border-radius: 12px;
      overflow: hidden;
      transition: box-shadow .2s ease, transform .2s ease;
}
.woocommerce ul.products li.product:hover {
	  box-shadow: 0 10px 24px rgba(11,34,58,.10);
      transform: translateY(-3px);
}
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap {
	  display: block;
      position: relative;
      aspect-ratio: 1 / 1;
      background: #F5F4EF;
      overflow: hidden;
}
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img {
      width: 100%;
      height: 100%;
	  تناسب العنصر: contain;
      تباعد داخلي: 18px;
}
.woocommerce ul.products li.product .astra-shop-summary-wrap {
      عرض: مرن;
      اتجاه المرونة: عمودي;
	  flex: 1;
      padding: 18px 20px 20px;
}
.woocommerce ul.products li.product .ast-woo-product-category {
      font-size: 11px;
      letter-spacing: .06em;
	  text-transform: uppercase;
      font-weight: 700;
      margin-bottom: 6px;
}
.woocommerce ul.products li.product .ast-loop-product__link {
      font-size: 16px;
	  ارتفاع السطر: 1.4;
      سمك الخط: 700;
      اللون: #0B223A;
      الهامش السفلي: 10px;
      العرض: كتلة;
	  الارتفاع الأدنى: 44px;
}
.woocommerce ul.products li.product .price {
      اللون: #154734;
      سمك الخط: 700;
      الهامش: 0 0 12px;
	  order: 2;
}
.woocommerce ul.products li.product &gt; .astra-shop-summary-wrap &gt; a.button,
.woocommerce ul.products li.product .astra-shop-summary-wrap .added_to_cart {
      margin-top: auto;
	  align-self: flex-start;
      background: #154734 !important;
      color: #fff !important;
      border-radius: 8px;
      padding: 10px 18px;
	  font-weight: 600;
      border: none;
}
.woocommerce ul.products li.product &gt; .astra-shop-summary-wrap &gt; a.button:hover {
      background: #0F3526 !important;
}
/* إشعارات WooCommerce العامة (لم يتم العثور على منتجات، نتائج البحث، عوامل التصفية) */
.woocommerce-info,
.woocommerce-message,
.woocommerce &gt; p.woocommerce-info {
      background: #F6F4EE;
	  border: 1px solid #E4DFD1;
      border-top: 3px solid #154734;
      color: #0B223A;
      border-radius: 10px;
	  padding: 20px 22px;
      font-size: 15px;
      list-style: none;
}
.woocommerce-info::before {
      color: #154734;
}
/* زر دعوة للعمل (CTA) خاص بالفئة الفارغة/البحث الفارغ يتماشى مع العلامة التجارية (وصف المصطلح + لوحة المتجر التي تظهر بواسطة JS) */
.term-description,
.iqraa-empty-cta {
      background: #F6F4EE;
	  border: 1px solid #E4DFD1;
      border-radius: 10px;
      padding: 18px 22px;
      color: #3B4450;
	  margin: 4px 0 22px;
      font-size: 15px;
	  ارتفاع السطر: 1.6;
}
.term-description a,
.iqraa-empty-cta a {
      اللون: #154734;
      سمك الخط: 700;
	  تزيين النص: تسطير;
      إزاحة تسطير النص: 3px;
}
.term-description a:hover,
.iqraa-empty-cta a:hover {
      اللون: #8F6714;
}
@media (max-width: 900px) {
    .woocommerce ul.products {
            grid-template-columns: repeat(3, 1fr) !important;
	}
}
@media (max-width: 600px) {
    .woocommerce ul.products {
            grid-template-columns: repeat(2, 1fr) !important;
		    gap: 16px;
    }
    .woocommerce ul.products li.product .astra-shop-summary-wrap {
            padding: 14px 14px 16px;
	}
}

/* ===== تصحيح Iqraa Mobile -- أداة تبديل اللغة العائمة من TranslatePress (البند 5) =====
   السبب الجذري: nav.trp-language-switcher.trp-floating-switcher له وضع: ثابت
   في أسفل اليمين. يبلغ عرض زر الحالة المغلقة (العلم + تسمية النص &quot;English&quot;)
   حوالي 117px، وهو ما يناسب أجهزة سطح المكتب ولكنه يتداخل مع الأسطر الأخيرة من
   نص وصف المنتج في نوافذ العرض الضيقة/على الأجهزة المحمولة، نظرًا لأن الأداة
   تظل ثابتة على الشاشة بينما يتم تمرير الصفحة أسفلها.
   الحل (لعرض الهواتف المحمولة فقط): تقليص زر "CLOSED" إلى دائرة صغيرة تحتوي على أيقونة فقط
   عن طريق إخفاء النص وتوسيط العلم -- وهذا يزيل
   مساحة التداخل بحوالي 60%. عندما ينقر الزائر عليه لفتحه، تعيد
   قواعد :has() أدناه التخطيط العادي المزود بمسافات بادئة وتسميات، بحيث
   تظل القائمة المنسدلة للغة تُعرض بحجم كامل وقابل للقراءة — ولا يتغير
   سلوك النقر وروابط اللغة نفسها على الإطلاق.
   لم يتم إجراء أي تغيير على سطح المكتب؛ ينطبق هذا فقط على &lt;=782px (نقطة التوقف الخاصة بـ WP
   للأجهزة المحمولة)، وهو ما يتطابق مع المكان الذي لوحظ فيه تداخل التقرير. */
@media (max-width: 782px) {
  nav.trp-language-switcher.trp-floating-switcher {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
  }
  nav.trp-language-switcher.trp-floating-switcher .trp-language-switcher-inner {
    height: 100%;
  }
  nav.trp-language-switcher.trp-floating-switcher .trp-language-item__current {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 !important;
  }
  nav.trp-language-switcher.trp-floating-switcher .trp-language-item__current .trp-language-item-name {
    display: none;
  }
  /* عند فتح القائمة المنسدلة: دع عنصر واجهة المستخدم يعود إلى حجمه الطبيعي حتى تصبح
     قائمة اللغات مرئية بالكامل وقابلة للنقر، بدلاً من أن تكون
     محصورة في الدائرة ذات الحجم 44px في حالة الإغلاق. */
  nav.trp-language-switcher.trp-floating-switcher:has(.trp-language-item__current[aria-expanded=&quot;true&quot;]) {
    width: var(--switcher-width, auto) !important;
    height: auto !important;
    border-radius: 8px 8px 0 0 !important;
  }
  nav.trp-language-switcher.trp-floating-switcher:has(.trp-language-item__current[aria-expanded=&quot;true&quot;]) .trp-language-switcher-inner {
    height: auto;
  }
  nav.trp-language-switcher.trp-floating-switcher:has(.trp-language-item__current[aria-expanded=&quot;true&quot;]) .trp-language-item__current {
    الارتفاع: تلقائي;
    padding: var(--switcher-padding, 10px) !important;
  }
  nav.trp-language-switcher.trp-floating-switcher:has(.trp-language-item__current[aria-expanded=&quot;true&quot;]) .trp-language-item__current .trp-language-item-name {
    display: inline;
  }
}


/* ===== تصحيح "إقرا" -- وضع حقل ISBN إضافي (البند 6) =====
   السبب الجذري: .summary.entry-summary عبارة عن صندوق مرن (flexbox) عمودي حيث يكون لكل عنصر تابع
   يحتوي على "ترتيب" صريح في CSS (breadcrumb=1، category=2، title=3،
   identity=4، quick-facts=5، price=6، sold-by=7، product_meta=10، ...)
   باستثناء .iqraa-additional-isbn، الذي لا يحتوي على قاعدة ترتيب وبالتالي يعود
   إلى الإعداد الافتراضي لـ flexbox (order:0). يتم فرز order:0 قبل order:1+، لذا فإن
   سطر ISBN يُعرض مجمّعًا مع العناصر الأخرى ذات order:0 (نموذج "إضافة إلى سلة التسوق"،
   أزرار الدفع عبر Apple/Google/Link) في أعلى العمود تمامًا — فوق
   مسار التنقل والعنوان — على كل من الأجهزة المحمولة وأجهزة سطح المكتب (تم التحقق من ذلك مباشرةً عند
   500px و1440px: الخطأ متطابق في كليهما، وليس على الأجهزة المحمولة فقط).
   الحل: تعيين الترتيب له بـ order:6، وربطه بـ .price بحيث يتم عرضه مباشرةً
   بعد السعر (فصل التعادل حسب الترتيب في المصدر) — بجوار الناشر/اللغة/
   نوع المورد والسعر، أي منطقة معلومات المنتج، وقبل
   "يباع بواسطة". لا حاجة إلى display:none للحالة الفارغة — فالقالب
   يحذف هذا العنصر div بالكامل بالفعل في حالة عدم وجود قيمة ISBN إضافية
   (تم التأكيد: غائب من DOM في المنتجات التي لا تحتوي على هذا الحقل). */
.summary.entry-summary &gt; .iqraa-additional-isbn {
  order: 6;
}


/* =====================================================================
 * إصلاح RTL/bidi - عناوين المنتجات باللغة العربية والمختلطة بين العربية والإنجليزية
 * الاتجاه الأساسي للموقع هو LTR، لكن العديد من عناوين المنتجات باللغة العربية البحتة
 * أو مختلطة بين العربية والإنجليزية. unicode-bidi: plaintext يجعل
 * محاذاة/اتجاه كل عنوان يتبع أول حرف قوي فيه، دون
 * تغيير الاتجاه الأساسي LTR على مستوى الموقع أو أي ترميز.
 * للعرض فقط - لا تغيير في القوالب أو الاستعلامات أو منطق الأعمال.
 * ===================================================================== */
h1.product_title.entry-title,
.woocommerce-loop-product__title,
.products .woocommerce-loop-product__title,
.single-product .product_title {
    unicode-bidi: plaintext !important;
}


/* =====================================================================
 * إصلاح تجاوز حدود رأس الصفحة على الأجهزة المحمولة
 * السبب الجذري: في نوافذ العرض الضيقة للهواتف، لا يتقلص صف رأس الصفحة (الشعار + سلة التسوق +
 * الحساب + قائمة الهامبرغر) استجابةً للحجم، لذا يتجاوز المحتوى المجمع
 * عرض نطاق عرض الجهاز ويؤدي إلى حدوث
 * تمرير أفقي فعلي للصفحة أو تجاوزها على الأجهزة المحمولة. تم التأكيد على ذلك من خلال تشخيص عرض الجهاز
 * (عرض نطاق التخطيط ~469px مقابل عرض الجهاز 375px في متجر Shop، وما إلى ذلك).
 * الحل: تقليص حجم الشعار وتقليص تباعد صف الأيقونات فقط عند &lt;=480px،
 * مما يعيد محتوى الرأس (header) بالكامل إلى داخل إطار العرض (viewport).
 * رأس صفحة سطح المكتب/الجهاز اللوحي لم يُمس (القاعدة محصورة في &lt;=480px).
 * ===================================================================== */
@media (max-width: 480px) {
    .ast-primary-header-bar { padding-left: 8px !important; padding-right: 8px !important; }
	.site-header-primary-section-center { padding-left: 2px !important; padding-right: 2px !important; }
	.site-header-primary-section-left img.custom-logo { max-width: 86px !important; width: 86px !important; height: auto !important; }
}