.ht-single-rating{
  --rating:#f59e0b;
}

.ht-sec-head{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  font-size:var(--h2);
  font-weight:500;
  color:var(--fg);
}

.ht-sec-head__label{
  white-space:nowrap;
}

.ht-sec-head__icon{
  inline-size:28px;
  block-size:28px;
  border-radius:999px;
  border:1px solid color-mix(in oklab,var(--brand-500),transparent 60%);
  display:flex;
  align-items:center;
  justify-content:center;
}

.ht-sec-head__icon svg{
  inline-size:16px;
  block-size:16px;
  stroke:var(--brand-600);
  stroke-width:1.6;
  fill:none;
}

html[data-theme="dark"] .ht-sec-head__icon{
  border-color:color-mix(in oklab,var(--brand-300),transparent 70%);
}

html[data-theme="dark"] .ht-sec-head__icon svg{
  stroke:var(--brand-300);
}

.ht-single-rating .single-rating-card{
  position:relative;
  content-visibility:auto;
  contain:content;
  contain-intrinsic-size:220px 160px;
  font:inherit;
  color:var(--fg);
}

.ht-single-rating .single-rating-card.is-loading{
  opacity:.72;
}

.ht-single-rating .rating-panel{
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-1,#ffffff);
  padding:14px 16px;
}

html[data-theme="dark"] .ht-single-rating .rating-panel{
  background:transparent;
}

.ht-single-rating .rating-panel__grid{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.ht-single-rating .rating-ui{
  order:2;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

.ht-single-rating .rating-card__stars{
  display:flex;
  align-items:flex-start;
  gap:14px;
  direction:rtl;
}

.ht-single-rating .rating-card__stars .star{
  position:relative;
  min-inline-size:42px;
  min-block-size:60px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  border:none;
  background:transparent;
  cursor:pointer;
  padding:0;
  font:inherit;
  color:inherit;
  --star-fill:0%;
}

.ht-single-rating .rating-card__stars .star-icon{
  inline-size:38px;
  block-size:38px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--surface-2,#f9fafb);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  line-height:0;
  transition:background .12s ease,border-color .12s ease,transform .12s ease;
  position:relative;
}

html[data-theme="dark"] .ht-single-rating .rating-card__stars .star-icon{
  background:var(--surface-2,#020617);
}

.ht-single-rating .rating-card__stars .star-icon svg{
  inline-size:20px;
  block-size:20px;
}

.ht-single-rating .star-base path{
  fill:none;
  stroke:var(--rating);
  stroke-width:1.6;
  opacity:.8;
}

.ht-single-rating .rating-card__stars .star-fill-layer{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
  clip-path:inset(0 0 0 calc(100% - var(--star-fill)));
}

.ht-single-rating .rating-card__stars .star-fill-layer svg{
  inline-size:20px;
  block-size:20px;
}

.ht-single-rating .rating-card__stars .star-fill-layer path{
  fill:var(--rating);
  stroke:none;
  opacity:1;
}

.ht-single-rating .rating-card__stars[data-has-voted="0"] .star.is-hover .star-icon{
  border-color:#f59e0b;
  background:rgba(245,158,11,.08);
  transform:translateY(-1px);
}

.ht-single-rating .star.is-filled .star-icon{
  border-color:#f59e0b;
  background:rgba(245,158,11,.22);
  --star-fill:100%;
}

.ht-single-rating .star.is-half .star-icon{
  border-color:#f59e0b;
  background:linear-gradient(to left,
    rgba(245,158,11,.22) 0,
    rgba(245,158,11,.22) 50%,
    var(--surface-2,#f9fafb) 50%,
    var(--surface-2,#f9fafb) 100%
  );
  --star-fill:50%;
}

.ht-single-rating .star-label{
  margin-top:4px;
  font-size:12px;
  line-height:1.5;
  text-align:center;
  white-space:nowrap;
  color:var(--fg);
  font-weight:500;
}

.ht-single-rating .rating-stats{
  order:1;
  text-align:start;
}

.ht-single-rating .rating-stats__row--inline{
  display:flex;
  align-items:baseline;
  gap:4px;
  white-space:nowrap;
  font-size:13px;
  color:var(--fg);
}

.ht-single-rating .rating-stats__row--inline .sep{
  opacity:.75;
}

.ht-single-rating .rating-stats__row--inline .dot{
  margin-inline:6px;
  opacity:.45;
}

.ht-single-rating .stats-avg,
.ht-single-rating .stats-count{
  font-weight:800;
}

.ht-single-rating .rating-my[hidden]{
  display:none!important;
}

.ht-single-rating .rating-my{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 10px;
  margin-inline-start:10px;
  border-radius:8px;
  font-size:12px;
  line-height:1.6;
  font-weight:600;
  color:#0f5132;
  background:#d1fae5;
  border:1px solid #86efac;
}

.ht-single-rating .rating-my__val{
  font-weight:800;
}

.ht-single-rating .rating-feedback{
  margin-top:8px;
}

.ht-single-rating .rating-msg[hidden]{
  display:none!important;
}

.ht-single-rating .rating-msg{
  font-size:12px;
  line-height:1.6;
}

.ht-single-rating .rating-msg[data-type="success"]{
  color:#166534;
}

.ht-single-rating .rating-msg[data-type="error"]{
  color:#b91c1c;
}

.ht-single-rating .rating-msg[data-type="info"]{
  color:#4b5563;
}

.ht-rating-noscript{
  margin-top:10px;
  font-size:12px;
  color:#6b7280;
}

@media(max-width:768px){
  .ht-single-rating .rating-panel__grid{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }

  .ht-single-rating .rating-ui{
    order:1;
    justify-content:flex-start;
  }

  .ht-single-rating .rating-stats{
    order:2;
  }

  .ht-single-rating .rating-card__stars{
    justify-content:space-between;
  }
}

@media(hover:none){
  .ht-single-rating .star-icon{
    transition:background .12s ease,border-color .12s ease;
  }
}

@media(prefers-reduced-motion:reduce){
  .ht-single-rating .star-icon{
    transition:none!important;
  }

  .ht-single-rating .single-rating-card.is-loading{
    opacity:1;
  }
}