/* =========================================================
   blocks-reviews-carousel.min.css — карусель отзывов + модалка отзыва.
   Стиль сайта: квадратные углы, акцент #b00a27.
   Эффекты: выезжающая полоса, лёгкий подъём, аккуратные тени.
   Стрелки и точки — в едином блоке .c-rc__controls под слайдером.
   ========================================================= */

/* =========================================================
   КАРУСЕЛЬ (.c-rc)
   ========================================================= */
.c-rc { margin: 56px 0; }

/* ---------- Шапка ---------- */
.c-rc__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.c-rc__head .c-service-section__title {
  margin: 0;
  position: relative;
  padding-left: 18px;
}
.c-rc__head .c-service-section__title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.18em;
  bottom: 0.18em;
  width: 4px;
  background: var(--c-accent);
}

/* Кнопка «Оставить отзыв» */
.c-rc__add-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: transparent;
  color: var(--c-accent);
  border: 1.5px solid var(--c-accent);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  overflow: hidden;
  transition: background-color var(--c-transition), color var(--c-transition), transform var(--c-transition);
}
.c-rc__add-btn:hover {
  background: var(--c-accent);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -10px rgba(176, 10, 39, 0.55);
}
.c-rc__add-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.c-rc__add-btn:hover .c-rc__add-icon {
  transform: rotate(90deg);
}
.c-rc__add-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- Область просмотра ---------- */
/* Чистый overflow: hidden без padding-буфера,
   чтобы не показывался краешек 4-го слайда.
   Тень при hover уменьшена до вашего --c-shadow — она помещается
   внутри области, дополнительный буфер не требуется. */
.c-rc__viewport {
  position: relative;
  overflow: hidden;
  /* Вертикальный буфер для тени карточек при hover.
     По горизонтали буфера нет — 4-й слайд остаётся за границей.
     18px сверху/снизу с компенсацией отрицательным margin:
     тень при hover помещается внутрь области и не срезается. */
  padding: 18px 0;
  margin: -18px 0;
}
.c-rc__track {
  display: flex;
  gap: var(--c-gap);
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.c-rc__slide {
  position: relative;
  flex: 0 0 calc((100% - var(--c-gap) * 2) / 3);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  padding: 32px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  transition:
    transform var(--c-transition),
    box-shadow var(--c-transition),
    border-color var(--c-transition);
}
.c-rc__slide::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--c-accent);
  transition: width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.c-rc__slide:hover::before {
  width: 100%;
}
/* Лёгкая тень при hover — маленькая, чтобы не срезаться */
.c-rc__slide:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(20, 22, 26, 0.10);
  border-color: transparent;
}

/* Большая декоративная кавычка в углу */
.c-rc__slide::after {
  content: '"';
  position: absolute;
  top: 12px;
  right: 20px;
  font-family: Georgia, serif;
  font-size: 96px;
  line-height: 1;
  color: var(--c-accent);
  opacity: 0.06;
  pointer-events: none;
  font-weight: 700;
  transition: opacity 0.3s ease;
}
.c-rc__slide:hover::after {
  opacity: 0.12;
}

@media (max-width: 1200px) {
  .c-rc__slide { flex-basis: calc((100% - var(--c-gap)) / 2); }
}
@media (max-width: 800px) {
  .c-rc__slide { flex-basis: 100%; }
}

/* ---------- Шапка слайда ---------- */
.c-rc__slide-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.c-rc__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--c-accent);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 14px -8px rgba(176, 10, 39, 0.5);
}
.c-rc__who { flex: 1; min-width: 0; }
.c-rc__author {
  display: block;
  font-weight: 700;
  font-size: 16px;
  color: var(--c-text);
  line-height: 1.3;
}
.c-rc__role {
  display: block;
  font-size: 13px;
  color: var(--c-text-mute);
  line-height: 1.4;
  margin-top: 3px;
}
.c-rc__rating {
  display: inline-flex;
  gap: 2px;
  color: #e3e6ea;
  flex-shrink: 0;
}
.c-rc__star { color: currentColor; }
.c-rc__star.is-on { color: #f6b400; }

/* ---------- Текст ---------- */
.c-rc__text {
  position: relative;
  z-index: 1;
  flex: 1;
}
.c-rc__text p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--c-text);
}

/* ---------- Подвал слайда ---------- */
.c-rc__slide-foot {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--c-text-mute);
  border-top: 1px solid var(--c-border);
  padding-top: 14px;
}

/* =========================================================
   CONTROL BAR — стрелки и точки под слайдером
   ========================================================= */
.c-rc__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 32px;
}

/* Стрелки — квадратные кнопки с иконкой */
.c-rc__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  color: var(--c-text);
  cursor: pointer;
  padding: 0;
  transition:
    background-color var(--c-transition),
    color var(--c-transition),
    border-color var(--c-transition),
    transform var(--c-transition);
}
.c-rc__nav:hover:not(:disabled) {
  background: var(--c-accent);
  color: #ffffff;
  border-color: var(--c-accent);
  transform: scale(1.08);
}
.c-rc__nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.c-rc__nav svg {
  display: block;
  width: 20px;
  height: 20px;
}

