/*
Theme Name: Rawaa Glow
Description: Custom WooCommerce Theme - FIXED VERSION 1.6
Author: Hamza
Version: 1.6
*/

/* 1. استدعاء الخط العربي الأساسي للمتاجر */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');

/* 2. المتغيرات اللونية بدقة (الهوية البصرية) */
:root {
  --color-primary: #b71928;
  --color-secondary: #f5e6e9;
  --color-secondary: #f9d2de; /* تم التعديل للون الفاتح المطلوب  */
  --color-background: #ffffff;
  --font-main: 'Tajawal', sans-serif;
}

/* 3. تصفير العدادات الأساسية (السبب الرئيسي في الفراغات) */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-main);
  background-color: var(--color-background);
  direction: rtl; /* اتجاه عربي للمتجر */
  color: #333;
}

/* الهيكل الذكي */
.desktop-only {
  display: flex !important;
}
.mobile-only {
  display: none !important;
}

@media (max-width: 768px) {
  .desktop-only {
    display: none !important;
  }
  .mobile-only {
    display: flex !important;
  }
}

/* 4. حماية شاملة للروابط والأيقونات */
.site-header {
  background-color: var(--color-secondary) !important;
  padding: 10px 0;
  border-bottom-left-radius: 35px;
  border-bottom-right-radius: 35px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  position: sticky;
  top: 0;
  z-index: 1000; /* الحفاظ على الهيدر في الأعلى دائماً */
  margin-bottom: 0 !important;
}

/* إجبار لون الأيقونات على الأحمر الداكن */
.header-icon svg,
.bottom-icon:not(.whatsapp-mobile-icon) svg {
  color: var(--color-primary) !important;
  stroke: var(--color-primary) !important;
  fill: none; /* للأيقونات المفرغة */
  transition: transform 0.3s ease;
}

/* 5. تنسيقات الهيدر (STICKY & CURVED) */
.site-header {
  background-color: var(--color-secondary); /* خلفية زهرية */
  padding: 10px 0;
  /* الانحناء السفلي مثل موقع حرير */
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  position: sticky;
  top: 0;
  z-index: 1000;
  margin-bottom: 0 !important; /* إلغاء أي مسافة تحت الهيدر */
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px; /* العرض الحاكم لمحتوى الهيدر */
  margin: 0 auto;
  padding: 0 20px;
}

/* توزيع الهيدر (3 أقسام متساوية) */
.header-right,
.header-left,
.site-logo {
  flex: 1;
  display: flex;
  align-items: center;
}

.header-right {
  justify-content: flex-start;
  gap: 15px;
}
.header-left {
  justify-content: flex-end;
  gap: 15px;
}

/* ضبط اللوغو كحاكم للمقاس (حل مشكلة صورك) */
.site-logo {
  justify-content: center;
}
.site-logo img {
  max-height: 40px; /* تصغير اللوغو ليتناسب مع الهيدر */
  width: auto;
  display: block;
}

.menu-icon button {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}

/* 6. تنسيقات السلة */
/* --- 3. تصحيح مكان شارة السلة في اللابتوب --- */
/* --- إصلاح شامل لمشاكل السلة (لابتوب وموبايل) --- */

/* 1. تنظيف الروابط ومنع الخط الأزرق تحت السعر */
.cart-pill,
.cart-pill span,
.bottom-icon a {
  text-decoration: none !important;
  border: none !important;
  outline: none !important;
}

/* 2. حاوية السلة في اللابتوب */
.cart-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cart-pill {
  display: flex;
  align-items: center;
  background-color: var(--color-pink-light);
  padding: 6px 15px;
  border-radius: 30px;
  gap: 8px;
  position: relative; /* ضروري لتقييد الدائرة الحمراء */
}

/* 3. شارة الرقم (Badge) - تصميم موحد وقاتل للمشاكل */
.cart-badge {
  position: absolute !important;
  background-color: #ff0000 !important;
  color: #ffffff !important;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: bold;
  display: flex !important;
  justify-content: center;
  align-items: center;
  z-index: 10;
  border: 1.5px solid #fff; /* إطار أبيض بسيط ليبرز الدائرة */
}

/* --- ضبط مكان الدائرة في اللابتوب فقط --- */
@media (min-width: 769px) {
  .cart-badge {
    top: -8px;
    right: 12px; /* تم سحبها لتكون فوق أيقونة السلة مباشرة بعيداً عن السعر */
  }
}

/* --- ضبط مكان الدائرة في الموبايل فقط --- */
@media (max-width: 768px) {
  /* حاوية أيقونة السلة في الشريط السفلي */
  .cart-icon-wrapper {
    position: relative;
    display: inline-flex;
    padding: 5px;
  }

  .cart-badge {
    top: 0px; /* محاذاة دقيقة فوق سلة الموبايل */
    right: -2px; /* منعها من الهروب لخارج الشاشة */
  }

  /* إصلاح تباعد أيقونات الموبايل */
  .mobile-bottom-bar {
    padding: 10px 15px !important;
  }
}

/* 7. القسم الرئيسي (Hero Section) - الحل النهائي للابتوب والموبايل */
/* --- 2. حل مشكلة الفراغ الأبيض (Header Overlap) --- */
.main-hero {
  width: 100%;
  margin-top: -35px !important; /* سحب الصورة للأعلى لتختفي خلف انحناء الهيدر */
  position: relative;
  z-index: 1; /* لتكون تحت الهيدر مباشرة */
  line-height: 0;
}

.hero-image-full img {
  width: 100%;
  height: auto;
  display: block;
}

/* 8. شريط الموبايل السفلي الثابت */
.mobile-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--color-secondary); /* خلفية زهرية */
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 12px 0;
  z-index: 1001;
}

/* أيقونة الواتساب للموبايل (خضراء حقيقية وممتلئة) */
.whatsapp-mobile-icon svg {
  color: #25d366 !important;
  fill: #25d366 !important;
  stroke: none !important;
}

/* 9. زر واتساب العائم (للابتوب فقط) */
.whatsapp-floating-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: #25d366;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  transition: all 0.3s ease;
}

.whatsapp-floating-btn svg {
  fill: #ffffff !important;
  stroke: none !important;
}

.whatsapp-floating-btn:hover {
  transform: scale(1.1);
}

/* 10. تعديلات الجوال النهائية */
@media (max-width: 768px) {
  body {
    padding-bottom: 70px;
  } /* لتجنب تغطية المحتوى بالشريط السفلي */
  .whatsapp-floating-btn {
    display: none !important;
  }
  .header-container {
    padding: 0 15px;
  }
  .site-logo img {
    max-height: 35px;
  } /* تصغير اللوغو أكثر على الجوال */
  .header-right,
  .header-left {
    gap: 10px;
  }
}
/* --- إصلاح نهائي للون السعر في اللابتوب (منع اللون الأزرق) --- */

/* استهداف كلاس السعر الذي وضعناه + الكلاسات التي يولدها ووكومرس تلقائياً */
.cart-price,
.cart-price span,
.cart-pill .woocommerce-Price-amount,
.cart-pill bdi {
  color: var(--color-primary) !important; /* إجبار اللون الأحمر الداكن */
  text-decoration: none !important; /* إلغاء أي خط تحت السعر */
}

/* التأكد من أن الرابط الأب لا يعطي لوناً أزرق */
.cart-pill {
  color: var(--color-primary) !important;
}

/* في حال وجود خط أزرق عند تمرير الماوس */
.cart-pill:hover,
.cart-pill:hover span {
  color: var(--color-primary) !important;
  text-decoration: none !important;
}

/* --- تنسيقات الفوتر المتقدمة --- */
.site-footer {
  background-color: #fff;
  padding: 60px 0 110px; /* تباعد سفلي لشريط الموبايل */
  border-top: 1px solid #f9d2de;
  margin-top: 40px;
  font-family: var(--font-main);
}

.footer-container {
  max-width: 1250px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
}

.footer-section {
  flex: 1;
  min-width: 220px;
}

.footer-title {
  color: var(--color-primary);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 25px;
  text-align: center; /* يتوسط في الموبايل ويعدل في اللابتوب */
}

/* روابط مهمة */
.links-section ul {
  list-style: none;
  padding: 0;
  text-align: center;
}
.links-section ul li {
  margin-bottom: 12px;
}
.links-section ul li a {
  color: #d48b9d; /* لون زهري غامق للنصوص */
  font-size: 0.95rem;
  transition: 0.3s;
}
.links-section ul li a:hover {
  color: var(--color-primary);
}

/* تابعونا - الدوائر */
.social-circles {
  display: flex;
  justify-content: center;
  gap: 15px;
}
.social-item {
  width: 50px;
  height: 50px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #d48b9d;
  box-shadow: 0 4px 15px rgba(249, 210, 222, 0.5); /* ظل ناعم مطابق للصورة */
  transition: 0.3s;
}
.social-item:hover {
  transform: translateY(-3px);
  color: var(--color-primary);
}

/* طرق الدفع */
/* =========================================================
   تنسيق وتكبير أيقونات طرق الدفع في الفوتر
========================================================= */

