/* =========================================================
   GLOBAL THEME VARIABLES (FULLY THEMEABLE)
========================================================= */
:root {
  --font-primary: "Inter", sans-serif;
  --font-secondary: "Inter", sans-serif;
  --font-size-base: 16px;

  /* MAIN THEME COLORS (controlled by JS) */
  --color-bg:  #ffffff;
  --color-text: #111111;
  --color-accent: #2d6cdf;

  /* EXTENDED THEME COLORS (needed by your components) */
  --color-bg-soft: #f5f7fa;
  --color-bg-card: #ffffff;
  --color-text-soft: #666666;
  --color-border: #d0d7e2;
  --color-accent-soft: #1b4db1;

  /* LAYOUT TOKENS */
  --max-width: 1120px;
  --radius: 16px;
  --padding: 24px;
}
:root[data-theme="dark"] {
  --color-bg: #0d1117;
  --color-bg-soft: #161b22;
  --color-bg-card: #1f242c;
  --color-text: #c9d1d9;
  --color-text-soft: #8b949e;
  --color-accent: #FF9001;
  --color-accent-soft: #f79d28;
  --color-border: #30363d;
}
:root[data-theme="light"] {
  --color-bg: #ffffff;
  --color-bg-soft: #f5f7fa;
  --color-bg-card: #ffffff;
  --color-text: #111111;
  --color-text-soft: #666666;
  --color-accent: #FF9001;
  --color-accent-soft: #f79d28;
  --color-border: #d0d7e2;
}
:root[data-theme="neo-fintech"] {
  --color-bg: #ffffff;
  --color-bg-soft: #f5f7fa;
  --color-bg-card: #ffffff;
  --color-text: #111111;
  --color-text-soft: #666666;
  --color-accent: #2d6cdf;
  --color-accent-soft: #1b4db1;
  --color-border: #d0d7e2;
}
:root[data-theme="trust-blue"] {
  --color-bg: #f7f9fc;
  --color-bg-soft: #e8eef7;
  --color-bg-card: #ffffff;
  --color-text: #0a1a3c;
  --color-text-soft: #4a5a7a;
  --color-accent: #1b4db1;
  --color-accent-soft: #163b8c;
  --color-border: #c8d4e6;
}
:root[data-theme="dark-pro"] {
  --color-bg: #0d0d0f;
  --color-bg-soft: #16161a;
  --color-bg-card: #1e1e24;
  --color-text: #f2f2f2;
  --color-text-soft: #b5b5b5;
  --color-accent: #00d4ff;
  --color-accent-soft: #00aacc;
  --color-border: #2a2a32;
}
:root[data-theme="glass-fx"] {
  --color-bg: rgba(255,255,255,0.6);
  --color-bg-soft: rgba(255,255,255,0.3);
  --color-bg-card: rgba(255,255,255,0.45);
  --color-text: #222222;
  --color-text-soft: #555555;
  --color-accent: #8ab4ff;
  --color-accent-soft: #5a8be6;
  --color-border: rgba(255,255,255,0.4);
}
:root[data-theme="euro-digital"] {
  --color-bg: #ffffff;
  --color-bg-soft: #f2f4fa;
  --color-bg-card: #ffffff;
  --color-text: #1a1a1a;
  --color-text-soft: #4a4a4a;
  --color-accent: #003399;
  --color-accent-soft: #002266;
  --color-border: #ccd4e0;
}
:root[data-theme="quant-tech"] {
  --color-bg: #f5f7fa;
  --color-bg-soft: #e9edf3;
  --color-bg-card: #ffffff;
  --color-text: #0d1b2a;
  --color-text-soft: #415a77;
  --color-accent: #1b263b;
  --color-accent-soft: #0d1b2a;
  --color-border: #c5d0dd;
}
:root[data-theme="crypto-sleek"] {
  --color-bg: #0b0f19;
  --color-bg-soft: #111827;
  --color-bg-card: #1f2937;
  --color-text: #e0e0e0;
  --color-text-soft: #9ca3af;
  --color-accent: #7f5af0;
  --color-accent-soft: #6246ea;
  --color-border: #2d3748;
}
:root[data-theme="wealth-classic"] {
  --color-bg: #faf7f2;
  --color-bg-soft: #f2ede5;
  --color-bg-card: #ffffff;
  --color-text: #2a2a2a;
  --color-text-soft: #6b6b6b;
  --color-accent: #bfa76f;
  --color-accent-soft: #9f8a54;
  --color-border: #d8c9a7;
}
:root[data-theme="startup-bold"] {
  --color-bg: #ffffff;
  --color-bg-soft: #f7f7f7;
  --color-bg-card: #ffffff;
  --color-text: #111111;
  --color-text-soft: #555555;
  --color-accent: #ff4d4f;
  --color-accent-soft: #d9363e;
  --color-border: #e5e5e5;
}
:root[data-theme="privacy-shield"] {
  --color-bg: #f3f4f6;
  --color-bg-soft: #e5e7eb;
  --color-bg-card: #ffffff;
  --color-text: #1f2937;
  --color-text-soft: #4b5563;
  --color-accent: #4b5563;
  --color-accent-soft: #374151;
  --color-border: #d1d5db;
}
:root[data-theme="forest-finance"] {
  --color-bg: #f4f8f4;
  --color-bg-soft: #e6f0e6;
  --color-bg-card: #ffffff;
  --color-text: #1a2e1a;
  --color-text-soft: #4a6b4a;
  --color-accent: #2f855a;
  --color-accent-soft: #276749;
  --color-border: #cfe3cf;
}
:root[data-theme="sunset-trade"] {
  --color-bg: #fff7f3;
  --color-bg-soft: #ffe9df;
  --color-bg-card: #ffffff;
  --color-text: #3a1f1a;
  --color-text-soft: #7a4a3f;
  --color-accent: #ff7849;
  --color-accent-soft: #e66a3f;
  --color-border: #f5c4b3;
}
:root[data-theme="midnight-exchange"] {
  --color-bg: #0a0a0f;
  --color-bg-soft: #14141c;
  --color-bg-card: #1c1c26;
  --color-text: #e5e5e5;
  --color-text-soft: #a3a3a3;
  --color-accent: #4f46e5;
  --color-accent-soft: #4338ca;
  --color-border: #2a2a35;
}
:root[data-theme="aqua-pay"] {
  --color-bg: #f0fbff;
  --color-bg-soft: #dff5ff;
  --color-bg-card: #ffffff;
  --color-text: #0a2a33;
  --color-text-soft: #3a5a66;
  --color-accent: #00aaff;
  --color-accent-soft: #0088cc;
  --color-border: #bfe8f7;
}
:root[data-theme="gold-vault"] {
  --color-bg: #fffdf7;
  --color-bg-soft: #f7f2e8;
  --color-bg-card: #ffffff;
  --color-text: #3a2f1a;
  --color-text-soft: #6b5a3f;
  --color-accent: #d4af37;
  --color-accent-soft: #b8962f;
  --color-border: #e8d9a8;
}
:root[data-theme="cyber-mint"] {
  --color-bg: #0d1117;
  --color-bg-soft: #161b22;
  --color-bg-card: #1f242c;
  --color-text: #c9d1d9;
  --color-text-soft: #8b949e;
  --color-accent: #3ddc97;
  --color-accent-soft: #2fb87c;
  --color-border: #30363d;
}
:root[data-theme="royal-banking"] {
  --color-bg: #f8f5ff;
  --color-bg-soft: #eee6ff;
  --color-bg-card: #ffffff;
  --color-text: #2a1a4a;
  --color-text-soft: #5a4a7a;
  --color-accent: #6b46c1;
  --color-accent-soft: #553c9a;
  --color-border: #d8c9f2;
}
:root[data-theme="slate-ledger"] {
  --color-bg: #f6f7f9;
  --color-bg-soft: #e8eaef;
  --color-bg-card: #ffffff;
  --color-text: #1f2937;
  --color-text-soft: #4b5563;
  --color-accent: #64748b;
  --color-accent-soft: #475569;
  --color-border: #d1d5db;
}
:root[data-theme="terminal-green"] {
  --color-bg: #000000;
  --color-bg-soft: #0a0a0a;
  --color-bg-card: #111111;
  --color-text: #00ff66;
  --color-text-soft: #33ff88;
  --color-accent: #00cc55;
  --color-accent-soft: #009944;
  --color-border: #003311;
}
:root[data-theme="lava-exchange"] {
  --color-bg: #1a0f0f;
  --color-bg-soft: #261414;
  --color-bg-card: #331a1a;
  --color-text: #f2e8e8;
  --color-text-soft: #c7b3b3;
  --color-accent: #ff4d4d;
  --color-accent-soft: #cc3d3d;
  --color-border: #4d2626;
}
:root[data-theme="arctic-finance"] {
  --color-bg: #f7fbff;
  --color-bg-soft: #e8f3ff;
  --color-bg-card: #ffffff;
  --color-text: #1a2a3a;
  --color-text-soft: #4a5a6b;
  --color-accent: #4da6ff;
  --color-accent-soft: #3a82cc;
  --color-border: #c9dff5;
}
:root[data-theme="emerald-credit"] {
  --color-bg: #f3fdf7;
  --color-bg-soft: #e1f7eb;
  --color-bg-card: #ffffff;
  --color-text: #1a3a2a;
  --color-text-soft: #4a6b5a;
  --color-accent: #34d399;
  --color-accent-soft: #059669;
  --color-border: #c7eedd;
}
:root[data-theme="onyx-trade"] {
  --color-bg: #0f0f11;
  --color-bg-soft: #1a1a1d;
  --color-bg-card: #222226;
  --color-text: #e5e5e5;
  --color-text-soft: #a3a3a3;
  --color-accent: #9d4edd;
  --color-accent-soft: #7b2cbf;
  --color-border: #2e2e33;
}
:root[data-theme="silver-broker"] {
  --color-bg: #fafafa;
  --color-bg-soft: #f0f0f0;
  --color-bg-card: #ffffff;
  --color-text: #2a2a2a;
  --color-text-soft: #6b6b6b;
  --color-accent: #9ca3af;
  --color-accent-soft: #6b7280;
  --color-border: #d4d4d4;
}
:root[data-theme="neon-exchange"] {
  --color-bg: #0a0a0f;
  --color-bg-soft: #14141c;
  --color-bg-card: #1c1c26;
  --color-text: #e5e5e5;
  --color-text-soft: #a3a3a3;
  --color-accent: #ff00ff;
  --color-accent-soft: #cc00cc;
  --color-border: #2a2a35;
}

