/* ==========================================================================
   BAR3AM — testimonials  (أراء اولياء الأمور)
   Figma: 2475:2315 / 2475:2318 (head) · 2475:2319 (chat panel) · 2487:3285 (CTA)

   Desktop (>= 1200px) reproduces the Figma frame 1:1 — a 1152 x 455 panel with
   absolutely-placed layers at Figma's exact offsets. Below 1200 the panel
   collapses to a single centred column (Figma has no breakpoints).
   ========================================================================== */

.testimonials {
  padding-block: 64px;
  background: var(--c-card);

  /* Figma paints these with literal neutrals; tokens.css has no neutral grey
     ramp, so they are derived from the text tokens (never a raw hex). */
  --tm-ink:        var(--c-text);                                        /* #212121 */
  --tm-ink-2:      color-mix(in srgb, var(--c-text-2) 84%, var(--c-text));/* #575757 */
  --tm-body:       color-mix(in srgb, var(--c-text) 88%, #fff);          /* #333333 */
  --tm-muted:      color-mix(in srgb, var(--c-text-2) 78%, #fff);        /* #8c8c8c */
  --tm-eyebrow:    color-mix(in srgb, var(--c-text) 80%, #fff);          /* #424242 */
  --tm-panel-bg:   color-mix(in srgb, var(--c-primary) 6.5%, #fff);      /* #f0f4f9 */
  --tm-quote-ink:  color-mix(in srgb, var(--c-primary) 13.3%, #fff);     /* #e0e9f3 */
  --tm-green-deep: color-mix(in srgb, var(--c-green-fig) 53%, var(--c-ink-1000));     /* #0d592e */
  --tm-shadow-sm:  0 4px 10px color-mix(in srgb, var(--c-navy-deep) 10%, transparent);
  --tm-shadow-md:  0 8px 20px color-mix(in srgb, var(--c-navy-deep) 14%, transparent);
}

/* ---- Section head (2475:2315 + 2475:2318) -------------------------------- */
/* Figma's eyebrow rule is primary-blue, sits on the inline-START (right) side
   of #424242 text with a 14px gap, and the title is 26px with only
   "أولياء الأمور" in blue — local overrides only, base.css is left untouched. */
.testimonials .sec-head { margin-bottom: 18px; }

.testimonials .eyebrow {
  gap: 14px;
  color: var(--tm-eyebrow);
  margin-bottom: 8px;
}
.testimonials .eyebrow::after {
  order: -1;              /* RTL: moves the rule to the right of the label */
  background: var(--c-primary);
  margin-block-start: 7px;/* Figma centres it on the text frame, not the ink */
}

.testimonials .sec-title {
  font-size: 26px;
  color: var(--tm-ink);
}
.testimonials__hl { color: var(--c-primary); }

/* ---- Panel (2475:2319) --------------------------------------------------- */
.testimonials__stage {
  inline-size: min(1152px, 100% - 48px);
  margin-inline: auto;
}

.testimonials__panel {
  position: relative;
  block-size: 455px;
  overflow: clip;
  background: var(--tm-panel-bg);
  border-radius: 28px;
}

/* ---- Decorations --------------------------------------------------------- */
/* Figma: ghost quote at left 46 / top 36 (inline-END in RTL), yellow dot at
   left 1090 / top 45 (inline-START), green dot at left 60 / top 380
   (inline-END). */
.testimonials__quote {
  position: absolute;
  z-index: 0;
  inset-block-start: 36px;
  inset-inline-end: 46px;
  inline-size: 180px;
  block-size: 140px;
  fill: var(--tm-quote-ink);
  pointer-events: none;
}

.testimonials__dot {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}
.testimonials__dot--yellow {
  inline-size: 20px;
  block-size: 20px;
  background: var(--c-yellow-fig);
  inset-block-start: 45px;
  inset-inline-start: 42px;
}
.testimonials__dot--green {
  inline-size: 14px;
  block-size: 14px;
  background: var(--c-green-fig);
  inset-block-start: 380px;
  inset-inline-end: 60px;
}

/* ---- Review bubbles ------------------------------------------------------ */
.testimonials__card {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* RTL: hugs the inline-start (right) edge */
  gap: 8px;
  background: var(--c-card);
  border-radius: 18px;
  border-start-start-radius: 4px;   /* RTL: the top-right "tail" corner */
  box-shadow: var(--tm-shadow-sm);
  padding-block: 14px 12px;
  padding-inline: 16px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

/* Figma offsets, converted from left/top to logical insets:
   #1 left 644 w 400 -> 108 from inline-start · #2 left 584 w 400 -> 168
   #3 left 644 w 380 -> 128 */
.testimonials__card--1 { inline-size: 400px; inset-inline-start: 108px; inset-block-start: 30px; }
.testimonials__card--2 { inline-size: 400px; inset-inline-start: 168px; inset-block-start: 172px; }
.testimonials__card--3 { inline-size: 380px; inset-inline-start: 128px; inset-block-start: 314px; }

.testimonials__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--tm-shadow-md);
}

/* header: RTL order = avatar (right) · name · stars (left) */
.testimonials__card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.testimonials__avatar {
  inline-size: 36px;
  block-size: 36px;
  flex: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.testimonials__avatar svg {
  inline-size: 18px;
  block-size: 18px;
}
.testimonials__avatar--blue {
  background: color-mix(in srgb, var(--c-primary) 18%, transparent);
  color: var(--c-primary);
}
.testimonials__avatar--green {
  background: color-mix(in srgb, var(--c-green-fig) 18%, transparent);
  color: var(--c-green-fig);
}
.testimonials__avatar--yellow {
  background: color-mix(in srgb, var(--c-yellow-fig) 18%, transparent);
  color: var(--c-yellow-fig);
}

.testimonials__who {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  white-space: nowrap;
}

/* Tajawal's `normal` leading renders ~1.37x in the browser but ~1.2x in
   Figma, which would make every bubble and the rating card too tall — so the
   Figma value is pinned explicitly. */
.testimonials__name {
  font-size: 13px;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--tm-ink);
}

.testimonials__stage-label {
  font-size: 11px;
  font-weight: var(--fw-medium);
  line-height: 1.2;
  color: var(--tm-ink-2);
}

/* stars — Figma frames are 80 x 14 in the bubbles and 110 x 20 in the rating
   card; inside them the star ink is 12 x 11.4 (gap 4) and 16.26 x 15.45
   (gap 5.4) respectively. */
.testimonials__stars {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: none;
  inline-size: 80px;
  block-size: 14px;
  color: var(--c-yellow-fig);
}
.testimonials__stars svg {
  inline-size: 12px;
  block-size: 11.4px;
  flex: none;
}
.testimonials__stars--lg {
  gap: 5.4px;
  inline-size: 110px;
  block-size: 20px;
}
.testimonials__stars--lg svg {
  inline-size: 16.26px;
  block-size: 15.45px;
}

.testimonials__text {
  inline-size: 100%;
  font-size: 14.5px;
  font-weight: var(--fw-medium);
  line-height: 1.55;
  color: var(--tm-body);
  text-align: start;
  overflow-wrap: anywhere;
}

/* footer: RTL order = time (right) · read-ticks (left) */
.testimonials__meta {
  display: flex;
  align-items: center;
  gap: 5px;
}
.testimonials__time {
  font-size: 11px;
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--tm-muted);
  white-space: nowrap;
}
.testimonials__ticks {
  inline-size: 18px;
  block-size: 12px;
  flex: none;
  color: var(--c-green-fig);
}

/* ---- Rating card --------------------------------------------------------- */
/* Figma: 170 x 188 box rotated -3°, its bounding box at left 253 / top 91.1 */
.testimonials__rating {
  position: absolute;
  z-index: 1;
  inset-block-start: 95.4px;
  inset-inline-end: 257.8px;
}

.testimonials__rating-card {
  inline-size: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: var(--c-card);
  border: 1px solid color-mix(in srgb, var(--c-text) 8%, transparent);
  border-radius: 20px;
  box-shadow: var(--tm-shadow-md);
  padding-block: 24px;
  padding-inline: 30px;
  text-align: center;
  transform: rotate(-3deg);
}

.testimonials__score {
  font-size: 54px;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--tm-ink);
  white-space: nowrap;
}

.testimonials__rating-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--tm-ink-2);
  white-space: nowrap;
}