/* =========================================================
   تنسيق وتكبير أيقونات طرق الدفع (النسخة المضاعفة)
========================================================= */

.payment-grid {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.pay-box {
  background-color: #fff;
  border: 1px solid #fef5f7;
  border-radius: 12px;
  /* مسحنا الفراغ الداخلي (Padding) بالكامل لنعطي مساحة أكبر للصورة */
  padding: 2px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(249, 210, 222, 0.4);
  /* كبرنا حجم الصندوق الأساسي قليلاً */
  width: 90px !important;
  height: 55px !important;
  transition: transform 0.3s ease;
  overflow: hidden; /* لمنع الصورة من الخروج عن حواف الصندوق إذا كبرت جداً */
}

.pay-box:hover {
  transform: translateY(-3px);
}

.pay-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  /* السحر هنا: عمل زوم (Zoom in) للشعار بنسبة 25% ليلغي الفراغ الشفاف */
  transform: scale(1.25) !important;
  filter: grayscale(0%);
}
/* التوثيق - بطاقات حرير الزهرية */
.auth-flex {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.auth-card-item {
  background-color: var(--color-pink-light); /* #f5e6e9 */
  border-radius: 20px;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: 0.3s;
}
.auth-text p {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
}
.auth-code {
  font-size: 0.75rem;
  color: #b71928;
  opacity: 0.7;
}
.auth-img {
  height: 35px;
  width: auto;
  object-fit: contain;
}

/* فوتر الحقوق السفلي */
.footer-bottom-copy {
  text-align: center;
  padding-top: 40px;
  border-top: 1px solid #fef5f7;
  margin-top: 40px;
  color: #d48b9d;
  font-size: 0.85rem;
}

/* --- تعديلات اللابتوب (Desktop Only) --- */
@media (min-width: 992px) {
  .footer-container {
    flex-direction: row-reverse;
  } /* ترتيب حرير */
  .footer-title {
    text-align: right;
  }
  .links-section ul {
    text-align: right;
  }
  .social-circles,
  .payment-grid {
    justify-content: flex-start;
  }
  .auth-section {
    min-width: 300px;
  }
}

/* --- تعديلات الموبايل (Mobile Only) --- */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footer-section {
    width: 100%;
    margin-bottom: 20px;
  }
  .auth-card-item {
    max-width: 320px;
    margin: 0 auto;
    width: 100%;
  }
}
.social-circles {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 10px;
}

.social-item {
  width: 50px;
  height: 50px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #d48b9d; /* اللون الزهري الغامق */
  box-shadow: 0 4px 15px rgba(249, 210, 222, 0.5); /* ظل ناعم */
  transition: 0.3s;
}

.social-item svg {
  /* هذا يضمن أن الأيقونة تأخذ اللون المحدد أعلاه */
  fill: currentColor !important;
}

.social-item:hover {
  color: var(--color-primary); /* تتحول للأحمر عند التمرير */
  transform: translateY(-3px);
}
/* --- 12. قسم التعريف بالعلامة التجارية (Pre-Footer Section) --- */
.brand-intro-section {
  padding: 20px 10px;
  background-color: transparent; /* لكي يظهر الانحناء فوق خلفية الصفحة البيضاء */
}

.brand-intro-container {
  max-width: 800px; /* جعل العرض أصغر قليلاً لزيادة التركيز على النص */
  margin: 0 auto;
  background-color: var(--color-secondary); /* الزهر الفاتح من هويتنا */
  padding: 50px 30px;
  border-radius: 60px; /* انحناء كبير مطابق للصورة المرفقة */
  text-align: center;
  box-shadow: 0 10px 30px rgba(249, 210, 222, 0.3);
}

.brand-intro-logo {
  margin-bottom: 25px;
}

.brand-intro-logo img {
  max-width: 180px; /* حجم اللوغو في هذا القسم */
  height: auto;
}

.brand-intro-title {
  color: var(--color-primary); /* الأحمر الداكن */
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.brand-intro-text {
  color: var(--color-primary); /* النص بالأحمر الداكن ليتماشى مع الهوية */
  font-size: 1.1rem;
  line-height: 1.8;
  max-width: 650px;
  margin: 0 auto;
}

/* التجاوب مع الجوال */
@media (max-width: 768px) {
  .brand-intro-container {
    border-radius: 40px;
    padding: 40px 20px;
  }
  .brand-intro-title {
    font-size: 1.5rem;
  }
  .brand-intro-text {
    font-size: 1rem;
  }
}
/* --- 13. قسم آراء العملاء (Testimonials) --- */
/* --- تعديل قسم الآراء ليطابق اللابتوب الهاتف --- */

.testimonials-section {
  overflow: hidden; /* لمنع ظهور شريط التمرير العرضي */
  padding: 80px 0;
}
.testimonials-header {
  color: var(--color-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  padding: 0 15px; /* إبعاد النص عن حافة الشاشة في الموبايل */
}

.view-all {
  color: #666 !important; /* إجبار اللون الرمادي الاحترافي */
  text-decoration: none !important; /* إزالة الخط الأزرق السفلي */
  font-size: 1rem;
  font-weight: 700;
  transition: color 0.3s ease;
}

.view-all:hover {
  color: var(--color-primary) !important; /* يتحول للأحمر عند التمرير */
}

.testimonial-card {
  background-color: var(--color-secondary);
  padding: 60px 40px; /* زيادة التعبئة في اللابتوب */
  border-radius: 80px; /* انحناء أكبر ليعطي شكل "الكبسولة" */
  text-align: center;
  max-width: 800px; /* تحديد عرض الكرت ليبقى مركزياً */
  margin: 0 auto;
  transition: all 0.5s ease;
  box-shadow: 0 15px 40px rgba(249, 210, 222, 0.4);
}

/* تكبير الخطوط في اللابتوب لتتناسب مع المساحة */
.review-text {
  font-size: 1.3rem;
  color: #444;
  margin-bottom: 30px;
}

.customer-name {
  font-size: 1.4rem;
  color: var(--color-primary);
}

.stars {
  color: #ffb800;
  font-size: 1.5rem;
  margin-bottom: 20px;
}

/* تحسين مكان الأسهم في اللابتوب */
.swiper-button-next,
.swiper-button-prev {
  background-color: #ffffff !important; /* خلفية بيضاء دائرية */
  width: 45px !important; /* تكبير الحجم ليكون الضغط عليه سهلاً */
  height: 45px !important;
  border-radius: 50% !important; /* شكل دائري تام */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important; /* ظل ناعم يعطي بروز 3D */
  color: var(
    --color-primary
  ) !important; /* لون السهم أحمر داكن بدل الأزرق الافتراضي */
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
}

/* تصغير حجم السهم الداخلي ليتناسب مع الدائرة بدقة */
.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 18px !important;
  font-weight: 900 !important;
}

@media (max-width: 768px) {
  .testimonial-card {
    border-radius: 40px;
    padding: 40px 20px;
    max-width: 90% !important;
  }
  .review-text {
    font-size: 1.1rem;
  }
}
/* --- 14. قسم سر جمالك المتألق (USP Section) --- */
.usp-section {
  padding: 80px 20px;
  background-color: var(--color-pink-light); /* الزهر الفاتح من هويتنا */
  /* الانحناء العلوي والسفلي الكبير ليتطابق مع تصميم حرير */
  border-radius: 80px 80px 0 0;
  margin-top: 50px;
  position: relative;
  z-index: 1; /* لضمان ظهوره فوق خلفية الصفحة البيضاء */
  box-shadow: 0 -15px 40px rgba(249, 210, 222, 0.4); /* ظل ناعم علوي */
}

/* تنسيق العنوان الرئيسي للقسم */
.usp-section .section-title {
  color: var(--color-primary); /* الأحمر الداكن */
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 50px;
}

/* شبكة التوزيع (3 أعمدة في اللابتوب) */
.usp-grid {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap; /* للتجاوب مع الجوال */
}

/* تنسيق الكرت الفردي (البطاقة) */
.usp-card {
  flex: 1;
  min-width: 300px;
  background-color: #ffffff; /* البطاقة بيضاء */
  padding: 40px;
  border-radius: 40px; /* انحناء دائري ناعم */
  text-align: right;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03); /* ظل خفيف جداً وعصري */
  transition: transform 0.3s ease;
}

.usp-card:hover {
  transform: translateY(-5px); /* حركة خفيفة عند تمرير الماوس */
}

/* تنسيق عنوان البطاقة */
.usp-card-title {
  color: var(--color-primary); /* الأحمر الداكن */
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 20px;
}

/* تنسيق نص البطاقة */
.usp-card-text {
  color: #444; /* أسود خفيف للقراءة */
  font-size: 1rem;
  line-height: 1.8;
}

/* --- التجاوب مع الجوال (Mobile) --- */
@media (max-width: 991px) {
  .usp-grid {
    flex-direction: column; /* البطاقات فوق بعضها في الجوال */
    align-items: center;
  }
  .usp-card {
    width: 100%;
    max-width: 500px; /* تحديد العرض في الجوال لمنع التمدد */
  }
}

