/* star-picker — clickable star selector for the hotel form (HMS-10).
   NOT .star-rating: that block is the read-only attendee display
   (app/views/hotels/_star_rating.html.erb, styled in hotel_card.css) and this
   file loads after it, so reusing the name would silently restyle the hotel card. */
/* Brand values: only --wa-* tokens (no hard-coded colours) */

.star-picker {
  display: flex;
  align-items: center;
  gap: var(--wa-space-2xs);
}

.star-picker__star {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--wa-space-3xs);
  font-size: var(--wa-font-size-l);
  color: var(--wa-color-neutral-70);
  line-height: 1;
}

.star-picker__star--on {
  color: var(--wa-color-yellow-60);
}

.star-picker__star:focus-visible {
  outline: 2px solid var(--wa-color-brand-50);
  outline-offset: 2px;
}

.star-picker__clear {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-s);
  margin-inline-start: var(--wa-space-xs);
  text-decoration: underline;
}