/**
 * @file
 * Блок відгуків на сторінці товару — мова сайту: заголовок як у розділів,
 * картки відгуків, форма з пігулками і чорною кнопкою.
 */

.sr-reviews {
  margin-top: var(--sr-space-12);
}

.sr-reviews__title {
  display: flex;
  align-items: baseline;
  gap: var(--sr-space-3);
  margin: 0 0 var(--sr-space-6);
  color: var(--sr-ink);
  font-size: var(--sr-text-xl);
  font-weight: 700;
  line-height: 1.2;
}

/* Середня оцінка поруч із заголовком: зірка червона, число вагоме. */
.sr-reviews__score {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sr-space-1);
  color: var(--sr-black);
  font-size: var(--sr-text-base);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sr-reviews__stars {
  color: var(--sr-red);
  letter-spacing: 2px;
}

.sr-reviews__count {
  color: var(--sr-grey-2);
  font-size: var(--sr-text-sm);
  font-weight: 400;
}

/* --- список відгуків --- */

.sr-reviews__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sr-space-4);
}

.sr-reviews__item {
  padding: var(--sr-space-5) var(--sr-space-6);
  border: 1px solid var(--sr-line);
  border-radius: var(--sr-radius-card);
  background: var(--sr-surface);
}

.sr-reviews__head {
  display: flex;
  align-items: baseline;
  gap: var(--sr-space-3);
  margin-bottom: var(--sr-space-2);
}

.sr-reviews__name {
  color: var(--sr-black);
  font-size: var(--sr-text-base);
  font-weight: 600;
}

.sr-reviews__date {
  margin-left: auto;
  color: var(--sr-grey-2);
  font-size: var(--sr-text-xs);
  font-variant-numeric: tabular-nums;
}

.sr-reviews__text {
  margin: 0;
  color: var(--sr-ink);
  font-size: var(--sr-text-base);
  line-height: 1.55;
  overflow-wrap: break-word;
}

/* Відповідь менеджера — окрема репліка під відгуком: мʼяка підкладка
   з лівою червоною лінією, щоб відрізнити її від тексту покупця. */
.sr-reviews__reply {
  margin: var(--sr-space-3) 0 0;
  padding: var(--sr-space-3) var(--sr-space-4);
  border-left: 3px solid var(--sr-red);
  border-radius: 0 var(--sr-radius-sm) var(--sr-radius-sm) 0;
  background: var(--sr-ground);
  color: var(--sr-ink);
  font-size: var(--sr-text-sm);
  line-height: 1.5;
  overflow-wrap: break-word;
}

.sr-reviews__reply-label {
  display: block;
  margin-bottom: var(--sr-space-1);
  color: var(--sr-grey-2);
  font-size: var(--sr-text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sr-reviews__empty {
  margin: 0 0 var(--sr-space-6);
  color: var(--sr-grey-2);
  font-size: var(--sr-text-sm);
}

/* --- форма --- */

.sr-reviews__form {
  margin-top: var(--sr-space-8);
  padding: var(--sr-space-6);
  border: 1px solid var(--sr-line);
  border-radius: var(--sr-radius-card);
  background: var(--sr-ground);
}

.sr-reviews__form-title {
  margin: 0 0 var(--sr-space-4);
  color: var(--sr-black);
  font-size: var(--sr-text-lg);
  font-weight: 700;
}

/* Поля форми — ті самі пігулки, що в оформленні, щоб не вчити нову мову. */
.sr-reviews__form .form-item {
  margin-bottom: var(--sr-space-4);
}

.sr-reviews__form label {
  display: block;
  margin-bottom: var(--sr-space-1);
  color: var(--sr-grey-1);
  font-size: var(--sr-text-sm);
  font-weight: 500;
}

.sr-reviews__form input[type="text"],
.sr-reviews__form input[type="email"],
.sr-reviews__form textarea,
.sr-reviews__form select {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--sr-control-h);
  padding: var(--sr-space-2) var(--sr-space-4);
  border: 1px solid var(--sr-line);
  border-radius: var(--sr-radius-sm);
  background: var(--sr-surface);
  color: var(--sr-ink);
  font-family: var(--sr-font);
  font-size: var(--sr-text-base);
}

.sr-reviews__form select {
  width: auto;
  min-width: 140px;
}

.sr-reviews__form textarea {
  resize: vertical;
}

/* Кнопка — чорна пігулка, як головна дія скрізь. */
.sr-reviews__submit {
  height: var(--sr-control-h);
  padding: 0 var(--sr-space-8);
  border: 0;
  border-radius: var(--sr-radius-pill);
  background: var(--sr-black);
  color: var(--sr-surface);
  font-family: var(--sr-font);
  font-size: var(--sr-text-base);
  font-weight: 600;
  cursor: pointer;
}

.sr-reviews__submit:hover {
  background: var(--sr-red);
}

@media (max-width: 760px) {
  .sr-reviews__title {
    font-size: var(--sr-text-lg);
  }

  .sr-reviews__item,
  .sr-reviews__form {
    padding: var(--sr-space-4);
  }
}