﻿/* =========================================================
   reviews.css — آراء العملاء: عنوان + سلايدر كروت + نقاط
   ========================================================= */

:root {
  --ebmnt1-reviews-inner-bg-color: transparent;
  --ebmnt1-reviews-slide-gap: 1em;
  --ebmnt1-reviews-per-view: 1;
  --ebmnt1-reviews-peek: 1.5rem;
  --ebmnt1-reviews-arrow-bg-color: #ffffff;
  --ebmnt1-reviews-arrow-border-color: #004250;
  --ebmnt1-reviews-arrow-icon-color: #004250;
  --ebmnt1-reviews-arrow-hover-bg-color: #ffc107;
  --ebmnt1-reviews-arrow-hover-icon-color: #012c3d;

  --ebmnt1-reviews-intro-font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  --ebmnt1-reviews-intro-text-color: #555555;

  --ebmnt1-reviews-card-bg-color: #f7f6fb;
  --ebmnt1-reviews-card-border-color: #ecebf2;
  --ebmnt1-reviews-card-radius: 1.9rem;
  --ebmnt1-reviews-card-quote-icon-color: #ffc107;
  --ebmnt1-reviews-card-star-color: #ffc107;
  --ebmnt1-reviews-card-text-font-size: clamp(0.92rem, 0.88rem + 0.2vw, 1.02rem);
  --ebmnt1-reviews-card-text-color: #555555;
  --ebmnt1-reviews-card-name-font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  --ebmnt1-reviews-card-name-text-color: #004250;
  --ebmnt1-reviews-card-role-font-size: clamp(0.8rem, 0.78rem + 0.1vw, 0.9rem);
  --ebmnt1-reviews-card-role-text-color: #777777;
  --ebmnt1-reviews-card-avatar-border-color: #ffc107;

  --ebmnt1-reviews-dot-bg-color: #012c3d;
  --ebmnt1-reviews-dot-active-bg-color: #ffc107;
}

.ebmnt1-reviews__inner {
  background-color: var(--ebmnt1-reviews-inner-bg-color);
}

.ebmnt1-reviews__head {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  text-align: center;
}

.ebmnt1-reviews__intro {
  max-width: 40rem;
  font-size: var(--ebmnt1-reviews-intro-font-size);
  color: var(--ebmnt1-reviews-intro-text-color);
}

.ebmnt1-reviews__slider {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5em;
}

/* السلايدر: عدد كروت كاملة + جزء من السابق والتالي (peek) */
.ebmnt1-reviews__viewport {
  width: 100%;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.ebmnt1-reviews__viewport.ebmnt1-is-dragging {
  cursor: grabbing;
}

.ebmnt1-reviews__track {
  display: flex;
  flex-direction: row;
  gap: var(--ebmnt1-reviews-slide-gap);
  transition: transform 0.6s var(--ebmnt1-reveal-easing);
  will-change: transform;
}

.ebmnt1-reviews__track.ebmnt1-is-dragging {
  transition: none;
}

.ebmnt1-reviews__slide {
  flex: 0 0 calc((100% - 2 * var(--ebmnt1-reviews-peek) - (var(--ebmnt1-reviews-per-view) + 1) * var(--ebmnt1-reviews-slide-gap)) / var(--ebmnt1-reviews-per-view));
  display: flex;
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.ebmnt1-reviews__slide.ebmnt1-is-peek {
  opacity: 0.55;
  transform: scale(0.96);
}
.ebmnt1-review-card {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1em;
  padding: 1.5em;
  text-align: start;
  background-color: var(--ebmnt1-reviews-card-bg-color);
  border: 1px solid var(--ebmnt1-reviews-card-border-color);
  border-radius: var(--ebmnt1-reviews-card-radius);
}

.ebmnt1-review-card__quote {
  font-size: clamp(1.6rem, 1.4rem + 0.8vw, 2.1rem);
  color: var(--ebmnt1-reviews-card-quote-icon-color);
}

.ebmnt1-review-card__stars {
  display: flex;
  gap: 0.2em;
  color: var(--ebmnt1-reviews-card-star-color);
}

.ebmnt1-review-card__text {
  flex: 1;
  font-size: var(--ebmnt1-reviews-card-text-font-size);
  color: var(--ebmnt1-reviews-card-text-color);
}

.ebmnt1-review-card__author {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.9em;
}

.ebmnt1-review-card__avatar {
  width: 3.4rem;
  height: 3.4rem;
  object-fit: cover;
  border: 2px solid var(--ebmnt1-reviews-card-avatar-border-color);
  border-radius: 50%;
}

.ebmnt1-review-card__who {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}

.ebmnt1-review-card__name {
  font-size: var(--ebmnt1-reviews-card-name-font-size);
  font-weight: 800;
  color: var(--ebmnt1-reviews-card-name-text-color);
}

.ebmnt1-review-card__role {
  font-size: var(--ebmnt1-reviews-card-role-font-size);
  color: var(--ebmnt1-reviews-card-role-text-color);
}

.ebmnt1-reviews__controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1em;
}

.ebmnt1-reviews__arrow {
  width: 2.8rem;
  height: 2.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(0.9rem, 0.85rem + 0.2vw, 1.05rem);
  color: var(--ebmnt1-reviews-arrow-icon-color);
  background-color: var(--ebmnt1-reviews-arrow-bg-color);
  border: 2px solid var(--ebmnt1-reviews-arrow-border-color);
  border-radius: 50%;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}

.ebmnt1-reviews__arrow:hover:not(:disabled) {
  color: var(--ebmnt1-reviews-arrow-hover-icon-color);
  background-color: var(--ebmnt1-reviews-arrow-hover-bg-color);
  transform: scale(1.08);
}

.ebmnt1-reviews__arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.ebmnt1-reviews__dots {
  display: flex;
  flex-direction: row;
  gap: 0.5em;
}

.ebmnt1-reviews__dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: var(--ebmnt1-reviews-dot-bg-color);
  transition: width 0.3s ease, background-color 0.3s ease;
}

.ebmnt1-reviews__dot.ebmnt1-is-active {
  width: 1.6rem;
  border-radius: 1rem;
  background-color: var(--ebmnt1-reviews-dot-active-bg-color);
}

.ebmnt1-review-card__avatar {
  -webkit-user-drag: none;
}

@media (min-width: 768px) {
  :root {
    --ebmnt1-reviews-per-view: 2;
    --ebmnt1-reviews-peek: 3rem;
  }
}

@media (min-width: 1200px) {
  :root {
    --ebmnt1-reviews-per-view: 3;
    --ebmnt1-reviews-peek: 4rem;
  }
}