/* =========================================================
   BASE ELEMENTS
========================================================= */
/* html {
  font-family: var(--font-primary);
  background: var(--color-bg);
  color: var(--color-text);
  scroll-behavior: smooth;
} */
html {
  line-height: 1.6;
  scroll-behavior: smooth;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--font-size-base);
}

body {
  background: transparent;
  font-family: var(--font-primary);
  padding-bottom: 120px; /* hoogte van de footer */
  /* background: #42acdd; */
  /* color: var(--color-text);
  font-size: var(--font-size-base); */
  
}

/* Links */
a {
  color: var(--color-accent);
}

/* Buttons */
button,
.btn {
  background-color: var(--color-accent);
  color: var(--color-bg);
}

/* Cards */
.article-card,
.card {
  background-color: var(--color-bg-card);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

/* Headings */
h1, h2, h3, h4 {
  font-family: var(--font-secondary);
  color: var(--color-text);
}

/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =========================================================
   NAVIGATION
========================================================= */
.nav-wrapper {
  width: 100%;
  background: var(--color-nav-bg, rgba(255,255,255,0.9));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-nav-border, rgba(0,0,0,0.08));
  position: sticky;
  top: 0;
  z-index: 999;
}
.nav-wrapper .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--color-bg-soft);
}

.nav {
  display: flex;
  align-items: center;
  gap: 32px;
  white-space: nowrap;
}

