/* The favourite star. Saved: gold fill with an ink outline and a soft glow, springing in. Not saved: just the outline. */
.fav-star { width: 20px; height: 20px; overflow: visible; vertical-align: middle; flex: none; }
.fav-star .fav-line { fill: none; stroke: currentColor; stroke-width: 14; stroke-linejoin: round; }
.fav-star .fav-fill { fill: var(--nv-accent, #e9b83a); transform-box: fill-box; transform-origin: 50% 58%; transform: scale(0) rotate(-40deg); opacity: 0; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), opacity .15s; }
[aria-pressed=true] > .fav-star .fav-fill, .fav-star.is-on .fav-fill { transform: none; opacity: 1; }
[aria-pressed=true] > .fav-star, .fav-star.is-on { filter: drop-shadow(0 0 3px rgba(233, 184, 58, .75)); }
[aria-pressed=true] > .fav-star .fav-line, .fav-star.is-on .fav-line { color: var(--nv-ink, #1c2438); }
[aria-pressed=false] > .fav-star .fav-line { color: var(--nv-muted, #596174); }
/* A badge beside a service number or on a pill is smaller and never animates. */
.fav-star.is-on { width: 13px; height: 13px; }
.fav-star.is-on .fav-fill { transition: none; }

/* Sparks: eight dots fly out from the star and a ring ripples once. */
.fav-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.fav-burst i { position: absolute; left: -2.5px; top: -2.5px; width: 5px; height: 5px; border-radius: 50%; background: var(--nv-accent, #e9b83a); box-shadow: 0 0 0 1px var(--nv-ink, #1c2438); opacity: 0; animation: fav-spark .6s cubic-bezier(.2, .7, .3, 1) forwards; transform: rotate(var(--a)) translateY(-6px); }
.fav-burst i:nth-child(even) { width: 3px; height: 3px; left: -1.5px; top: -1.5px; animation-delay: .04s; }
.fav-burst .fav-ring { width: 14px; height: 14px; left: -7px; top: -7px; border-radius: 50%; background: none; box-shadow: none; border: 2px solid var(--nv-accent, #e9b83a); transform: scale(.4); animation: fav-ring .55s ease-out forwards; }
@keyframes fav-spark { 0% { opacity: 1; transform: rotate(var(--a)) translateY(-6px) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-26px) scale(.3); } }
@keyframes fav-ring { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.4); } }
button:has(> .fav-star) { position: relative; overflow: visible; }
@media (prefers-reduced-motion: reduce) {
    .fav-star .fav-fill { transition: none; }
    .fav-burst { display: none; }
}
/* A star that was just saved re-renders already filled, so it plays the spring itself. */
@keyframes fav-fill-in { 0% { transform: scale(0) rotate(-40deg); opacity: 0; } 60% { transform: scale(1.25) rotate(8deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
.is-popped > .fav-star .fav-fill { animation: fav-fill-in .5s cubic-bezier(.34, 1.56, .64, 1); }
@media (prefers-reduced-motion: reduce) { .is-popped > .fav-star .fav-fill { animation: none; } }