/* Keep minimal; rely on Workreap classes for “native” look */

#sp-profile-reviews { margin-top: 16px; border-radius: 16px; overflow: hidden; }

.sp-summary-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 10px;
}

@media (min-width: 992px) {
  .sp-summary-wrap { grid-template-columns: 320px 1fr; align-items: start; }
}

.sp-summary-stars { margin: 0; }

.sp-dist {
  display: grid;
  gap: 10px;
}

.sp-dist-row {
  display: grid;
  grid-template-columns: 64px 1fr 52px 36px;
  gap: 10px;
  align-items: center;
  font-size: 14px;
}

.sp-dist-bar {
  height: 8px;
  background: rgba(0,0,0,.08);
  border-radius: 999px;
  overflow: hidden;
}

.sp-dist-bar > span {
  display: block;
  height: 100%;
  width: 0%;
  background: rgba(0,0,0,.35);
}

.sp-dist-pct, .sp-dist-cnt { opacity: .8; text-align: right; }

.sp-stars-select {
  display: inline-flex;
  gap: 6px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.sp-stars-select li {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sp-stars-select li i { opacity: .35; }
.sp-stars-select li.active i { opacity: 1; }

.sp-review-item { padding: 16px; border-radius: 12px; }
.sp-review-head { display: flex; gap: 12px; align-items: flex-start; }

.sp-review-avatar img { border-radius: 50%; }

.sp-review-meta { flex: 1; }
.sp-review-topline {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.sp-review-date { opacity: .7; margin-left: auto; }
.sp-review-text { margin-top: 8px; line-height: 1.55; }

.sp-btn-sm {
  padding: 6px 10px !important;
  font-size: 13px !important;
}

.sp-btn-danger {
  background: #b42318 !important;
}

.sp-form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.sp-delete-my { display: none; }

/* === Reviews: keep header full-width, center the rest === */

/* 2) Увеличить отступ "поля" снизу (чтобы секции не липли) */
#sp-profile-reviews .wr-asideholder{
  margin-bottom: 18px;
}

/* 3) Сместить к центру ВСЁ, кроме заголовка */
#sp-profile-reviews > :not(.wr-sort.wr-freelancersort){
  /* визуально делаем "внутреннюю область" */
  margin-left: 14px;
  margin-right: 14px;

  /* больше воздуха внутри */
  padding: 14px 14px 24px;   /* <-- тут увеличенный нижний паддинг */
}

/* мобилка: меньше отступов */
@media (max-width: 576px){
  #sp-profile-reviews > :not(.wr-sort.wr-freelancersort){
    margin-left: 12px;
    margin-right: 12px;
    padding: 16px 14px 22px;
  }
}

/* ===== 1) Заголовки секций (оба h4 внутри блока отзывов) ===== */
#sp-profile-reviews h4{
  font-size: 20px;
  line-height: 1.25;
  margin-bottom: 12px !important; /* перебьёт inline 10px */
}

/* ===== 2) Красивое распределение рейтинга (sp-dist) ===== */
#sp-profile-reviews .sp-dist{
  gap: 12px;
}

/* строка распределения */
#sp-profile-reviews .sp-dist-row{
  font-size: 14px;            /* аккуратнее, чем 16 */
  grid-template-columns: 64px 1fr 52px 36px;
  gap: 12px;
  align-items: center;
}

/* “5 ★”, “4 ★” — сделать чуть плотнее */
#sp-profile-reviews .sp-dist-star{
  font-weight: 600;
  white-space: nowrap;
}

/* фон полосы как в референсе */
#sp-profile-reviews .sp-dist-bar{
  height: 6px;                /* тоньше и “дороже” */
  background: #ECEFF3;        /* светло-серый */
  border-radius: 999px;
  overflow: hidden;
}

/* заполнение (золото) */
#sp-profile-reviews .sp-dist-bar > span{
  height: 100%;
  border-radius: 999px;
  background: #F2C14E;        /* “золотой” как в референсе */
}

/* проценты и количество — более спокойные */
#sp-profile-reviews .sp-dist-pct,
#sp-profile-reviews .sp-dist-cnt{
  opacity: .65;
  font-weight: 500;
  font-size: 13px;
}

/* необязательный штрих: чуть выделить строку активного рейтинга (если хочешь) */
#sp-profile-reviews .sp-dist-row[data-star="5"] .sp-dist-star{
  color: #111;
}


/* выравниваем “левую карточку” и распределение по одной высоте */
#sp-profile-reviews .sp-summary-wrap{
  align-items: stretch;
}
#sp-profile-reviews .sp-summary-wrap > .wr-asideholder{
  background: transparent;
  box-shadow: none;
  padding: 0;
}
#sp-profile-reviews .sp-summary,
#sp-profile-reviews .sp-dist{
  height: 100%;
}

/* ===== Summary card like reference ===== */
@media (min-width: 992px){
  #sp-profile-reviews .sp-summary-wrap{
    grid-template-columns: 360px 1fr; /* чуть шире как в рефе */
    gap: 40px;
    align-items: stretch;
  }

  /* центрируем left-card внутри своей колонки */
  #sp-profile-reviews .sp-summary-wrap > .wr-asideholder:first-child{
    display: flex;
    justify-content: center;
    align-items: stretch;
    background: transparent;
    box-shadow: none;
    padding: 0;
  }
}

#sp-profile-reviews .sp-summary{
  width: 320px;
  max-width: 100%;
  min-height: 190px;
  padding: 34px 26px;
  border-radius: 14px;
  background: #FCEAE8;       /* как у рефа */
  text-align: center;
}

