/* ==========================================================================
   Hodnocení odborníků — hvězdičky
   ========================================================================== */
.rate { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line, #DDD3C2); }

.rate svg { width: 100%; height: 100%; display: block; fill: currentColor; }

/* Zobrazený průměr — spodní šedá vrstva a přes ni obarvená část */
.rate-shown { position: relative; display: inline-block; vertical-align: -3px; line-height: 0; }
.rate-bg, .rate-fg { display: flex; gap: 2px; }
.rate-bg svg, .rate-fg svg { width: 15px; height: 15px; }
.rate-bg { color: #D8D2C4; }
.rate-fg {
  position: absolute; inset: 0;
  color: #E8A33D;
  overflow: hidden;
  white-space: nowrap;
}
.rate-fg svg { flex: none; }

.rate-summary { display: inline-block; margin-left: 8px; font-size: 13px; color: var(--ink-soft, #5A4D40); }
.rate-summary strong { font-size: 15px; color: var(--ink, #2B231C); }
.rate-n { color: var(--ink-mute, #8C7F70); }
.rate-none { color: var(--ink-mute, #8C7F70); font-style: italic; }

/* Vlastní hlasování */
.rate-input { display: flex; gap: 2px; margin-top: 8px; }
.rate-star {
  width: 30px; height: 30px; padding: 5px;
  background: none; border: 0; cursor: pointer;
  color: #CFC8B8; border-radius: 6px;
  transition: color .12s, transform .12s, background .12s;
}
.rate-star:hover, .rate-star:focus-visible { color: #E8A33D; transform: scale(1.14); }
/* Při najetí se obarví i hvězdičky vlevo od kurzoru */
.rate-input:hover .rate-star { color: #E8A33D; }
.rate-input .rate-star:hover ~ .rate-star { color: #CFC8B8; }
.rate-star.is-mine { color: #C9772A; }

.rate-mine {
  display: inline-block; margin-top: 6px;
  font-size: 12px; font-weight: 700; color: #8A5A1E;
  background: #FBEFD9; border-radius: 999px; padding: 3px 10px;
}

/* Upozornění, že hlasy nejsou sdílené */
.rate-notice {
  margin: 0 0 18px;
  padding: 12px 16px;
  background: #FBEFD9;
  border: 2px solid var(--ink, #2B231C);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
}
.rate-notice strong { display: block; margin-bottom: 2px; }