/* Tasso alcolemico: righe delle bevande, colori per fascia di legge, indicatore e icone */
.cq-alcol { --cq-al-zero: #1e9e5a; --cq-al-basso: #b58900; --cq-al-medio: #e8730c; --cq-al-alto: #d62828; --cq-al-grave: #8b0d0d; }

.cq-alcol .cq-alcol__riga { display: flex; align-items: center; gap: 10px; flex: 1 1 100%; min-width: 0; }
.cq-alcol .cq-alcol__riga[hidden] { display: none; }
.cq-alcol .cq-alcol__riga .cq-field { flex: 0 0 84px; }
.cq-alcol .cq-alcol__riga .cq-field + .cq-field { flex: 1 1 auto; min-width: 0; }
.cq-alcol .cq-alcol__riga .cq-select { width: 100%; text-overflow: ellipsis; }
.cq-alcol .cq-alcol__togli {
  flex: 0 0 40px; height: 40px; border: 1px solid var(--cq-line); border-radius: 50%;
  background: var(--cq-surface); color: var(--cq-muted); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.cq-alcol .cq-alcol__togli:hover { color: var(--cq-al-alto); border-color: currentColor; }
.cq-alcol .cq-alcol__piu { flex: 1 1 100%; }
.cq-alcol .cq-alcol__piu[hidden] { display: none; }
.cq-alcol .cq-alcol__aggiungi { font-size: .95rem; }

/* Valore e cartellino con il colore della fascia */
.cq-alcol[data-livello] .cq-result__value,
.cq-alcol[data-livello] .cq-breakdown__row.is-strong dd { color: var(--cq-al); }
.cq-alcol[data-livello="zero"] { --cq-al: var(--cq-al-zero); }
.cq-alcol[data-livello="basso"] { --cq-al: var(--cq-al-basso); }
.cq-alcol[data-livello="medio"] { --cq-al: var(--cq-al-medio); }
.cq-alcol[data-livello="alto"] { --cq-al: var(--cq-al-alto); }
.cq-alcol[data-livello="grave"] { --cq-al: var(--cq-al-grave); }

.cq-tasso { flex: 1 1 100%; margin: .2rem 0 .6rem; max-width: 620px; }
.cq-tasso[hidden] { display: none; }
.cq-tasso__fascia {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 .9rem; padding: 6px 14px;
  border-radius: 999px; background: var(--cq-al); color: #fff; font-weight: 700; font-size: .95rem;
}
.cq-tasso__fascia::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; }

.cq-tasso__barra { position: relative; display: flex; height: 14px; border-radius: 999px; }
.cq-tasso__seg { height: 100%; }
.cq-tasso__seg.s1 { width: 1.5%; background: var(--cq-al-zero); border-radius: 999px 0 0 999px; }
.cq-tasso__seg.s2 { width: 23.5%; background: linear-gradient(90deg, #8cc63f, #f2c230); }
.cq-tasso__seg.s3 { width: 15%; background: var(--cq-al-medio); }
.cq-tasso__seg.s4 { width: 35%; background: var(--cq-al-alto); }
.cq-tasso__seg.s5 { width: 25%; background: var(--cq-al-grave); border-radius: 0 999px 999px 0; }
.cq-tasso__tu {
  position: absolute; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px;
  border-radius: 50%; background: #fff; border: 4px solid var(--cq-al, #333); box-shadow: 0 1px 4px rgba(0,0,0,.35);
  transition: left .3s ease;
}
.cq-tasso__scala { position: relative; height: 1.4rem; margin-top: 4px; font-size: .8rem; color: var(--cq-muted); }
.cq-tasso__scala span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.cq-tasso__scala span:first-child { transform: none; }
.cq-tasso__scala span:last-child { transform: translateX(-100%); }

.cq-tasso__bevute { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 2px; margin-top: .6rem; color: #444; }
.cq-tasso__ico { width: 36px; height: 45px; }
.cq-tasso__ico.is-mezza { opacity: .4; }
.cq-tasso__altre { margin-left: 6px; font-weight: 700; color: var(--cq-muted); }

@media (max-width: 600px) {
  .cq-alcol .cq-alcol__riga { flex-wrap: wrap; gap: 8px 10px; }
  .cq-alcol .cq-alcol__riga .cq-field { flex: 1 1 0; }
  .cq-alcol .cq-alcol__riga .cq-field + .cq-field { flex: 1 1 100%; order: 3; }
  .cq-alcol .cq-alcol__riga .cq-select { font-size: .95rem; padding-left: 12px; padding-right: 32px; }
  .cq-alcol .cq-alcol__riga + .cq-alcol__riga { padding-top: 10px; border-top: 1px dashed var(--cq-line); }
}