/* =======================================================================
   BuzzBij.nl — doneren.css (per-pagina)
   Dekking: backdrop/dimmer + header-sluier, glas-container, privacy,
   betaal-tabs, vaste bedragen, open bedrag, pay-button, IBAN-blok.
   Afkomstig uit ui.css, maar gescope’d en veilig voor alleen Doneren.
   ======================================================================= */

/* 0) Baseline & variabelen (subset die hier gebruikt wordt) */
:root{
  --bb-page-bg: #f7f6f3;
  --bb-text: #1a1a1a;

  --bb-safe-top-header: 64px;
  /* offset kan per pagina worden ingesteld; default 0 */
  --bb-header-offset: 0px;

  --bb-accent: #b7830d;
  --bb-accent-contrast: #111;

  --bb-ghost-border-dark: rgba(0,0,0,.22);
  --bb-ghost-border-dark-strong: rgba(0,0,0,.35);
  --bb-shadow-soft: 0 3px 12px rgba(0,0,0,.08);

  --bb-deep-blue: #0D2B4D;
}

/* Alleen op doneren-pagina: header 10px naar beneden */
body.bb-doneren-page{ --bb-header-offset: 10px; }

html, body{ background: var(--bb-page-bg); color: var(--bb-text); }

/* 1) Skelet + backdrop/sluier */
body.bb-public{ min-height: 100svh; display:flex; flex-direction:column; }
#bb-site-footer{ margin-top:auto; }

/* Achtergrond (achter de hele pagina) */
body.bb-public:not(.bb-front-lock) .bb-bos-honing-backdrop{
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1100px 360px at 50% 0%, rgb(0 0 0 / .16), transparent 70%),
    linear-gradient(to bottom,#dce9e2 0%,#cfe3d6 28%,#f3ede3 68%,#edd5a3 100%);
  background-repeat: no-repeat; background-size: cover; background-position: center top;
}

/* Dimlaag */
body.bb-public:not(.bb-front-lock) .bb-bijen-dimmer{
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom,
    rgb(0 0 0 / .14) 0%,
    rgb(0 0 0 / .10) 40%,
    rgb(0 0 0 / .06) 100%);
}

/* Header overal fixed */
body.bb-public .site-header,
body.bb-public .bb-site-header,
body.bb-public [data-bb="site-header"],
body.bb-front-lock .site-header,
body.bb-front-lock .bb-site-header,
body.bb-front-lock [data-bb="site-header"]{
  position: fixed; top: var(--bb-header-offset, 0px); left: 0; right: 0; z-index: 1000;
}