.nav a {
  position: relative;
  text-decoration: none;
  color: var(--color-text);
  padding: 8px 0;
  transition: color 0.25s ease;
}

.nav a:hover {
  color: var(--color-accent);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 2px;
  background: var(--color-accent);
  transition: width 0.25s ease;
}

.nav a:hover::after {
  width: 100%;
}

.nav a.active {
  color: var(--color-accent);
  font-weight: 600;
}

.nav a.active::after {
  width: 100%;
}

.nav ul {
  display: flex;
  gap: 32px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav li {
  display: inline-block;
}



/* =========================================================
   HERO
========================================================= */
.hero {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 80px var(--padding);
  text-align: left;
}

.hero-kicker {
  color: var(--color-accent);
  font-weight: 600;
  margin-bottom: 12px;
}

.hero-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.hero-subtitle {
  font-size: 1.25rem;
  color: var(--color-text-soft);
  margin-bottom: 24px;
}

.hero-bullets span {
  color: var(--color-text-soft);
}

/* =========================================================
   SECTIONS
========================================================= */
.section {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 80px var(--padding);
}

.section p {
  color: var(--color-text-soft);
}

/* =========================================================
   CTA BAND
========================================================= */
.cta-band {
  background: var(--color-bg-soft);
  padding: 60px var(--padding);
  text-align: center;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.cta-band-subtitle {
  color: var(--color-text-soft);
}

/* =========================================================
   ARTICLES
========================================================= */
.article-list {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 60px var(--padding);
  display: grid;
  gap: 32px;
}

.article-card {
  background: var(--color-bg-card);
  padding: 24px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

.article-meta {
  color: var(--color-text-soft);
}

/* =========================================================
   FAQ
========================================================= */

/* WRAPPER */
.faq-item {
  position: relative;
  padding: 24px 32px;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.faq-item.active .faq-answer {
  max-height: 500px; /* genoeg ruimte */
  opacity: 1;
  margin-top: 0.5rem;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  border-color: var(--color-border-strong, rgba(0,0,0,0.15));
}


.faq-item {
  cursor: pointer;
  background: var(--color-bg-card);
  padding: 24px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  margin-top: 2rem;
}
/* QUESTION */
.faq-question {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  width: 100%;              /* belangrijk */
  position: relative;       /* nodig voor chevron */
  z-index: 2;               /* boven de answer */
}

.faq-question::after {
  content: "";
  width: 18px;
  height: 18px;
  margin-left: 1rem;
  flex-shrink: 0;
  opacity: 0.7;
  transition: transform 0.3s ease, opacity 0.3s ease;

  /* Inline SVG chevron (down arrow) */
  background-image: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'>\
      <polyline points='6 9 12 15 18 9'/>\
    </svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.faq-item.active .faq-question::after {
  transform: rotate(180deg);
  opacity: 1;
}


.faq-answer {
  color: var(--color-text-soft);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.35s ease;
}

[data-ui="faqTitle"] {
  margin-top: 2rem; /* or 1.5rem if you want it tighter */
}

[data-ui="faqCtaButton"] {
  margin-top: 2rem; /* or 1.5rem if you want it tighter */
  margin-bottom: 2rem; /* or 1.5rem if you want it tighter */
}

.faq-cta {
  margin-top: 3rem;
}

/* =========================================================
   COOKIE BANNER
========================================================= */
.cookie-banner {
  background: var(--color-bg-soft);
  border-top: 1px solid var(--color-border);
}

/* =========================================================
   FOOTER
========================================================= */

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--color-bg-soft);
  border-top: 1px solid var(--color-border);
  padding: 1.5rem 0;
  z-index: 999;
}


.footer-links a,
.footer-bottom {
  color: var(--color-text-soft);
}









.section {
  padding: 80px 0;
  background: var(--color-bg);
}

.section:nth-of-type(even) {
  background: var(--color-bg-soft);
}

.section > h2 {
  font-family: var(--font-secondary);
  font-size: calc(var(--font-size-base) * 2);
  margin-bottom: 40px;
  position: relative;
  display: inline-block;
  color: var(--color-text);
}

.section > h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 60px;
  height: 3px;
  background: var(--color-accent);
  border-radius: 2px;
}

.section .items {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.section .item {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: transform .2s ease, box-shadow .2s ease;
}

.section .item:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.10);
}

