/* ==========================================================================
   TESTIMONIAL.CSS — Swiper, Card, Rating, Avatar, Verified Badge, Navigation
   ========================================================================== */

.testimonial{ background: var(--color-bg-soft); border-radius: var(--radius-lg); padding: 56px 0; overflow: hidden; position: relative; }
.testimonial::before, .testimonial::after{
  content: '';
  position: absolute; top: 0; bottom: 0;
  width: 60px; z-index: 2;
  pointer-events: none;
}
.testimonial::before{ left: 0; background: linear-gradient(90deg, var(--color-bg-soft), transparent); }
.testimonial::after{ right: 0; background: linear-gradient(-90deg, var(--color-bg-soft), transparent); }

.testimonial-track{
  display: flex;
  gap: 20px;
  width: max-content;
  animation: testimonial-marquee 55s linear infinite;
  padding-inline: 40px;
}
.testimonial-track:hover{ animation-play-state: paused; }
@keyframes testimonial-marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .testimonial-track{ animation: none; overflow-x: auto; }
}

.testimonial-card{
  flex: 0 0 300px;
  width: 300px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 24px;
  border: 1px solid var(--color-border);
}
.testimonial-card__head{ display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.testimonial-card__name{ font-weight: 700; font-size: .92rem; display: flex; align-items: center; gap: 6px; }
.testimonial-card__area{ font-size: .78rem; color: var(--color-text-muted); }
.testimonial-card__text{ font-size: .88rem; color: var(--color-text-muted); line-height: 1.7; margin-bottom: 12px; }

.testimonial-nav{ display: flex; justify-content: center; gap: 10px; margin-top: 24px; }
.testimonial-nav button{
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--transition-fast);
}
.testimonial-nav button:hover{ background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.testimonial-nav svg{ width: 16px; height: 16px; }