/* reviews.css — добавляет scroll-snap и базовые стили карточек отзывов */
.carousel-container{
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding-bottom: 8px;
}
.review-slide{
  scroll-snap-align: start;
  flex: 0 0 85%;
}
@media (min-width:768px){ .review-slide{ flex-basis: 48%; } }
@media (min-width:1280px){ .review-slide{ flex-basis: 31%; } }

.review-card{
  background:#18181b;
  border:1px solid #374151;
  border-radius:12px;
  padding:16px;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
  height:100%;
}
.review-stars{ display:flex; gap:6px; margin-bottom:8px; color:#fbbf24; }
.review-text{ color:#d1d5db; line-height:1.6; margin:8px 0 14px; }
.review-text.muted{ color:#9ca3af; font-style:italic; }
.review-audio{ margin:8px 0 14px; display:flex; flex-direction:column; gap:8px; }
.review-audio audio{ width:100%; border-radius:8px; background:#111827; }
.review-audio-caption{ color:#9ca3af; font-size:0.875rem; }
.review-author{ display:flex; align-items:center; gap:10px; }
.review-avatar{ width:44px; height:44px; border-radius:50%; object-fit:cover; background:#111827; border:1px solid #374151; display:flex; align-items:center; justify-content:center; color:#e5e7eb; font-weight:700; }


/* === Reviews Carousel: integrated on 2025-10-16 === */
.carousel-container {
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
}
.carousel-container::-webkit-scrollbar {
    display: none;
}
.carousel-item {
    width: 100%;
    flex-shrink: 0;
    scroll-snap-align: center;
}
@media (min-width: 768px) {
    .carousel-item {
        width: calc(50% - 1rem);
    }
}
@media (min-width: 1024px) {
    .carousel-item {
        width: calc(33.333333% - 1.333333rem);
    }
}
.carousel-button {
    transition: all 0.3s ease;
}

/* Mobile responsive overrides */
@media (max-width: 767px) {
    .carousel-button {
        display: none;
    }
}

/* Mobile-only buttons */
.mobile-carousel-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}
.mobile-carousel-button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.3s;
}
.mobile-carousel-button:hover {
    background: rgba(255, 255, 255, 0.4);
}
@media (min-width: 768px) {
    .mobile-carousel-buttons {
        display: none;
    }
}

/* Только вариант с инициалами (DIV), не затронет IMG-аватар */
div.review-avatar{
  background: #303030;   /* цвет фона кружка */
  color: #fff;           /* цвет инициалов */
  border: 2px solid #ef4444; /* обводка/кольцо, можно убрать */
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* === End Reviews Carousel === */