/* Shared Cookie-Consent-Banner — granular 4-tier DSGVO/revDSG.
 * Extracted from update_website.py 2026-05-08 for cross-page consistency
 * (D9 Layout-Konsistenz). Apex still uses its inline copy until D9-sweep
 * consolidates them — keep visual parity between this and apex banner.
 *
 * Pairs with: /_shared/cookie-banner.js
 * Used on: /pricing/, /eth/, /sol/, /mcp/, /charts/, /ai/, /api/, /ledger/
 */

#cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--bg-overlay, rgba(255,255,255,0.97));
  backdrop-filter: blur(10px);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-banner-top, 0 -4px 20px rgba(0,0,0,0.08));
  z-index: var(--z-banner, 9000);
  display: none;
}
#cookie-banner .cb-row {
  display: flex; flex-wrap: wrap; gap: .75rem;
  align-items: center; justify-content: space-between;
  max-width: 1200px; margin: 0 auto;
}
#cookie-banner .cb-text { flex: 1; min-width: 240px; font-size: .92rem; }
#cookie-banner .cb-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
/* Touch-Target ≥44px (WCAG 2.5.5) — same as apex audit-fix 30.04.2026 */
#cookie-banner button {
  padding: .8rem 1.2rem; border: none;
  border-radius: var(--radius-md, 6px); cursor: pointer;
  font-weight: var(--font-semibold, 600); font-size: .9rem;
  transition: all 150ms ease; white-space: nowrap; min-height: 44px;
}
#cookie-banner .accept-btn {
  background: var(--accent-gold, #F7931A); color: var(--text-on-accent, #fff);
  border: 1px solid var(--accent-gold-hover, #d97a06);
}
#cookie-banner .accept-btn:hover { background: var(--accent-gold-hover, #d97a06); }
#cookie-banner .reject-btn {
  background: transparent; color: var(--text-primary, #111);
  border: 1px solid var(--border-card, rgba(0,0,0,.15));
}
#cookie-banner .reject-btn:hover { background: var(--bg-secondary, rgba(0,0,0,.04)); }
#cookie-banner .customize-btn {
  background: transparent; color: var(--text-secondary, #555);
  border: 1px solid transparent; text-decoration: underline;
}
#cookie-banner .customize-btn:hover { color: var(--text-primary, #111); }

/* Settings Modal */
#cookie-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5); z-index: 9010;
  display: none; align-items: center; justify-content: center; padding: 1rem;
}
#cookie-modal[aria-hidden="false"] { display: flex; }
#cookie-modal .cm-content {
  background: var(--bg-primary, #fff); color: var(--text-primary, #111);
  border-radius: var(--radius-xl, 12px); max-width: 560px; width: 100%;
  max-height: 90vh; overflow-y: auto; padding: 1.75rem;
  box-shadow: var(--shadow-modal, 0 20px 60px rgba(0,0,0,.3));
}
#cookie-modal h3 { margin: 0 0 .5rem; font-size: 1.4rem; }
#cookie-modal .cm-intro { color: var(--text-secondary, #555); font-size: .9rem; margin-bottom: 1.25rem; }
#cookie-modal .cm-cat {
  padding: .85rem; border: 1px solid var(--border-card, rgba(0,0,0,.15));
  border-radius: var(--radius-md, 6px); margin-bottom: .75rem;
}
#cookie-modal .cm-cat-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
}
#cookie-modal .cm-cat-name { font-weight: 600; font-size: 1rem; }
#cookie-modal .cm-cat-desc { color: var(--text-secondary, #555); font-size: .85rem; margin-top: .35rem; }
#cookie-modal .cm-toggle {
  position: relative; display: inline-block;
  width: 42px; height: 24px; flex-shrink: 0;
}
#cookie-modal .cm-toggle input { opacity: 0; width: 0; height: 0; }
#cookie-modal .cm-toggle-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: #ccc; border-radius: 24px; transition: .2s;
}
#cookie-modal .cm-toggle-slider::before {
  content: ""; position: absolute;
  height: 18px; width: 18px; left: 3px; bottom: 3px;
  background: #fff; border-radius: 50%; transition: .2s;
}
#cookie-modal .cm-toggle input:checked + .cm-toggle-slider { background: var(--accent-gold, #F7931A); }
#cookie-modal .cm-toggle input:checked + .cm-toggle-slider::before { transform: translateX(18px); }
#cookie-modal .cm-toggle input:disabled + .cm-toggle-slider {
  background: var(--accent-gold, #F7931A); opacity: .6; cursor: not-allowed;
}
#cookie-modal .cm-actions {
  display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; justify-content: flex-end;
}
#cookie-modal .cm-actions button {
  padding: .6rem 1.1rem; border-radius: var(--radius-md, 6px);
  font-weight: 600; cursor: pointer;
  border: 1px solid var(--border-card, rgba(0,0,0,.15));
  background: transparent; color: var(--text-primary, #111);
}
#cookie-modal .cm-actions .cm-save {
  background: var(--accent-gold, #F7931A); color: var(--text-on-accent, #fff);
  border-color: var(--accent-gold-hover, #d97a06);
}
#cookie-modal .cm-link-row {
  margin-top: .75rem; font-size: .8rem;
  color: var(--text-secondary, #555); text-align: center;
}
#cookie-modal .cm-link-row a { color: var(--accent-primary, #F7931A); }