/* ==========================================================================
   SURGE PEPT — zwevende WhatsApp-knop
   Hoort bij snippets/whatsapp-button.liquid en assets/whatsapp-button.js.

   z-index 900: boven de pagina-inhoud, maar bewust ONDER de cart drawer en
   de sticky header (beide 1000), het megamenu (1200), de zoekoverlay (1300),
   de skip-link (9999) en de age gate (99999). Een cookiebanner die later
   wordt toegevoegd hoort daarom op 1000 of hoger te staan.

   Magenta blijft gereserveerd voor waarschuwingen (CLAUDE.md).
   ========================================================================== */

.spwa {
  --spwa-blue: var(--sp-blue, #00A6F0);
  --spwa-blue-hi: #45C4FF;
  --spwa-ice: var(--sp-blue-ice, #9BE3FA);
  --spwa-panel: var(--sp-panel, #0B1220);
  --spwa-line: var(--sp-line, #1B2A40);
  --spwa-dark: #02121D;

  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  font-family: "Manrope", sans-serif;
}

.spwa *,
.spwa *::before,
.spwa *::after { box-sizing: border-box; }

.spwa :focus-visible {
  outline: 2px solid var(--spwa-ice);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ── gesloten knop ───────────────────────────────────────────────────── */

.spwa__toggle {
  width: 58px;
  height: 58px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(0, 166, 240, .5);
  background: var(--spwa-blue);
  color: var(--spwa-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 10px 28px rgba(0, 140, 240, .32), 0 2px 8px rgba(0, 0, 0, .35);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.spwa__toggle:hover {
  background: var(--spwa-blue-hi);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0, 140, 240, .4), 0 2px 8px rgba(0, 0, 0, .35);
}

/* ── glyph-maat ──────────────────────────────────────────────────────────
   22px, niet 26px. Het oude WhatsApp-pad liet 2 eenheden marge rondom binnen
   een viewBox van 24, dus van de 26px was maar 20/24 × 26 = 21,7px zichtbaar
   merk. Het huidige pad vult de viewBox strak (y 0..24), dus 22px levert
   exact dezelfde optische maat op als voorheen.

   Het kruisje heeft nog wél de oude 24-viewBox met marge en blijft daarom op
   26px staan; die twee glyphs delen bewust niet dezelfde maat. */
.spwa__icon { width: 22px; height: 22px; display: block; fill: currentColor; }
.spwa__icon--close { width: 26px; height: 26px; display: none; }

/* ── geen optische correctie meer ────────────────────────────────────────
   Hier stond een translate(0.5px, -1.5px) op het WhatsApp-glyph. Die is
   verwijderd omdat hij het verkeerde probleem aanpakte.

   Het oude pad had de hoorn scheef ín de ballon staan: marge boven 4,300 en
   onder 0,232 eenheden, een verschil van 4,068. De tekening als geheel stond
   juist keurig gecentreerd in de viewBox. Een translate verschuift ballon en
   hoorn samen en kon die interne scheefstand dus nooit opheffen — hij maakte
   de ballon alleen zelf ook nog scheef in de knop.

   Het huidige pad heeft de hoorn wél gecentreerd: marge boven 4,391, onder
   4,173, verschil 0,218 eenheden oftewel circa 0,2px. De meting staat
   vastgelegd in VOORTGANG.md. */

/* Geopend: de knop wordt een kruisje op een paneelkleur. */
.spwa.is-open .spwa__toggle {
  background: var(--spwa-panel);
  color: var(--spwa-ice);
  border-color: var(--spwa-line);
}
/* Bewust gebonden aan de knop: de glyph in de "Open WhatsApp"-knop in het
   paneel is óók een WhatsApp-mark en zou anders juist verdwijnen op het
   moment dat het paneel opengaat. */
.spwa.is-open .spwa__toggle .spwa__icon--wa { display: none; }
.spwa.is-open .spwa__toggle .spwa__icon--close { display: block; }

/* ── uitschuivend label ──────────────────────────────────────────────── */

.spwa__teaser {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  border-radius: 99px;
  border: 1px solid var(--spwa-line);
  background: var(--spwa-panel);
  color: var(--sp-text, #E8F1FA);
  font-size: 13.5px;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
  opacity: 0;
  transform: translateX(12px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}

.spwa__teaser::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--spwa-blue);
  flex: none;
  box-shadow: 0 0 8px rgba(0, 166, 240, .9);
}

.spwa.is-teasing .spwa__teaser {
  opacity: 1;
  transform: translateX(0);
}

/* ── paneel ──────────────────────────────────────────────────────────── */

.spwa__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 14px);
  width: 312px;
  max-width: calc(100vw - 32px);
  padding: 20px;
  border-radius: 16px;
  border: 1px solid var(--spwa-line);
  background: var(--spwa-panel);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55), 0 0 30px rgba(0, 140, 240, .12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.spwa.is-open .spwa__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.spwa__title {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}

.spwa__status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 7px 0 0;
  font-size: 12.5px;
  color: var(--spwa-ice);
}
.spwa__status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3DDC84;
  flex: none;
  box-shadow: 0 0 8px rgba(61, 220, 132, .8);
}

.spwa__text {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--sp-text-dim, #7E93AC);
}

.spwa__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: 16px;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid var(--spwa-blue);
  background: var(--spwa-blue);
  color: var(--spwa-dark);
  font-family: "Chakra Petch", sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .18s ease;
}
.spwa__cta:hover { background: var(--spwa-blue-hi); color: var(--spwa-dark); }
/* 14px om dezelfde reden als hierboven: 17px × 20/24 was 14,2px zichtbaar
   merk met het oude pad. Geen correctie meer nodig. */
.spwa__cta .spwa__icon { width: 14px; height: 14px; }

.spwa__number {
  margin: 11px 0 0;
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  color: var(--sp-text-dim, #7E93AC);
}

/* ── klein scherm ────────────────────────────────────────────────────── */

@media screen and (max-width: 749px) {
  .spwa { right: 16px; bottom: 16px; }
}

/* Onder 520px is er naast de knop geen ruimte voor het label. */
@media screen and (max-width: 519px) {
  .spwa__teaser { display: none; }
}

/* ── bewegingsvoorkeur ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .spwa__toggle,
  .spwa__teaser,
  .spwa__panel,
  .spwa__cta {
    transition: none !important;
  }
  .spwa__toggle:hover { transform: none; }
}