/* =========================================================
   USER REVIEWS – Modern Dark/Premium (Rewritten)
   Works with Rehub user reviews + noUiSlider
   ========================================================= */

/* Tokens (inherit your site vars if exist) */
:root{
  --ur-card: rgba(20, 20, 28, .77);
  --ur-text: #cfcfd9;
  --ur-muted: rgba(207, 207, 217, .65);
  --ur-border: rgba(255,255,255,.06);
  --ur-shadow: 0 10px 30px rgba(0,0,0,.35);

  --ur-accent-a: #fd284a; /* violet */
  --ur-accent-b: #1ffc91; /* neon green */
  --ur-warn: #ffb84c;

  --ur-radius: 16px;
  --ur-radius-sm: 12px;
}

/* ---------- Layout / wrappers ---------- */
.user_rating_slider_criteria{
  margin: 10px 0;
  clear: both;
}

/* Main review block */
.user_reviews_view{
  padding: 18px;
  position: relative;
  overflow: hidden;

  border: 1px solid var(--ur-border);
  border-radius: var(--ur-radius);
}

/* Right summary box */
.user_reviews_view_box{
  float: right;
  width: 240px;
  padding: 14px 14px 10px;

  background: rgba(255,255,255,.03);
  border: 1px solid var(--ur-border);
  border-radius: var(--ur-radius-sm);
}

/* Left pros/cons + text */
.user_reviews_view_proscons{
  float: left;
  width: calc(100% - 240px);
  padding: 0 18px 0 0;
}

/* Better typography */
.user_reviews_view_criteria_name{
  font-size: 13px;
  width: 120px;
  color: var(--ur-muted);
}

span.user_reviews_view_pc_title{
  font-weight: 800;
  font-size: 13px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #fff;
  margin-bottom: 8px;
}

/* Pros / Cons list */
.user_reviews_view_pros{ margin-bottom: 16px; }
.user_reviews_view_pros span,
.user_reviews_view_cons span{
  display: block;
  padding: 6px 0;
  color: var(--ur-text);
}

/* Icons (fontawesome compatible if loaded) */
.pros_comment_item:before,
.cons_comment_item:before{
  display: inline-block;
  width: 18px;
  margin-right: 8px;
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
}

.pros_comment_item:before{
  content: "\f00c";
  color: #1ffc91;
}

.cons_comment_item:before{
  content: "\f068";
  color: #ff4d6d;
}

/* Review text */
.comm_text_from_review p{
  margin-bottom: 14px;
  color: var(--ur-text);
}

/* ---------- Stars (modern) ---------- */
/* Keep your icon font approach but modern colors */
.userstar-rating{
  overflow: hidden;
  height: 16px;
  line-height: 16px;
  position: relative;
  display: inline-block;
  font-size: 14px;
}

/* empty stars */
.userstar-rating:before{
  content: "\e9d7\e9d7\e9d7\e9d7\e9d7";
  color: rgba(255,255,255,.20);
}

/* filled stars container */
.userstar-rating span{
  overflow: hidden;
  float: left;
  top: 0;
  left: 0;
  position: absolute;
  padding-top: 1.5em; /* legacy trick kept */
  white-space: nowrap;
}

/* filled stars */
.userstar-rating span:before{
  content: "\e9d9\e9d9\e9d9\e9d9\e9d9";
  top: 0;
  position: absolute;
  left: 0;
  color: var(--ur-warn); /* gold */
  text-shadow: 0 0 10px rgba(255,184,76,.18);
}

/* Score line */
.user_reviews_view_score{
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 8px;
  overflow: hidden;
  color: #fff;
}

.your_total_score{
  margin-top: 18px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: #fff;
}

.your_total_score .user_reviews_view_score{ margin: 0; }

/* Align star blocks */
.user_reviews_view_criteria_line .userstar-rating{ float: right; }
.user_reviews_view_score .userstar-rating{
  float: left;
  font-size: 16px;
  margin-bottom: 6px;
  height: 18px;
  line-height: 18px;
}

/* ---------- Comment form (textarea placeholders etc) ---------- */
#user_reviews_in_comment textarea{
  height: 110px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--ur-border);
  border-radius: var(--ur-radius-sm);
  color: var(--ur-text);
  padding: 12px 14px;
}

#user_reviews_in_comment textarea::placeholder{
  color: rgba(255,255,255,.45) !important;
  font-size: 13px;
}

/* ---------- noUiSlider inside comment area ---------- */
/* Keep it compact & consistent with your modern slider */
#user_reviews_in_comment .noUi-horizontal{ height: 14px; }
#user_reviews_in_comment .noUi-connect{
  background: linear-gradient(90deg, var(--ur-accent-a), var(--ur-accent-b));
}

#user_reviews_in_comment .noUi-horizontal .noUi-handle{
  top: -6px;
  height: 26px;
  width: 26px;
  left: -13px;
}