.section .item h3 {
  font-family: var(--font-secondary);
  margin-top: 0;
  margin-bottom: 12px;
  color: var(--color-text);
}

.section .item p {
  margin: 0;
  color: var(--color-text-soft);
  font-size: var(--font-size-base);
}




/* ============================================
   PRICING PLANS — CARD STYLE
   ============================================ */
.plans {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.plan {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transition: transform .2s ease, box-shadow .2s ease;
}

.plan:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.plan h3 {
  font-family: var(--font-secondary);
  margin-top: 0;
  margin-bottom: 12px;
  color: var(--color-text);
}

.plan .price {
  font-size: calc(var(--font-size-base) * 1.4);
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--color-accent);
}

.plan ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.plan li {
  margin-bottom: 8px;
  color: var(--color-text-soft);
}



/* ============================================
   ARTICLE DETAIL — PDF LOOK & FEEL
   ============================================ */

.article-detail {
  max-width: 760px;
  margin: 60px auto;
  padding: 60px 70px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;

  /* PDF-achtige schaduw */
  box-shadow:
    0 4px 12px rgba(0,0,0,0.06),
    0 12px 32px rgba(0,0,0,0.08);
}

/* Titel */
.article-detail h1 {
  font-family: var(--font-secondary);
  font-size: calc(var(--font-size-base) * 2.4);
  margin-bottom: 20px;
  color: var(--color-text);
}

