/* Ratings / reviews component (tihuta.ro)
   - Star input (radio) + display
*/

.ratingBox{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(8,12,26,.55);
  border-radius:18px;
  padding:16px;
}
html[data-theme="day"] .ratingBox{
  background:rgba(247,249,255,.75);
  border:1px solid rgba(16,20,39,.10);
}

.ratingSummary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.ratingSummary .sumLeft{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.ratingSummary .sumRight{color:var(--muted); font-size:13px;}

.starsInput{
  display:flex;
  flex-direction:row-reverse;
  justify-content:flex-end;
  gap:6px;
}
.starsInput input{ position:absolute; left:-9999px; }
.starsInput label{
  cursor:pointer;
  font-size:28px;
  line-height:1;
  user-select:none;
  opacity:.45;
  transition:transform .12s ease, opacity .12s ease;
}
.starsInput label:hover{ transform:scale(1.05); opacity:.85; }
.starsInput input:checked ~ label{ opacity:1; }

.ratingForm .row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin-top:10px;
}
.ratingForm .row .input{ width:100%; }
.ratingForm textarea{ min-height:110px; resize:vertical; }
@media (max-width:720px){
  .ratingForm .row{ grid-template-columns: 1fr; }
}

.ratingMsg{
  margin:0 0 12px 0;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
}
.ratingMsg.ok{ border-color:rgba(0,255,170,.25); }
.ratingMsg.err{ border-color:rgba(255,80,80,.25); }