/* ============================================================
   Stadsgenootjes — Kies & Mix swatch-UI
   Scoped to .sg-kies-mix. Swatch-kleuren zijn inline CSS-custom-props
   (product-data), geen design-tokens.
   ============================================================ */

/* ── Container ──────────────────────────────────────────────── */
.sg-kies-mix {
  margin-bottom: var(--sg-space-5);
}

/* ── Instructie + teller ─────────────────────────────────────── */
.sg-kies-mix__instruction {
  font-family: var(--sg-font-body);
  font-size: var(--sg-fs-sm);
  color: var(--sg-ink-2);
  margin: 0 0 var(--sg-space-4);
  line-height: var(--sg-lh-normal);
}

.sg-kies-mix__instruction strong {
  display: block;
  font-size: var(--sg-fs-base);
  font-weight: 800;
  color: var(--sg-ink);
  margin-bottom: var(--sg-space-1);
}

.sg-kies-mix__counter {
  color: var(--sg-ink-3);
}

/* ── Swatch-raster ───────────────────────────────────────────── */
.sg-kies-mix__swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, 64px);
  gap: var(--sg-space-3) var(--sg-space-2);
  margin-bottom: var(--sg-space-4);
}

/* ── Swatch-knop ─────────────────────────────────────────────── */
/*
  KRITIEKE FIX: Hello Elementor reset.css zet:
    button:hover, button:focus { background-color: #c36 }
  Dat veroorzaakt een magenta achtergrond achter het label en
  een magenta strip onder het kleurvlak. Override hard op alle
  interactie-states (zelfde aanpak als .sg-pdp-tab in components.css).
*/
.sg-kies-mix__swatch {
  /* Reset knop-stijl */
  appearance: none;
  -webkit-appearance: none;
  background: transparent !important;
  padding: 0;
  margin: 0;
  cursor: pointer;

  /* Layout */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sg-space-1);
  width: 100%;
  box-sizing: border-box;

  /* Geen standaard border/outline — eigen focus-stijl via swatch-inner */
  border: none;
  outline: none !important;
  box-shadow: none !important;

  /* Transitie op het knopniveau voor de label-kleur */
  transition: none;
}