/* Meta-informatie */
.article-detail header p {
  color: var(--color-text-soft);
  font-size: calc(var(--font-size-base) * 0.9);
  margin-bottom: 40px;
}

/* Body tekst */
.article-detail p {
  line-height: 1.7;
  margin-bottom: 22px;
  font-size: var(--font-size-base);
  color: var(--color-text);
}

/* Headings in body */
.article-detail h2 {
  font-family: var(--font-secondary);
  font-size: calc(var(--font-size-base) * 1.6);
  margin-top: 40px;
  margin-bottom: 16px;
  color: var(--color-text);

  /* PDF-achtige subtiele underline */
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 6px;
}

/* Lijsten */
.article-detail ul {
  padding-left: 20px;
  margin-bottom: 24px;
}

.article-detail li {
  margin-bottom: 10px;
  line-height: 1.6;
  color: var(--color-text);
}

/* Links */
.article-detail a {
  color: var(--color-accent);
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
  .article-detail {
    padding: 40px 30px;
    margin: 30px 0;
  }
}

/* ============================================
   CONTACT FORM — PREMIUM LOOK
   ============================================ */

.contact-form {
  max-width: 760px;
  margin: 60px auto;
  padding: 60px 70px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.06),
    0 12px 32px rgba(0,0,0,0.08);
}

.contact-form h2 {
  font-family: var(--font-secondary);
  font-size: calc(var(--font-size-base) * 2);
  margin-bottom: 32px;
  color: var(--color-text);
}

.form-group {
  margin-bottom: 24px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-secondary);
  color: var(--color-text);
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--font-size-base);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-soft);
}

.form-success {
  margin-top: 20px;
  padding: 16px;
  background: var(--color-bg-soft);
  border-left: 4px solid var(--color-accent);
  border-radius: 6px;
  color: var(--color-text);
}



.nav-wrapper {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: transparent;
}
.btn.btn-primary {
  /* Use your existing theme tokens */
  --btn-bg: var(--color-accent);
  --btn-bg-hover: var(--color-accent-soft);
  --btn-bg-active: color-mix(in srgb, var(--color-accent) 80%, black);
  --btn-shadow: color-mix(in srgb, var(--color-accent) 40%, transparent);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.85rem 1.6rem;
  border-radius: var(--radius);
  border: none;

  background: var(--btn-bg);
  color: #fff;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.2px;

  box-shadow: 0 4px 12px var(--btn-shadow);
  transition:
    background 0.2s ease,
    box-shadow 0.25s ease,
    transform 0.15s ease;
  cursor: pointer;
}

.btn.btn-primary:hover {
  background: var(--btn-bg-hover);
  box-shadow: 0 6px 18px var(--btn-shadow);
  transform: translateY(-2px);
}

.btn.btn-primary:active {
  background: var(--btn-bg-active);
  transform: translateY(0);
  box-shadow: 0 3px 8px var(--btn-shadow);
}

.btn.btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn.btn-secondary {
  /* Theme-driven tokens */
  --btn-bg: var(--color-bg-soft);
  --btn-bg-hover: var(--color-bg-card);
  --btn-bg-active: color-mix(in srgb, var(--color-bg-card) 90%, black);
  --btn-border: var(--color-border);
  --btn-border-hover: color-mix(in srgb, var(--color-accent) 40%, var(--color-border));
  --btn-shadow: color-mix(in srgb, var(--color-accent) 20%, transparent);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.85rem 1.6rem;
  border-radius: var(--radius);
  border: 1px solid var(--btn-border);

  background: var(--btn-bg);
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.2px;

  box-shadow: 0 2px 6px var(--btn-shadow);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.25s ease,
    transform 0.15s ease;
  cursor: pointer;
}

.btn.btn-secondary:hover {
  background: var(--btn-bg-hover);
  border-color: var(--btn-border-hover);
  box-shadow: 0 4px 12px var(--btn-shadow);
  transform: translateY(-2px);
}

.btn.btn-secondary:active {
  background: var(--btn-bg-active);
  transform: translateY(0);
  box-shadow: 0 2px 6px var(--btn-shadow);
}