@media (max-width: 768px) {
  .usp-section {
    border-radius: 40px 40px 0 0; /* تصغير الانحناء في الجوال */
    padding: 50px 15px;
  }
  .usp-section .section-title {
    font-size: 1.5rem;
  }
}
/* --- 17. شبكة المنتجات (Products Grid) --- */

.products-grid-section {
  padding: 60px 0;
}

.section-header {
  text-align: center;
  margin-bottom: 45px;
}

.section-title {
  color: var(--color-primary);
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.section-subtitle {
  color: #888;
  font-size: 1.1rem;
}

/* حاوية الشبكة */
.products-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 منتجات في اللابتوب */
  gap: 25px;
}

/* بطاقة المنتج الفردية */
.product-card {
  background: #fff;
  border-radius: 30px;
  padding: 15px;
  text-align: center;
  transition: all 0.3s ease;
  border: 1px solid #fef5f7;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(249, 210, 222, 0.4);
}

/* صندوق الصورة */
.product-image-box {
  position: relative;
  background-color: var(--color-pink-light);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 15px;
}

.product-image-box img {
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: multiply; /* يجعل خلفية الصورة تندمج مع لون الصندوق */
}

/* شارة الخصم */
.onsale-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #fef5f7; /* لون زهر فاتح */
  color: var(--color-primary); /* نص أحمر داكن */
  padding: 5px 12px;
  border-radius: 15px;
  font-size: 0.85rem;
  font-weight: 700;
}

/* نصوص المنتج */
.product-title {
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 8px;
  /* تم إزالة height و overflow للسماح للنص بالتمدد وتكبير الكرت ديناميكياً */
}

/* حاوية السعر الأساسية */
.product-price {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 15px;
}

/* تنسيق السعر القديم (المشطوب - فضي) */
.product-price del {
  color: #a0a0a0 !important;
  text-decoration: line-through !important;
  font-size: 1rem !important; /* تصغير طفيف لتمييزه عن السعر الجديد */
  margin-left: 8px !important; /* مسافة بينه وبين السعر الجديد */
  font-weight: normal !important;
}

/* تنسيق السعر الجديد أو الافتراضي (أحمر داكن) */
.product-price ins, 
.product-price > .woocommerce-Price-amount {
  color: var(--color-primary) !important;
  text-decoration: none !important;
}

/* حاوية الأزرار لتثبيتها في الأسفل */
.product-actions {
  margin-top: auto; /* هذا الأمر يدفع الزر دائماً إلى أقصى نهاية الكرت مهما طال النص */
}

/* أزرار ووكومرس الافتراضية - تخصيص كامل */
.product-actions .button {
  background-color: var(--color-primary) !important;
  color: #fff !important;
  padding: 10px 20px !important;
  border-radius: 20px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: block !important;
  transition: 0.3s !important;
  border: none !important;
  width: 100% !important; /* لضمان أخذ الزر مساحة الكرت بالكامل إن لزم الأمر */
}

.product-actions .button:hover {
  background-color: #90141f !important; /* درجة أغمق للأحمر عند التمرير */
}

/* --- التجاوب مع الجوال --- */
@media (max-width: 991px) {
  .products-wrapper {
    grid-template-columns: repeat(2, 1fr); /* منتجين بجانب بعض في التابلت والموبايل */
    gap: 15px;
  }
}

@media (max-width: 768px) {
  .product-card {
    padding: 10px;
    border-radius: 20px;
  }
  .product-title {
    font-size: 0.95rem;
  }
}
/* =========================================================
   18. تصميم صفحة السلة (WooCommerce Cart Page)
========================================================= */

/* --- 1. التخطيط العام لصفحة السلة (تقسيم الشاشة لعمودين في اللابتوب) --- */
.woocommerce-cart .woocommerce {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin-top: 40px;
  align-items: flex-start;
}

/* --- 2. جدول المنتجات (القسم الأيمن) --- */
.woocommerce-cart-form {
  flex: 1 1 60%;
  background: #ffffff;
  padding: 30px;
  border-radius: 40px; /* انحناء روعة جلو */
  box-shadow: 0 10px 30px rgba(249, 210, 222, 0.4); /* ظل زهري ناعم */
}

/* تنظيف الجدول الافتراضي لووكومرس */
.shop_table.cart {
  border-collapse: separate;
  border-spacing: 0;
  border: none !important;
  width: 100%;
}

.shop_table.cart th,
.shop_table.cart td {
  border: none !important;
  border-bottom: 1px solid #fef5f7 !important; /* خط فاصل زهري خفيف جداً */
  padding: 20px 10px !important;
  vertical-align: middle;
}

/* عناوين الجدول (المنتج، السعر، الكمية..) */
.shop_table.cart th {
  color: var(--color-primary); /* أحمر داكن */
  font-weight: 700;
  font-size: 1.1rem;
}

/* زر الحذف (X) */
.product-remove a.remove {
  color: #ff4d4d !important;
  font-size: 1.5rem !important;
  font-weight: bold;
  background: none !important;
}

.product-remove a.remove:hover {
  color: var(--color-primary) !important;
  background: #fff !important;
}

/* اسم المنتج وصورته */
.product-thumbnail img {
  border-radius: 15px;
  width: 70px;
}
.product-name a {
  color: #333;
  font-weight: 600;
  text-decoration: none;
}
.product-name a:hover {
  color: var(--color-primary);
}

/* حقل الكمية */
.quantity input.qty {
  border: 1px solid #f5e6e9;
  border-radius: 15px;
  padding: 8px;
  width: 70px;
  text-align: center;
  background-color: #fafafa;
  color: #333;
  font-weight: bold;
}

/* --- 3. قسم القسيمة (الكوبون) وتحديث السلة --- */
.coupon {
  display: flex;
  gap: 15px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.coupon input.input-text {
  border: 1px solid #f5e6e9 !important;
  border-radius: 25px !important;
  padding: 12px 20px !important;
  width: 200px;
}

/* أزرار الكوبون وتحديث السلة (زر ثانوي) */
.button[name='apply_coupon'],
.button[name='update_cart'] {
  background-color: var(--color-pink-light) !important;
  color: var(--color-primary) !important;
  border-radius: 25px !important;
  padding: 12px 30px !important;
  border: none !important;
  font-weight: 700 !important;
  transition: 0.3s !important;
}

.button[name='apply_coupon']:hover,
.button[name='update_cart']:hover {
  background-color: var(--color-primary) !important;
  color: #fff !important;
}

/* --- 4. إجمالي سلة المشتريات (القسم الأيسر) --- */
.cart-collaterals {
  flex: 1 1 30%;
}

.cart_totals {
  background-color: var(--color-pink-light); /* الخلفية الزهرية المميزة */
  padding: 40px 30px;
  border-radius: 40px;
}

.cart_totals h2 {
  color: var(--color-primary);
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 25px;
  border-bottom: 2px dashed #d48b9d; /* خط متقطع أنيق */
  padding-bottom: 15px;
}

.cart_totals table {
  width: 100%;
  border: none !important;
}

.cart_totals th,
.cart_totals td {
  border: none !important;
  padding: 15px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
}

.cart_totals th {
  color: #444;
  font-weight: 600;
}

/* السعر الإجمالي النهائي */
.order-total th,
.order-total td {
  font-size: 1.4rem;
  color: var(--color-primary);
  font-weight: 800;
  border-bottom: none !important;
}

/* --- 5. زر إتمام الطلب (الزر الرئيسي) --- */
.wc-proceed-to-checkout .checkout-button {
  background-color: var(--color-primary) !important; /* أحمر داكن */
  color: #fff !important;
  border-radius: 30px !important;
  padding: 18px !important;
  width: 100% !important;
  text-align: center !important;
  display: block !important;
  margin-top: 25px !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 5px 15px rgba(183, 25, 40, 0.3) !important;
}

.wc-proceed-to-checkout .checkout-button:hover {
  background-color: #90141f !important;
  transform: translateY(-3px);
}

/* --- التجاوب مع الجوال (Mobile) --- */
@media (max-width: 991px) {
  .woocommerce-cart .woocommerce {
    flex-direction: column; /* جعل الأقسام فوق بعضها */
  }
  .woocommerce-cart-form,
  .cart-collaterals {
    flex: 1 1 100%;
    width: 100%;
  }
  .coupon {
    flex-direction: column;
  }
  .coupon input.input-text,
  .button[name='apply_coupon'] {
    width: 100%;
  }
}
/* =========================================================
   19. تصميم صفحة إتمام الطلب (Checkout Page)
========================================================= */

.woocommerce-checkout .col2-set {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin-top: 30px;
}

/* عمود تفاصيل الفاتورة (اليمين) */
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
  flex: 1 1 100%;
  max-width: 100%;
  float: none;
  padding: 0;
}

@media (min-width: 992px) {
  /* تقسيم الشاشة في اللابتوب */
  .woocommerce-checkout #customer_details {
    width: 55%;
    float: right;
  }
  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review {
    width: 40%;
    float: left;
    clear: left;
  }
}

/* --- تصميم حقول الإدخال (Inputs) --- */
.woocommerce-checkout .woocommerce-input-wrapper {
  width: 100%;
}

