/* =========================================
   Likster rating (thumbs)
   - SVG icons via CSS mask
   - compact mode for teaser
   ========================================= */

.rating-widget{
  --fg: rgba(0,0,0,.88);
  color: var(--fg);
  --btn-size: 40px;
  --icon-size: 20px;
  --radius: 12px;
  --border: rgba(0,0,0,.08);
  --bg: rgba(0,0,0,.03);
  --bg-hover: rgba(0,0,0,.06);
  --bg-active: rgba(0,0,0,.10);
  display:flex;
  flex-direction:column;
  gap:.4rem;
}

.rating-widget--compact{
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
}

.rating-stats{
  display:inline-flex;
  align-items:baseline;
  gap:.35rem;
  white-space:nowrap;
}

.rating-score{
  font-weight: 700;
}

.rating-score-max,
.rating-scoreMax{
  opacity: .65;
  font-size: .85em;
}

.rating-score--empty .rating-score-max{
  display:none;
}

.rating-count{
  opacity: .65;
  font-size: .85em;
}

/* Trend (dominant thumbs) */
.rating-trend{
  /* trend can be rendered outside .rating-widget; define defaults */
  --icon-size: 18px;
  --fg: rgba(0,0,0,.75);
  color: var(--fg);
}


.rating-trend-icons{
  display:inline-flex;
  align-items:center;
  gap:.2rem;
}

.rating-trend-icon{
  display:none;
}

.rating-trend-icon.is-top{
  display:inline-block;
}

.rating-buttons{
  display:inline-flex;
  gap:.35rem;
}

.rating-btn{
  width: var(--btn-size);
  height: var(--btn-size);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  background: var(--bg);
  border-radius: var(--radius);
  cursor:pointer;
  padding:0;
  color: var(--fg);
  text-decoration:none;
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}

.rating-btn:hover{
  background: var(--bg-hover);
  transform: translateY(-1px);
}

.rating-btn:active{
  transform: translateY(0);
}

.rating-btn.is-active{
  background: var(--bg-active);
  border-color: rgba(0,0,0,.14);
}

.rating-btn--static{
  cursor: default;
  pointer-events: none;
}

.rating-btn:focus-visible{
  outline: 2px solid rgba(0,0,0,.35);
  outline-offset: 2px;
}

.rating-icon{
  width: var(--icon-size, 20px);
  height: var(--icon-size, 20px);
  background-color: currentColor;
  display:inline-block;
  /* mask so the icon inherits currentColor */
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.rating-icon--down{
  -webkit-mask-image: url('../icons/thumb-down.svg');
  mask-image: url('../icons/thumb-down.svg');
}

.rating-icon--up{
  -webkit-mask-image: url('../icons/thumb-up.svg');
  mask-image: url('../icons/thumb-up.svg');
}

.rating-icon--up2{
  -webkit-mask-image: url('../icons/thumb-up-double.svg');
  mask-image: url('../icons/thumb-up-double.svg');
}

/* Compact sizing (teaser) */
.rating-widget--compact{
  --btn-size: 34px;
  --icon-size: 18px;
}

/* When embedded in text lines (e.g. meta), keep it tight */
.rating-summary{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}

.rating-summary .rating-buttons{
  gap:.25rem;
}

.rating-summary .rating-btn{
  --btn-size: 32px;
  --icon-size: 18px;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce){
  .rating-btn{ transition: none; }
  .rating-btn:hover{ transform: none; }
}


/* Badge (Recommandé / Coup de cœur) */
.rating-badge{ display:inline-flex; align-items:center; gap:.25rem; }
.rating-badge--hidden{ display:none; }