/* Add custom CSS styles below */ 
/* Add custom CSS styles below */ 
/* صفحة المنتج: نقل كتل التقييمات لتكون فوق سلايدر المنتجات المشابهة */
@import url('https://fonts.googleapis.com/css2?family=Thmanyah+Sans:wght@300;400;600;700&display=swap');

body, html, button, input, select, textarea {
    font-family: 'Thmanyah Sans', sans-serif !important;
}

main.faal-page:has(> .faal-related-products) {
  display: flex;
  flex-direction: column;
}
/* عملاؤنا: صف أفقي واحد قابل للسحب بدل الشبكة متعددة الأسطر */
.faal-clients-carousel .faal-clients-logos {
  flex-wrap: nowrap;
  justify-content: safe center;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 6px 4px 12px;
  margin-inline: -4px;
}

.faal-clients-carousel .faal-clients-logos::-webkit-scrollbar { display: none; }

/* الجوال: زر القائمة بجانب الشعار على اليمين */
@media (max-width: 960px) {
  /* صفّ الأدوات يصبح "شفافًا" فتتحول أيقوناته إلى أبناء مباشرين للهيدر
     ويمكن عندها ترتيبها بحرية */
  .faal-header .faal-header-actions { display: contents; }
  .faal-header-shell .faal-header   { gap: 10px; }

  .faal-header .faal-brand       { order: 1; }  /* الشعار في أقصى اليمين */
  .faal-header .faal-menu-toggle { order: 2; }  /* زر القائمة بجانبه */
  .faal-header .faal-user-menu   { order: 3; }
  .faal-header .faal-cart        { order: 4; }
  .faal-header .faal-search-btn  { order: 5; }

  /* كل الفراغ يذهب بعد زر القائمة، فتُدفع السلة والبحث إلى الطرف الآخر */
  [dir="rtl"] .faal-header .faal-menu-toggle { margin-left: auto; }
  [dir="ltr"] .faal-header .faal-menu-toggle { margin-right: auto; }
}

/* البطل + تفاصيل المنتج يبقيان في البداية */
main.faal-page:has(> .faal-related-products) > * { order: 1; }

/* التقييمات ثانياً */
main.faal-page:has(> .faal-related-products) > .s-before-reviews,
main.faal-page:has(> .faal-related-products) > .faal-product-reviews { order: 2; }

/* المنتجات المشابهة أخيراً */
main.faal-page:has(> .faal-related-products) > .s-before-related,
main.faal-page:has(> .faal-related-products) > .faal-related-products,
main.faal-page:has(> .faal-related-products) > .s-after-related { order: 3; }
/* إعادة المودال إلى تنسيق سلة الأصلي بتحييد تدخّل الثيم */
/* إصلاح ألوان بطاقات "خدمات قد تهمك" في صفحة المنتج */
.faal-related-products .s-product-card-content {
  background-color: transparent !important;
}
.dots-container{
  border:none !important;
  background-color: transparent !important;
}
.faal-language{display: none}
.faal-related-products .s-product-card-content-title,
.faal-related-products .s-product-card-content-title a {
  color: #011412 !important;
  font-size: 17px !important;
}
.carousel-container{
  width: 90% !important;
  margin: auto !important;
}
.slide.active .slide-overlay{
  background: linear-gradient(to right, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.3) 100%);
  
}
salla-slider::part(slide-overlay) {
  background: linear-gradient(
    to right, 
    rgba(0, 0, 0, 0.3) 0%, 
    rgba(0, 0, 0, 0.1) 50%, 
    rgba(0, 0, 0, 0.3) 100%
  ) !important;
}
.s-block--bundle-hero-carousel{
  width: 90%;
  margin: auto;
}
.s-user-menu-trigger{
  background-color: transparent !important;
}
.faal-brand-logo{
  height: 32px !important;
  width: 77px !important;
}
.s-breadcrumb-arrow{
  display: block !important;
}
.faal-content-hero.is-right{
  padding: 50px 0 0 0 !important;
}
.s-products-slider-card .s-product-card-entry .s-product-card-content{
    max-height: 280px;

}
.s-product-card-starting-price p,h4{
  color: black !important;
}
.s-block--bundle-customers-also-bought{
  margin: auto;
  width: 90%
}
.faal-section.faal-product-reviews{
  padding: 0
}
.s-menu-footer-item{
  padding: 0 !important;
}
.faal-section.faal-related-products{
padding-bottom: 0px !important;
}
.faal-content-hero .faal-container p{
  display: none;
}
@media (300px <= width <= 500px) {
  /* التنسيقات الخاصة بالشاشات بين 320 و 500 بكسل */
 .faal-header-actions{
   gap: 2px !important;
   
 }
  .faal-dynamic-stats{
grid-template-columns: repeat(3, 1fr);
}
.faal-stat strong{
font-size:30px !important;
}
}
/* المفتاح: transform يحبس خلفية سلة داخل صندوق الثيم */
html .s-login-modal,
html.faal-login-open .s-login-modal {
  transform: none !important;
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
  z-index: 200 !important;
}
.s-login-modal-wrapper {
  background-color: #fee9b3 !important;
}
/* احترام حالة الإغلاق من سلة نفسها — وإلا بقيت خلفية رمادية فارغة بعد ✕ */
html.faal-login-open .s-login-modal.s-hidden,
html .s-login-modal.s-hidden {
  display: none !important;
}
.btn--primary{
  color: white !important;
  background-color: #022f2c !important;
}
.main-content.w-full{
  width: auto !important;
}
.faal-login-btn{
  color: white !important;
}
.container .flex.items-start{
  display: block !important;
}
.s-breadcrumb-primary-reverse li,.s-breadcrumb-arrow,.s-breadcrumb-primary-reverse li a{
  color: black !important;
}



