
.rr-rating-wrapper{
  margin-top:40px;
  text-align:center;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}

.rr-stars{
  font-size:30px;
  cursor:pointer;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  touch-action:manipulation;
  user-select:none;
}

.rr-star{
  color:rgba(255,0,0,.25);
  transition:.2s;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  outline:none !important;
  user-select:none;
}

.rr-star:focus,
.rr-star:active{
  outline:none !important;
  background:transparent !important;
}

.rr-star.active{
  color:rgba(255,0,0,.88);
}

.rr-rating-info{
  margin-top:8px;
  font-size:14px;
  color:rgba(255,223,223,.77);
  position:relative;
  display:inline-block;
}

.rr-breakdown-tooltip{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  margin-top:8px;
  background:#111;
  padding:12px;
  border-radius:8px;
  width:min(92vw,340px);
  box-shadow:0 6px 18px rgba(0,0,0,.5);
  z-index:9999;
}

.rr-rating-info:hover .rr-breakdown-tooltip{display:block}

.rr-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
}

.rr-label{width:32px;font-size:12px;flex-shrink:0}

.rr-bar-wrap{
  flex:1;
  height:6px;
  background:rgba(255,255,255,.1);
  border-radius:4px;
  overflow:hidden;
}

.rr-bar{
  height:100%;
  background:rgba(255,0,0,.88);
}

.rr-percent{
  min-width:75px;
  text-align:right;
  white-space:nowrap;
  font-size:11px;
  flex-shrink:0;
}

@media(max-width:480px){
  .rr-stars{font-size:24px}
  .rr-breakdown-tooltip{
    left:50%;
    transform:translateX(-50%);
  }
}


/* === Added Hover Animation (Built strictly over 3.8) === */

.rr-star {
  transition: color .2s ease, transform .2s ease;
}

.rr-star:hover {
  color: rgba(255, 0, 0, 0.88) !important;
  transform: scale(1.15);
}

.rr-star.active {
  transform: scale(1.15);
}


/* === Confirmation Modal === */

.rr-confirm-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.88);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:99999;
}

.rr-confirm-box{
  background:#111;
  border:1px solid rgba(255,0,0,.6);
  padding:24px;
  width:min(92vw,420px);
  border-radius:12px;
  text-align:center;
  color:rgba(255,223,223,.9);
  box-shadow:0 0 25px rgba(255,0,0,.25);
}

.rr-confirm-stars{
  font-size:22px;
  margin:10px 0 18px;
  color:rgba(255,0,0,.88);
}

.rr-confirm-buttons{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}

.rr-btn{
  padding:10px 18px;
  border-radius:6px;
  cursor:pointer;
  border:1px solid rgba(255,0,0,.6);
  background:#000;
  color:rgba(255,223,223,.9);
  transition:.2s ease;
}

.rr-btn:hover{
  background:rgba(255,0,0,.88);
  color:#000;
}

@media(max-width:480px){
  .rr-confirm-box{
    padding:18px;
  }
}


/* === Josefin Sans Font === */
.rr-confirm-box,
.rr-confirm-box * {
  font-family: 'Josefin Sans', sans-serif !important;
}

/* === Fix Cursor on Desktop === */
.rr-confirm-overlay,
.rr-confirm-box {
  cursor: default;
}

.rr-btn {
  cursor: pointer;
}


/* === Force Cursor Restore === */

.rr-confirm-overlay,
.rr-confirm-overlay * {
  cursor: auto !important;
}

.rr-confirm-box {
  cursor: default !important;
}

.rr-btn {
  cursor: pointer !important;
}



/* === Restored Breakdown Tooltip Styles === */

.rr-breakdown-tooltip{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  margin-top:8px;
  background:#111;
  padding:12px;
  border-radius:8px;
  width:min(92vw,340px);
  box-shadow:0 6px 18px rgba(0,0,0,.5);
  z-index:9999;
}

.rr-rating-info:hover .rr-breakdown-tooltip{
  display:block;
}

.rr-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
}

.rr-label{
  width:32px;
  font-size:12px;
  flex-shrink:0;
  color:rgba(255,0,0,0.88);
}

.rr-bar-wrap{
  flex:1;
  height:6px;
  background:rgba(255,255,255,.1);
  border-radius:4px;
  overflow:hidden;
}

.rr-bar{
  height:100%;
  background:rgba(255,0,0,.88);
}

.rr-percent{
  min-width:75px;
  text-align:right;
  white-space:nowrap;
  font-size:11px;
  flex-shrink:0;
  color:rgba(255,223,223,.77);
}



/* === Half Star Visual === */

.rr-star.half {
  position: relative;
  color: rgba(255,0,0,.25);
}

.rr-star.half::before {
  content: '★';
  position: absolute;
  left: 0;
  width: 50%;
  overflow: hidden;
  color: rgba(255,0,0,.88);
}



/* === Mobile Safe Tooltip Fix === */

@media (max-width: 768px) {

  .rr-breakdown-tooltip {
    left: 50% !important;
    transform: translateX(-50%);
    width: calc(100vw - 24px);
    max-width: 380px;
    right: auto !important;
  }

}

