/* Donatieformulier (CF form 2) - eigen-bedrag pill. Beheerd buiten de Convert Forms-builder zodat builder-saves dit niet terugzetten. Alle regels gescoped op #cf_2 (id) zodat ze winnen ongeacht de laadvolgorde van de stylesheets. */

/* Bedrag-pills */
#cf_2 .cf-amount-pills .cf-list { display: flex; gap: 12px; flex-wrap: wrap; }
#cf_2 .cf-amount-pills .cf-radio-group { flex: 1 1 calc(33.333% - 12px); min-width: 150px; position: relative; margin: 0; }
#cf_2 .cf-amount-pills input[type=radio] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
#cf_2 .cf-amount-pills .cf-label { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; width: 100%; box-sizing: border-box; margin: 0; padding: 16px 18px; background: #fff; border: 2px solid #e2e8f0; border-radius: 18px; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
#cf_2 .cf-amount-pills .cf-radio-group:hover .cf-label { border-color: #94a3b8; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(15, 23, 42, .08); }
#cf_2 .cf-amount-pills input[type=radio]:checked + .cf-label { border-color: #2563eb; background: #eff6ff; box-shadow: 0 4px 14px rgba(37, 99, 235, .15); }
#cf_2 .cf-amount-pills input[type=radio]:focus-visible + .cf-label { outline: 2px solid #2563eb; outline-offset: 2px; }
#cf_2 .cf-amount-pills .pill-amount { display: block; font-size: 22px; font-weight: 700; color: #0f172a; line-height: 1.2; }
#cf_2 .cf-amount-pills input[type=radio]:checked + .cf-label .pill-amount { color: #2563eb; }
#cf_2 .cf-amount-pills .pill-title { display: block; font-size: 14px; font-weight: 600; color: #334155; }
#cf_2 .cf-amount-pills .pill-desc { display: block; font-size: 12.5px; color: #64748b; line-height: 1.35; }

/* Eigen bedrag: invoerveld wordt via JS IN de pill geplaatst -> een doorlopend vak */
#cf_2 .cf-amount-pills .cf-radio-group:last-child { flex: 1 1 100%; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
#cf_2 .cf-amount-pills input[value="eigen"]:checked + .cf-label { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; padding-bottom: 12px; box-shadow: none; }
#cf_2 .cf-amount-pills input[value="eigen"]:focus-visible + .cf-label { outline: none; }
#cf_2 .cf-eigen-bedrag.cf-control-group { margin: -2px 0 0; padding: 0; position: relative; z-index: 2; }
#cf_2 .cf-eigen-bedrag .cf-control-label { display: none; }
#cf_2 .cf-eigen-bedrag .cf-control-input { gap: 6px; }
#cf_2 .cf-eigen-bedrag .cf-input { width: 100%; box-sizing: border-box; font-size: 22px; font-weight: 700; color: #2563eb; text-align: center; padding: 8px 18px 16px; margin: 0; background: #eff6ff; border: 2px solid #2563eb; border-top: 0; border-radius: 0 0 18px 18px; box-shadow: none; }
#cf_2 .cf-eigen-bedrag .cf-input::placeholder { color: #93b4f5; font-weight: 600; }
#cf_2 .cf-eigen-bedrag .cf-input:focus, #cf_2 .cf-eigen-bedrag .cf-input:invalid:focus { border: 2px solid #2563eb; border-top: 0; color: #2563eb; box-shadow: none; outline: none; }
#cf_2 .cf-eigen-bedrag .cf-control-input-desc { text-align: center; font-size: 12.5px; color: #64748b; padding: 8px 8px 4px; }

/* Nieuwsbrief */
#cf_2 .cf-newsletter .cf-label { font-weight: 400; color: #475569; }

/* Heading */
#cf_2 .cf-heading h2, #cf_2 h2 { margin: 0 0 4px; color: #0f172a; }