/* ============================================================
   CHA CHI VERSACI — de doneerkeuze

   Het formulier laat kiezen tussen eenmalig en maandelijks. Dat
   onderscheid bepaalt of er één keer wordt afgeschreven of elke
   maand opnieuw, dus het moet je niet kunnen ontgaan.

   Twee radioknopjes onder elkaar deden dat niet. Hier worden het
   twee kaarten naast elkaar, en de rest van het formulier zegt
   erbij wat de keuze betekent: "per maand" achter het totaal en
   een knop die "Start maandelijkse donatie" heet.

   De keuze zelf blijft een gewone Gravity Forms-radio. Dit is
   opmaak eromheen - de betaalfeed leest het veld, niet deze CSS.
   Kleuren komen uit ccv-tokens.css.
   ============================================================ */

/* ---------- de twee kaarten ---------- */

/* Gravity Forms zet het keuzeveld in een <fieldset>. Het orbital-thema van
   de plugin haalt de rand en de inspringing van de browser er zelf af, maar
   dat is hun opmaak - draait die ooit niet mee, dan staat er ineens een
   grijs kader om de twee kaarten. Vandaar deze regel: hij kost niets en
   maakt de kaarten onafhankelijk van welk formulierthema er aanstaat. */
fieldset.ccv-doneerkeuze{
  border:0;margin:0;padding:0;min-inline-size:0;
}
.ccv-doneerkeuze > .gfield_label{padding:0}

/* De `fieldset` ervoor staat er niet voor de sier. Gravity Forms zet zelf
   twee kaarten onder elkaar:

     .gform-theme--framework .gfield--type-choice .gfield_radio
       {display:flex;flex-direction:column}

   Dat zijn drie klassen, en deze regel zonder `fieldset` was dat ook. Bij
   gelijk gewicht wint wie het laatst is ingeladen, en dat is de plugin -
   gravity-forms-theme-framework.min.css komt tien stylesheets na deze.
   Vandaar dat de twee kaarten onder elkaar bleven staan terwijl hier
   `1fr 1fr` stond: de regel klopte, hij verloor alleen.

   Het element erbij maakt er drie klassen plus een element van, en dat
   wint ongeacht de volgorde. Het alternatief - meeliften op
   .gform-theme--framework - zou breken zodra iemand een ander
   formulierthema aanzet; dit blijft staan. */
fieldset.ccv-doneerkeuze .ginput_container_radio > .gfield_radio{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
}
@media (max-width:520px){
  fieldset.ccv-doneerkeuze .ginput_container_radio > .gfield_radio{grid-template-columns:1fr}
}

.ccv-doneerkeuze .gchoice{
  position:relative;margin:0;
}

/* De radio zelf blijft staan voor toetsenbord en schermlezer, maar
   valt samen met de kaart eromheen. display:none zou hem uit de
   tabvolgorde halen. */
.ccv-doneerkeuze .gchoice input[type=radio]{
  position:absolute;inset:0;width:100%;height:100%;margin:0;
  opacity:0;cursor:pointer;z-index:2;
}

.ccv-doneerkeuze .gchoice label{
  display:block;margin:0;cursor:pointer;
  background:var(--card);
  border:2px solid var(--border);
  border-radius:var(--r-md);
  padding:16px 18px 16px 46px;
  font-family:'Fredoka',sans-serif;font-size:16px;font-weight:600;
  color:var(--ink);line-height:1.3;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.ccv-doneerkeuze .gchoice label::before{
  content:'';position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;border-radius:50%;
  border:2px solid var(--border);background:var(--card);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.ccv-doneerkeuze .gchoice label::after{
  content:'';position:absolute;left:22px;top:50%;transform:translateY(-50%) scale(0);
  width:8px;height:8px;border-radius:50%;background:var(--accent-deep);
  transition:transform .2s cubic-bezier(.2,.9,.3,1.6);
}

/* De regel onder de titel ("één keer" / "elke maand, opzegbaar")
   wordt door ccv-doneren.js toegevoegd. */
.ccv-doneerkeuze .gchoice label .ccv-keuze-uitleg{
  display:block;margin-top:3px;
  font-family:'Nunito',sans-serif;font-size:13px;font-weight:400;
  color:var(--muted);letter-spacing:0;text-transform:none;
}

.ccv-doneerkeuze .gchoice input[type=radio]:hover + label{
  border-color:var(--accent);transform:translateY(-2px);
}
.ccv-doneerkeuze .gchoice input[type=radio]:checked + label{
  border-color:var(--accent);
  box-shadow:var(--glow-accent);
}
.ccv-doneerkeuze .gchoice input[type=radio]:checked + label::before{
  border-color:var(--accent-deep);
}
.ccv-doneerkeuze .gchoice input[type=radio]:checked + label::after{
  transform:translateY(-50%) scale(1);
}
/* Zichtbare focus, want de radio zelf is doorzichtig. */
.ccv-doneerkeuze .gchoice input[type=radio]:focus-visible + label{
  outline:3px solid var(--pop);outline-offset:2px;
}

/* ---------- "per maand" achter het bedrag en het totaal ---------- */

/* Losse elementen, door ccv-doneren.js gezet. Ze staan er altijd;
   alleen bij de maandelijkse keuze zijn ze zichtbaar. Zo hoeft er
   geen tekst herschreven te worden die Gravity Forms zelf beheert. */
.ccv-doneer-per{
  display:none;
  font-family:'Nunito',sans-serif;font-weight:700;
  color:var(--accent-deep);
}
.gform_wrapper[data-ccv-doneerwijze='maandelijks'] .ccv-doneer-per{
  display:inline;
}

/* De samenvatting onder de keuze: wat er gaat gebeuren, in één zin. */
.ccv-doneer-samenvatting{
  margin:14px 0 0;padding:12px 16px;
  border-radius:var(--r-md);
  background:var(--pill);
  border:1px solid var(--border);
  font-family:'Nunito',sans-serif;font-size:14px;line-height:1.5;
  color:var(--text);
}
.ccv-doneer-samenvatting strong{color:var(--accent-deep);font-weight:800}
.ccv-doneer-samenvatting .fa-solid{margin-right:8px;color:var(--accent-deep)}