/* ===== Estrha Testimonials (RTL) ===== */
.estrha-t-wrap{
  --pink-700:#ED78A5;
  --blue:#1269FF;
  --text:#1f2640;
  --muted:#6b7394;
  --chip:#fff;
  --chip-shadow:0 10px 30px rgba(0,0,0,.08);
  --card-shadow:0 18px 60px rgba(0,0,0,.10);
  --star:#FF9A6B;               /* لون نجمة ناعم */
  --star-glow:0 6px 16px rgba(255,154,107,.35);
}
.estrha-t-wrap{
  font-family:"MadaniArabic","Cairo","Tajawal","Noto Kufi Arabic",system-ui,-apple-system,"Segoe UI","Roboto",sans-serif;
  padding: clamp(30px,5vw,60px) 0;
  direction: rtl;
}
.estrha-t-wrap *{ box-sizing:border-box }

/* container */
.t-container{ width:min(1200px, 100% - 48px); margin-inline:auto; }

/* heading */
.t-head{ text-align:center; margin-bottom: clamp(26px,3.6vw,38px); }
.t-title{
  margin:0;
  color:var(--pink-700);
  font-weight:400;
  font-size: clamp(22px, 3vw, 38px);
  letter-spacing:.3px;
  text-shadow:0 10px 24px rgba(0,0,0,.06);
}

/* ========== GRID (Desktop) ========== */
/* عكس الأعمدة: الأسماء/الكروت (صغير) يسار | التقييم/التفاصيل (كبير) يمين */
.t-grid{
  display:grid;
  grid-template-columns: 360px 1fr;         /* يسار صغير للأسماء | يمين كبير للتقييم */
  grid-template-areas: "list detail";       /* نعكس المناطق */
  gap: clamp(16px,3.5vw,40px);
  align-items:start;
}
.t-list  { grid-area: list; }               /* الأسماء/الكروت يسار */
.t-detail{ grid-area: detail; }             /* التقييم يمين */

