/* ====================================================
   تحسين تصميم بطاقات ومربعات آراء العملاء - ثيم سيليا
   ==================================================== */

/* 1. تحسين البطاقة الرئيسية للرأي */
.reviews__card {
  border-radius: 16px !important; /* حواف أكثر انسيابية وعصرية */
  border: 1px solid rgba(0, 0, 0, 0.05) !important; /* إطار خفيف جداً لتحديد المربع */
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 2px 6px -1px rgba(0, 0, 0, 0.02) !important; /* ظل ناعم وفخم */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; /* حركة سلسة عند التمرير */
  position: relative !important;
  overflow: hidden !important;
}

/* تأثير الرفع والظل عند حوم الماوس فوق البطاقة */
.reviews__card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.08), 0 4px 12px -2px rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* 2. تحسين الحاوية المحيطة بالنص */
.reviews__text-wrap {
  position: relative !important;
  padding: 0.25rem 0.5rem !important;
}

/* إضافة لمسة اقتباس ديكورية خفيفة في خلفية المربع */
.reviews__text-wrap::before {
  content: "“" !important;
  position: absolute !important;
  top: -15px !important;
  right: -5px !important;
  font-size: 3rem !important;
  font-family: Georgia, serif !important;
  opacity: 0.12 !important;
  line-height: 1 !important;
  pointer-events: none !important;
  color: currentColor !important;
}

/* 3. تحسين قراءة نص المراجعة */
.reviews__text {
  line-height: 1.75 !important; /* زيادة المسافة بين الأسطر لتحسين القراءة */
  font-size: 0.9375rem !important; /* حجم خط مريح للعين (حوالي 15px) */
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
}

/* تحديد عدد الأسطر بـ 4 أسطر فقط مع إظهار (...) إذا كان النص طويلاً للحفاظ على تناسق ارتفاع البطاقات */
.reviews__text {
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* ====================================================
   تنسيق نجوم التقييم واسم وصورة العميل - ثيم سيليا
   ==================================================== */

/* 1. تنسيق نجوم التقييم */
.reviews__card .salla-rating,
.reviews__card [class*="rating"] {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  margin-bottom: 0.75rem !important;
}

/* تحسين شكل ولون النجوم */
.reviews__card .salla-rating *,
.reviews__card [class*="rating"] svg,
.reviews__card [class*="rating"] i {
  color: #f59e0b !important; /* لون ذهبي دافئ وواضح */
  font-size: 0.95rem !important;
  transition: transform 0.2s ease !important;
}

/* تأثير خفيف عند التحويم على النجوم */
.reviews__card:hover .salla-rating {
  transform: scale(1.03) !important;
  transition: transform 0.3s ease !important;
}

/* 2. حاوية معلومات العميل (الصورة والاسم) */
.reviews__card .reviews__author,
.reviews__card [class*="author"],
.reviews__card [class*="user"],
.reviews__card .flex.items-center {
  margin-top: 1rem !important;
  padding-top: 0.85rem !important;
  border-top: 1px dashed rgba(0, 0, 0, 0.08) !important; /* خط فاصل منقط أنيق */
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

/* 3. تنسيق صورة العميل (أو الدائرة الرمزية) */
.reviews__card img,
.reviews__card [class*="avatar"],
.reviews__card [class*="author"] img {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important; /* شكل دائري كامل */
  object-fit: cover !important;
  border: 2px solid var(--color-store-primary, #000) !important; /* إطار بلون المتجر الرئيسي */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  flex-shrink: 0 !important;
}

/* 4. تنسيق اسم العميل وتاريخ المراجعة */
.reviews__card [class*="author-name"],
.reviews__card [class*="user-name"],
.reviews__card h4,
.reviews__card h3,
.reviews__card strong {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: var(--color-store-text-primary, #1a202c) !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

/* تنسيق شارة "مشتري مؤكد" أو التاريخ إن وجد */
.reviews__card [class*="date"],
.reviews__card [class*="verified"],
.reviews__card span:not([class*="rating"]) {
  font-size: 0.75rem !important;
  opacity: 0.7 !important;
  margin-top: 2px !important;
}

/* ====================================================
   تصميم مدمج وبحجم متناسق (الآراء والأسئلة الشائعة)
   ==================================================== */

/* 1. تصغير وحجم مدمج لكروت الآراء */
.reviews__card {
  border-radius: 12px !important; /* حواف أصغر وأرق */
  background: var(--color-store-bg-secondary, #ffffff) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.25s ease !important;
}

.reviews__card:hover {
  transform: translateY(-2px) !important; /* رفع خفيف جداً */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.07) !important;
}

/* تصغير نص المراجعة */
.reviews__text {
  font-size: 0.875rem !important; /* 14px مناسب جداً ومدمج */
  line-height: 1.6 !important;
  margin-top: 0.25rem !important;
  margin-bottom: 0.5rem !important;
}

/* تصغير صورة العميل والنجوم */
.reviews__card img,
.reviews__card [class*="avatar"] {
  width: 32px !important;
  height: 32px !important;
}

.reviews__card [class*="author-name"] {
  font-size: 0.825rem !important;
}


/* 2. تصغير وحجم مدمج لمربعات الأسئلة الشائعة (FAQ) */
.single-faq {
  border-radius: 10px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  background-color: var(--color-store-bg-secondary, #ffffff) !important;
  padding: 0.65rem 1rem !important; /* تقليل الحشوة الداخلية للنصف */
  margin-bottom: 0.5rem !important; /* تقليل المسافة بين المربعات */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important;
  transition: border-color 0.2s ease !important;
}

.single-faq:hover {
  border-color: rgba(0, 0, 0, 0.15) !important;
}

/* تصغير خط السؤال */
.single-faq summary,
.single-faq h3,
.single-faq h4 {
  font-size: 0.875rem !important; /* 14px */
  font-weight: 600 !important;
}

/* تصغير خط الإجابة */
.single-faq p,
.single-faq [class*="content"] {
  font-size: 0.825rem !important; /* 13px */
  line-height: 1.5 !important;
  margin-top: 0.4rem !important;
  padding-top: 0.4rem !important;
}