/*
 * Rating cups (instead of stars) and brew method icons. The shapes are <symbol>s in the sprite at the top of public/shop.html
 * (#cup-empty, #cup-half, #cup-full, #brew-<key>); they draw with currentColor, so every colour here follows the design tokens.
 */

/* the sprite itself takes no room (not display: none, which breaks some browsers' <use> rendering) */
.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.cup-icon,
.brew-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- five cups in a row: under a product title, in the summary, in a review ---------- */

.cups {
  display: inline-flex;
  gap: 0.08em;
  color: var(--color-charcoal);
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}

.cups .cup-icon {
  flex: none;
  width: 1.2em;
  height: 1.2em;
}

/* an empty cup is only the outline, in a lighter tone of the text colour (still 3:1 against the background) */
.cups .cup-empty {
  color: color-mix(in srgb, var(--color-charcoal) 55%, var(--color-porcelain));
}

.reviews-cups {
  margin: 0.25rem 0 0;
  font-size: 1.35rem;
}

.review-head .cups,
.rev-admin-line .cups {
  font-size: 1.05rem;
}

/* ---------- the picker in the review form: five radio buttons shown as cups ---------- */

.rating-cups {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.1rem;
}

.rating-cups label {
  display: inline-flex;
  padding: 0.15rem;
  border-radius: 0.35rem;
  color: color-mix(in srgb, var(--color-charcoal) 55%, var(--color-porcelain));
  cursor: pointer;
}

.rating-cups .cup-icon {
  width: clamp(1.75rem, 9vw, 2.35rem);
  height: clamp(1.75rem, 9vw, 2.35rem);
}

/* a chosen or hovered cup (and every cup before it) is filled in the text colour */
.rating-cups .cup-on {
  display: none;
}

.rating-cups label.is-on {
  color: var(--color-charcoal);
}

.rating-cups label.is-on .cup-on {
  display: block;
}

.rating-cups label.is-on .cup-off {
  display: none;
}

.rating-cups input:focus-visible + label {
  outline: 2px solid var(--color-charcoal);
  outline-offset: 2px;
}

/* ---------- "Geeignet für": brew method icons with their names in the product details ---------- */

.brew-methods {
  margin: 0 0 var(--space-3);
}

.brew-methods[hidden] {
  display: none;
}

.brew-methods-title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-charcoal-muted);
}

.brew-methods-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brew-method {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  width: 5.25rem;
  text-align: center;
  color: var(--color-charcoal);
}

.brew-method .brew-icon {
  width: 2.25rem;
  height: 2.25rem;
}

.brew-label {
  max-width: 100%;
  font-size: var(--text-xs);
  line-height: 1.3;
  hyphens: auto;
  overflow-wrap: anywhere;
}

/* ---------- the checkboxes in the product editor (admin) ---------- */

.brew-edit {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.brew-edit-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

@media (max-width: 30rem) {
  .brew-method {
    width: 4.6rem;
  }
}

.brew-edit legend {
  padding: 0;
  margin-bottom: 0.4rem;
}

/* a little more room for the cups on a product card */
.rating-line .cups {
  font-size: 1.1rem;
}