/* Точки — по центру между стрелками */
.c-rc__dots {
  display: flex;
  align-items: center;
  gap: 10px;
}
.c-rc__dot {
  width: 10px;
  height: 10px;
  border: 1px solid var(--c-border);
  background: var(--c-bg);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition:
    background-color var(--c-transition),
    border-color var(--c-transition),
    transform var(--c-transition),
    width var(--c-transition);
}
.c-rc__dot:hover {
  border-color: var(--c-accent);
  transform: scale(1.15);
}
.c-rc__dot.is-active {
  background: var(--c-accent);
  border-color: var(--c-accent);
  width: 26px;
  border-radius: 6px;
}

/* =========================================================
   МОДАЛКА ОТЗЫВА (.c-review-modal)
   ========================================================= */
.c-review-modal {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  width: 100vw;
  height: 100vh;
  margin: 0;
  color: var(--c-text);
}
.c-review-modal::backdrop {
  background: rgba(20, 22, 26, 0.55);
  backdrop-filter: blur(3px);
}
.c-review-modal__dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(680px, 94vw);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--c-bg);
  border-top: 3px solid var(--c-accent);
  box-shadow: var(--c-shadow-lg);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.c-review-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 32px 20px;
  border-bottom: 1px solid var(--c-border);
  position: sticky;
  top: 0;
  background: var(--c-bg);
  z-index: 2;
}
.c-review-modal__title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--c-text);
  position: relative;
  padding-left: 16px;
}
.c-review-modal__title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.18em;
  bottom: 0.18em;
  width: 3px;
  background: var(--c-accent);
}
.c-review-modal__close {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--c-text);
  transition: background-color var(--c-transition), color var(--c-transition);
}
.c-review-modal__close:hover {
  background: var(--c-accent);
  color: #ffffff;
}
.c-review-modal__close svg {
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.c-review-modal__close:hover svg {
  transform: rotate(90deg);
}
.c-review-modal__body {
  padding: 28px 32px 32px;
}
.c-review-modal__lead {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-text-mute);
}
.c-review-modal .form--styled {
  padding: 0;
  border: 0;
  max-width: none;
  margin: 0;
}
.c-review-modal .form--styled::before { display: none; }

.c-review-form__hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--c-text-mute);
  font-style: italic;
}

/* =========================================================
   РЕЙТИНГ — звёздочки в форме
   ========================================================= */
.c-rating {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 4px;
  padding: 6px 0;
}
.c-rating__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.c-rating__star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  cursor: pointer;
  color: #d1d5db;
  transition: color 0.15s ease, transform 0.15s ease;
}
.c-rating__star svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
  transition: filter 0.15s ease;
}
.c-rating__star:hover,
.c-rating__star:hover ~ .c-rating__star {
  color: #f6b400;
  transform: scale(1.12);
  filter: drop-shadow(0 2px 6px rgba(246, 180, 0, 0.4));
}
.c-rating__input:checked ~ .c-rating__star {
  color: #f6b400;
}
.c-rating__input:focus-visible + .c-rating__star {
  outline: 3px solid rgba(176, 10, 39, 0.25);
  outline-offset: 2px;
}

/* =========================================================
   Адаптив
   ========================================================= */
@media (max-width: 900px) {
  .c-rc { margin: 40px 0; }
  .c-rc__head { align-items: flex-start; margin-bottom: 24px; }
  .c-rc__nav {
    width: 42px;
    height: 42px;
  }
  .c-rc__controls { gap: 16px; margin-top: 24px; }
  .c-rc__add-btn { padding: 10px 16px; font-size: 13px; }
  .c-rc__slide { padding: 26px 22px 20px; }
  .c-rc__slide::after { font-size: 76px; top: 8px; right: 14px; }
  .c-rc__text p { font-size: 15px; }

  .c-review-modal__head { padding: 18px 22px 16px; }
  .c-review-modal__body { padding: 22px 22px 26px; }
  .c-review-modal__title { font-size: 19px; }
}

@media (max-width: 500px) {
  .c-rating__star { width: 32px; height: 32px; }
  .c-review-modal__dialog { width: 100vw; height: 100vh; max-height: 100vh; border-top-width: 2px; }
  .c-review-modal__head { padding: 14px 16px 12px; }
  .c-review-modal__body { padding: 18px 16px 22px; }
  .c-review-modal__title { font-size: 18px; }
  .c-review-modal__close { width: 38px; height: 38px; }

  .c-rc__controls { gap: 12px; margin-top: 20px; }
  .c-rc__nav { width: 38px; height: 38px; }
  .c-rc__nav svg { width: 18px; height: 18px; }
  .c-rc__dot { width: 8px; height: 8px; }
  .c-rc__dot.is-active { width: 22px; }

  .c-rc__add-btn { padding: 9px 14px; font-size: 12px; gap: 8px; }
  .c-rc__add-btn .c-rc__add-icon { width: 14px; height: 14px; }
}