/* число рейтинга */
#sp-profile-reviews .sp-summary strong{
  font-size: 72px !important;
  line-height: 1 !important;
  font-weight: 700;
  color: #D6B238;
  display: block;
}

/* блок "rating + count" делаем столбиком (как в рефе) */
#sp-profile-reviews .sp-summary > div:first-child{
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 10px !important;
}

/* звезды под числом */
#sp-profile-reviews .sp-summary-stars{
  margin-top: 12px !important;
  display: flex;
  justify-content: center;
}

/* ===== Distribution like reference ===== */
#sp-profile-reviews .sp-dist{
  max-width: 520px; /* чтобы не растягивалось “на всю жизнь” */
}

#sp-profile-reviews .sp-dist-row{
  grid-template-columns: 86px 1fr 60px; /* label | bar | percent */
  gap: 14px;
  font-size: 14px;
  align-items: center;
}

/* скрываем count (в рефе его нет), JS пусть обновляет — не мешает */
#sp-profile-reviews .sp-dist-cnt{ display: none; }

#sp-profile-reviews .sp-dist-bar{
  height: 6px;
  background: #EAF5EF; /* светло-зелёный как в рефе */
  border-radius: 999px;
}

#sp-profile-reviews .sp-dist-bar > span{
  background: #D6B238; /* золото */
}

#sp-profile-reviews .sp-dist-pct{
  opacity: .75;
  font-size: 13px;
}

/* ===== Reviews list like reference ===== */
#sp-profile-reviews #sp-reviews-list{
  display: block;
  padding: 0;
  margin: 0;
}

#sp-profile-reviews .sp-review-item.wr-asideholder{
  background: transparent;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  margin: 18px 0 0;
}

#sp-profile-reviews .sp-review-head{ gap: 14px; }
#sp-profile-reviews .sp-review-avatar img{ width: 56px; height: 56px; object-fit: cover; }

#sp-profile-reviews .sp-review-topline{
  display: flex;
  align-items: center;
  gap: 12px;
}

#sp-profile-reviews .sp-review-name{ font-weight: 700; }

#sp-profile-reviews .sp-review-subline{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
  color: #667085;
  font-size: 14px;
}

#sp-profile-reviews .sp-review-rating-inline{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #111;
  font-weight: 600;
}
#sp-profile-reviews .sp-review-rating-inline i{ color: #D6B238; }

#sp-profile-reviews .sp-review-text{
  margin-top: 10px;
  line-height: 1.7;
}

#sp-profile-reviews .sp-rating-picker .wr-featureRating__stars{
  cursor: pointer;
  display: inline-block;
}

/* чтобы в режиме view нельзя было тыкать */
#sp-profile-reviews #sp-review-form[data-mode="view"] .sp-rating-picker .wr-featureRating__stars{
  cursor: default;
  pointer-events: none;
}

/* ✅ ФИКС 2: внутренний span не перехватывает клики */
#sp-profile-reviews .sp-rating-picker .wr-featureRating__stars > span{
  pointer-events: none;
}

#sp-profile-reviews .sp-empty{
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #F7F7F8;
  color: #667085;
}
/* ===== SP FIX: make Workreap stars actually respond to width:% (inside reviews only) =====
   Some Workreap builds ship an early CSS rule that paints BOTH layers as gold and/or
   doesn't clip the filled layer, so changing width does nothing visually.
   This block hard-overrides the stars rendering ONLY inside #sp-profile-reviews.
*/
#sp-profile-reviews .wr-featureRating__stars{
  position: relative;
  display: inline-block;
  font-size: 16px;
  width: 5em;          /* 5 полных звёзд без обрезаний */
  height: 1em;
  line-height: 1em;
  overflow: hidden;
  white-space: nowrap;
  letter-spacing: 0;
  vertical-align: middle;
}

#sp-profile-reviews .wr-featureRating__stars::before{
  content: "\f005\f005\f005\f005\f005";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #eee;
  position: absolute;
  top: 0;
  left: 0;
}

#sp-profile-reviews .wr-featureRating__stars > span{
  position: absolute;
  top: 0;
  left: 0;
  height: 16px;
  width: 0%;
  overflow: hidden;
  display: block;
  pointer-events: none;
}

#sp-profile-reviews .wr-featureRating__stars > span::after{
  content: "\f005\f005\f005\f005\f005";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #D6B238;
  position: absolute;
  top: 0;
  left: 0;
}

/* === SP Reviews: mobile fixes === */
@media (max-width: 576px){
  /* сжимаем отступы */
  #sp-profile-reviews > :not(.wr-sort.wr-freelancersort){
    margin-left: 10px;
    margin-right: 10px;
    padding: 14px 12px 20px;
  }

  /* summary на всю ширину */
  #sp-profile-reviews .sp-summary{
    width: 100%;
    padding: 22px 16px;
    min-height: 0;
  }

  /* распределение: компактнее */
  #sp-profile-reviews .sp-dist-row{
    grid-template-columns: 70px 1fr 46px;
    gap: 10px;
  }

  /* кнопки “Редактировать/Удалить” — друг под другом */
  #sp-profile-reviews .sp-review-topline{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  #sp-profile-reviews .sp-review-edit{
    margin-left: 0 !important;
  }
  #sp-profile-reviews .sp-review-topline .wr-btn{
    width: 100%;
    justify-content: center;
  }
}