/* Gespiegelde sluier van de achtergrond (bovenste strook) */
body.bb-public:not(.bb-front-lock)::before{
  content:""; position: fixed; top:0; left:0; right:0;
  height: calc(var(--bb-header-offset, 0px) + var(--bb-safe-top-header, 64px));
  z-index: 900; pointer-events:none;
  background:
    radial-gradient(1100px 360px at 50% 0%, rgb(0 0 0 / .16), transparent 70%),
    linear-gradient(to bottom,#dce9e2 0%,#cfe3d6 28%,#f3ede3 68%,#edd5a3 100%);
  background-repeat:no-repeat; background-size:100% 100vh; background-position:center top;
}
body.bb-public:not(.bb-front-lock)::after{
  content:""; position: fixed; top:0; left:0; right:0;
  height: calc(var(--bb-header-offset, 0px) + var(--bb-safe-top-header, 64px));
  z-index: 901; pointer-events:none;
  background: linear-gradient(to bottom,
    rgb(0 0 0 / .14) 0%,
    rgb(0 0 0 / .10) 40%,
    rgb(0 0 0 / .06) 100%);
  background-repeat:no-repeat; background-size:100% 100vh; background-position:center top;
}

/* Frontpage: geen sluier */
body.bb-front-lock::before,
body.bb-front-lock::after{ content:none !important; }

/* Oude veil/spacer uitschakelen (markup mag blijven) */
.bb-header-veil, .bb-header-spacer{ display:none !important; }

/* 2) Glas-container (algemene content) */
main.bb-bijen{
  position:relative; z-index:2;
  width:1120px; max-width:calc(100% - 2 * clamp(16px,4vw,24px));
  margin: calc(var(--bb-header-offset, 0px) + var(--bb-safe-top-header, 64px)) auto 56px;
  padding:0 clamp(16px,4vw,24px) 120px;
  box-sizing:border-box; /* ← toegevoegd voor parity met bijen.css */

  color:#1a1a1a;
  border-radius:22px;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.14) 0%, rgba(255,255,255,.10) 55%, rgba(247,246,243,.78) 100%);
  -webkit-backdrop-filter: blur(8px) saturate(1.02);
  backdrop-filter: blur(8px) saturate(1.02);
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 40px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.06);
  background-clip: padding-box;
}
main.bb-bijen::before{
  content:""; position:absolute; left:10px; right:10px; top:8px; height:1px; border-radius:999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
}
main.bb-bijen h1{ margin:0 0 10px; font-size:clamp(26px,3vw,44px); font-weight:800; color:#1a1a1a; }

/* Content-ruimte onder de header + scroll-ankers */
body.bb-public main.bb-bijen :where(h1,h2,h3,h4,h5,h6){
  scroll-margin-top: calc(var(--bb-header-offset, 0px) + var(--bb-safe-top-header, 64px));
}

/* 3) Doneren – microcopy in header */
.bb-doneren header .bb-muted{ color:#000; opacity:1; }

/* 4) Doneren – privacy (vierkante vinkjes met groene check) */
.bb-doneren .bb-privacy{
  border:1px solid var(--bb-ghost-border-dark);
  background: linear-gradient(180deg, rgba(30,34,38,.08), rgba(30,34,38,.04)), #fff;
  border-radius:12px; padding:12px 12px 8px; margin-bottom:12px;
}
.bb-doneren .bb-privacy legend{
  font:700 16px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,Arial; margin-bottom:6px; color:#1a1a1a;
}
.bb-doneren .bb-privacy .opt{
  display:flex; align-items:flex-start; gap:10px; position:relative; margin:6px 0 10px;
}
.bb-doneren .bb-privacy .opt input[type="radio"]{
  position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;
}
.bb-doneren .bb-privacy .opt::before{
  content:"";
  flex:0 0 18px; width:18px; height:18px;
  border:2px solid var(--bb-ghost-border-dark-strong);
  border-radius:4px; background:#fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  margin-top:2px;
}
.bb-doneren .bb-privacy .opt:has(input:checked)::before{ border-color:#2e7d32; background:#eafff0; }
.bb-doneren .bb-privacy .opt:has(input:checked)::after{
  content:"✓"; position:absolute; left:3px; top:0;
  font:900 18px/18px system-ui,-apple-system,Segoe UI,Roboto,Arial; color:#2e7d32; transform: translateY(3px);
}
.bb-doneren .bb-privacy .opt:has(input:focus-visible)::before{ outline:2px solid #2e7d32; outline-offset:2px; }
bb-doneren .bb-privacy .opt .t{ display:block; font-weight:700; color:#1a1a1a; }
.bb-doneren .bb-privacy .opt .d{ display:block; font-size:14px; color:#1a1a1a; opacity:.9; margin-top:2px; }

/* 4b) Naam/e-mail velden */
.bb-doneren .bb-privacy-fields{ margin:8px 0 2px; }
.bb-doneren .bb-privacy-fields .row{ display:flex; gap:10px; align-items:center; margin:6px 0; }
.bb-doneren .bb-privacy-fields label{ min-width:64px; font-weight:700; }
.bb-doneren .bb-privacy-fields input[type="text"],
.bb-doneren .bb-privacy-fields input[type="email"]{
  flex:1 1 auto; width: clamp(220px, 40vw, 360px);
  background: linear-gradient(180deg, rgba(30,34,38,.05), rgba(30,34,38,.03)), #fff;
  border:1px solid var(--bb-ghost-border-dark); border-radius:999px;
  padding:10px 14px; font:600 16px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial; color:#1a1a1a;
}
.bb-doneren .bb-privacy-fields input:disabled{ opacity:.6; }

/* 5) Doneren – betaalwijze tabs */
.bb-doneren .bb-pay-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.bb-doneren .bb-pay-tabs .tab{
  appearance:none; cursor:pointer;
  border:1px solid var(--bb-ghost-border-dark);
  background:#ffffff; color:#1a1a1a;
  border-radius:999px; padding:8px 12px;
  font:700 14px/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  display:inline-flex; align-items:center; gap:8px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background-color .12s ease, color .12s ease;
}
.bb-doneren .bb-pay-tabs .tab:hover{
  transform: translateY(-2px) scale(1.02);
  background: linear-gradient(180deg, #fff5c6, #fde79b);
  border-color: #e0c26a;
  box-shadow: 0 10px 26px rgba(210,159,58,.24), inset 0 1px 0 rgba(255,255,255,.60);
}
.bb-doneren .bb-pay-tabs .tab.is-active{
  background: linear-gradient(180deg, #fff2c7, #fde7a0);
  border-color: #e0c26a; color:#2f2202;
  box-shadow: 0 8px 22px rgba(210,159,58,.24), inset 0 1px 0 rgba(255,255,255,.55);
}
.bb-doneren .bb-pay-tabs .tab:focus-visible{
  outline: 2px solid rgba(210,159,58,.45);
  outline-offset: 2px;
}
/* Logo’s in tabs */
.bb-doneren .bb-pay-tabs .tab::before{
  content:""; display:inline-block; flex:0 0 auto;
  height:16px; width:22px; background-repeat:no-repeat; background-position:center; background-size:contain;
}
.bb-doneren .bb-pay-tabs .tab[data-method="ideal"]::before{ width:22px; background-image:url("/assets/img/brand/iDEAL_logo.png"); }
.bb-doneren .bb-pay-tabs .tab[data-method="creditcard"]::before{ width:24px; background-image:url("/assets/img/brand/creditcard_logo.svg"); }
.bb-doneren .bb-pay-tabs .tab[data-method="googlepay"]::before{
  background-image:url("/assets/img/brand/googlepay_logo.svg");
  height:21px; width:39px;
}

/* 6) Doneren – vaste bedragen (pills) */
.bb-doneren .btn-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; margin-bottom:8px; }
.bb-doneren .amount-pill{
  display:inline-block; padding:10px 14px; border-radius:999px; cursor:pointer;
  background: linear-gradient(180deg, rgba(30,34,38,.04), rgba(30,34,38,.02)), #ffffff;
  border:1px solid var(--bb-ghost-border-dark); font-weight:700; text-decoration:none; user-select:none;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease;
  color:#000 !important; font-size:16px;
}
.bb-doneren .amount-pill:hover{
  transform: translateY(-2px) scale(1.02);
  background: linear-gradient(180deg, #fff5c6, #fde79b);
  border-color: #e0c26a;
  box-shadow: 0 10px 26px rgba(210,159,58,.24), inset 0 1px 0 rgba(255,255,255,.60);
}
.bb-doneren .amount-pill.is-selected{
  background: linear-gradient(180deg, #fff2c7, #fde7a0);
  border-color: #e0c26a; color:#2f2202 !important;
  box-shadow: 0 8px 22px rgba(210,159,58,.24), inset 0 1px 0 rgba(255,255,255,.55);
}
.bb-doneren .amount-pill[disabled]{ opacity:.5; pointer-events:none; transform:none !important; box-shadow:none !important; }

/* 7) Doneren – open bedrag + submitknop */
.bb-doneren .amount-input{
  height: 46px;
  width: clamp(260px, 42vw, 320px);
  background: linear-gradient(180deg, rgba(30,34,38,.05), rgba(30,34,38,.03)), rgba(255,255,255,.98);
  border:1px solid var(--bb-ghost-border-dark); border-radius:999px;
  padding:10px 14px; font:600 17px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial; color:#1a1a1a !important;
  transition:border-color .12s ease, box-shadow .12s ease;
  display:inline-block; vertical-align:middle; box-sizing:border-box; margin-top:6px; text-align:left;
}
.bb-doneren .amount-input:placeholder-shown{ text-align:center; }
.bb-doneren .amount-input::placeholder{ opacity:.65; }
.bb-doneren .amount-input:focus{ outline:none; border-color:var(--bb-ghost-border-dark-strong); box-shadow:0 0 0 2px rgba(0,0,0,.10) inset; }
.bb-doneren .amount-input:disabled{ opacity:.6; background:linear-gradient(180deg, rgba(30,34,38,.03), rgba(30,34,38,.02)), #f7f6f3; }

/* Betaalknop + methode-badge (iDEAL/CC/GPay) */
#bb-pay-btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:46px; width: clamp(260px, 42vw, 320px);
  box-sizing: border-box; white-space: nowrap; padding-left:16px; padding-right:16px;
}
#bb-pay-btn::before{
  content:""; display:inline-block; vertical-align:middle;
  width:26px; height:22px; margin-right:8px;
  background-repeat:no-repeat; background-position:center; background-size:contain;
}
#bb-pay-btn.is-method-ideal::before{ background-image:url("/assets/img/brand/iDEAL_logo.png"); }
#bb-pay-btn.is-method-card::before{ background-image:url("/assets/img/brand/creditcard_logo.svg"); }
#bb-pay-btn.is-method-gpay::before{ background-image:url("/assets/img/brand/googlepay_logo.svg"); width:48px; height:38px; }

/* 8) Kaarten (glas) + IBAN */
.bb-doneren .bb-card{
  position:relative;
  background: linear-gradient(180deg, rgba(30,34,38,.14), rgba(30,34,38,.10)), rgba(255,255,255,.97);
  border:1px solid rgba(0,0,0,.16);
  -webkit-backdrop-filter: blur(10px) saturate(1.02);
  backdrop-filter: blur(10px) saturate(1.02);
  border-radius:16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.10), inset 0 8px 28px rgba(255,255,255,.04);
  margin-bottom:14px;
}
.bb-doneren .bb-card-clip{ border-radius: inherit; overflow: hidden; padding: clamp(16px, 3.2vh, 28px); }
.bb-doneren .bb-card h2{ margin:0 0 12px; font: 700 22px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,Arial; }

/* IBAN-blok + copy-knop */
.bb-doneren .iban{
  display:inline-flex; align-items:center; white-space:nowrap;
  --iban-gap: 1.25ch; gap: var(--iban-gap);
  border:1px dashed rgba(0,0,0,.28);
  border-radius:12px;
  padding:6px 10px;
  background: linear-gradient(180deg, rgba(30,34,38,.08), rgba(30,34,38,.06)), rgba(255,255,255,.98);
  font:700 18px/1.2 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  letter-spacing:.06em;
  color:#000 !important;
}
.bb-doneren .iban .label,
.bb-doneren .iban .value{ font-weight:700; letter-spacing:.02em; line-height:1.2; }
.bb-doneren .iban .copy-btn{
  margin-left:0;
  border:1px dashed rgba(0,0,0,.28);
  border-radius:12px;
  padding:6px 10px;
  background:transparent;
  color:inherit;
  font:inherit;
  font-weight:500;
  line-height:1.2;
  box-shadow:none;
  transition: color .12s ease, border-color .12s ease;
}
.bb-doneren .iban .copy-btn:hover{
  color: var(--bb-accent);
  background: transparent;
  border-color: rgba(0,0,0,.45);
}
@media (max-width: 520px){
  .bb-doneren .iban{ flex-wrap: wrap; gap: .5rem; }
}

/* 9) Buttons 1..4 (Doneren gebruikt .bb-btn-4 voor #bb-pay-btn) */
.bb-btn-1, .bb-btn-2, .bb-btn-3, .bb-btn-4{
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
  border-radius:999px; padding:11px 18px; font-size:16px; font-weight:800; letter-spacing:.02em;
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.bb-btn-1{
  color:#f2f6f4;
  background: linear-gradient(180deg, #4b6156, #3d5148);
  -webkit-backdrop-filter: blur(2px) saturate(1.04);
  backdrop-filter: blur(2px) saturate(1.04);
  border:1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 6px 20px rgba(0,0,0,.20);
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.bb-btn-1:hover{ transform:translateY(-1px); background: linear-gradient(180deg, #577567, #475d53); border-color: rgba(255,255,255,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 26px rgba(0,0,0,.25); }
.bb-btn-1:focus-visible{ outline:2px solid rgba(255,255,255,.45); outline-offset:2px; }

bb-btn-2{
  color:#2f2202; background: linear-gradient(180deg, #f3cd6b, #e2b552);
  border:1px solid #d29f3a; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 24px rgba(210,159,58,.25);
}
.bb-btn-2:hover{ transform:translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 10px 28px rgba(210,159,58,.30); }
.bb-btn-2:focus-visible{ outline:2px solid rgba(210,159,58,.45); outline-offset:2px; }

.bb-btn-3{
  color:#fff8f5; background: linear-gradient(180deg, #c66e4e, #a85739);
  border:1px solid #8e4a2c; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 22px rgba(168,87,57,.28);
}
.bb-btn-3:hover{ transform:translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 10px 28px rgba(168,87,57,.34); }
.bb-btn-3:focus-visible{ outline:2px solid rgba(198,110,78,.45); outline-offset:2px; }

.bb-btn-4{
  color:#403828; background: linear-gradient(180deg, #efe8db, #e6dcc9);
  border:1px solid #d8cdb7; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 22px rgba(0,0,0,.10);
}
.bb-btn-4:hover{ transform:translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 10px 26px rgba(0,0,0,.12); }
.bb-btn-4:focus-visible{ outline:2px solid rgba(216,205,183,.6); outline-offset:2px; }

/* 10) Helpers */
.sr-only{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* iDEAL microcopy – subtieler typografisch accent */
.bb-pay-microcopy{
  margin-top:6px;
  font-size:12.5px;
  line-height:1.35;
  font-style:italic;
  letter-spacing:.005em;
  color:inherit;
  opacity:.78;
}

/* Als je na kopiëren visuele feedback op de knop wilt behouden */
.bb-doneren-page .iban .copy-btn.is-copied{
  border-color:#2e7d32;
  color:#2e7d32;
}
/* Open bedrag – zachte inleg */
.amount-input{
  /* maat & typografie */
  min-width: 220px;
  padding: 10px 12px;
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.amount-input::-webkit-outer-spin-button,
.amount-input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }

/* “glas”-achtige inleg zonder te schreeuwen */
.amount-input{
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.75)),
    radial-gradient(60% 80% at 30% 20%, rgba(255,255,255,.35), transparent 60%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -1px 0 rgba(0,0,0,.05),
    0 1px 2px rgba(0,0,0,.05);
  color: #1a1a1a;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

/* Placeholder – rustig en elegant */
.amount-input::placeholder{
  color: #6b7280;
  opacity: .85;
  font-style: italic;
  letter-spacing: .01em;
}

/* Focusstijl – nette ring */
.amount-input:focus{
  outline: none;
  border-color: rgba(33,150,243,.55);
  box-shadow:
    0 0 0 3px rgba(33,150,243,.15),
    inset 0 1px 0 rgba(255,255,255,.65);
}

/* Disabled staat – zichtbaar maar niet schreeuwerig */
.amount-input:disabled{
  background: linear-gradient(135deg, rgba(245,245,245,.9), rgba(245,245,245,.7));
  color: #6b7280;
  border-color: rgba(0,0,0,.08);
  cursor: not-allowed;
}

/* Hint-tekst naast het veld */
.bb-help{
  font-size: 12.5px;
  opacity: .78;
  padding: 2px 8px;
  border-radius: 8px;
  border: 1px dashed rgba(0,0,0,.12);
  background: rgba(255,255,255,.55);
}

/* Optioneel: kleine state wanneer een preset-pill is gekozen */
.amount-pill.is-selected{
  outline: 2px solid rgba(33,150,243,.35);
  outline-offset: 2px;
}