/* Kill magenta op alle interactie-states — spiegel .sg-pdp-tab + .sg-addr-confirm__edit */
.sg-kies-mix__swatch:hover,
.sg-kies-mix__swatch:focus,
.sg-kies-mix__swatch:focus-visible,
.sg-kies-mix__swatch:active {
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ── Kleurvlak ───────────────────────────────────────────────── */
.sg-kies-mix__swatch-inner {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: var(--sg-radius-sm);
  background-color: var(--_swatch-color, #ccc);

  /* Standaard: transparante rand (zichtbaar bij hover/selected) */
  border: 2px solid transparent;
  box-shadow: var(--sg-shadow-xs);

  /* Vinkje-overlay verloopt via ::after */
  position: relative;

  transition:
    transform var(--sg-dur-fast) var(--sg-ease),
    box-shadow var(--sg-dur-fast) var(--sg-ease),
    border-color var(--sg-dur-fast) var(--sg-ease);
}

/* Witte swatch: zichtbare subtiele rand zodat hij niet verdwijnt op lichte achtergrond */
.sg-kies-mix__swatch--white .sg-kies-mix__swatch-inner {
  border-color: var(--sg-border);
}

/* Licht-roze, licht-blauw en geel krijgen ook een zachte rand */
.sg-kies-mix__swatch--licht-roze .sg-kies-mix__swatch-inner,
.sg-kies-mix__swatch--licht-blauw .sg-kies-mix__swatch-inner,
.sg-kies-mix__swatch--geel .sg-kies-mix__swatch-inner {
  border-color: var(--sg-border);
}

/* ── Label onder de swatch ───────────────────────────────────── */
.sg-kies-mix__swatch-label {
  font-family: var(--sg-font-body);
  font-size: var(--sg-fs-xs);
  font-weight: 600;
  color: var(--sg-ink-3);
  line-height: var(--sg-lh-snug);
  text-align: center;
  display: block;
  width: 100%;

  /* Breek lange namen netjes af binnen de kolom, nooit over de buur.
     white-space hard normal: iets in de WC/Elementor-product-summary
     erft anders nowrap, waardoor "Donker blauw" niet ombrak. */
  white-space: normal !important;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  /* Reserveer 2 regels zodat alle labels even hoog uitlijnen. */
  min-height: calc(2 * var(--sg-fs-xs) * var(--sg-lh-snug, 1.3));

  transition: color var(--sg-dur-fast) var(--sg-ease), font-weight var(--sg-dur-fast) var(--sg-ease);
}

/* ── Hover-state ─────────────────────────────────────────────── */
/*
  Subtiele lift + zachte neutrale ring op het kleurvlak.
  GEEN achtergrond achter het label (dat is de bug die de klant zag).
*/
.sg-kies-mix__swatch:hover .sg-kies-mix__swatch-inner {
  transform: translateY(-2px) scale(1.05);
  box-shadow: var(--sg-shadow-sm), 0 0 0 2px var(--sg-ink-4);
}

.sg-kies-mix__swatch:hover .sg-kies-mix__swatch-label {
  color: var(--sg-ink-2);
}

/* Witte swatch behoudt zijn rand bij hover */
.sg-kies-mix__swatch--white:hover .sg-kies-mix__swatch-inner {
  border-color: var(--sg-ink-4);
}

/* ── Focus-visible (toetsenbord) ─────────────────────────────── */
/*
  Los van hover: offset-ring in accent op het kleurvlak.
  De !important op de button is alleen om Hello Elementor te overriden;
  de focus-ring op swatch-inner heeft geen !important nodig.
*/
.sg-kies-mix__swatch:focus-visible .sg-kies-mix__swatch-inner {
  outline: 2.5px solid var(--sg-accent);
  outline-offset: 3px;
  box-shadow: var(--sg-shadow-xs);
}

/* ── Geselecteerd ───────────────────────────────────────────── */
/*
  EEN consistente selected-stijl:
  - 2px accent-ring via box-shadow (geen border-wijziging, stabiel)
  - ::after overlay: donkere tint + wit vinkje, centraal gepositioneerd
  - Label bold in --sg-ink
*/
.sg-kies-mix__swatch.is-selected .sg-kies-mix__swatch-inner,
.sg-kies-mix__swatch[aria-pressed="true"] .sg-kies-mix__swatch-inner {
  box-shadow:
    0 0 0 2px var(--sg-paper),
    0 0 0 4px var(--sg-accent);
  transform: translateY(-1px);
  border-color: transparent;
}

/* Wit/lichte swatches: behoud de subtiele border zodat het vlak zichtbaar blijft */
.sg-kies-mix__swatch--white.is-selected .sg-kies-mix__swatch-inner,
.sg-kies-mix__swatch--white[aria-pressed="true"] .sg-kies-mix__swatch-inner,
.sg-kies-mix__swatch--licht-roze.is-selected .sg-kies-mix__swatch-inner,
.sg-kies-mix__swatch--licht-roze[aria-pressed="true"] .sg-kies-mix__swatch-inner,
.sg-kies-mix__swatch--licht-blauw.is-selected .sg-kies-mix__swatch-inner,
.sg-kies-mix__swatch--licht-blauw[aria-pressed="true"] .sg-kies-mix__swatch-inner,
.sg-kies-mix__swatch--geel.is-selected .sg-kies-mix__swatch-inner,
.sg-kies-mix__swatch--geel[aria-pressed="true"] .sg-kies-mix__swatch-inner {
  border-color: var(--sg-border);
}

/* Vinkje-overlay: donkere halftransparante laag + wit SVG-vinkje */
.sg-kies-mix__swatch.is-selected .sg-kies-mix__swatch-inner::after,
.sg-kies-mix__swatch[aria-pressed="true"] .sg-kies-mix__swatch-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    rgba(0, 0, 0, 0.22)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 8 6.5 11.5 13 4'/%3E%3C/svg%3E")
    center / 52% no-repeat;
}

/*
  Lichte kleuren (wit, licht-roze, licht-blauw, geel):
  De donkere overlay geeft genoeg contrast voor het WITTE vinkje.
  Extra: omranding op het vinkje met donkere stroke voor maximale leesbaarheid.
*/
.sg-kies-mix__swatch--white.is-selected .sg-kies-mix__swatch-inner::after,
.sg-kies-mix__swatch--white[aria-pressed="true"] .sg-kies-mix__swatch-inner::after,
.sg-kies-mix__swatch--licht-roze.is-selected .sg-kies-mix__swatch-inner::after,
.sg-kies-mix__swatch--licht-roze[aria-pressed="true"] .sg-kies-mix__swatch-inner::after,
.sg-kies-mix__swatch--licht-blauw.is-selected .sg-kies-mix__swatch-inner::after,
.sg-kies-mix__swatch--licht-blauw[aria-pressed="true"] .sg-kies-mix__swatch-inner::after,
.sg-kies-mix__swatch--geel.is-selected .sg-kies-mix__swatch-inner::after,
.sg-kies-mix__swatch--geel[aria-pressed="true"] .sg-kies-mix__swatch-inner::after {
  background:
    rgba(0, 0, 0, 0.28)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231B1A17' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 8 6.5 11.5 13 4'/%3E%3C/svg%3E")
    center / 52% no-repeat;
}

/* Label bij geselecteerde swatch */
.sg-kies-mix__swatch.is-selected .sg-kies-mix__swatch-label,
.sg-kies-mix__swatch[aria-pressed="true"] .sg-kies-mix__swatch-label {
  color: var(--sg-ink);
  font-weight: 800;
}

/* ── Melding ────────────────────────────────────────────────── */
.sg-kies-mix__msg {
  font-family: var(--sg-font-body);
  font-size: var(--sg-fs-sm);
  font-weight: 600;
  line-height: var(--sg-lh-normal);
  padding: var(--sg-space-2) var(--sg-space-3);
  border-radius: var(--sg-radius-sm);
  margin-bottom: var(--sg-space-3);
  border: 1.5px solid transparent;
}

.sg-kies-mix__msg[data-type="warn"] {
  color: var(--sg-warning);
  background: #FFF8EC;
  border-color: #F0D890;
}

.sg-kies-mix__msg[data-type="ok"] {
  color: var(--sg-success);
  background: #EDF7F1;
  border-color: #A8DCBE;
}

/* Neutrale, persistente hint ("kies nog X kleuren") */
.sg-kies-mix__msg[data-type="info"] {
  color: var(--sg-ink-2);
  background: var(--sg-bg-band);
  border-color: var(--sg-border);
}

/* ATC-knop visueel "op slot" zolang er geen geldige (2-4) selectie is.
   De disabled-knop vuurt geen click; deze stijl + de persistente hint maken
   duidelijk waarom de knop nog niet werkt. */
.sg-kies-mix-locked,
.sg-kies-mix-locked:hover,
.sg-kies-mix-locked:focus {
  opacity: 0.5;
  cursor: not-allowed !important;
  filter: grayscale(0.25);
}

/* ── Teller-highlight: groeit mee met de selectie ──────────── */
.sg-kies-mix__counter [data-kies-mix-count] {
  font-weight: 800;
  color: var(--sg-ink);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  .sg-kies-mix__swatches {
    grid-template-columns: repeat(auto-fill, 56px);
  }
  .sg-kies-mix__swatch-inner {
    width: 44px;
    height: 44px;
  }
  .sg-kies-mix__swatch-label {
    font-size: 10px;
  }
}