.btn.btn-secondary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn.btn-secondary {
  /* Theme-driven tokens */
  --btn-bg: var(--color-bg-soft);
  --btn-bg-hover: var(--color-bg-card);
  --btn-bg-active: color-mix(in srgb, var(--color-bg-card) 90%, black);
  --btn-border: var(--color-border);
  --btn-border-hover: color-mix(in srgb, var(--color-accent) 40%, var(--color-border));
  --btn-shadow: color-mix(in srgb, var(--color-accent) 20%, transparent);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.85rem 1.6rem;
  border-radius: var(--radius);
  border: 1px solid var(--btn-border);

  background: var(--btn-bg);
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.2px;

  box-shadow: 0 2px 6px var(--btn-shadow);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.25s ease,
    transform 0.15s ease;
  cursor: pointer;
}

.btn.btn-secondary:hover {
  background: var(--btn-bg-hover);
  border-color: var(--btn-border-hover);
  box-shadow: 0 4px 12px var(--btn-shadow);
  transform: translateY(-2px);
}

.btn.btn-secondary:active {
  background: var(--btn-bg-active);
  transform: translateY(0);
  box-shadow: 0 2px 6px var(--btn-shadow);
}

.btn.btn-secondary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}








.cms-dropdown {
  position: relative;
  display: inline-block;
  font-family: var(--font-primary);
}

.cms-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 6px;

  padding: 0.55rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);

  background: var(--color-bg-soft);
  color: var(--color-text);
  cursor: pointer;

  transition: background 0.2s ease, border-color 0.2s ease;
}

.cms-dropdown-toggle:hover {
  background: var(--color-bg-card);
  border-color: var(--color-accent);
}

.cms-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;

  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);

  list-style: none;
  padding: 6px 0;
  margin: 0;

  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  display: none;
}

.cms-dropdown-menu.show {
  display: block;
}

.cms-dropdown-menu li {
  padding: 0.6rem 1rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.cms-dropdown-menu li:hover {
  background: var(--color-bg-soft);
}

.settings-panel,
.design-panel,
.sidebar,
.cms-panel {
  display: block;
  height: auto;
  max-height: none;
  overflow: visible;
}




.container {
  width: 100%;
  max-width: var(--max-width, 1120px);
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* =========================================================
   POLL PAGE — STRUCTURE
========================================================= */

[data-ui="poll-wrapper"] {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin-top: 2rem;
}

/* Elke poll als eigen card */
.poll-item {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: calc(var(--padding) * 2);
  box-shadow: var(--shadow-card, 0 4px 14px rgba(0,0,0,0.08));
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Titel */
.poll-header h2 {
  margin: 0;
  font-family: var(--font-primary);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-text);
}

/* =========================================================
   TWO-COLUMN LAYOUT
========================================================= */

.poll-columns {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}


.poll-questions,
.poll-results {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--padding);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* =========================================================
   QUESTIONS
========================================================= */

.poll-question {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.poll-question p {
  font-family: var(--font-primary);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

/* =========================================================
   RESULTS
========================================================= */

.poll-result-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.poll-result-label {
  font-family: var(--font-secondary);
  color: var(--color-text);
  font-weight: 600;
}

.poll-result-bar {
  height: 8px;
  background: var(--color-border);
  border-radius: 50px;
  overflow: hidden;
}

.poll-result-bar-fill {
  height: 100%;
  background: var(--color-accent, var(--color-primary));
  transition: width 0.4s ease;
}

/* =========================================================
   ARTE-STYLE RADIO BUTTONS
========================================================= */

.poll-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;

  width: 100%;
  padding: 1rem 1.25rem;

  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);

  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);

  cursor: pointer;
  transition: all 0.25s ease;
}

.poll-option:hover {
  border-color: var(--color-accent, var(--color-primary));
  box-shadow: 0 0 12px rgba(255,255,255,0.15);
  transform: translateY(-2px);
}

.poll-option::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: transparent;
  transition: all 0.25s ease;
}

.poll-option.selected::before {
  border-color: var(--color-accent, var(--color-primary));
  background: var(--color-accent, var(--color-primary));
  box-shadow: 0 0 8px rgba(255,255,255,0.35);
}

.poll-option span {
  flex: 1;
  text-align: left;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 768px) {
  .poll-columns {
    grid-template-columns: 1fr;
  }
}
.poll-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: stretch; /* beide kolommen exact even hoog */
}

.poll-question,
.poll-result-row {
  height: 100%; /* forceer gelijke hoogte */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.success-message {
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  margin-top: 1rem;
  color: var(--color-success, #2e7d32);
  font-weight: 600;
}

.success-message.visible {
  display: block;
  opacity: 1;
}