.woocommerce-checkout input[type='text'],
.woocommerce-checkout input[type='email'],
.woocommerce-checkout input[type='tel'],
.woocommerce-checkout textarea,
.select2-container--default .select2-selection--single {
  width: 100% !important;
  border: 1.5px solid #f5e6e9 !important;
  border-radius: 30px !important; /* انحناء كامل كما في الصورة */
  padding: 15px 20px !important;
  background-color: #fff !important;
  font-family: var(--font-main);
  font-size: 1rem;
  color: #444;
  transition: all 0.3s ease;
}

/* تنسيق قائمة الدول (Select2) التي يستخدمها ووكومرس */
.select2-container--default .select2-selection--single {
  height: auto !important;
}
.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  line-height: normal !important;
  padding-right: 0 !important;
}
.select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  top: 50% !important;
  transform: translateY(-50%) !important;
  left: 15px !important;
  right: auto !important;
}

/* تأثير عند الكتابة */
.woocommerce-checkout input:focus,
.woocommerce-checkout textarea:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 10px rgba(249, 210, 222, 0.5) !important;
  outline: none;
}

/* مسميات الحقول (Labels) */
.woocommerce-checkout form .form-row label {
  color: #555;
  font-weight: 600;
  margin-bottom: 8px;
  display: block;
}
.woocommerce-checkout form .form-row label abbr {
  color: var(--color-primary); /* النجمة الحمراء للمطلوب */
  text-decoration: none;
}

/* --- صندوق الطلب (Your Order) --- */
.woocommerce-checkout #order_review {
  background-color: var(--color-pink-light); /* الخلفية الزهرية */
  padding: 40px 30px;
  border-radius: 40px;
  box-shadow: 0 10px 30px rgba(249, 210, 222, 0.4);
}

.woocommerce-checkout #order_review_heading {
  font-size: 1.6rem;
  color: var(--color-primary);
  font-weight: 700;
  margin-bottom: 20px;
  padding-top: 15px;
}

.woocommerce-checkout table.shop_table {
  border: none !important;
}

.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.6) !important;
  border-top: none !important;
  padding: 15px 5px !important;
}

/* --- بوابات الدفع (Payment Box) --- */
#payment {
  background: transparent !important;
  border-radius: 0 !important;
}

#payment ul.payment_methods {
  border-bottom: none !important;
  padding: 0 !important;
}

#payment div.payment_box {
  background-color: #fff !important;
  border-radius: 20px !important;
  color: #555 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

#payment div.payment_box::before {
  border-bottom-color: #fff !important; /* المثلث العلوي للمربع */
}

/* --- زر تأكيد الطلب --- */
#place_order {
  background-color: var(--color-primary) !important;
  color: #fff !important;
  border-radius: 30px !important;
  padding: 20px !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  width: 100% !important;
  margin-top: 20px;
  transition: 0.3s !important;
  border: none !important;
}

#place_order:hover {
  background-color: #90141f !important;
  transform: translateY(-3px);
}
/* =========================================================
   16. تصميم صفحات السياسات (Policy Pages)
========================================================= */

.custom-page-container {
  max-width: 900px;
  margin: 60px auto 100px;
  padding: 0 20px;
  direction: rtl;
}

/* --- مسار التنقل العلوي (Breadcrumbs) --- */
.custom-breadcrumbs {
  text-align: right;
  margin-bottom: 30px;
  font-size: 1.1rem;
  color: #d48b9d; /* اللون الزهري الغامق */
  font-weight: 600;
}

.custom-breadcrumbs a {
  color: #d48b9d;
  text-decoration: none;
  transition: 0.3s;
}

.custom-breadcrumbs a:hover {
  color: var(--color-primary); /* يتحول للأحمر الداكن عند التمرير */
}

.custom-breadcrumbs span {
  margin: 0 10px;
}

/* --- البطاقة الوردية (الخلفية) --- */
.policy-card {
  background-color: var(--color-pink-light); /* خلفية زهرية فاتحة #f5e6e9 */
  border-radius: 50px; /* انحناء كبير وناعم */
  padding: 60px 40px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(249, 210, 222, 0.3); /* ظل ناعم */
}

/* --- عنوان السياسة داخل البطاقة --- */
.policy-title {
  color: var(--color-primary); /* أحمر داكن */
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 40px;
}

/* --- نصوص السياسة (الفقرات) --- */
.policy-content p {
  color: var(--color-primary); /* النص باللون الأحمر الداكن */
  font-size: 1.15rem;
  line-height: 2.2; /* مسافة مريحة للعين بين السطور */
  margin-bottom: 30px;
  font-weight: 500;
  position: relative;
  padding-right: 20px; /* مساحة للنقطة الديكورية */
}

/* إضافة النقطة (•) قبل كل فقرة برمجياً لتشبه الصورة المرجعية */
.policy-content p::before {
  content: '•';
  position: absolute;
  right: 0;
  color: var(--color-primary);
  font-size: 1.5rem;
  line-height: 1.5;
}

/* إزالة النقطة من الفقرة الأخيرة (الخاتمة) لتكون مميزة */
.policy-content p.policy-conclusion::before {
  content: '';
}

.policy-conclusion {
  font-weight: 700; /* جعل الخاتمة بخط أسمك */
  margin-top: 40px;
}

/* --- التجاوب مع الجوال (Mobile) --- */
@media (max-width: 768px) {
  .policy-card {
    padding: 40px 20px;
    border-radius: 35px; /* تصغير الانحناء في الجوال */
  }
  .policy-title {
    font-size: 1.7rem;
    margin-bottom: 30px;
  }
  .policy-content p {
    font-size: 1.05rem;
    padding-right: 15px;
  }
}
/* =========================================================
   20. السلة الجانبية (Side Cart) والإشعارات
========================================================= */

/* --- السلة الجانبية (تنزلق من اليمين) --- */
.rawa-side-cart {
  position: fixed;
  top: 0;
  right: -400px; /* مخفية خارج الشاشة */
  width: 350px;
  max-width: 100%;
  height: 100vh;
  background-color: #fff;
  z-index: 999999;
  box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
  transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1);
  display: flex;
  flex-direction: column;
}

.rawa-side-cart.open {
  right: 0; /* تظهر عند إضافة كلاس open */
}

/* --- الخلفية المظللة (Overlay) --- */
.rawa-cart-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999998;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  backdrop-filter: blur(3px); /* تأثير ضبابي فخم */
}

.rawa-cart-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* --- هيدر السلة الجانبية --- */
.side-cart-header {
  background-color: var(--color-pink-light);
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #fef5f7;
}

.side-cart-header h3 {
  margin: 0;
  color: var(--color-primary);
  font-size: 1.2rem;
  font-weight: 700;
}

.close-side-cart {
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--color-primary);
  cursor: pointer;
  line-height: 1;
}

/* --- محتوى السلة والأزرار --- */
.side-cart-content {
  padding: 20px;
  flex-grow: 1;
  overflow-y: auto;
}

.side-cart-extra-actions {
  padding: 15px 20px;
  background: #fff;
  border-top: 1px solid #eee;
}

.continue-shopping-btn {
  width: 100%;
  background-color: #f5f5f5;
  color: #555;
  border: none;
  padding: 12px;
  border-radius: 20px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

.continue-shopping-btn:hover {
  background-color: #e0e0e0;
}

/* تنسيق أزرار ووكومرس الافتراضية داخل السلة الجانبية */
.woocommerce-mini-cart__buttons .button {
  border-radius: 20px !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin-bottom: 10px !important;
}

.woocommerce-mini-cart__buttons .checkout {
  background-color: var(--color-primary) !important; /* زر إتمام الطلب أحمر */
  color: #fff !important;
}

/* --- إشعار النجاح الأخضر (Toast) --- */
#rawa-success-toast {
  position: fixed;
  bottom: -100px; /* مخفي في الأسفل */
  left: 50%;
  transform: translateX(-50%);
  background-color: #28a745; /* لون أخضر للنجاح */
  color: #fff;
  padding: 15px 25px;
  border-radius: 30px;
  font-weight: 700;
  z-index: 9999999;
  box-shadow: 0 10px 20px rgba(40, 167, 69, 0.3);
  transition: bottom 0.4s ease;
}

#rawa-success-toast.show {
  bottom: 30px; /* يرتفع للأعلى ليظهر */
}

/* =========================================================
   خدعة تغيير زر "أضف للسلة" إلى "عرض السلة" بعد الضغط
========================================================= */

/* 1. عندما يتم إضافة المنتج، ووكومرس يضيف كلاس .added للزر الأصلي، سنقوم بإخفائه */
.product-actions .button.added {
  display: none !important;
}

/* 2. ووكومرس يضيف تلقائياً رابط "عرض السلة" (.added_to_cart)، سنقوم بتصميمه ليأخذ مكان الزر الأصلي */
.product-actions .added_to_cart.wc-forward {
  background-color: #f9d2de !important; /* لون أخضر ليؤكد الإضافة */
  color: #b71928 !important;
  padding: 10px 20px !important;
  border-radius: 20px !important;
  font-weight: 700 !important;
  text-align: center;
  display: block !important;
  text-decoration: none;
  transition: 0.3s;
}