.testimonials__rating-note {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  color: var(--c-green-fig);
  white-space: nowrap;
}

/* ---- Typing bubble ------------------------------------------------------- */
/* Figma: 181 x 38 box rotated +2°, bounding box at left 173.67 / top 300 */
.testimonials__typing {
  position: absolute;
  z-index: 2;
  inset-block-start: 303.2px;
  inset-inline-end: 174.3px;
}

.testimonials__typing-bubble {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--c-card);
  border-radius: 16px;
  border-start-start-radius: 4px;
  box-shadow: var(--tm-shadow-sm);
  padding-block: 12px;
  padding-inline: 16px;
  transform: rotate(2deg);
}

.testimonials__typing-text {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  color: color-mix(in srgb, var(--c-text-2) 88%, #fff); /* #808080 */
  white-space: nowrap;
}

/* Dots are emitted lightest-first so that RTL flow puts the darkest one
   next to the text — matching Figma's left-to-right ramp. */
.testimonials__typing-dot {
  inline-size: 8px;
  block-size: 8px;
  flex: none;
  border-radius: 50%;
  animation: tm-bounce 0.95s ease-in-out infinite;
}
.testimonials__typing-dot--1 {
  background: color-mix(in srgb, var(--c-green-fig) 90%, #fff);
  animation-delay: 0s;
}
.testimonials__typing-dot--2 {
  background: color-mix(in srgb, var(--c-green-fig) 55%, #fff);
  animation-delay: 0.14s;
}
.testimonials__typing-dot--3 {
  background: color-mix(in srgb, var(--c-green-fig) 30%, #fff);
  animation-delay: 0.28s;
}

@keyframes tm-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-6px); }
}

/* ==========================================================================
   Live chat feed  — Figma «Chat Panel Animated» (2475:2319)

   The Figma component is a two-state Smart-Animate pair, step 2 -> step 4:

     bubble 2   opacity 0, top 198  ->  opacity 1, top 172   (rises 26px)
     bubble 3   opacity 0, top 340  ->  opacity 1, top 314   (rises 26px)
     rating     opacity 0, -10deg, bbox 200.06x214.66
                            ->  opacity 1, -3deg, bbox 179.61x196.64
                                (= scale 1.114 -> 1)
     typing     left 810 / top 182, 0deg  ->  left 173.67 / top 300, +2deg

   js/main.js replays that transition on a loop — the typing bubble waits at
   the slot the next review will land in, the review rises into place, the
   bubble moves on to the next slot, and once the board is full it parks where
   Figma leaves it, holds, and starts over.

   The JS adds `.is-live` only once it has taken over, so with JS disabled the
   panel still renders fully composed instead of an empty box.
   ========================================================================== */

/* ---- Review bubbles: hidden until "sent" -------------------------------- */
.testimonials__panel.is-live .testimonials__card {
  opacity: 0;
  transform: translateY(26px);   /* Figma's 26px rise */
  transition: opacity 0.38s var(--ease),
              transform 0.38s var(--ease),
              box-shadow var(--dur) var(--ease);
}
.testimonials__panel.is-live .testimonials__card.is-sent {
  opacity: 1;
  transform: translateY(0);
}
/* `.is-live` raises the specificity above the plain `.testimonials__card:hover`
   rule further up, so the hover float has to be restated inside it. */
.testimonials__panel.is-live .testimonials__card.is-sent:hover {
  transform: translateY(-3px);
  box-shadow: var(--tm-shadow-md);
}

/* ---- Rating card: lands from -10deg / 1.114 onto -3deg / 1 -------------- */
.testimonials__panel.is-live .testimonials__rating-card {
  opacity: 0;
  transform: rotate(-10deg) scale(1.114);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.testimonials__panel.is-live .testimonials__rating.is-sent .testimonials__rating-card {
  opacity: 1;
  transform: rotate(-3deg) scale(1);
}

/* ---- Typing bubble ------------------------------------------------------ */
.testimonials__panel.is-live .testimonials__typing {
  transition: transform 0.45s var(--ease), opacity 0.25s var(--ease);
}
.testimonials__panel.is-live .testimonials__typing.is-idle {
  opacity: 0;
}

/* The slot offsets only mean anything while the panel is the 1152px collage;
   below 1200 every layer is a static flex child (see the responsive block).

   `transform` is physical by definition — there is no logical translate — so
   these are physical deltas measured off the Figma frame, taken from the
   PARKED position that `.testimonials__typing` already sits at
   (left 174.3 / top 303.2). Positive X is toward the physical right.

     slot 2  Figma step 2: left 810 / top 182  ->  +635.7 / -121.2
     slot 1  same rule applied to bubble 1's band (left 870 / top 40)
     slot 3  same rule applied to bubble 3's band (left 843 / top 324)  */
@media (min-width: 1200px) {
  .testimonials__panel.is-live .testimonials__typing {
    transform: translate(var(--tm-slot-x, 0px), var(--tm-slot-y, 0px));
  }
  .testimonials__panel.is-live .testimonials__typing[data-slot="1"] {
    --tm-slot-x: 695.7px;
    --tm-slot-y: -263.2px;
  }
  .testimonials__panel.is-live .testimonials__typing[data-slot="2"] {
    --tm-slot-x: 635.7px;
    --tm-slot-y: -121.2px;
  }
  .testimonials__panel.is-live .testimonials__typing[data-slot="3"] {
    --tm-slot-x: 668.7px;
    --tm-slot-y: 20.8px;
  }
  .testimonials__panel.is-live .testimonials__typing[data-slot="park"] {
    --tm-slot-x: 0px;
    --tm-slot-y: 0px;
  }

  /* Figma's step-2 bubble is upright; it only picks up the +2deg tilt on park. */
  .testimonials__panel.is-live .testimonials__typing-bubble {
    transition: transform 0.45s var(--ease);
  }
  .testimonials__panel.is-live .testimonials__typing:not([data-slot="park"]) .testimonials__typing-bubble {
    transform: rotate(0deg);
  }
}

/* ---- WhatsApp CTA (2487:3285) -------------------------------------------- */
.testimonials__cta {
  display: flex;
  justify-content: center;
  margin-block-start: 14px;
}

/* Figma is a 10px-radius rectangle in #21A859, not the shared pill. Overridden
   here rather than in base.css, which other sections still rely on. */
.testimonials__wa {
  height: 50px;
  gap: 10px;
  padding-inline: 26px;
  border-radius: 10px;
  background: var(--c-green-fig);
  color: var(--c-text-on-dark);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  box-shadow: 0 8px 16px color-mix(in srgb, var(--tm-green-deep) 30%, transparent);
}
.testimonials__wa:hover { background: color-mix(in srgb, var(--c-green-fig) 88%, var(--c-ink-1000)); }
.testimonials__wa svg {
  inline-size: 22px;
  block-size: 22px;
  width: 22px;
  height: 22px;
}

/* ==========================================================================
   Responsive — Figma has no breakpoints below 1280. Under 1200 the 1152px
   collage cannot hold, so the panel becomes one centred column and every
   cascading offset is zeroed.
   ========================================================================== */
@media (max-width: 1199px) {
  .testimonials__panel {
    block-size: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding-block: 36px;
    padding-inline: 32px;
  }

  .testimonials__quote {
    inline-size: 132px;
    block-size: 103px;
    inset-block-start: 18px;
    inset-inline-end: 18px;
  }
  .testimonials__dot--yellow { inset-block-start: 22px; inset-inline-start: 26px; }
  .testimonials__dot--green {
    inset-block-start: auto;
    inset-block-end: 26px;
    inset-inline-end: 30px;
  }

  .testimonials__list {
    order: 2;
    inline-size: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .testimonials__card {
    position: static;
    inline-size: min(400px, 100%);
    inset: auto;
  }

  .testimonials__rating { order: 1; position: static; inset: auto; }
  .testimonials__typing { order: 3; position: static; inset: auto; }
}

@media (max-width: 560px) {
  .testimonials { padding-block: 44px; }
  .testimonials .sec-title { font-size: 22px; }

  .testimonials__panel {
    gap: 12px;
    padding-block: 28px;
    padding-inline: 16px;
    border-radius: var(--r-xl);
  }
  /* Small enough to stay clear of the cards' text columns. */
  .testimonials__quote {
    inline-size: 86px;
    block-size: 67px;
    inset-block-start: 12px;
    inset-inline-end: 12px;
  }
  .testimonials__dot--yellow {
    inline-size: 14px;
    block-size: 14px;
    inset-block-start: 16px;
    inset-inline-start: 16px;
  }
  .testimonials__dot--green {
    inline-size: 10px;
    block-size: 10px;
    inset-block-end: 18px;
    inset-inline-end: 18px;
  }

  .testimonials__card { padding-inline: 14px; }
  .testimonials__text { font-size: 13.5px; }
  .testimonials__typing-text { white-space: normal; }

  .testimonials__wa {
    inline-size: 100%;
    max-inline-size: 340px;
    padding-inline: 18px;
    white-space: normal;
    text-align: center;
  }
}