/* ==========================================================================
   فال — تصحيحات CSS من لوحة سلة
   أ) مودال تسجيل الدخول    ب) أدوات Tailwind    ج) مكوّنات صفحات العميل
   د) نقاط التوقف
   ========================================================================== */


/* ==========================================================================
   أ) مودال تسجيل الدخول
   سلة تشحن مودالًا كامل التنسيق وتحقن CSS الخاص به تلقائيًا:
     .s-modal-container { position: fixed; inset: 0; z-index: 200 }
     .s-modal-overlay   { position: fixed; inset: 0; background: rgb(107 114 128 / .75) }
   والثيم يضع transform على العنصر المضيف، فيصبح هو مرجع التموضع لأبنائه
   ذوي position:fixed — وتنحبس خلفية سلة داخل صندوق 460px بدل تغطية الشاشة.
   الحل تحييد تدخّل الثيم، لا إضافة تنسيق جديد.
   =====


/* ==========================================================================
   ب) أدوات Tailwind المستخدمة في صفحات العميل
   الصفحات موروثة من قالب Twilight وتستخدم أصناف Tailwind التي لا يشحنها
   ثيم فال. كل ما يلي محصور داخل صفحات العميل فلا يمسّ بقية الموقع.
   ========================================================================== */
html .s-login-modal[visible] iframe {
  height: 100vh !important;
  height: 100dvh !important;
}
html.faal-login-open:not(:has(.s-login-modal[visible])),
html.faal-login-open:not(:has(.s-login-modal[visible])) body {
  overflow: visible !important;
}
.profile-header .relative,
.profile-header ~ .container .relative { position: relative; }

.profile-header .flex,
.profile-header ~ .container .flex { display: flex; }
.profile-header ~ .container .grid { display: grid; }
.profile-header ~ .container .block { display: block; }
.profile-header ~ .container .hidden { display: none; }

.profile-header .items-center,
.profile-header ~ .container .items-center { align-items: center; }
.profile-header ~ .container .items-start { align-items: flex-start; }
.profile-header .justify-between { justify-content: space-between; }
.profile-header ~ .container .justify-center { justify-content: center; }
.profile-header ~ .container .flex-col { flex-direction: column; }
.profile-header ~ .container .flex-1 { flex: 1 1 0%; }
.profile-header ~ .container .shrink-0 { flex-shrink: 0; }

.profile-header .h-full { height: 100%; }
.profile-header .w-full,
.profile-header ~ .container .w-full { width: 100%; }
.profile-header .self-start { align-self: flex-start; }
.profile-header ~ .container .m-auto { margin: auto; }
.profile-header ~ .container .h-20 { height: 5rem; }
.profile-header ~ .container .w-20 { width: 5rem; }
.profile-header ~ .container .max-w-3xl { max-width: 48rem; }