/* Old stripes off + no transform hacks */
#user_reviews_in_comment .noUi-handle:before,
#user_reviews_in_comment .noUi-handle:after{
  display: none !important;
  content: none !important;
}

#user_reviews_in_comment .noUi-origin,
#user_reviews_in_comment .noUi-handle{
  transform: translate3d(0,0,0);
}

/* Left comment score alignment */
.user_rating_left_com span{
  text-align: right;
  float: right;
  color: var(--ur-muted);
}

/* ---------- Rate bars (two reviews block) ---------- */
.rate_bar_wrap_two_reviews{
  overflow: hidden;
  border-top: 1px dashed rgba(255,255,255,.10);
  border-bottom: 1px dashed rgba(255,255,255,.10);
  padding: 12px 0 0;
  margin-top: 18px;
  position: relative;
}

.pros_cons_values_in_rev{
  border-bottom: 1px dashed rgba(255,255,255,.10);
  margin: 18px 0 0;
  padding: 0 0 10px;
  overflow: hidden;
}

article.post .rate_bar_wrap_two_reviews a.link_to_review{
  position: absolute;
  bottom: 0;
  right: 0;
  font-weight: 800;
  text-decoration: none;
  color: var(--ur-accent-a);
}
article.post .rate_bar_wrap_two_reviews a.link_to_review:hover{
  color: #fff;
  text-shadow: 0 0 12px rgba(123,97,255,.25);
}

/* Remove old tabs */
.rate_bar_wrap_two_reviews .rehub_review_tabs{ display: none; }
.rate_bar_wrap_two_reviews .review-criteria{ border: none; padding: 0; margin-top: 0; }

.rate_bar_wrap_two_reviews .l_criteria{
  margin: 0 0 14px;
  padding: 8px 0;
  overflow: hidden;
}

.rate_bar_wrap_two_reviews .l_criteria span.score_tit{
  font-size: 14px;
  line-height: 26px;
  text-transform: uppercase;
  letter-spacing: .6px;
  float: left;
  color: var(--ur-muted);
  font-weight: 800;
}

.rate_bar_wrap_two_reviews .l_criteria span.score_val{
  text-align: right;
  float: right;
  font-size: 30px;
  line-height: 30px;
  font-weight: 900;
  color: #fff;
}

.rate_bar_wrap_two_reviews .r_criteria{ margin-top: 26px; }

/* Bars */
.rate_bar_wrap_two_reviews .rate-bar,
.rate_bar_wrap_two_reviews .rate-bar-bar{
  height: 10px;
  border-radius: 999px;
}

.rate_bar_wrap_two_reviews .rate-bar{
  margin-bottom: 24px;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}

body .user-review-criteria .rate-bar-bar{
  background: linear-gradient(90deg, var(--ur-accent-a), var(--ur-accent-b));
}

/* score underline accents */
.rate_bar_wrap_two_reviews .score_val{
  border-bottom: 3px solid rgba(255,77,109,.55);
  padding-bottom: 4px;
}
.rate_bar_wrap_two_reviews .user-review-criteria .score_val{
  border-bottom: 3px solid rgba(255,184,76,.70);
}

/* Add review link */
.rate_bar_wrap .add_user_review_link{
  float: right;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ur-accent-a);
}
.rate_bar_wrap .add_user_review_link:hover{
  color: #fff;
  text-shadow: 0 0 12px rgba(123,97,255,.25);
}

/* ---------- Only user reviews layout ---------- */
.only_user_reviews .overall-best,
.only_user_reviews .user-reviews-title,
.only_user_reviews .overall-worst{
  display: none;
}

.total-score-users-head .review-top{
  padding: 0 !important;
  background: transparent !important;
}

.total-score-users-head{
  float: left;
  width: 110px;
  text-align: center;
}

.only_user_reviews .review-criteria{
  float: left;
  width: calc(100% - 135px);
  margin-left: 25px;
  padding: 0 !important;
  border: none !important;
}

.only_user_reviews .overall-votes{
  text-align: center;
  font-size: 12px;
  font-style: italic;
  margin-top: 10px;
  color: var(--ur-muted);
}

.total-score-users-head .overall-score{ float: none !important; }
.total-score-users-head .add_user_review_link{
  float: none !important;
  font-size: 11px;
  line-height: 12px !important;
  display: block;
  margin: 2px auto 0;
}

/* Outer wrapper (was white in legacy) -> dark/premium */
.rate_bar_wrap.only_user_reviews{
  padding: 18px;
  border: 1px dashed rgba(255,255,255,.16);
  background: rgba(255,255,255,.02);
  margin: 18px auto 30px;
  border-radius: var(--ur-radius);
}

/* ---------- Responsive ---------- */
@media (max-width: 767px){
  .user_reviews_view_box{
    float: none;
    width: 100%;
    margin-top: 12px;
  }

  .user_reviews_view_proscons{
    float: none;
    width: 100%;
    padding-right: 0;
  }

  .rate_bar_wrap_two_reviews .review-criteria{
    width: 100%;
    margin-right: 0;
  }
}