/* ============================================================
   ItalianWines.co.uk — in-context interaction controls.
   The wishlist save button (.iw-save) and the grape taste toggle
   (.iw-tastetoggle), ported from the design system, self-contained and
   themed from tokens.css with fallbacks. Loaded only on the bottle and
   grape detail pages. Behaviour: public/resources/js/interactions.js.
   ============================================================ */

/* Wishlist save (bottle) — one primary control, three states. */
.iw-save {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-body, system-ui, sans-serif); font-weight: 600; font-size: 14px;
  padding: 12px 22px; min-height: 44px;
  border-radius: var(--radius-md, 0.375rem); border: 0; cursor: pointer;
  background: transparent; color: var(--color-primary, #561371);
  transition: background 0.24s var(--ease-out, ease), box-shadow 0.24s var(--ease-out, ease), color 0.24s var(--ease-out, ease);
}
.iw-save svg { flex: none; }
.iw-save[disabled] { opacity: 0.6; cursor: default; }
.iw-save--signin { box-shadow: inset 0 0 0 1px var(--color-outline-variant, #d1c2d1); }
.iw-save--signin:hover { box-shadow: inset 0 0 0 1px var(--color-primary, #561371); }
.iw-save--off { box-shadow: inset 0 0 0 1px rgba(209, 194, 209, 0.6); }
.iw-save--off:hover { box-shadow: inset 0 0 0 1px var(--color-primary, #561371); background: var(--color-primary-tint-5, rgba(86, 19, 113, 0.05)); }
.iw-save--on { background: var(--color-primary-tint-10, rgba(86, 19, 113, 0.10)); box-shadow: inset 0 0 0 1px transparent; }
.iw-save--on svg { fill: var(--color-primary, #561371); }
.iw-save--on:hover { background: var(--color-primary-tint-5, rgba(86, 19, 113, 0.05)); }

/* Grape taste toggle — a segmented pair, each independent. */
.iw-tastetoggle {
  display: inline-flex; background: var(--color-surface-container-low, #f6f3ee);
  border-radius: var(--radius-pill, 999px); padding: 4px; gap: 2px;
}
.iw-tt-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-body, system-ui, sans-serif); font-weight: 600; font-size: 13px;
  padding: 9px 18px; min-height: 40px;
  border-radius: var(--radius-pill, 999px); background: transparent;
  color: var(--color-on-surface-variant, #49454f); border: 0; cursor: pointer;
  transition: background 0.24s var(--ease-out, ease), box-shadow 0.24s var(--ease-out, ease), color 0.24s var(--ease-out, ease);
}
.iw-tt-btn svg { flex: none; }
.iw-tt-btn:hover { color: var(--color-primary, #561371); }
.iw-tt-btn.is-on { background: var(--color-surface-container-lowest, #fff); color: var(--color-primary, #561371); box-shadow: var(--shadow-ambient-sm, 0 8px 20px rgba(86, 19, 113, 0.04)); }
.iw-tt-btn.is-on svg { fill: var(--color-primary, #561371); }
.iw-tt-btn[disabled] { opacity: 0.6; cursor: default; }

/* Hidden until JS hydrates the state (avoids a flash of the wrong label). */
.iw-interaction[hidden] { display: none; }