.profile-header ~ .container .rounded-md { border-radius: 0.375rem; }
.profile-header ~ .container .rounded-full { border-radius: 9999px; }
.profile-header ~ .container .bg-gray-100 { background-color: #f3f4f6; }

.profile-header ~ .container .text-center { text-align: center; }
.profile-header ~ .container .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.profile-header ~ .container .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.profile-header ~ .container .font-bold { font-weight: 700; }
.profile-header ~ .container .text-gray-700 { color: #374151; }

.profile-header ~ .container .mb-2 { margin-bottom: 0.5rem; }
.profile-header ~ .container .mt-6 { margin-top: 1.5rem; }
.profile-header ~ .container .mt-10 { margin-top: 2.5rem; }
.profile-header ~ .container .py-5,
.profile-header .py-5 { padding-block: 1.25rem; }
.profile-header ~ .container .gap-6 { gap: 1.5rem; }
.profile-header ~ .container .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }


/* ==========================================================================
   ج) مكوّنات صفحات العميل
   بعد الأدوات عمدًا: عند تساوي الخصوصية تفوز القاعدة المتأخرة.
   ========================================================================== */

/* الهيدر الأخضر. الارتفاع على الشاشات الكبيرة في القسم (د) — لا بد أن يطابق
   سحب الشريط الجانبي \u200Elg:-mt-28\u200E (112px) وإلا خرج الشريط من الهيدر. */
.profile-header {
  position: relative;
  overflow: hidden;
  padding-block: 18px;
}

a[href="https://faal-wa.sa/ar/blog"]{
  display: none;
}
a[href="https://faal-wa.sa/ar/loyalty"]{
  display: none;
}
.profile-header .container,
.profile-header ~ .container {
  width: min(1320px, calc(100% - 40px));
  margin-inline: auto;
}

.profile-header ~ .container {
  padding-bottom: 60px;
}

.profile-header .breadcrumbs {
  width: 100%;
  padding-block: 1.25rem;
  align-self: flex-start;
}
.profile-header .breadcrumbs,
.profile-header .breadcrumbs a,
.profile-header .breadcrumbs span { color: #ffffff; }
.profile-header .breadcrumbs a:hover { opacity: 0.8; }

.profile-header ~ .container .sidebar {
  flex-shrink: 0;
  width: 100%;
  border-radius: 24px;
  padding: 18px;
}
.profile-header ~ .container .sidebar > * + * { margin-top: 1px; }

.profile-header ~ .container .main-content {
  flex: 1 1 0%;
  width: 100%;
  max-width: 48rem;
}

.profile-header ~ .container .avatar-wrap {
  width: 5rem;
  height: 5rem;
  margin: auto;
  overflow: hidden;
  border-radius: 9999px;
  background: #f3f4f6;
}
.profile-header ~ .container .avatar-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #6a706c;
  font-size: 11px;
  text-align: center;
}
.profile-header ~ .container .avatar-placeholder .text {
  display: block;
  padding-inline: 4px;
  line-height: 1.2;
}

/* الحالة الفارغة في صفحة الطلبات */
.profile-header ~ .container .no-content-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 60px 24px;
  text-align: center;
  border: 1px solid rgba(2, 47, 44, 0.1);
  border-radius: 24px;
  background: #fffefa;
  color: #6a706c;
}
.profile-header ~ .container .no-content-placeholder .icon {
  font-size: 46px;
  color: #022f2c;
  opacity: 0.5;
}