.product-actions .added_to_cart.wc-forward:hover {
  background-color: #218838 !important;
}
/* تنسيق قسم حقوق النشر في الفوتر */
.footer-bottom-copy {
  width: 100%;
  clear: both; /* لإجبار القسم على النزول تحت جميع العناصر السابقة */
  background-color: var(--color-pink-light); /* الخلفية الزهرية */
  border-radius: 50px; /* الحواف الدائرية */
  padding: 15px 20px;
  margin-top: 40px; /* إبعادها عن طرق الدفع والسوشيال ميديا */
  text-align: center;
  display: block;
}

.footer-bottom-copy p {
  color: var(--color-primary); /* اللون الأحمر الداكن */
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}
/* =========================================================
   تنسيق حالة "السلة الجانبية الفارغة" وزر متابعة التسوق
========================================================= */

/* 1. تصميم رسالة السلة الفارغة */
p.woocommerce-mini-cart__empty-message {
  text-align: center !important;
  color: var(--color-primary) !important; /* أحمر داكن */
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  padding: 40px 20px !important;
  background-color: var(--color-pink-light) !important; /* فقاعة زهرية فاتحة */
  border-radius: 30px !important;
  margin-top: 30px !important;
  border: 1px dashed #d48b9d !important;
}

/* 2. إخفاء زر العودة للمتجر الافتراضي الخاص بووكومرس (لمنع تكرار الأزرار) */
.woocommerce-mini-cart .button.wc-backward {
  display: none !important;
}

/* 3. التنسيق الاحترافي لزر "متابعة التسوق" الخاص بنا */
.continue-shopping-btn {
  width: 100% !important;
  background-color: #fff !important; /* خلفية بيضاء */
  color: var(--color-primary) !important; /* نص أحمر داكن */
  border: 2px solid var(--color-primary) !important; /* إطار أحمر داكن */
  padding: 12px !important; /* تصغير الحجم ليكون أنيقاً */
  border-radius: 30px !important; /* انحناء الكبسولة */
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
}

/* تأثير التمرير (Hover) على زر متابعة التسوق */
.continue-shopping-btn:hover {
  background-color: var(--color-primary) !important; /* يتحول للأحمر الداكن */
  color: #fff !important; /* النص يصبح أبيض */
  transform: translateY(-2px); /* يرتفع للأعلى قليلاً */
  box-shadow: 0 5px 15px rgba(249, 210, 222, 0.5) !important;
}
/* =========================================================
   تنسيق ألوان روابط الفوتر 
========================================================= */

/* 1. تلوين عنوان "روابط مهمة" بالأحمر الداكن */
.footer-links-section .footer-widget-title {
  color: #b71928 !important;
}

/* 2. تلوين الروابط باللون الزهري الفاتح */
.footer-links-section .footer-menu-list li a {
  color: #f9d2de !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important; /* حركة انتقال ناعمة */
}

/* 3. الخدعة البصرية: تحويل اللون للأحمر الداكن عند التمرير (Hover) */
.footer-links-section .footer-menu-list li a:hover {
  color: #b71928 !important;
  padding-right: 5px; /* إزاحة خفيفة لليسار لتعطي إحساساً بالتفاعل */
}
/* إزالة النقاط السوداء من قائمة الفوتر وتنظيف المسافات */
.footer-links-section .footer-menu-list {
  list-style: none !important; /* هذا السطر يخفي النقاط */
  padding: 0 !important; /* إزالة الفراغ الجانبي الافتراضي */
  margin: 0 !important;
}
/* =========================================================
   تنسيق صور أيقونات المميزات (Features Icons)
========================================================= */
.feature-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px; /* مسافة بين الأيقونة والنص */
}

.feature-icon img {
  width: 60px; /* عرض الأيقونة - يمكنك تكبيره أو تصغيره */
  height: 60px; /* طول الأيقونة */
  object-fit: contain; /* لمنع تشوه أو تمطط الصورة */
  transition: transform 0.3s ease; /* حركة ناعمة */
}

/* حركة تفاعلية لطيفة عند مرور الماوس على الميزة */
.feature-item:hover .feature-icon img {
  transform: scale(1.1); /* تكبير الأيقونة قليلاً عند التمرير */
}
/* =========================================================
   تنسيق القائمة الجانبية للموبايل
========================================================= */
.rawa-mobile-sidebar {
  position: fixed;
  top: 0;
  right: -320px; /* مخفية خارج الشاشة */
  width: 280px;
  height: 100vh;
  background-color: #fff;
  z-index: 999999;
  box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
  transition: right 0.4s ease;
  display: flex;
  flex-direction: column;
}

.rawa-mobile-sidebar.open {
  right: 0; /* تظهر عند الضغط */
}

.rawa-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999998;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}

.rawa-menu-overlay.open {
  opacity: 1;
  visibility: visible;
}

.sidebar-header {
  background-color: var(--color-pink-light);
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #fef5f7;
}

.sidebar-header h3 {
  margin: 0;
  color: var(--color-primary);
  font-size: 1.2rem;
  font-weight: 700;
}

.close-sidebar-menu {
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--color-primary);
  cursor: pointer;
}

.sidebar-content {
  padding: 20px;
  overflow-y: auto;
}

/* تنسيق الروابط والتصنيفات داخل القائمة */
.mobile-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-nav-list li {
  border-bottom: 1px solid #eee;
}

.mobile-nav-list li a {
  display: block;
  padding: 15px 0;
  color: #333;
  text-decoration: none;
  font-weight: bold;
  transition: 0.3s;
}

.mobile-nav-list li a:hover {
  color: var(--color-primary);
  padding-right: 10px;
}
/* =========================================================
   إزالة الخطوط الزرقاء من المنتجات وتنسيق النصوص
========================================================= */

/* 1. إزالة الخط السفلي الأزرق من الرابط بالكامل */
.product-card a.product-link,
.product-card a.product-link:hover,
.product-card a.product-link:visited {
    text-decoration: none !important; 
    color: inherit !important; /* إجبار الرابط على وراثة ألواننا وليس الأزرق */
    outline: none !important;
}

/* 2. تأكيد لون عنوان المنتج (رمادي داكن وأنيق) */
.product-title {
    color: #2c2c2c !important; 
    text-decoration: none !important;
}

/* 3. تأكيد لون السعر (بالأحمر الداكن الخاص بروعة جلو) */
.product-price, 
.product-price span.woocommerce-Price-amount {
    color: #b71928 !important; 
    text-decoration: none !important;
    font-weight: bold !important;
}
/* =========================================================
   إصلاحات السلة الجانبية الإجبارية (القوة الجبرية)
========================================================= */

/* 1. تلوين العنوان والأيقونة بالأحمر الداكن رغماً عن الإضافة */
div.xoo-wsc-header span,
div.xoo-wsc-header .xoo-wsc-hdr-title {
    color: #b71928 !important;
}
div.xoo-wsc-header svg,
div.xoo-wsc-header svg path {
    fill: #b71928 !important;
    stroke: #b71928 !important;
}

/* 2. إخفاء النقطتين (:) نهائياً عن طريق إخفاء التسمية المرافقة للسعر */
span.xoo-wsc-ft-amt-lbl {
    display: none !important;
}

/* 3. تنظيف زر "إتمام الطلب" من السعر والأرقام العشوائية */
a.xoo-wsc-ft-btn-checkout {
    font-size: 0 !important; /* هذا السطر يدمر النص المشوه بالكامل */
    text-align: center !important;
}

/* حقن النص النظيف داخل الزر */
a.xoo-wsc-ft-btn-checkout::before {
    content: "التقدم لإتمام الطلب" !important;
    font-size: 16px !important;
    display: block !important;
    color: #ffffff !important;
}

/* إخفاء أي عناصر أخرى مخفية داخل الزر */
a.xoo-wsc-ft-btn-checkout span,
a.xoo-wsc-ft-btn-checkout b {
    display: none !important;
}
/* =========================================================
   اللمسات الأخيرة: دائرة السلة والضربة القاضية للنقطتين
========================================================= */


/* 2. الإخفاء الجذري للنقطتين (:) بتفريغ الحاوية الكبرى بالكامل */
div.xoo-wsc-ft-amt {
    font-size: 0 !important; 
    color: transparent !important;
}

/* إعادة إظهار السعر الإجمالي فقط بحجمه الطبيعي */
div.xoo-wsc-ft-amt .woocommerce-Price-amount {
    font-size: 20px !important;
    color: #000000 !important; /* تركنا السعر بالأسود ليكون بارزاً */
    display: inline-block !important;
    font-weight: 900 !important;
}
/* =========================================================
   تلوين رقم السلة باللون الزهري (مع بقاء الخلفية سوداء)
========================================================= */
html body .xoo-wsc-header span.xoo-wsc-items-count,
html body .xoo-wsc-container .xoo-wsc-header .xoo-wsc-items-count {
    color: #e598ab !important; /* الرقم باللون الزهري الخاص بهويتكم */
    font-weight: 900 !important; /* خط عريض جداً ليكون واضحاً */
    font-size: 15px !important; /* تكبير الرقم قليلاً لسهولة القراءة */
}
/* =========================================================
   تنسيق صفحة تفاصيل المنتج (Single Product Page) - هوية روعة جلو
========================================================= */

