.sx-cookie,
.sx-cookie-manage {
  --sx-cookie-bg-local: var(--sx-cookie-bg, var(--surface, #fff));
  --sx-cookie-text-local: var(--sx-cookie-text, var(--color-text, var(--sx-ink, #17191c)));
  --sx-cookie-border-local: var(--sx-cookie-border, var(--border-color, var(--sx-line, #e5e7ea)));
  --sx-cookie-accent-local: var(--sx-cookie-accent, var(--site-accent, var(--accent, var(--color-primary, #111))));
  --sx-cookie-accent-text-local: var(--sx-cookie-accent-text, #fff);
  --sx-cookie-secondary-local: var(--sx-cookie-secondary, #f5f6f7);
  --sx-cookie-secondary-text-local: var(--sx-cookie-secondary-text, var(--sx-cookie-text-local));
  font-family: inherit;
  box-sizing: border-box;
}

.sx-cookie *,
.sx-cookie *::before,
.sx-cookie *::after,
.sx-cookie-manage *,
.sx-cookie-manage *::before,
.sx-cookie-manage *::after { box-sizing: border-box; }

.sx-cookie-backdrop {
  position: fixed;
  z-index: 99997;
  inset: 0;
  background: rgba(0,0,0,var(--sx-cookie-overlay-alpha,.28));
  backdrop-filter: blur(1.5px);
}

.sx-cookie-backdrop[hidden],
.sx-cookie[hidden],
.sx-cookie-manage[hidden],
.sx-cookie-settings[hidden] { display: none !important; }

.sx-cookie {
  position: fixed;
  z-index: 99999;
  width: calc(100% - 40px);
  max-width: var(--sx-cookie-max-width, 680px);
  padding: var(--sx-cookie-padding, 22px);
  color: var(--sx-cookie-text-local);
  background: var(--sx-cookie-bg-local);
  border: 1px solid var(--sx-cookie-border-local);
  border-radius: var(--sx-cookie-radius, 16px);
  box-shadow: none;
  font-size: var(--sx-cookie-body-size, 15px);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.sx-cookie[data-shadow="1"] { box-shadow: 0 18px 55px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.04); }
.sx-cookie[data-position="bottom-center"] { left: 50%; bottom: 20px; transform: translateX(-50%); }
.sx-cookie[data-position="bottom-left"] { left: 20px; bottom: 20px; }
.sx-cookie[data-position="bottom-right"] { right: 20px; bottom: 20px; }
.sx-cookie[data-position="center"] { left: 50%; top: 50%; transform: translate(-50%,-50%); }
.sx-cookie[data-position="bottom-bar"] { left: 0; right: 0; bottom: 0; width: 100%; max-width: none; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 0; transform: none; }

.sx-cookie__intro { display: grid; gap: 16px; }
.sx-cookie__copy { min-width: 0; }
.sx-cookie h2 { margin: 0 0 6px; color: inherit; font: inherit; font-size: 20px; font-weight: 760; line-height: 1.2; letter-spacing: -.02em; }
.sx-cookie p { margin: 0; color: inherit; font: inherit; font-size: inherit; line-height: 1.58; opacity: .82; }
.sx-cookie p a { color: inherit; font-weight: 650; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.sx-cookie-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sx-cookie-button { min-height: 40px; padding: 0 14px; border: 1px solid transparent; border-radius: var(--sx-cookie-button-radius, 9px); font: inherit; font-size: 13px; font-weight: 720; line-height: 1; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, opacity .16s ease; }
.sx-cookie-button:hover { transform: translateY(-1px); }
.sx-cookie-button:focus-visible,
.sx-cookie-toggle input:focus-visible + .sx-cookie-toggle__ui,
.sx-cookie-manage:focus-visible { outline: 2px solid var(--sx-cookie-accent-local); outline-offset: 3px; }
.sx-cookie-button--primary { background: var(--sx-cookie-accent-local); color: var(--sx-cookie-accent-text-local); box-shadow: 0 5px 14px rgba(0,0,0,.08); box-shadow: 0 5px 14px color-mix(in srgb, var(--sx-cookie-accent-local) 20%, transparent); }
.sx-cookie-button--secondary { color: var(--sx-cookie-secondary-text-local); background: transparent; border-color: var(--sx-cookie-border-local); }
.sx-cookie[data-secondary-style="soft"] .sx-cookie-button--secondary { background: var(--sx-cookie-secondary-local); border-color: transparent; }
.sx-cookie-button--preferences { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding-inline: 6px 2px; color: inherit; background: transparent; opacity: .78; }
.sx-cookie-button--preferences:hover { opacity: 1; transform: none; }
.sx-cookie-button--preferences svg { width: 18px; height: 18px; transition: transform .18s ease; }
.sx-cookie-button--preferences[aria-expanded="true"] svg { transform: rotate(180deg); }

.sx-cookie-settings { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--sx-cookie-border-local); }
.sx-cookie-settings__head { display: none; }
.sx-cookie-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 58px; padding: 9px 2px; color: inherit; cursor: pointer; border-bottom: 1px solid color-mix(in srgb, var(--sx-cookie-border-local) 70%, transparent); }
.sx-cookie-row:last-of-type { border-bottom: 0; }
.sx-cookie-row--locked { cursor: default; }
.sx-cookie-row__copy { display: grid; gap: 2px; min-width: 0; }
.sx-cookie-row__copy strong { color: inherit; font-size: 14px; font-weight: 720; line-height: 1.25; }
.sx-cookie-row__copy small { color: inherit; font-size: 12px; line-height: 1.4; opacity: .62; }

.sx-cookie-toggle { position: relative; display: inline-flex; flex: 0 0 auto; width: 40px; height: 23px; cursor: pointer; }
.sx-cookie-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sx-cookie-toggle__ui { position: absolute; inset: 0; border: 1px solid var(--sx-cookie-border-local); border-radius: 999px; background: var(--sx-cookie-secondary-local); background: color-mix(in srgb, var(--sx-cookie-text-local) 7%, var(--sx-cookie-bg-local)); transition: .18s ease; }
.sx-cookie-toggle__ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: var(--sx-cookie-bg-local); box-shadow: 0 1px 4px rgba(0,0,0,.18); transition: transform .18s ease; }
.sx-cookie-toggle input:checked + .sx-cookie-toggle__ui { border-color: var(--sx-cookie-accent-local); background: var(--sx-cookie-accent-local); }
.sx-cookie-toggle input:checked + .sx-cookie-toggle__ui::after { transform: translateX(17px); }
.sx-cookie-toggle input:disabled + .sx-cookie-toggle__ui { opacity: .45; }
.sx-cookie-settings__footer { display: flex; justify-content: flex-end; padding-top: 12px; }

/* Clean is de nieuwe premium standaard. */
.sx-cookie[data-design="clean"] { overflow: hidden; }
.sx-cookie[data-design="clean"] .sx-cookie-settings { margin: 18px calc(var(--sx-cookie-padding, 22px) * -.35) calc(var(--sx-cookie-padding, 22px) * -.35); padding: 14px calc(var(--sx-cookie-padding, 22px) * .35) calc(var(--sx-cookie-padding, 22px) * .35); border: 1px solid color-mix(in srgb, var(--sx-cookie-border-local) 80%, transparent); border-radius: calc(var(--sx-cookie-radius, 16px) * .72); background: var(--sx-cookie-secondary-local); background: color-mix(in srgb, var(--sx-cookie-text-local) 2.8%, var(--sx-cookie-bg-local)); }
.sx-cookie[data-design="clean"] .sx-cookie-settings__head { display: grid; gap: 2px; padding: 2px 2px 8px; }
.sx-cookie[data-design="clean"] .sx-cookie-settings__head strong { font-size: 13px; }
.sx-cookie[data-design="clean"] .sx-cookie-settings__head span { font-size: 11px; opacity: .58; }

/* Compact voor kleine sites/zijpopups. */
.sx-cookie[data-design="compact"] { max-width: min(var(--sx-cookie-max-width, 520px), 560px); }
.sx-cookie[data-design="compact"] h2 { font-size: 18px; }
.sx-cookie[data-design="compact"] .sx-cookie-actions { display: grid; grid-template-columns: 1fr 1fr; }
.sx-cookie[data-design="compact"] .sx-cookie-button--preferences { grid-column: 1 / -1; justify-self: start; margin-left: 0; min-height: 30px; }
.sx-cookie[data-design="compact"] .sx-cookie-button:not(.sx-cookie-button--preferences) { width: 100%; }

/* Classic behoudt de vertrouwde rechte paneelopbouw, maar met de nieuwe controls. */
.sx-cookie[data-design="classic"] .sx-cookie-settings { margin-top: 14px; padding-top: 14px; }

/* Volledige balk: copy en acties naast elkaar, voorkeuren eronder. */
.sx-cookie[data-position="bottom-bar"] .sx-cookie__intro { width: min(1440px, calc(100% - 48px)); margin: 0 auto; grid-template-columns: minmax(280px,1fr) auto; align-items: center; gap: 28px; }
.sx-cookie[data-position="bottom-bar"] .sx-cookie-actions { white-space: nowrap; }
.sx-cookie[data-position="bottom-bar"] .sx-cookie-settings { width: min(1440px, calc(100% - 48px)); margin: 14px auto 0; }

.sx-cookie-manage { position: fixed; z-index: 99998; bottom: 14px; display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 10px; color: var(--sx-cookie-text-local); background: var(--sx-cookie-bg-local); background: color-mix(in srgb, var(--sx-cookie-bg-local) 94%, transparent); border: 1px solid var(--sx-cookie-border-local); border-radius: 999px; font: inherit; font-size: 11px; font-weight: 650; cursor: pointer; backdrop-filter: blur(10px); opacity: .82; transition: opacity .16s ease, transform .16s ease; }
.sx-cookie-manage:hover { opacity: 1; transform: translateY(-1px); }
.sx-cookie-manage[data-shadow="1"] { box-shadow: 0 6px 22px rgba(0,0,0,.10); }
.sx-cookie-manage svg { width: 14px; height: 14px; }
.sx-cookie-manage[data-position="bottom-right"] { right: 14px; }
.sx-cookie-manage[data-position="bottom-left"] { left: 14px; }

@media (max-width: 720px) {
  .sx-cookie { width: calc(100% - 20px); max-width: none; padding: max(17px, min(22px, var(--sx-cookie-padding, 22px))); }
  .sx-cookie[data-position="bottom-center"],
  .sx-cookie[data-position="bottom-left"],
  .sx-cookie[data-position="bottom-right"] { left: 10px; right: 10px; bottom: 10px; transform: none; }
  .sx-cookie[data-position="center"] { width: calc(100% - 20px); }
  .sx-cookie h2 { font-size: 19px; }
  .sx-cookie p { font-size: 14px; }
  .sx-cookie-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .sx-cookie-button:not(.sx-cookie-button--preferences) { width: 100%; }
  .sx-cookie-button--preferences { grid-column: 1 / -1; justify-self: start; margin-left: 0; min-height: 30px; }
  .sx-cookie[data-position="bottom-bar"] .sx-cookie__intro,
  .sx-cookie[data-position="bottom-bar"] .sx-cookie-settings { width: 100%; grid-template-columns: 1fr; }
  .sx-cookie[data-mobile-sheet="1"] { left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; transform: none !important; width: 100% !important; max-width: none !important; border-right: 0; border-bottom: 0; border-left: 0; border-radius: var(--sx-cookie-radius, 16px) var(--sx-cookie-radius, 16px) 0 0; }
  .sx-cookie[data-mobile-sheet="1"] .sx-cookie-actions { grid-template-columns: 1fr; }
  .sx-cookie[data-mobile-sheet="1"] .sx-cookie-button--preferences { grid-column: auto; }
  .sx-cookie-row { min-height: 56px; gap: 14px; }
  .sx-cookie-manage { bottom: 10px; }
  .sx-cookie-manage[data-position="bottom-right"] { right: 10px; }
  .sx-cookie-manage[data-position="bottom-left"] { left: 10px; }
}

@media (max-width: 420px) {
  .sx-cookie-actions { grid-template-columns: 1fr; }
  .sx-cookie-button--preferences { grid-column: auto; }
  .sx-cookie-row__copy small { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .sx-cookie-button,
  .sx-cookie-button--preferences svg,
  .sx-cookie-toggle__ui,
  .sx-cookie-toggle__ui::after,
  .sx-cookie-manage { transition: none; }
}