/* نموذج صفحة الإعدادات */
.form--user-profile .profile-field-item { min-width: 0; }
.form--user-profile label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: #374151;
}
.form--user-profile .form-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #e5ded4;
  border-radius: 16px;
  background: #ffffff;
  font-family: inherit;
  font-size: 15px;
}
.form--user-profile .form-input:focus {
  outline: 2px solid rgba(2, 47, 44, 0.35);
  outline-offset: 1px;
}
.form--user-profile .profile-filepond-placholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 22px;
  text-align: center;
  border: 1px dashed #e5ded4;
  border-radius: 16px;
}
.form--user-profile .profile-filepond-placholder-icon { font-size: 28px; color: #022f2c; }
.form--user-profile .profile-filepond-placholder-text { font-size: 14px; color: #6a706c; }
.form--user-profile .filepond--label-action { text-decoration: underline; cursor: pointer; }


/* ==========================================================================
   د) نقاط التوقف — في النهاية لتفوز على القواعد الأساسية
   ========================================================================== */

@media (min-width: 640px) {
  .profile-header ~ .container .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-header ~ .container .sm\:gap-8 { gap: 2rem; }
  [dir="rtl"] .profile-header ~ .container .sm\:rtl\:text-right { text-align: right; }
  [dir="ltr"] .profile-header ~ .container .sm\:ltr\:text-left { text-align: left; }
}

@media (min-width: 768px) {
  .profile-header ~ .container .md\:mb-9 { margin-bottom: 2.25rem; }
}

@media (min-width: 1024px) {
  /* 192px = قيمة رائد lg:h-48. الشريط يُسحب 112px لأعلى فيتداخل 80px. */
  .profile-header {
    height: 12rem;
    padding-block: 0;
  }

  .profile-header ~ .container.lg\:mb-24 { margin-bottom: 6rem; }
  .profile-header ~ .container .lg\:flex-row { flex-direction: row; }
  .profile-header ~ .container .lg\:block { display: block; }
  .profile-header ~ .container .lg\:sticky { position: sticky; top: 6rem; }
  .profile-header ~ .container .lg\:-mt-28 { margin-top: -7rem; }
  .profile-header ~ .container .lg\:bg-white { background-color: #ffffff; }
  .profile-header ~ .container .lg\:w-72 { width: 18rem; }
  .profile-header ~ .container .lg\:pt-8 { padding-top: 2rem; }
  .profile-header ~ .container .lg\:pb-11 { padding-bottom: 2.75rem; }
  .profile-header ~ .container .lg\:pt-10 { padding-top: 2.5rem; }
  .profile-header ~ .container .lg\:shadow-default { box-shadow: 0 16px 48px rgba(1, 20, 18, 0.08); }


  [dir="rtl"] .profile-header ~ .container .rtl\:lg\:ml-8 { margin-left: 2rem; }
  [dir="ltr"] .profile-header ~ .container .ltr\:lg\:mr-8 { margin-right: 2rem; }
}
[aria-label="Sidebar"] {
display:none;
}
  .profile-header{
    background-color: transparent !important;
    display: none;
  }



/* ==========================================================================
   هـ) صفحة تفاصيل الطلب — orders/single.twig
   ~170 صنف Tailwind إضافي. محصورة داخل صفحات العميل كسابقتها.
   ملاحظة: space-x مكتوبة بـ margin-inline-start فتضبط الاتجاهين تلقائيًا،
   ولذلك لا حاجة لتعريف rtl:space-x-reverse.
   ========================================================================== */

/* ---------- عرض ---------- */
.profile-header ~ .container .inline-block { display: inline-block; }
.profile-header ~ .container .inline-flex { display: inline-flex; }
.profile-header ~ .container .flow-root { display: flow-root; }
.profile-header ~ .container .flex-row { flex-direction: row; }
.profile-header ~ .container .flex-wrap { flex-wrap: wrap; }
.profile-header ~ .container .flex-none { flex: none; }
.profile-header ~ .container .items-baseline { align-items: baseline; }
.profile-header ~ .container .overflow-hidden { overflow: hidden; }
.profile-header ~ .container .table-fixed { table-layout: fixed; }
.profile-header ~ .container .min-w-full { min-width: 100%; }
.profile-header ~ .container .whitespace-nowrap { white-space: nowrap; }
.profile-header ~ .container .object-cover { object-fit: cover; }
.profile-header ~ .container .cursor-pointer { cursor: pointer; }
.profile-header ~ .container .underline { text-decoration: underline; }
.profile-header ~ .container .transition-colors { transition: color .18s ease, background-color .18s ease, border-color .18s ease; }

/* ---------- أبعاد ---------- */
.profile-header ~ .container .w-6 { width: 1.5rem; }
.profile-header ~ .container .w-7 { width: 1.75rem; }
.profile-header ~ .container .w-40 { width: 10rem; }
.profile-header ~ .container .h-6 { height: 1.5rem; }
.profile-header ~ .container .h-7 { height: 1.75rem; }
.profile-header ~ .container .max-w-16 { max-width: 4rem; }
.profile-header ~ .container .max-h-8 { max-height: 2rem; }

/* ---------- حشوات ---------- */
.profile-header ~ .container .p-3 { padding: .75rem; }
.profile-header ~ .container .p-4 { padding: 1rem; }
.profile-header ~ .container .p-5 { padding: 1.25rem; }
.profile-header ~ .container .px-2 { padding-inline: .5rem; }
.profile-header ~ .container .px-3 { padding-inline: .75rem; }
.profile-header ~ .container .px-4 { padding-inline: 1rem; }
.profile-header ~ .container .px-5 { padding-inline: 1.25rem; }
.profile-header ~ .container .py-1 { padding-block: .25rem; }
.profile-header ~ .container .py-1\.5 { padding-block: .375rem; }
.profile-header ~ .container .py-2 { padding-block: .5rem; }
.profile-header ~ .container .py-2\.5 { padding-block: .625rem; }
.profile-header ~ .container .py-3 { padding-block: .75rem; }
.profile-header ~ .container .py-3\.5 { padding-block: .875rem; }
.profile-header ~ .container .pt-4 { padding-top: 1rem; }
.profile-header ~ .container .pt-8 { padding-top: 2rem; }

/* ---------- هوامش ---------- */
.profile-header ~ .container .mb-1 { margin-bottom: .25rem; }
.profile-header ~ .container .mb-1\.5 { margin-bottom: .375rem; }
.profile-header ~ .container .mb-3\.5 { margin-bottom: .875rem; }
.profile-header ~ .container .mb-4 { margin-bottom: 1rem; }
.profile-header ~ .container .mb-5 { margin-bottom: 1.25rem; }
.profile-header ~ .container .mt-2 { margin-top: .5rem; }
.profile-header ~ .container .mt-3 { margin-top: .75rem; }
.profile-header ~ .container .mt-5 { margin-top: 1.25rem; }
.profile-header ~ .container .mx-2 { margin-inline: .5rem; }
.profile-header ~ .container .ml-4 { margin-left: 1rem; }
.profile-header ~ .container .rtl\:ml-1 { margin-inline-start: .25rem; }
.profile-header ~ .container .rtl\:ml-2 { margin-inline-start: .5rem; }
.profile-header ~ .container .ltr\:mr-1 { margin-inline-end: .25rem; }
.profile-header ~ .container .ltr\:mr-2 { margin-inline-end: .5rem; }
.profile-header ~ .container .last\:mb-0:last-child { margin-bottom: 0; }

/* ---------- فجوات وتباعد الأبناء ---------- */
.profile-header ~ .container .gap-1 { gap: .25rem; }
.profile-header ~ .container .gap-2 { gap: .5rem; }
.profile-header ~ .container .gap-3 { gap: .75rem; }
.profile-header ~ .container .space-x-1 > * + * { margin-inline-start: .25rem; }
.profile-header ~ .container .space-x-2 > * + * { margin-inline-start: .5rem; }
.profile-header ~ .container .space-x-2\.5 > * + * { margin-inline-start: .625rem; }
.profile-header ~ .container .space-x-5 > * + * { margin-inline-start: 1.25rem; }
.profile-header ~ .container .space-y-4 > * + * { margin-top: 1rem; }
.profile-header ~ .container .space-y-5 > * + * { margin-top: 1.25rem; }

/* ---------- نصوص ---------- */
.profile-header ~ .container .text-xs { font-size: .75rem; line-height: 1rem; }
.profile-header ~ .container .text-base { font-size: 1rem; line-height: 1.5rem; }
.profile-header ~ .container .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.profile-header ~ .container .leading-5 { line-height: 1.25rem; }
.profile-header ~ .container .leading-none { line-height: 1; }
.profile-header ~ .container .font-normal { font-weight: 400; }
.profile-header ~ .container .font-medium { font-weight: 500; }
.profile-header ~ .container .font-semibold { font-weight: 600; }
.profile-header ~ .container .text-start { text-align: start; }
.profile-header ~ .container .rtl\:text-left { text-align: left; }
.profile-header ~ .container .rtl\:text-start { text-align: start; }
.profile-header ~ .container .ltr\:text-right { text-align: right; }
.profile-header ~ .container .ltr\:text-end { text-align: end; }

/* ---------- ألوان ---------- */
.profile-header ~ .container .text-primary { color: #022f2c; }
.profile-header ~ .container .\!text-primary { color: #022f2c !important; }
.profile-header ~ .container .text-primary-reverse { color: #ffffff; }
.profile-header ~ .container .text-dark { color: #011a18; }
.profile-header ~ .container .text-gray-400 { color: #9ca3af; }
.profile-header ~ .container .text-gray-500 { color: #6b7280; }
.profile-header ~ .container .text-gray-600 { color: #4b5563; }
.profile-header ~ .container .text-red-500 { color: #ef4444; }
.profile-header ~ .container .text-blue-500 { color: #3b82f6; }
.profile-header ~ .container .bg-white { background-color: #ffffff; }
.profile-header ~ .container .bg-primary { background-color: #022f2c; }
.profile-header ~ .container .bg-blue-50 { background-color: #eff6ff; }
.profile-header ~ .container .hover\:opacity-80:hover { opacity: .8; }
.profile-header ~ .container .hover\:text-primary:hover { color: #022f2c; }

/* ---------- حدود ---------- */
.profile-header ~ .container .border { border: 1px solid #e5e7eb; }
.profile-header ~ .container .border-t { border-top: 1px solid #e5e7eb; }
.profile-header ~ .container .border-b { border-bottom: 1px solid #e5e7eb; }
.profile-header ~ .container .border-gray-100 { border-color: #f3f4f6; }
.profile-header ~ .container .border-gray-200 { border-color: #e5e7eb; }
.profile-header ~ .container .border-blue-200 { border-color: #bfdbfe; }
.profile-header ~ .container .border-primary { border-color: #022f2c; }
.profile-header ~ .container .last\:border-none:last-child { border: 0; }
.profile-header ~ .container .last\:border-b-0:last-child { border-bottom: 0; }
.profile-header ~ .container .divide-y > * + * { border-top: 1px solid #e5e7eb; }
.profile-header ~ .container .divide-border-color > * + * { border-color: #e5ded4; }

/* ---------- زوايا وظلال ---------- */
.profile-header ~ .container .rounded { border-radius: .25rem; }
.profile-header ~ .container .rounded-t-md { border-start-start-radius: .375rem; border-start-end-radius: .375rem; }
.profile-header ~ .container .first\:rounded-t-md:first-child { border-start-start-radius: .375rem; border-start-end-radius: .375rem; }
.profile-header ~ .container .last\:rounded-b-md:last-child { border-end-start-radius: .375rem; border-end-end-radius: .375rem; }
.profile-header ~ .container .btn--rounded-full { border-radius: 9999px; }
.profile-header ~ .container .shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); }

/* ---------- شبكة ---------- */
.profile-header ~ .container .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ==========================================================================
   مكوّنات هذه الصفحة
   ========================================================================== */

.profile-header ~ .container .center-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.profile-header ~ .container .v-align { vertical-align: middle; }
.profile-header ~ .container .sicon { font-family: sallaicons; }

/* أرقام ومعرّفات تُقرأ من اليسار داخل نص عربي */
.profile-header ~ .container .text-unicode {
  display: inline-block;
  direction: ltr;
  unicode-bidi: embed;
}

/* رأس التقييم */
.profile-header ~ .container .rating-header {
  position: relative;
  padding: 1.25rem;
  border-radius: .375rem;
  color: #ffffff;
  background: linear-gradient(135deg, #022f2c 0%, #0a4a44 100%);
}
.profile-header ~ .container .rating-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* بطاقات الشحنات والمنتجات */
.profile-header ~ .container .shipping-orders {
  border: 1px solid rgba(2, 47, 44, .1);
  border-radius: 16px;
  background: #ffffff;
  overflow: hidden;
}
.profile-header ~ .container .order-item {
  border-bottom: 1px solid #f3f4f6;
}

/* التلميحات: المحتوى مخفي حتى التمرير/التركيز.
   بلا هذه القاعدة يظهر نص كل تلميح دائمًا داخل الصفحة — وهو أوضح
   عطل بصري في هذه الصفحة. */
.profile-header ~ .container .tooltip-toggle {
  position: relative;
}
.profile-header ~ .container .tooltip-content {
  position: absolute;
  bottom: calc(100% + 8px);
  inset-inline-start: 50%;
  transform: translateX(50%);
  z-index: 30;
  width: max-content;
  max-width: min(280px, 80vw);
  padding: 10px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  color: #6b7280;
  font-size: .8125rem;
  line-height: 1.5;
  text-align: start;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease;
}
[dir="ltr"] .profile-header ~ .container .tooltip-content { transform: translateX(-50%); }

.profile-header ~ .container .tooltip-toggle:hover > .tooltip-content,
.profile-header ~ .container .tooltip-toggle:focus-within > .tooltip-content {
  opacity: 1;
  visibility: visible;
}

.profile-header ~ .container .icon-trigger { display: inline-flex; align-items: center; }
.profile-header ~ .container .close-tooltip { position: absolute; top: 2px; inset-inline-end: 4px; }

/* ==========================================================================
   نقاط توقف هذه الصفحة
   ========================================================================== */

@media (max-width: 768px) {
  .profile-header ~ .container .single-order-header-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  /* التلميح قرب حافة الشاشة على الجوال */
  .profile-header ~ .container .mobile-shifted > .tooltip-content {
    inset-inline-start: auto;
    inset-inline-end: 0;
    transform: none;
  }
}

@media (min-width: 768px) {
  .profile-header ~ .container .md\:flex { display: flex; }
  .profile-header ~ .container .md\:table-row { display: table-row; }
  .profile-header ~ .container .md\:flex-row { flex-direction: row; }
  .profile-header ~ .container .md\:flex-no-wrap { flex-wrap: nowrap; }
  .profile-header ~ .container .md\:items-center { align-items: center; }
  .profile-header ~ .container .md\:w-auto { width: auto; }
  .profile-header ~ .container .md\:h-20 { height: 5rem; }
  .profile-header ~ .container .md\:px-5 { padding-inline: 1.25rem; }
  .profile-header ~ .container .md\:px-6 { padding-inline: 1.5rem; }
  .profile-header ~ .container .md\:py-0 { padding-block: 0; }
  .profile-header ~ .container .md\:py-4 { padding-block: 1rem; }
  .profile-header ~ .container .md\:mb-0 { margin-bottom: 0; }
  .profile-header ~ .container .md\:text-base { font-size: 1rem; line-height: 1.5rem; }
  .profile-header ~ .container .md\:space-y-0 > * + * { margin-top: 0; }
}

/* ========================================
   فال واتساب - تنسيق قسم التقييمات
   ======================================== */
/* ========================================
   فال واتساب - تنسيق قسم التقييمات (أفقي + كاروسيل)
   ======================================== */

.faal-product-reviews,
.s-comments-product {
  font-family: 'Tajawal', 'Segoe UI', Tahoma, sans-serif !important;
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 16px;
}

/* عنوان القسم */
.s-comments-title {
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  color: #002f2c !important;
  text-align: center !important;
  margin-bottom: 32px !important;
  position: relative;
}

.s-comments-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #00a896, #002f2c);
  margin: 12px auto 0;
  border-radius: 4px;
}

/* ===== بطاقة التقييم العام - عناصر جنب بعض ===== */
.s-reviews-summary-wrapper {
  background: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 40px rgba(0, 47, 44, 0.08) !important;
  padding: 28px 24px !important;
  border: 1px solid rgba(0, 47, 44, 0.06) !important;
  margin-bottom: 36px !important;
}

.s-reviews-summary-header {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 24px !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.s-reviews-summary-overall-section {
  text-align: center !important;
  flex-shrink: 0 !important;
  min-width: 140px;
}

.s-reviews-summary-average {
  font-size: 3.6rem !important;
  font-weight: 800 !important;
  color: #002f2c !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.s-rating-stars-wrapper {
  justify-content: center !important;
  margin: 8px 0 !important;
}

.s-rating-stars-btn-star svg {
  width: 24px !important;
  height: 24px !important;
  fill: #f59e0b !important;
}

.s-reviews-summary-count {
  color: #6b7280 !important;
  font-size: 0.9rem !important;
  margin-top: 4px !important;
}

/* نسبة التوصية */
.s-reviews-summary-header-section {
  text-align: center !important;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5) !important;
  padding: 14px 22px !important;
  border-radius: 16px !important;
  flex-shrink: 0 !important;
}

.s-reviews-summary-recommendation-percentage {
  font-size: 1.8rem !important;
  font-weight: 800 !important;
  color: #065f46 !important;
  margin: 0 !important;
}

.s-reviews-summary-header-section .s-reviews-summary-count {
  color: #047857 !important;
  font-weight: 600 !important;
  margin-top: 2px !important;
  font-size: 0.9rem !important;
}

/* أشرطة التقييم */
.s-reviews-summary-rows {
  margin-top: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  flex: 1 !important;
  min-width: 200px;
}

.s-reviews-summary-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.s-reviews-summary-row-rate {
  min-width: 38px;
  font-weight: 700 !important;
  color: #002f2c !important;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.95rem !important;
}

.s-reviews-summary-row-rate svg {
  width: 13px !important;
  height: 13px !important;
  fill: #f59e0b !important;
}

.s-progress-bar-wrapper {
  height: 9px !important;
  background: #e5e7eb !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  flex: 1;
}

.s-progress-bar-progress {
  background: linear-gradient(90deg, #002f2c, #00a896) !important;
  border-radius: 20px !important;
}

.s-reviews-summary-percentage {
  min-width: 42px;
  text-align: left;
  font-weight: 600 !important;
  color: #6b7280 !important;
  font-size: 0.85rem !important;
}

/* ===== قسم التعليقات ===== */
.s-comments-header {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  margin: 28px 0 18px !important;
}

.s-comments-count-label {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: #002f2c !important;
}

/* ===== الكاروسيل الأفقي - استهداف الأب المباشر للتعليقات ===== */
.s-comments-container > div:not(.s-comments-header):not(.s-translate-all-wrap) {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  gap: 18px !important;
  padding: 8px 4px 20px !important;
  scrollbar-width: thin;
  scrollbar-color: #00a896 #e5e7eb;
  -webkit-overflow-scrolling: touch;
}

/* تنسيق شريط التمرير */
.s-comments-container > div:not(.s-comments-header):not(.s-translate-all-wrap)::-webkit-scrollbar {
  height: 6px;
}

.s-comments-container > div:not(.s-comments-header):not(.s-translate-all-wrap)::-webkit-scrollbar-track {
  background: #e5e7eb;
  border-radius: 10px;
}

.s-comments-container > div:not(.s-comments-header):not(.s-translate-all-wrap)::-webkit-scrollbar-thumb {
  background: #00a896;
  border-radius: 10px;
}

/* بطاقة التعليق */
.s-comments-item,
salla-comment-item.s-comments-item {
  min-width: 300px !important;
  max-width: 340px !important;
  width: 300px !important;
  scroll-snap-align: start !important;
  flex-shrink: 0 !important;
  display: block !important;
}

.s-comments-item-wrapper {
  background: #ffffff !important;
  border-radius: 18px !important;
  padding: 22px !important;
  box-shadow: 0 8px 28px rgba(0, 47, 44, 0.08) !important;
  border: 1px solid rgba(0, 47, 44, 0.05) !important;
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.s-comments-item-wrapper:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(0, 47, 44, 0.13) !important;
}

/* معلومات المستخدم */
.s-comments-item-user-info-name-with-margin {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  margin: 0 !important;
}

.s-comments-item-has-order-check-text {
  color: #10b981 !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
}

.s-comments-item-has-order-check-icon svg {
  fill: #10b981 !important;
  width: 13px !important;
  height: 13px !important;
}

.s-comments-item-timestamp {
  font-size: 0.82rem !important;
  color: #9ca3af !important;
  margin-top: 3px !important;
}

/* النجوم داخل التعليق */
.s-comments-item .s-rating-stars-btn-star svg {
  width: 17px !important;
  height: 17px !important;
  fill: #f59e0b !important;
}

/* نص التعليق */
.s-comments-item-content p {
  font-size: 1.05rem !important;
  font-weight: 500 !important;
  color: #1f2937 !important;
  margin: 10px 0 14px !important;
  line-height: 1.65 !important;
}

/* رد الإدارة */
.s-comments-item-admin {
  margin-top: 14px !important;
}

.s-comments-item-admin-wrapper {
  background: linear-gradient(135deg, #f0fdfa, #ecfdf5) !important;
  border-radius: 14px !important;
  padding: 14px !important;
  border-right: 4px solid #00a896 !important;
}

.s-comments-item-admin .s-comments-item-user-info-name-with-margin {
  color: #002f2c !important;
  font-size: 0.9rem !important;
}

.s-comments-item-admin .s-comments-item-content p {
  font-size: 0.88rem !important;
  color: #374151 !important;
  margin: 5px 0 0 !important;
}

/* زر مفيد */
.s-comments-item-like-btn .s-button-element {
  border-color: #00a896 !important;
  color: #00a896 !important;
  border-radius: 50px !important;
  font-weight: 600 !important;
  padding: 5px 14px !important;
  transition: all 0.25s ease !important;
  font-size: 0.85rem !important;
}

.s-comments-item-like-btn .s-button-element:hover {
  background: #00a896 !important;
  color: white !important;
}

/* إخفاء أزرار الترجمة */
.s-translate-all-wrap,
.s-translate-wrap {
  display: none !important;
}

/* ===== الموبايل - يبقى أفقي ===== */
@media (max-width: 768px) {
  .s-reviews-summary-header {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    overflow-x: auto !important;
    padding-bottom: 8px;
  }

  .s-reviews-summary-overall-section {
    min-width: 120px !important;
  }

  .s-reviews-summary-average {
    font-size: 2.8rem !important;
  }

  .s-reviews-summary-header-section {
    padding: 12px 16px !important;
    min-width: 110px;
  }

  .s-reviews-summary-recommendation-percentage {
    font-size: 1.5rem !important;
  }

  .s-reviews-summary-rows {
    min-width: 180px !important;
  }

  .s-comments-item,
  salla-comment-item.s-comments-item {
    min-width: 270px !important;
    max-width: 290px !important;
    width: 270px !important;
  }
}

@media (max-width: 480px) {
  .s-reviews-summary-average {
    font-size: 2.4rem !important;
  }

  .s-rating-stars-btn-star svg {
    width: 18px !important;
    height: 18px !important;
  }

  .s-comments-item,
  salla-comment-item.s-comments-item {
    min-width: 250px !important;
    width: 250px !important;
  }
}