/* 1. عنوان المنتج */
.woocommerce div.product .product_title {
    color: #b71928 !important; /* أحمر داكن */
    font-weight: 900 !important;
    font-size: 28px !important;
    margin-bottom: 15px !important;
    line-height: 1.4 !important;
}

/* 2. السعر الأساسي في صفحة المنتج */
.woocommerce div.product p.price, 
.woocommerce div.product span.price {
    color: #b71928 !important; 
    font-size: 24px !important;
    font-weight: bold !important;
}

/* 3. زر "إضافة إلى السلة" (تدمير اللون البنفسجي) */
.woocommerce div.product form.cart .button {
    background-color: #b71928 !important; /* أحمر داكن */
    color: #ffffff !important;
    border-radius: 30px !important; /* حواف دائرية أنيقة */
    padding: 12px 35px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

/* تأثير التمرير بالماوس لزر السلة */
.woocommerce div.product form.cart .button:hover {
    background-color: #e598ab !important; /* زهري */
    color: #b71928 !important;
}

/* 4. حقل الكمية (تنسيق مريح للعين) */
.woocommerce div.product form.cart div.quantity {
    margin-left: 15px !important; /* إبعاد الحقل عن الزر قليلاً */
}
.woocommerce div.product form.cart input.qty {
    border: 2px solid #fef5f7 !important;
    border-radius: 10px !important;
    padding: 10px !important;
    height: 45px !important;
    width: 70px !important;
    font-weight: bold !important;
}

/* 5. روابط التصنيفات (التخلص من اللون الأزرق الافتراضي) */
.woocommerce div.product .product_meta {
    border-top: 1px dashed #e598ab !important; /* خط فاصل زهري متقطع */
    padding-top: 15px !important;
    margin-top: 25px !important;
    color: #666 !important;
}
.woocommerce div.product .product_meta a {
    color: #e598ab !important; /* زهري */
    font-weight: bold !important;
    text-decoration: none !important;
}
.woocommerce div.product .product_meta a:hover {
    color: #b71928 !important;
}


/* =========================================================
   تنسيق المنتجات ذات الصلة (Related Products) كبطاقات أنيقة
========================================================= */
/* =========================================================
   تطابق المنتجات ذات الصلة مع شبكة الرئيسية (القوة الجبرية)
========================================================= */

/* 1. عنوان القسم (ليطابق section-title) */
.woocommerce .related.products h2 {
    color: #b71928 !important;
    text-align: center !important;
    font-size: 2.2rem !important;
    font-weight: 900 !important;
    margin-bottom: 45px !important;
    margin-top: 50px !important;
}

/* 2. تحويل حاوية ووكومرس إلى شبكة (Grid) متطابقة */
.woocommerce .related.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* 4 منتجات باللابتوب */
    gap: 25px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.woocommerce .related.products ul.products::before,
.woocommerce .related.products ul.products::after {
    display: none !important; /* تدمير فواصل ووكومرس المعرقلة للشبكة */
}

/* 3. بطاقة المنتج (لتطابق product-card) */
.woocommerce .related.products ul.products li.product {
    background: #fff !important;
    border-radius: 30px !important;
    padding: 15px !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    border: 1px solid #fef5f7 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin: 0 !important;
}

.woocommerce .related.products ul.products li.product:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 15px 35px rgba(249, 210, 222, 0.4) !important;
}

/* 4. صندوق الصورة ودمج اللون */
.woocommerce .related.products ul.products li.product img {
    background-color: #fef5f7 !important; /* لون زهر فاتح */
    border-radius: 20px !important;
    margin-bottom: 15px !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    mix-blend-mode: multiply !important; /* دمج الصورة بالخلفية */
}

/* 5. شارة الخصم (لتطابق onsale-badge) */
.woocommerce .related.products ul.products li.product .onsale {
    position: absolute !important;
    top: 25px !important; 
    right: 25px !important;
    background-color: #fef5f7 !important;
    color: #b71928 !important;
    padding: 5px 12px !important;
    border-radius: 15px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    min-height: auto !important;
    min-width: auto !important;
    line-height: 1 !important;
    margin: 0 !important;
    z-index: 9 !important;
}

/* 6. عنوان المنتج */
.woocommerce .related.products ul.products li.product .woocommerce-loop-product__title {
    font-size: 1.1rem !important;
    color: #333 !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
}

/* 7. السعر وحالات التخفيض */
.woocommerce .related.products ul.products li.product .price {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    margin-bottom: 15px !important;
    color: #b71928 !important;
}
.woocommerce .related.products ul.products li.product .price del {
    color: #a0a0a0 !important; /* السعر القديم فضي */
    text-decoration: line-through !important;
    font-size: 1rem !important;
    margin-left: 8px !important;
    font-weight: normal !important;
    opacity: 1 !important;
}
.woocommerce .related.products ul.products li.product .price ins {
    color: #b71928 !important; /* السعر الجديد أحمر داكن */
    text-decoration: none !important;
    background: transparent !important;
}

/* 8. زر إضافة للسلة (تثبيت بالأسفل وتلوين) */
.woocommerce .related.products ul.products li.product .button {
    margin-top: auto !important; /* تثبيت الزر بأسفل البطاقة دائماً */
    background-color: #b71928 !important;
    color: #fff !important;
    padding: 10px 20px !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: block !important;
    transition: 0.3s !important;
    border: none !important;
    width: 100% !important;
    text-align: center !important;
}

.woocommerce .related.products ul.products li.product .button:hover {
    background-color: #90141f !important;
}

/* --- التجاوب مع الجوال والتابلت للمنتجات ذات الصلة --- */
@media (max-width: 991px) {
    .woocommerce .related.products ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
}

@media (max-width: 768px) {
    .woocommerce .related.products ul.products li.product {
        padding: 10px !important;
        border-radius: 20px !important;
    }
    .woocommerce .related.products ul.products li.product .woocommerce-loop-product__title {
        font-size: 0.95rem !important;
    }
}
/* =========================================================
   تنسيق مسار التنقل (Breadcrumbs) أعلى صفحة المنتج
========================================================= */

/* =========================================================
   تنسيق مسار التنقل (Breadcrumbs) - محدث بالمسافات الكاملة
========================================================= */

/* 1. إضافة فراغ علوي (من الهيدر) وفراغ سفلي (من المنتج) */
.woocommerce-breadcrumb {
    margin-top: 35px !important; /* الفراغ الجديد بين الهيدر والمسار */
    margin-bottom: 40px !important; /* الفراغ السفلي المريح */
    color: #e598ab !important; /* اللون الزهري */
    font-size: 14px !important;
    padding-bottom: 10px !important;
}

/* 2. تلوين الروابط داخل المسار (الرئيسية / منتجات الشعر ...) */
.woocommerce-breadcrumb a {
    color: #e598ab !important; /* اللون الزهري */
    font-weight: bold !important; /* خط عريض لضمان وضوح القراءة */
    text-decoration: none !important;
    transition: color 0.3s ease !important; /* نعومة في تغير اللون */
}

/* 3. تأثير تفاعلي عند التمرير بالماوس */
.woocommerce-breadcrumb a:hover {
    color: #b71928 !important; /* يتحول للأحمر الداكن لتنبيه العميلة أنه رابط قابل للضغط */
}
/* =========================================================
   تنسيق شبكة التصنيفات في الصفحة الرئيسية (Category Grid)
========================================================= */

/* 1. إخفاء عدد المنتجات المزعج بجانب اسم التصنيف */
.woocommerce-loop-category__title mark,
.woocommerce-loop-category__title count {
    display: none !important;
}

/* 2. تجريد بطاقة التصنيف من أي إطارات أو خلفيات (تصميم نظيف) */
.woocommerce ul.products li.product-category {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    text-align: center !important;
    transition: transform 0.3s ease !important;
}

/* تأثير بسيط عند التمرير بالماوس */
.woocommerce ul.products li.product-category:hover {
    transform: translateY(-5px) !important;
}

/* 3. تنسيق صورة التصنيف (مربعة وأنيقة) */
/* 3. تنسيق صورة التصنيف (دائرية وأنيقة) */
.woocommerce ul.products li.product-category img {
    border-radius: 50% !important; /* التحويل لشكل دائري كامل */
    width: 100% !important;
    max-width: 180px !important; /* تحديد أقصى عرض لضمان عدم ضخامة الدائرة */
    margin: 0 auto 15px !important; /* توسيط الدائرة في المنتصف */
    aspect-ratio: 1 / 1 !important; /* الحفاظ على أبعاد متساوية (دائرة لا بيضاوي) */
    object-fit: cover !important; 
    background-color: #fef5f7 !important;
    display: block !important;
}

