/* Star ratings (resources/views/partials/rating.blade.php). */
.kr { --kr-size: 15px; --kr-gold: #f5b301; --kr-empty: #d7dbe6; display: inline-flex; align-items: center; gap: 6px; line-height: 1; }
.kr.is-dark { --kr-empty: rgba(255, 255, 255, .28); }
.kr.is-large { --kr-size: 22px; gap: 10px; flex-wrap: wrap; }

.kr-stars { position: relative; display: inline-block; flex: none; width: calc(var(--kr-size) * 5 + 8px); height: var(--kr-size); }
.kr-row { position: absolute; inset: 0 auto 0 0; display: flex; gap: 2px; width: calc(var(--kr-size) * 5 + 8px); overflow: hidden; color: var(--kr-empty); }
.kr-row.is-gold { width: var(--kr-fill); color: var(--kr-gold); transition: width .25s ease; }
.kr-row svg { flex: none; width: var(--kr-size); height: var(--kr-size); fill: currentColor; }
/* Hovering previews the vote you're about to cast. */
.kr.is-preview .kr-row.is-gold { width: var(--kr-preview); color: #ffcf3f; transition: none; }

.kr-pick { position: absolute; inset: -6px -2px; display: flex; }
.kr-pick button { flex: 1; position: relative; min-width: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.kr-pick button:focus-visible { outline: 2px solid #7c3aed; outline-offset: 1px; border-radius: 4px; }
/* A small dot under the star you picked. */
.kr-pick button.is-yours::after { content: ""; position: absolute; bottom: -1px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--kr-gold); }
.kr.is-busy .kr-pick { pointer-events: none; opacity: .6; }

/* A saved vote pops; one that didn't save shakes. */
.kr.is-saved .kr-stars { animation: kr-pop .45s ease; }
.kr.is-failed .kr-stars { animation: kr-shake .4s ease; }
@keyframes kr-pop { 40% { transform: scale(1.18); } }
@keyframes kr-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .kr.is-saved .kr-stars, .kr.is-failed .kr-stars { animation: none; } }
.kr-yours { color: #64748b; font-size: 13px; font-weight: 800; }