/* === Ship2Buy — Toggle (zelfde stijl als node) ====================== */
.s2b-dark-toggle{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.35rem .65rem; border-radius:.75rem;
  background:#fff; border:1px solid #e5e7eb; color:#2c2f36;
  font-size:.9rem; line-height:1; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  transition:transform .12s, box-shadow .12s, background .12s, color .12s, border-color .12s;
}
.s2b-dark-toggle:hover{ transform:translateY(-1px); box-shadow:0 3px 12px rgba(0,0,0,.12); }
.s2b-dark-toggle__icon{
  width:18px; height:18px; display:inline-block; border-radius:50%;
  /* zonnetje */
  background: radial-gradient(circle at 50% 50%, #f6d36b 40%, #f1c24b 41%, #e7a72a 62%, #d9921a 63%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.04) inset;
}
.s2b-dark-toggle__label{ font-weight:500; }

/* Ingedrukt = dark actief (zelfde pill-stijl als node) */
.s2b-dark-toggle[aria-pressed="true"]{
  background:#101114; color:#e5e7eb; border-color:#2a2f36;
}
.s2b-dark-toggle[aria-pressed="true"] .s2b-dark-toggle__icon{
  /* maan */
  background: radial-gradient(circle at 35% 35%, #d6dbe3 36%, #b6bec9 37%, #9aa3b0 60%, #8690a0 61%);
}

/* Donkere paginaachtergrond (OS of class) */
@media (prefers-color-scheme: dark){
  .s2b-dark-toggle{
    background:#0b0b0d; border-color:#1a1a1e; color:#e5e7eb;
    box-shadow:0 2px 10px rgba(0,0,0,.45);
  }
}
.is-dark .s2b-dark-toggle{
  background:#0b0b0d; border-color:#1a1a1e; color:#e5e7eb;
  box-shadow:0 2px 10px rgba(0,0,0,.45);
}
/* === Donut-variant: zelfde look als op de node ===================== */
.s2b-dark-toggle--donut{
  width:40px; height:40px; padding:0; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid #e5e7eb; color:#2c2f36;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.s2b-dark-toggle--donut:hover{ transform:translateY(-1px); box-shadow:0 3px 12px rgba(0,0,0,.12); }

/* label verbergen in donut (alleen icoon) */
.s2b-dark-toggle--donut .s2b-dark-toggle__label{ display:none; }

/* icoon centraal, 18px */
.s2b-dark-toggle--donut .s2b-dark-toggle__icon{
  width:18px; height:18px; border-radius:50%; display:block;
  /* zonnetje */
  background: radial-gradient(circle at 50% 50%, #f6d36b 40%, #f1c24b 41%, #e7a72a 62%, #d9921a 63%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.04) inset;
}

/* ingedrukt = dark actief (maan) */
.s2b-dark-toggle--donut[aria-pressed="true"]{
  background:#0f1115; border-color:#2a2f36; color:#e5e7eb;
}
.s2b-dark-toggle--donut[aria-pressed="true"] .s2b-dark-toggle__icon{
  background: radial-gradient(circle at 35% 35%, #d6dbe3 36%, #b6bec9 37%, #9aa3b0 60%, #8690a0 61%);
}

/* dark page achtergrond */
@media (prefers-color-scheme: dark){
  .s2b-dark-toggle--donut{
    background:#0b0b0d; border-color:#1a1a1e; color:#e5e7eb;
    box-shadow:0 2px 10px rgba(0,0,0,.45);
  }
}
.is-dark .s2b-dark-toggle--donut{
  background:#0b0b0d; border-color:#1a1a1e; color:#e5e7eb;
  box-shadow:0 2px 10px rgba(0,0,0,.45);
}
/* === Donut-variant: zelfde look als op de node ===================== */
.s2b-dark-toggle--donut{
  width:40px; height:40px; padding:0; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid #e5e7eb; color:#2c2f36;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.s2b-dark-toggle--donut:hover{ transform:translateY(-1px); box-shadow:0 3px 12px rgba(0,0,0,.12); }

/* label verbergen in donut (alleen icoon) */
.s2b-dark-toggle--donut .s2b-dark-toggle__label{ display:none; }

/* icoon centraal, 18px */
.s2b-dark-toggle--donut .s2b-dark-toggle__icon{
  width:18px; height:18px; border-radius:50%; display:block;
  /* zonnetje */
  background: radial-gradient(circle at 50% 50%, #f6d36b 40%, #f1c24b 41%, #e7a72a 62%, #d9921a 63%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.04) inset;
}

/* ingedrukt = dark actief (maan) */
.s2b-dark-toggle--donut[aria-pressed="true"]{
  background:#0f1115; border-color:#2a2f36; color:#e5e7eb;
}
.s2b-dark-toggle--donut[aria-pressed="true"] .s2b-dark-toggle__icon{
  background: radial-gradient(circle at 35% 35%, #d6dbe3 36%, #b6bec9 37%, #9aa3b0 60%, #8690a0 61%);
}

/* dark page achtergrond */
@media (prefers-color-scheme: dark){
  .s2b-dark-toggle--donut{
    background:#0b0b0d; border-color:#1a1a1e; color:#e5e7eb;
    box-shadow:0 2px 10px rgba(0,0,0,.45);
  }
}
.is-dark .s2b-dark-toggle--donut{
  background:#0b0b0d; border-color:#1a1a1e; color:#e5e7eb;
  box-shadow:0 2px 10px rgba(0,0,0,.45);
}
/* Donut toggle */
.s2b-theme-toggle{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid #cfd6df; background:#fff; color:#334155;
  border-radius:12px; padding:6px 10px; line-height:1;
  font-size:.9rem; cursor:pointer;
}
.s2b-theme-toggle:hover{ background:#f8fafc; }
.s2b-theme-toggle.is-dark{ background:#0f1115; color:#e5e7eb; border-color:#2a2f36; }

/* Donut graphic */
.s2b-toggle-donut{
  position:relative; width:34px; height:20px; border-radius:999px;
  background:#e5e7eb; border:1px solid #cfd6df; display:inline-block;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.08);
}
.s2b-theme-toggle.is-dark .s2b-toggle-donut{ background:#1f2430; border-color:#2a2f36; }
.s2b-toggle-donut .ring{
  content:""; position:absolute; inset:0; border-radius:999px; pointer-events:none;
}
.s2b-toggle-donut .thumb{
  position:absolute; top:1px; left:1px; width:16px; height:16px; border-radius:50%;
  background:#ffffff; box-shadow:0 1px 2px rgba(0,0,0,.25);
  transition:left .18s ease, background .18s ease, transform .18s ease;
}
.s2b-theme-toggle.is-dark .s2b-toggle-donut .thumb{
  left:17px; background:#0b0b0d;
}
.s2b-theme-toggle .label{ font-weight:500; }

/* Dark-mode tokens applied sitewide */
.is-dark{
  --s2b-bg:#0f1115; --s2b-card:#14171d; --s2b-card-border:#232730;
  --s2b-text:#e8eaed; --s2b-text-muted:#9aa0a6; --s2b-soft:#1b1f27;
  --s2b-input-bg:#101317; --s2b-input-bd:#2b313a;
}

/* Make heart buttons readable on dark (view + node) */
.is-dark .s2b-flag-raw > a.use-ajax,
.is-dark .s2b-heartlink,
.is-dark .favorite-link{
  background:#2b2f36 !important;
  border-color:#3a3f46 !important;
  box-shadow:0 2px 10px rgba(0,0,0,.45) !important;
}
/* Verberg donut-toggle in Views UI / admin */
.path-admin .s2b-dark-toggle,
.views-ui .s2b-dark-toggle,
#views-ui-display-tab .s2b-dark-toggle,
#views-preview-wrapper .s2b-dark-toggle,
#views-ui-preview-wrapper .s2b-dark-toggle {
  display: none !important;
}