/* 4. تنسيق عنوان التصنيف (أسود عريض وفي المنتصف) */
.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
    font-size: 1.2rem !important;
    color: #1a1a1a !important; /* أسود داكن جداً كما في صورتك المرجعية */
    font-weight: 900 !important;
    padding: 0 !important;
    background: transparent !important;
    margin-bottom: 0 !important;
}

/* 5. إخفاء أي أزرار عشوائية قد تظهر تحت التصنيف */
.woocommerce ul.products li.product-category .button {
    display: none !important;
}

/* 6. التجاوب مع الموبايل (إجبار عرض تصنيفين بجانب بعضهما) */
@media (max-width: 768px) {
    .woocommerce ul.products.columns-3,
    .woocommerce ul.products.columns-4,
    .woocommerce ul.products.columns-6 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* عمودين للموبايل */
        gap: 15px !important;
    }
    
    /* تصغير الخط قليلاً في الموبايل */
    .woocommerce ul.products li.product-category .woocommerce-loop-category__title {
        font-size: 1rem !important;
    }
}
/* =========================================================
   هندسة الشبكة الصارمة للموبايل (إلغاء تشوهات ووكومرس)
========================================================= */
@media (max-width: 768px) {
    /* 1. فرض الشبكة الثنائية وتدمير الفواصل المخفية */
    .home-categories-section .categories-wrapper ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* عمودين بالضبط */
        gap: 15px !important;
        padding: 0 15px !important; 
        margin: 0 !important;
    }
    .home-categories-section .categories-wrapper ul.products::before,
    .home-categories-section .categories-wrapper ul.products::after {
        display: none !important; /* تدمير فواصل ووكومرس */
    }

    /* 2. الضربة القاضية: إبطال مفعول كلاسات first و last التي تكسر السطر */
    .home-categories-section .categories-wrapper ul.products li.product-category,
    .woocommerce ul.products li.first,
    .woocommerce ul.products li.last {
        width: 100% !important;
        margin: 0 !important;
        float: none !important;
        clear: none !important; /* هذا السطر هو الذي يمنع التصنيف من النزول لسطر جديد بمفرده */
    }
    
    /* 3. تصغير مساحة الصورة والخط في الموبايل */
    .woocommerce ul.products li.product-category img {
        margin-bottom: 10px !important;
    }
    .woocommerce ul.products li.product-category .woocommerce-loop-category__title {
        font-size: 1rem !important;
    }
}
/* =========================================================
   تنسيق صفحات التصنيفات والمتجر (تعميم الهوية البصرية)
========================================================= */

/* 1. عنوان التصنيف في أعلى الصفحة (بالأحمر الداكن) */
.woocommerce-products-header__title.page-title {
    color: #b71928 !important;
    font-weight: 900 !important;
    font-size: 2.5rem !important;
    text-align: center !important;
    margin-bottom: 30px !important;
}

/* إبعاد قائمة الترتيب (Sort by) عن الشبكة لتنفس التصميم */
.woocommerce-ordering {
    margin-bottom: 30px !important;
}

/* =========================================================
   التعميم الإجباري لشبكة المنتجات في كل صفحات المتجر
========================================================= */

/* 2. تحويل حاوية المنتجات لشبكة متطابقة مع الرئيسية */
.woocommerce-page ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* 4 منتجات باللابتوب */
    gap: 25px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
    display: none !important; /* تدمير فواصل ووكومرس المخفية */
}

/* 3. تصميم بطاقة المنتج الشاملة */
.woocommerce-page ul.products li.product {
    background: #fff !important;
    border-radius: 30px !important;
    padding: 15px !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    border: 1px solid #fef5f7 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
}

.woocommerce-page ul.products li.product:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 15px 35px rgba(249, 210, 222, 0.4) !important;
}

/* 4. صندوق الصورة ودمج اللون */
.woocommerce-page ul.products li.product img {
    background-color: #fef5f7 !important;
    border-radius: 20px !important;
    margin-bottom: 15px !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    mix-blend-mode: multiply !important;
}

/* 5. شارة الخصم */
.woocommerce-page ul.products li.product .onsale {
    position: absolute !important;
    top: 25px !important; 
    right: 25px !important;
    background-color: #fef5f7 !important;
    color: #b71928 !important;
    padding: 5px 12px !important;
    border-radius: 15px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    min-height: auto !important;
    min-width: auto !important;
    line-height: 1 !important;
    margin: 0 !important;
    z-index: 9 !important;
}

/* 6. عنوان المنتج */
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
    font-size: 1.1rem !important;
    color: #333 !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
}

/* 7. السعر (الأساسي والمشطوب) */
.woocommerce-page ul.products li.product .price {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    margin-bottom: 15px !important;
    color: #b71928 !important;
}
.woocommerce-page ul.products li.product .price del {
    color: #a0a0a0 !important;
    text-decoration: line-through !important;
    font-size: 1rem !important;
    margin-left: 8px !important;
    font-weight: normal !important;
    opacity: 1 !important;
}
.woocommerce-page ul.products li.product .price ins {
    color: #b71928 !important;
    text-decoration: none !important;
    background: transparent !important;
}

/* 8. زر الإضافة للسلة (تثبيت وتلوين) */
.woocommerce-page ul.products li.product .button {
    margin-top: auto !important; /* التثبيت الدائم في الأسفل */
    background-color: #b71928 !important;
    color: #fff !important;
    padding: 10px 20px !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: block !important;
    transition: 0.3s !important;
    border: none !important;
    width: 100% !important;
    text-align: center !important;
}

.woocommerce-page ul.products li.product .button:hover {
    background-color: #90141f !important;
}

/* --- التجاوب مع الجوال والتابلت لكل صفحات المتجر --- */
@media (max-width: 991px) {
    .woocommerce-page ul.products {
        grid-template-columns: repeat(2, 1fr) !important; /* عمودين للموبايل */
        gap: 15px !important;
    }
}

@media (max-width: 768px) {
    .woocommerce-page ul.products li.product {
        padding: 10px !important;
        border-radius: 20px !important;
    }
    .woocommerce-page ul.products li.product .woocommerce-loop-product__title {
        font-size: 0.95rem !important;
    }
}
/* =========================================================
   تنسيق زر "عرض جميع المنتجات" في الصفحة الرئيسية
========================================================= */
a.view-all-shop-btn {
    background-color: #b71928 !important; /* أحمر داكن */
    color: #ffffff !important;
    padding: 12px 40px !important;
    border-radius: 30px !important; /* حواف دائرية أنيقة */
    font-size: 18px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(183, 25, 40, 0.2) !important; /* ظل خفيف للزر */
}

a.view-all-shop-btn:hover {
    background-color: #e598ab !important; /* يتحول للزهري عند تمرير الماوس */
    color: #b71928 !important;
    transform: translateY(-3px) !important;
}

/* تنسيق القائمة الجانبية الأساسي */
.rawa-mobile-sidebar {
    position: fixed;
    top: 0;
    right: -100%; /* تكون مخفية خارج الشاشة جهة اليمين */
    width: 300px;
    height: 100%;
    background: #ffffff;
    z-index: 9999;
    transition: 0.4s ease-in-out; /* حركة انزلاق ناعمة */
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    padding: 20px;
    display: block !important; /* تأكيد الوجود */
}

/* الحالة النشطة: عندما نضغط على الزر، تصبح right: 0 فتظهر */
.rawa-mobile-sidebar.active {
    right: 0 !important;
}

/* تنسيق الروابط داخل القائمة لضمان ظهورها */
.mobile-nav-list {
    list-style: none;
    padding: 0;
    margin-top: 40px;
}

.mobile-nav-list li a {
    color: #b71928; /* لون أحمر روعة جلو */
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    display: block;
    padding: 15px 0;
    border-bottom: 1px solid #fef5f7;
}

/* زر الإغلاق X */
.close-sidebar-menu {
    background: none;
    border: none;
    color: #b71928;
    font-size: 40px;
    cursor: pointer;
    float: left;
}
/* =========================================================
   تنسيق قسم المميزات الاحترافي (تخطيط 2x1)
========================================================= */

.rawa-features-section {
    padding: 60px 0;
    background-color: #fff;
    text-align: center; /* توسيط كل النصوص */
}

.features-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 1. تنسيق الهيدر العلوي */
.features-header-text h2 {
    color: #b71928 !important; /* أحمر داكن روعة جلو */
    font-size: 2.2rem;
    font-weight: 900;
    margin-bottom: 10px;
}

.features-header-text p {
    color: #a0a0a0;
    font-size: 1.1rem;
}

.line-separator {
    width: 60px;
    height: 3px;
    background-color: #b71928;
    margin: 15px auto 40px; /* توسيط الخط */
    border-radius: 2px;
}

/* 2. هندسة الشبكة (Grid) لتحقيق شكل 2 فوق 1 */
.features-grid-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* عمودين متساويين */
    gap: 15px; /* المسافة بين المربعات */
}

/* 3. تنسيق بطاقة الميزة (المربع الزهري) */
.feature-item {
    background-color: #fce1e8 !important; /* خلفية زهرية فاتحة كما في الصورة */
    padding: 30px 20px;
    border-radius: 25px; /* حواف دائرية ناعمة */
    display: flex;
    flex-direction: column; /* الأيقونة فوق النص */
    align-items: center;
    justify-content: center;
    text-align: center;
    border: none !important;
    transition: transform 0.3s ease;
}