/* cards */
.card{ background:#fff; border-radius:18px; box-shadow:var(--card-shadow); }

/* detail (التقييم) */
.t-detail{ padding: clamp(16px,2.2vw,24px) clamp(16px,2.2vw,28px); }
.t-detail-title{
  margin:0 0 10px;
  font-size: clamp(20px,2.2vw,32px);
  color:var(--text);
  font-weight:400;
}
.t-stars{
  display:flex; gap:8px; margin-bottom: clamp(8px,1.2vw,12px);
}
.t-stars .star{
  font-size:24px; line-height:1;
  color:var(--star);
  filter: drop-shadow(var(--star-glow));
}
.t-body{ color:var(--muted); line-height:2.05; font-size:16px; }

/* list (الأسماء/الكروت) */
.t-list ul{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:14px;
}
.t-chip{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px;
  box-shadow:var(--chip-shadow);
  transition:transform .35s cubic-bezier(.2,.9,.25,1), box-shadow .35s;
}
.t-chip:hover{ transform:translateY(-3px); box-shadow:0 22px 50px rgba(0,0,0,.14); }
.t-item.active .t-chip{ outline:2px solid #eef3ff; box-shadow:0 24px 60px rgba(18,105,255,.18); }
.t-chip-text{ display:flex; flex-direction:column; gap:6px; }
.t-name{ font-weight:400; color:#222; }
.t-excerpt{
  color:#7b82a2; font-size:14px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:270px;
}
.t-avatar{ width:48px; height:48px; border-radius:50%; object-fit:cover; flex:0 0 auto; }

/* reveal (gentle) */
.reveal{ opacity:0; transform:translateY(12px) scale(.98); }
.reveal.in{ opacity:1; transform:none; transition:opacity 900ms ease, transform 900ms cubic-bezier(.19,.9,.22,1); }

/* ===== Mobile (كاروسيل + ترتيب) ===== */
.t-mobile-head{
  display:none;             /* تظهر على الموبايل فقط */
  align-items:center; gap:10px;
  margin-bottom:14px;
}
.t-mobile-head .t-mobile-chip{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 12px; box-shadow:var(--chip-shadow);
}
.t-arrow{
  appearance:none; border:0; width:40px; height:40px; border-radius:12px;
  background:linear-gradient(180deg,#fff,#f3f6ff);
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  cursor:pointer; font-size:22px; line-height:1; color:#4c5a88;
  display:grid; place-items:center;
}
.t-arrow:active{ transform:translateY(1px) }

@media (max-width: 992px){
  /* عمود الأسماء فوق، والتقييم تحته */
  .t-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "list"
      "detail";
    row-gap: 16px;
  }

  .t-detail{ order:2; }  /* احتياط لو فيه Flex fallback */
  .t-list{   order:1; }

  .t-excerpt{ max-width: 56vw; }
  .t-avatar{ width:44px;height:44px; }

  /* إظهار رأس الموبايل (الكاروسيل) وإخفاء قائمة الأسماء الطويلة */
  .t-mobile-head{ display:flex; }
  .t-list ul{ display:none; }     /* الاختيار بالسهمين */
}

/* very small */
@media (max-width:480px){
  .t-title{ font-size:24px }
  .t-mobile-head .t-excerpt{ display:none }   /* تقليل زحمة */
  .t-mobile-head .t-mobile-chip{ padding:10px }
}

/* ===== Mobile hard override: الأسماء فوق ثم التقييم ===== */
@media (max-width: 992px){
  .estrha-t-wrap .t-grid{
    display: flex !important;            /* بدّل من Grid إلى Flex */
    flex-direction: column !important;   /* عمودي */
    gap: 16px !important;
    width: 100% !important;
  }

  /* الأسماء أولاً */
  .estrha-t-wrap .t-list{
    order: 1 !important;
    width: 100% !important;
    display: block !important;
  }

  /* التقييم ثانيًا */
  .estrha-t-wrap .t-detail{
    order: 2 !important;
    width: 100% !important;
    display: block !important;
  }

  /* لو عايز الكاروسيل فقط بدون قائمة الأسماء الطويلة، سيب السطر ده.
     لو عايز القائمة الطويلة تظهر كمان، احذفه. */
  .estrha-t-wrap .t-list ul{ display: none !important; }
}


/* شكل/حجم النجوم + ظل ناعم */
.estrha-t-wrap .t-stars{
  display:flex; gap:12px; align-items:center;
}
.estrha-t-wrap .t-stars .star-svg{
  width: 30px; height: 30px; flex: 0 0 30px;
  filter: drop-shadow(0 6px 14px rgba(237,120,165,.35));
}
@media (max-width:768px){
  .estrha-t-wrap .t-stars .star-svg{
    width: 26px; height: 26px; flex-basis: 26px;
  }
}

/* ـــ النجوم المودرن ـــ */
.estrha-t-wrap .t-stars{
  display:flex; gap:12px; align-items:center;
}
.estrha-t-wrap .t-stars .star-svg{
  width: 30px; height: 30px; flex: 0 0 30px;
  filter: drop-shadow(0 6px 14px rgba(237,120,165,.35));
}
@media (max-width:768px){
  .estrha-t-wrap .t-stars .star-svg{
    width: 26px; height: 26px; flex-basis: 26px;
  }
}

/* ـــ Reveal on scroll (أبطأ وواضح) ـــ */
.reveal{
  opacity:0;
  transform: translateY(16px) scale(.98);
}
.reveal.in{
  opacity:1;
  transform:none;
  transition:
    opacity 1100ms ease,
    transform 1100ms cubic-bezier(.19,.9,.22,1);
}

/* ـــ حركة سواب للتفاصيل (يمين/يسار) ـــ */
.t-detail{
  will-change: transform, opacity;
}
.t-detail.leave-left{  opacity:0; transform: translateX(24px);  transition: .35s ease; }
.t-detail.leave-right{ opacity:0; transform: translateX(-24px); transition: .35s ease; }
.t-detail.enter-right{ opacity:0; transform: translateX(-24px); transition: none; }
.t-detail.enter-left{  opacity:0; transform: translateX(24px);  transition: none; }
.t-detail.enter-right.in,
.t-detail.enter-left.in{ opacity:1; transform:none; transition: .55s cubic-bezier(.19,.9,.22,1); }
/* نخلّي JS يضيف/يشيل .in تلقائيًا عبر إجبار الـreflow (مُدارة داخل script) */
.t-detail.enter-right{ animation: enterR .55s cubic-bezier(.19,.9,.22,1) forwards; }
.t-detail.enter-left { animation: enterL .55s cubic-bezier(.19,.9,.22,1) forwards; }
@keyframes enterR { from{opacity:0; transform:translateX(-24px)} to{opacity:1; transform:none} }
@keyframes enterL { from{opacity:0; transform:translateX(24px)}  to{opacity:1; transform:none} }

/* ـــ أنيميشن الكاروسيل للموبايل (كارت الاسم) ـــ */
.t-mobile-head .t-mobile-chip{
  min-height: 68px;                  /* ثابت حتى لو العنوان قصير */
  transition: opacity .3s ease, transform .3s ease;
}
.t-mobile-head .t-mobile-chip.fade-out{
  opacity:.0; transform: translateY(6px);
}
.t-mobile-head .t-mobile-chip.fade-in{
  opacity:1; transform:none;
}

/* أسهم الكاروسيل */
.t-arrow{
  appearance:none; border:0; width:40px; height:40px; border-radius:12px;
  background:linear-gradient(180deg,#fff,#f3f6ff);
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  cursor:pointer; font-size:22px; line-height:1; color:#4c5a88;
  display:grid; place-items:center;
}
.t-arrow:active{ transform:translateY(1px) }

/* ترتيب الموبايل: الأسماء فوق ثم التقييم (بدون ما نلعب في الديسكتوب) */
@media (max-width: 992px){
  .estrha-t-wrap .t-grid{
    display:flex !important;
    flex-direction:column !important;
    gap:16px !important;
  }
  .estrha-t-wrap .t-list{   order:1 !important; }
  .estrha-t-wrap .t-detail{ order:2 !important; }
  .estrha-t-wrap .t-list ul{ display:none !important; } /* اختيار بالسهمين */
}

/* === Mobile: ثبات عرض كارت الأسماء في الهيدر (الكاروسيل) === */
@media (max-width: 992px){
  /* متغيّر مريح لضبط العرض بسهولة */
  :root{
    --mobile-chip-w: clamp(240px, 70vw, 320px);  /* عدّل الأرقام لو حابب */
  }

  .t-mobile-head{
    display: flex; 
    align-items: center; 
    justify-content: center;   /* نخليها في النص ما تبقاش تتذبذب */
    gap: 10px;
  }

  .t-mobile-head .t-mobile-chip{
    flex: 0 0 var(--mobile-chip-w) !important;  /* عرض ثابت */
    width: var(--mobile-chip-w) !important;
    max-width: var(--mobile-chip-w) !important;
    min-width: var(--mobile-chip-w) !important;

    /* يمنع التأرجح بسبب المحتوى */
    overflow: hidden;
    box-sizing: border-box;
  }

  /* تأكد إن الأسهم ما تضغطش على الكارد */
  .t-mobile-head .t-arrow{
    flex: 0 0 40px;
  }

  /* نصوص داخل الكارد تتقصّ بدل ما توسّع العرض */
  .t-mobile-head .t-mobile-chip .t-chip-text{
    min-width: 0;
  }
  .t-mobile-head .t-mobile-chip .t-name{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .t-mobile-head .t-mobile-chip .t-excerpt{
    display: -webkit-box;
    -webkit-line-clamp: 1; 
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* شوية ضبط إضافي للشاشات الأصغر جدًا */
@media (max-width: 420px){
  :root{ --mobile-chip-w: clamp(220px, 78vw, 280px); }
}

/* === Mobile centering fixes === */
@media (max-width: 992px){
  /* وسّط أعمدة الموبايل (الأسماء ثم التقييم) داخل الكونتينر */
  .estrha-t-wrap .t-list,
  .estrha-t-wrap .t-detail{
    width: min(100%, 680px);
    margin-inline: auto;           /* يوسّط العمود بالكامل */
  }

  /* بدّل رأس الموبايل (الكاروسيل) لشبكة 3 أعمدة: سهم – شريحة – سهم */
  .t-mobile-head{
    display: grid !important;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    justify-items: center;         /* يوسّط محتوى كل خلية */
    gap: 10px;
    width: 100%;
    margin-inline: auto;           /* يوسّط الكتلة نفسها */
  }

  /* ثبّت الكارد في العمود الأوسط بالظبط */
  .t-mobile-head .t-mobile-chip{
    justify-self: center;
    margin: 0;                     /* منع أي ترحيل غير مرغوب */
  }

  /* السهام يمين/يسار بأبعاد ثابتة ومتساوية */
  .t-mobile-head .t-arrow{
    width: 40px; height: 40px;
    flex: 0 0 40px;
    place-self: center;
  }
}


/* ===== عمود التقييم: إخفاء الصورة ===== */
.estrha-t-wrap .t-list .t-avatar{
  display: none !important;
}

/* ===== قابل للنقر + مؤشر الفأرة ===== */
.estrha-t-wrap .t-list .t-item{
  cursor: pointer;
}

/* ===== الحالة العادية: خفّض نص الكروت غير النشطة ===== */
.estrha-t-wrap .t-list .t-item:not(.active) .t-chip{
  opacity: .65;
  transition: transform .25s cubic-bezier(.2,.9,.25,1),
              box-shadow .25s ease,
              opacity .2s ease;
}
.estrha-t-wrap .t-list .t-item:not(.active) .t-name,
.estrha-t-wrap .t-list .t-item:not(.active) .t-excerpt{
  opacity: .70;
  filter: grayscale(.05);
}

/* ===== الكارت الـ active: بارز بدون outline ===== */
.estrha-t-wrap .t-list .t-item.active .t-chip{
  opacity: 1;
  transform: translateX(-6px); /* بروز بسيط لليمين (RTL) */
  box-shadow: 0 22px 55px rgba(18,105,255,.18); /* ظل أنعم */
  outline: 0 !important;
  border: 0 !important;
}

/* منع أي outline افتراضي لو اتضاف من المتصفح */
.estrha-t-wrap .t-list .t-item:focus,
.estrha-t-wrap .t-list .t-item .t-chip:focus{
  outline: 0 !important;
}

/* مظهر الكارت نفسه (انحناءات لطيفة – موجودة أصلا لكن نثبّتها) */
.estrha-t-wrap .t-chip{
  border-radius: 16px;             /* انحناءات لطيفة */
  background: #fff;
  box-shadow: var(--chip-shadow);
}


/* === نافذة 4 كروت (ديسكتوب فقط) + أسهم عموديين === */

/* أخفي العناصر خارج النافذة */
.estrha-t-wrap .t-list li.is-hidden{ display:none !important; }

/* حاوية الأسهم الرأسية (فوق/تحت) */
.estrha-t-wrap .t-list .t-vert-nav{ display:none; }
@media (min-width: 993px){
  .estrha-t-wrap .t-list{ position:relative; }

  /* أظهر الأسهم على الديسكتوب */
  .estrha-t-wrap .t-list .t-vert-nav{
    display:flex; align-items:center; justify-content:center;
    margin: 0 0 10px 0;     /* افتراضي للزرّ العلوي */
  }
  .estrha-t-wrap .t-list .t-vert-bottom{
    margin: 10px 0 0 0;    /* الزرّ السفلي */
  }

  /* نستخدم نفس زرّ الموبايل .t-arrow كما هو */
  .estrha-t-wrap .t-list .t-vert-nav .t-arrow{
    width:40px; height:40px; border-radius:12px;
  }
}

.t-detail {

margin-top: 40px;
}


/* ==== Desktop list window animations (slower + smoother) ==== */
.estrha-t-wrap .t-list li{ will-change: transform, opacity; }
.estrha-t-wrap .t-list li.is-hidden{ display:none !important; }

/* دخول */
.estrha-t-wrap .t-list li.anim-in{
  animation: tFadeIn 650ms cubic-bezier(.19,.9,.22,1) both;
}
@keyframes tFadeIn{
  from{ opacity:.0; transform: translateY(12px) scale(.985); }
  to  { opacity:1;  transform: none; }
}

/* خروج */
.estrha-t-wrap .t-list li.anim-out{
  animation: tFadeOut 650ms cubic-bezier(.19,.9,.22,1) both;
}
@keyframes tFadeOut{
  from{ opacity:1;  transform: none; }
  to  { opacity:.0; transform: translateY(-12px) scale(.985); }
}

/* صندوق التفاصيل: زوايا مدوّرة بالكامل (لو مش مضافة قبل كده) */
.estrha-t-wrap .t-detail{
  border-radius:24px;
  overflow:hidden;
}

/* === أسهم أصغر شوية (عام) === */
.estrha-t-wrap .t-arrow{
  width: 36px;   /* كانت 40px */
  height: 36px;  /* كانت 40px */
  font-size: 20px; /* كانت 22px */
  border-radius: 12px; /* نفس النعومة */
}

/* موبايل: نفس التقليص البسيط */
@media (max-width: 992px){
  .estrha-t-wrap .t-mobile-head .t-arrow{
    width: 36px;
    height: 36px;
    font-size: 20px;
  }
}

/* ديسكتوب (عمود الكروت): ممكن نصغّر نقطة زيادة بسيطة لو حابب */
@media (min-width: 993px){
  .estrha-t-wrap .t-vert-nav .t-arrow{
    width: 34px;
    height: 34px;
    font-size: 18px;
  }
}