/* ===== Reviews / comments (FINAL merged) ===== */

.comments{
  padding: 60px 0;
  background: #fff;
}

/* Title */
.comments .title-section{
  font-family: 'Roboto', arial, helvetica, sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 2px;
  color: #595959;
  margin: 0 0 25px;
  font-size: 40px;
  line-height: 1.05em;
}

@media (max-width:992px){
  .comments .title-section{
    font-size: 25px;
    letter-spacing: 1px;
  }
}

/* Swiper base */
.comments .swiper{ position: relative; }
.comments .swiper-wrapper{ align-items: stretch; }

/* Card */
.comment-card{
  height: 280px; /* меняйте тут (например 280/360) */
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;

  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  padding: 26px 26px 22px;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  transition: .2s;
}

@media (hover:hover){
  .comment-card:hover{
    box-shadow: 0 14px 38px rgba(0,0,0,.12);
    transform: translateY(-1px);
  }
}

.comment-name{
  font-family: 'Roboto', arial, helvetica, sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 14px;
  color: #111;
  margin: 0;
}

/* Stars (no icon fonts, no half-star bug) */
.comment-stars{
  --star-size: 16px;
  --star-gap: 4px;
  --star-on: #f59e0b;   /* orange */
  --star-off: #e5e7eb;

  position: relative;
  display: inline-block;
  height: var(--star-size);
  line-height: var(--star-size);
  width: calc(var(--star-size) * 5 + var(--star-gap) * 4);
}

.comment-stars::before,
.comment-stars::after{
  content: "★★★★★";
  position: absolute;
  inset: 0;
  font-size: var(--star-size);
  letter-spacing: var(--star-gap);
  font-family: Arial, sans-serif;
  line-height: var(--star-size);
  white-space: nowrap;
}

.comment-stars::before{ color: var(--star-off); }

.comment-stars::after{
  color: var(--star-on);
  overflow: hidden;
  width: 0;
}

.comment-stars[data-rating="1"]::after{ width: 1em; }
.comment-stars[data-rating="2"]::after{ width: 2em; }
.comment-stars[data-rating="3"]::after{ width: 3em; }
.comment-stars[data-rating="4"]::after{ width: 4em; }
.comment-stars[data-rating="5"]::after{ width: 5em; }

/* ===== Scroll area like luxokna.by =====
   Работает, если в шаблоне текст в .info.
   Также поддерживает старый .comment-text. */
.comment-card .info,
.comment-text{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;      /* скролл только если нужно */
  overflow-x: hidden;
  padding-right: 10px;

  font-size: 15px;
  line-height: 1.65em;
  color: #404040;
  word-break: break-word;

  pointer-events: auto;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: #d9d9d9 transparent;
}

/* Chrome/Edge scrollbar */
.comment-card .info::-webkit-scrollbar,
.comment-text::-webkit-scrollbar{ width: 6px; }

.comment-card .info::-webkit-scrollbar-thumb,
.comment-text::-webkit-scrollbar-thumb{ background: #d9d9d9; }

.comment-card .info::-webkit-scrollbar-thumb:hover,
.comment-text::-webkit-scrollbar-thumb:hover{ background: #bfbfbf; }

.comment-card .info::-webkit-scrollbar-track,
.comment-text::-webkit-scrollbar-track{ background: transparent; }

/* Bottom controls: button centered */
.comments .swiper-nav-box{
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.comments .swiper-nav-box .button{
  order: 1;
  display: inline-block;

  background: #f1002d;
  border: 1px solid #d90029;
  color: #fff;

  text-transform: uppercase;
  letter-spacing: .45px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Roboto', arial, helvetica, sans-serif;

  padding: 10px 18px;
  border-radius: 10px;
  transition: .2s;
}

.comments .swiper-nav-box .button:hover{
  background: #d90029;
  border-color: #c10024;
  color: #fff;
  text-decoration: none;
}

.comments .swiper-nav-box .nav-box{
  order: 2;
  float: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Swiper arrows */
.comments .swiper-button-prev,
.comments .swiper-button-next{
  position: static;
  width: 45px;
  height: 45px;
  margin: 0;

  border-radius: 0;
  background: #fff;
  border: 1px solid #e6e6e6;
  box-shadow: 0 1px 7px rgba(0,0,0,0.10);
  transition: .2s;
}

.comments .swiper-button-prev:after,
.comments .swiper-button-next:after{
  font-size: 16px;
  color: #595959;
  font-weight: 700;
}

.comments .swiper-button-prev:hover,
.comments .swiper-button-next:hover{
  border-color: #bfbfbf;
  box-shadow: 0 2px 20px rgba(0,0,0,0.15);
}

.comments .swiper-button-prev.swiper-button-disabled,
.comments .swiper-button-next.swiper-button-disabled{
  opacity: .45;
  cursor: not-allowed;
}

/* Pagination */
.comments .swiper-pagination{
  position: static;
  width: auto;
  margin: 0 5px;
}

.comments .swiper-pagination-bullet{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0,0,0,0.20);
  opacity: 1;
  margin: 0 5px !important;
  transform: scale(.8);
  transition: .2s;
}

.comments .swiper-pagination-bullet-active{
  background: #f1002d;
  transform: scale(1);
}

/* Mobile layout */
@media (max-width:992px){
  .comments .swiper-nav-box .button{
    width: 100%;
    text-align: center;
  }
  .comments .swiper-nav-box .nav-box{
    width: 100%;
    justify-content: space-between;
  }
}