.feature-item:hover {
    transform: translateY(-5px);
}

/* 4. جعل الميزة الثالثة تأخذ العرض كاملاً (Full Width) */
.feature-full-width {
    grid-column: span 2; /* تمتد على العمودين */
}

/* 5. تنسيق الأيقونة والنص داخل المربع */
.feature-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
}

.feature-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.feature-text-wrapper h3 {
    color: #b71928 !important; /* نص أحمر داكن */
    font-size: 1.1rem;
    font-weight: 800;
    margin: 0;
}

/* التجاوب مع الجوال */
@media (max-width: 480px) {
    .features-header-text h2 { font-size: 1.8rem; }
    .feature-item { padding: 20px 10px; }
    .feature-text-wrapper h3 { font-size: 0.95rem; }
}
/* =========================================================
   تحسينات الفوتر (الروابط + أيقونات الدفع)
========================================================= */

/* 1. إضافة مسافات بين الروابط المهمة لسهولة القراءة والضغط */
.footer-menu-list li {
    margin-bottom: 15px !important; /* مسافة مريحة بين كل رابط والآخر */
}

.footer-menu-list li:last-child {
    margin-bottom: 0 !important;
}

.footer-menu-list li a {
    display: inline-block;
    padding: 2px 0;
    transition: color 0.3s ease;
}

/* 2. تصغير أيقونات الدفع وجعلها مرنة على الشاشات الصغيرة */
.payment-grid {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important; /* إجبارهم على البقاء في سطر واحد */
    gap: 8px !important; /* تقليل المسافة البينية لتوفير مساحة */
    margin-top: 20px !important;
}

.pay-box {
    flex: 0 1 auto !important;
}

.pay-box img {
    width: 55px !important; /* تصغير الحجم الأساسي */
    height: auto !important;
    object-fit: contain !important;
    filter: grayscale(0); /* الحفاظ على الألوان الأصلية للثقة */
}

/* 3. تعديلات خاصة للشاشات الصغيرة جداً (مثل آيفون SE) */
@media (max-width: 380px) {
    .pay-box img {
        width: 45px !important; /* تصغير إضافي ليناسب أصغر الشاشات */
    }
    
    .footer-menu-list li {
        margin-bottom: 12px !important;
    }
}
/* =========================================================
   إخفاء العنوان الأسود الافتراضي في أعلى الصفحات
========================================================= */

/* استهداف عنوان الصفحة الذي يظهر خارج حاوية المحتوى */
.page .entry-title, 
.page .page-title {
    display: none !important;
}

/* في بعض القوالب المخصصة، يكون العنوان داخل كلاس page-header */
.page-header {
    display: none !important;
}

/* الحفاظ على المسافات بعد حذف العنوان */
.woocommerce-breadcrumb {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}
/* =========================================================
   إصلاح محاذاة أزرار الراديو (طرق الشحن) في Checkout
========================================================= */

/* جعل الليست (طرق الشحن) تصطف أفقياً */
.woocommerce-checkout #shipping_method li {
    display: flex !important;
    align-items: flex-start !important; /* ليكون الزر بمحاذاة السطر الأول من النص */
    margin-bottom: 15px !important;
    text-align: right !important;
    flex-direction: row !important; /* ضمان الترتيب الصحيح */
}

/* تنسيق زر الراديو الصغير */
.woocommerce-checkout #shipping_method input[type="radio"] {
    margin-left: 12px !important; /* مسافة بين الزر والنص من جهة اليمين */
    margin-top: 5px !important;   /* موازنة الزر مع سطر الكتابة */
    flex-shrink: 0 !important;    /* منع الزر من الانضغاط إذا كان النص طويلاً */
    width: auto !important;
    height: auto !important;
}

/* تنسيق النص التابع للزر */
.woocommerce-checkout #shipping_method label {
    margin: 0 !important;
    display: inline !important;
    line-height: 1.5 !important;
    cursor: pointer !important;
    font-weight: 500 !important;
}

/* إخفاء أي نقاط (Bullets) قد تظهر بسبب المتصفح */
.woocommerce-checkout #shipping_method {
    list-style: none !important;
    padding: 0 !important;
}
/* =========================================================
   تنسيق قسم وزر الأسئلة الشائعة
========================================================= */
.home-faq-trigger {
    padding: 60px 0;
    background-color: #fffcfd; /* لون خلفية ناعم جداً */
}

.btn-primary-rawaa {
    background-color: #b71928;
    color: #fff !important;
    padding: 12px 35px;
    border-radius: 30px;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-primary-rawaa:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(183, 25, 40, 0.2);
}

/* =========================================================
   تنسيق الأكورديون (الأسئلة القابلة للطي)
========================================================= */
.rawaa-faq-container {
    max-width: 800px;
    margin: 40px auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-item {
    border: 1.5px solid #EAD5C5;
    border-radius: 15px;
    background: #ffffff;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item.active {
    border-color: #b71928;
    box-shadow: 0 8px 20px rgba(252, 225, 232, 0.6);
}

.faq-question {
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: #fdfaf8;
}

.faq-question h3 {
    margin: 0;
    color: #333;
    font-size: 1.1rem;
    font-weight: 800;
    transition: color 0.3s;
}

.faq-item.active .faq-question h3 {
    color: #b71928;
}

.faq-icon {
    font-size: 1.8rem;
    color: #b71928;
    line-height: 1;
    transition: transform 0.4s ease;
}

.faq-item.active .faq-icon {
    transform: rotate(45deg); /* تحويل علامة + إلى x عند الفتح */
}

.faq-answer {
    max-height: 0; /* الإخفاء الافتراضي */
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
    background: #ffffff;
}

.faq-answer p {
    margin: 0;
    color: #555;
    line-height: 1.7;
    font-size: 1rem;
}

/* عند التفعيل يتم إعطاء ارتفاع ومسافات */
.faq-item.active .faq-answer {
    max-height: 300px; 
    padding: 20px 25px;
    border-top: 1px solid #fef5f7;
}
/* =========================================================
   تنسيق حاوية الصورة الرئيسية (للسماح بوضع الزر فوقها)
========================================================= */
.hero-image-full {
    position: relative; /* ضروري جداً لكي لا يهرب الزر خارج الصورة */
    width: 100%;
    display: block;
}

.hero-image-full img {
    width: 100%;
    height: auto;
    display: block; /* لمنع أي مسافات بيضاء سفلية */
}

/* =========================================================
   تنسيق زر الهيرو (الرئيسي) ليكون طافياً فوق الصورة
========================================================= */
.hero-cta-btn {
    position: absolute;
    bottom: 15%; /* نسبة ارتفاع الزر من أسفل الصورة (يمكنك تغييرها مثلاً لـ 20% لرفعه أكثر) */
    left: 50%;
    transform: translateX(-50%); /* هذا السطر يضمن توسيط الزر في منتصف الصورة بالضبط */
    
    display: inline-block;
    background-color: #b71928;
    color: #ffffff !important;
    padding: 15px 40px;
    border-radius: 35px;
    font-size: 1.2rem;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(183, 25, 40, 0.4);
    transition: all 0.3s ease;
    z-index: 10;
    white-space: nowrap; /* يمنع انقسام النص لسطرين */
}

/* تأثير عند مرور الماوس */
.hero-cta-btn:hover {
    transform: translate(-50%, -5px); /* الحفاظ على التوسيط مع رفعه للأعلى قليلاً */
    box-shadow: 0 12px 25px rgba(183, 25, 40, 0.6);
    background-color: #9a1522;
}

/* التجاوب مع شاشات الجوال */
@media (max-width: 768px) {
    .hero-cta-btn {
        padding: 10px 25px;
        font-size: 1rem;
        bottom: 10%; /* إنزاله قليلاً في الجوال ليتناسب مع حجم الصورة الصغير */
    }
}
#billing_kuwait_governorate_field {
    display: none;
}

.shipping-colored {
    color: #AD445A !important;
    font-weight: 900 !important;
    margin-right: 5px !important;
}

#billing_shipping_region_field {
    background: #fdfaf8 !important;
    border: 1.5px solid #EAD5C5 !important;
    border-radius: 20px !important;
    padding: 15px !important;
    margin-top: 15px !important;
}

.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.select2-container--default .select2-selection--single {

    border: 1.5px solid #EAD5C5 !important;
    border-radius: 35px !important;
    padding: 12px 25px !important;
    background-color: #ffffff !important;
    height: auto !important;
    font-size: 14px !important;
}

.woocommerce-checkout-review-order-table .product-name {
    width: 80% !important;
    text-align: right !important;
    padding: 12px !important;
    line-height: 1.6 !important;
}

.woocommerce-checkout-review-order-table .product-total {
    width: 20% !important;
    text-align: left !important;
    white-space: nowrap !important;
}

li.wc_payment_method {
    margin-bottom: 15px !important;
    border: 1px solid #f2e4d8 !important;
    border-radius: 12px !important;
    padding: 10px !important;
}