/* ====================================
   PAYTIUM DONATIEFORMULIER — GEÏNTEGREERDE DONATIEKAART
   Koppelt de bestaande Food2Grow donatie-UI aan Paytium en laat de
   keuze-UI (frequentie/bedrag) en het Paytium-formulier ogen als ÉÉN
   geheel: de donatiekaart (.donation-module-card). Alle regels hieronder
   zijn bewust genest onder .donation-module-section, .donation-module-card,
   .f2g-paytium-forms of .f2g-paytium-form, zodat Paytium-formulieren
   elders op de site (bv. losse betaalpagina's) hier niet door geraakt
   worden.
   ==================================== */

/* ------------------------------------
   1. De donatiekaart (frequentie, bedragen, disclaimer, Paytium-form)
   ------------------------------------ */
.donation-module-section .donation-module-card {
    max-width: 660px;
    width: min(100%, 660px);
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    background: #fff;
    border: 1px solid rgba(39, 125, 73, 0.16);
    border-radius: 24px;
    box-shadow: 0 18px 45px rgba(30, 80, 48, 0.08);
    text-align: center;
    overflow-wrap: break-word;
}

/* Bestaande tabs/bedragen/disclaimer krijgen iets rustigere spacing nu ze
   binnen de smallere kaart staan, zonder hun eigen classes/gedrag te wijzigen. */
.donation-module-card .donation-frequency-tabs {
    margin: 0 auto 1.5rem;
}

.donation-module-card .donation-amounts {
    max-width: 100%;
    margin: 0 auto 1rem;
}

.donation-module-card .donation-disclaimer {
    max-width: 100%;
    margin: 0 auto 0.25rem;
}

/* Technische wrapper: mag blijven bestaan, maar toont zich niet meer als
   een los blok — hij "verdwijnt" visueel in de kaart. */
.donation-module-section .donation-module-card .donation-plugin-placeholder-block {
    margin-top: 1.25rem;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* ------------------------------------
   2. Paytium-formulieren container
   ------------------------------------ */
.donation-module-card .f2g-paytium-forms {
    max-width: 100%;
    margin-top: 1.25rem;
    text-align: left;
}

.f2g-paytium-form[hidden] {
    display: none !important;
}

.f2g-paytium-intro {
    text-align: center;
    color: var(--text-medium);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0 0 1rem;
}

/* Subtiele bevestigingsregel ("Jouw keuze: maandelijks €25") — geen titel
   van een nieuw blok, maar een klein label dat bij de keuze hierboven hoort. */
.f2g-selected-donation-summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    padding: 0.35rem 0.9rem;
    background: rgba(46, 139, 87, 0.08);
    border-radius: 999px;
    color: var(--primary-green);
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
}

.f2g-paytium-form {
    text-align: left;
}

.f2g-paytium-unavailable {
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.f2g-paytium-unavailable p {
    text-align: center;
    color: var(--text-medium);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

/* Klein, gedempt hulptekstje binnen het formulier (bv. uitleg bij
   maandelijkse incasso). Wordt gezet via class="f2g-paytium-note" op het
   betreffende [paytium_field type="label" ... /]. */
.f2g-paytium-form .f2g-paytium-note,
.f2g-paytium-form .f2g-paytium-note label {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-medium);
    line-height: 1.5;
}

/* ------------------------------------
   3. Paytium-form zelf: geen los "kaartje" meer, gewoon onderdeel van
      de donatiekaart hierboven.
   ------------------------------------ */
.f2g-paytium-form,
.f2g-paytium-form form,
.f2g-paytium-form .paytium-form,
.f2g-paytium-form .pt-form,
.f2g-paytium-form .pt-checkout-form {
    width: 100%;
    max-width: 100%;
    background: transparent;
    border: 0;
    padding: 0;
    box-shadow: none;
}

.f2g-paytium-form .pt-form-group {
    display: block;
    width: 100%;
    margin: 0;
}

.f2g-paytium-form > * + *,
.f2g-paytium-form form > * + *,
.f2g-paytium-form .pt-checkout-form > * + *,
.f2g-paytium-form .pt-form-group + .pt-form-group {
    margin-top: 0.9rem;
}

/* ------------------------------------
   4. Labels
   ------------------------------------ */
.f2g-paytium-form label,
.f2g-paytium-form .pt-form-group label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-dark);
}

/* ------------------------------------
   5. Velden: rustig, breed en modern
   ------------------------------------ */
.f2g-paytium-form input[type="text"],
.f2g-paytium-form input[type="email"],
.f2g-paytium-form input[type="number"],
.f2g-paytium-form input[type="tel"],
.f2g-paytium-form input[type="url"],
.f2g-paytium-form input[type="date"],
.f2g-paytium-form select,
.f2g-paytium-form textarea,
.f2g-paytium-form .pt-uea-container input[type="text"] {
    width: 100%;
    max-width: 100%;
    border: 1px solid rgba(39, 125, 73, 0.25);
    border-radius: 12px;
    padding: 0.75rem 0.9rem;
    font: inherit;
    font-size: 0.95rem;
    color: var(--text-dark);
    background: #fff;
    box-shadow: none;
}

.f2g-paytium-form input[type="text"]:focus,
.f2g-paytium-form input[type="email"]:focus,
.f2g-paytium-form input[type="number"]:focus,
.f2g-paytium-form input[type="tel"]:focus,
.f2g-paytium-form input[type="url"]:focus,
.f2g-paytium-form input[type="date"]:focus,
.f2g-paytium-form select:focus,
.f2g-paytium-form textarea:focus {
    outline: none;
    border-color: var(--primary-green);
    box-shadow: 0 0 0 3px rgba(46, 139, 87, 0.14);
}

/* Eigen bedrag (open veld): euro-teken en input netjes op één lijn */
.f2g-paytium-form .pt-uea-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ------------------------------------
   6. Checkboxes / radio's / voorwaarden — netjes inline, geen popup-gevoel
   ------------------------------------ */
.f2g-paytium-form input[type="checkbox"],
.f2g-paytium-form input[type="radio"] {
    width: auto;
    flex-shrink: 0;
    margin: 0.15rem 0 0;
    accent-color: var(--primary-green);
    vertical-align: middle;
}

.f2g-paytium-form .pt-radio-group {
    margin: 0;
}

/* Voorwaarden-/checkbox-regel: checkbox links, tekst rechts en goed leesbaar
   (niet samengedrukt), ook nu de kaart breder is. Werkt zowel voor labels die
   de checkbox zelf bevatten als voor een checkbox direct gevolgd door tekst. */
.f2g-paytium-form label:has(input[type="checkbox"]),
.f2g-paytium-form .pt-form-group:has(> input[type="checkbox"]) {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    text-align: left;
    font-weight: 400;
    line-height: 1.55;
}

.f2g-paytium-form label:has(input[type="checkbox"]) {
    font-size: 0.9rem;
    color: var(--text-dark);
}

/* Voorwaarden-veld: checkbox staat inline vóór de tekst, link in het groen */
.f2g-paytium-form .pt-form-group label a,
.f2g-paytium-form a {
    color: var(--primary-green);
    font-weight: 600;
    text-decoration: underline;
}

.f2g-paytium-form .pt-form-group label a:hover,
.f2g-paytium-form a:hover {
    color: var(--primary-green-dark);
}

/* ------------------------------------
   7. Totaalregel: subtiel, geen los blok
   ------------------------------------ */
.f2g-paytium-form .pt-total {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.6rem 0;
    border-top: 1px solid rgba(39, 125, 73, 0.16);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dark);
    background: transparent;
    box-shadow: none;
    text-align: left;
}

/* ------------------------------------
   8. Betaalknop — dezelfde groene CTA-stijl als de rest van Food2Grow
   ------------------------------------ */
.f2g-paytium-form button,
.f2g-paytium-form input[type="submit"],
.f2g-paytium-form .button,
.f2g-paytium-form .paytium-button,
.f2g-paytium-form .pt-button,
.f2g-paytium-form .pt-payment-btn,
.f2g-paytium-form .pt-checkout-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    margin-top: 0.5rem;
    padding: 0.85rem 1.5rem;
    border: 0;
    border-radius: 999px;
    background: var(--primary-green);
    color: var(--white);
    font-weight: 700;
    font-size: 1rem;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.f2g-paytium-form button:hover,
.f2g-paytium-form input[type="submit"]:hover,
.f2g-paytium-form .button:hover,
.f2g-paytium-form .paytium-button:hover,
.f2g-paytium-form .pt-button:hover,
.f2g-paytium-form .pt-payment-btn:hover,
.f2g-paytium-form .pt-checkout-form button:hover {
    background: var(--primary-green-dark);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(46, 139, 87, 0.22);
}

.f2g-paytium-form p,
.f2g-paytium-form div {
    max-width: 100%;
}

/* ------------------------------------
   9. "Volgende"-knop en uitklapbare Paytium-stap
   Stap 1 (keuze + Volgende) en stap 2 (Paytium-formulier) blijven visueel
   één kaart. Het Paytium-formulier is standaard verborgen (zie [hidden] op
   .donation-plugin-placeholder-block in de templates) en klapt pas open na
   een klik op "Volgende" — zie assets/js/global.js.
   ------------------------------------ */
.donation-next-step-hint {
    text-align: center;
    color: var(--text-medium);
    font-size: 0.85rem;
    line-height: 1.6;
    margin: 0.75rem auto 0;
    max-width: 100%;
}

.donation-next-step {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-top: 1rem;
    padding: 0.85rem 1.5rem;
    border: 0;
    border-radius: 999px;
    background: var(--primary-green);
    color: var(--white);
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.donation-next-step:hover {
    background: var(--primary-green-dark);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(46, 139, 87, 0.22);
}

.donation-next-step:focus-visible {
    outline: 3px solid rgba(46, 139, 87, 0.35);
    outline-offset: 2px;
}

.donation-module-section.is-form-open .donation-next-step {
    background: var(--primary-green-dark);
}

/* Wrapper zelf blijft technisch, geen eigen kaartstijl. Verborgen via
   [hidden] (display:none) totdat het formulier is opengeklapt; daarna een
   iets ruimere marge zodat het als vervolg van de kaart oogt, geen los
   blok. Overschrijft bewust de marge uit sectie 1 hierboven zodra de
   module .is-form-open heeft (zelfde specificiteit, latere regel wint). */
.donation-module-card .donation-plugin-placeholder-block[hidden] {
    display: none;
}

.donation-module-section.is-form-open .donation-plugin-placeholder-block {
    margin-top: 1.5rem;
}

/* ------------------------------------
   10. Food2Grow statusmodal — Paytium/Mollie-terugkeerpagina
   Vervangt de ruwe Paytium-statustekst (open/pending/paid/mislukt/
   verlopen/geannuleerd) door een rustige, herkenbare Food2Grow-modal:
   wit, afgeronde hoeken, groene accenten, subtiele overlay. Wordt
   aangemaakt/geüpdatet door showDonationStatusModal() in
   assets/js/global.js. Geen externe libraries, puur CSS.
   ------------------------------------ */
.f2g-donation-status-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10050;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.f2g-donation-status-modal.is-visible {
    display: flex;
}

.f2g-donation-status-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 40, 28, 0.35);
}

.f2g-donation-status-modal__panel {
    position: relative;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    padding: 2rem;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 25px 60px rgba(20, 40, 28, 0.25);
    text-align: center;
}

.f2g-donation-status-modal__spinner {
    width: 44px;
    height: 44px;
    margin: 0 auto 1.25rem;
    border: 4px solid rgba(46, 139, 87, 0.18);
    border-top-color: var(--primary-green);
    border-radius: 50%;
    animation: f2gDonationSpin 0.8s linear infinite;
}

@keyframes f2gDonationSpin {
    to {
        transform: rotate(360deg);
    }
}

.f2g-donation-status-modal__title {
    margin: 0 0 0.75rem;
    color: var(--text-dark);
    font-size: 1.25rem;
}

.f2g-donation-status-modal__text {
    margin: 0 0 0.5rem;
    color: var(--text-medium);
    font-size: 0.95rem;
    line-height: 1.6;
}

.f2g-donation-status-modal__small {
    margin: 0.5rem 0 0;
    color: var(--text-light);
    font-size: 0.85rem;
    min-height: 1.2em;
}

/* Live aftellende tekst ("Opnieuw controleren over 5 seconden..."). Losse
   regel van __small, zodat een vaste ondertekst én de countdown tegelijk
   getoond kunnen worden (zie showDonationStatusModal() in global.js). */
.f2g-donation-status-modal__countdown {
    margin: 0.35rem 0 0;
    color: var(--primary-green-dark);
    font-size: 0.85rem;
    font-weight: 600;
    min-height: 1.2em;
}

.f2g-donation-status-modal__actions {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.f2g-donation-status-modal__actions:empty {
    margin-top: 0;
}

/* Handmatige "Controleer nu opnieuw"-link en overige extra links (bv.
   "Terug naar steunpagina"): bewust een subtiele tekstlink, GEEN knop. */
.f2g-donation-status-modal__refresh-link {
    display: inline-block;
    margin-top: .75rem;
    color: var(--primary-green);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.f2g-donation-status-modal__refresh-link:hover,
.f2g-donation-status-modal__refresh-link:focus-visible {
    color: var(--primary-green-dark);
}

.f2g-donation-status-modal__refresh-link:focus-visible {
    outline: 3px solid rgba(46, 139, 87, 0.35);
    outline-offset: 3px;
}

/* Voorkomt dat de achtergrond meescrolt terwijl de modal open staat. */
body.has-donation-status-modal {
    overflow: hidden;
}

/* Verberg de ruwe Paytium-statustekst zodra de nette modal actief is. De
   inhoud blijft tot dat moment beschikbaar voor JS-detectie (zie
   getPaytiumStatusFromPage() in assets/js/global.js): eerst wordt de
   status gelezen, pas daarna voegt showDonationStatusModal() deze
   body-class toe. */
body.has-donation-status-modal #pt-payment-details {
    display: none;
}

body.has-donation-status-modal .donation-plugin-placeholder-block {
    visibility: hidden;
}

@media (max-width: 480px) {
    .f2g-donation-status-modal__panel {
        padding: 1.5rem;
        border-radius: 20px;
    }
}

@media (max-width: 900px) {
    .donation-module-section .donation-module-card {
        width: min(100%, 640px);
    }
}

@media (max-width: 480px) {
    .donation-module-section .donation-module-card {
        padding: clamp(1.25rem, 6vw, 1.75rem);
        border-radius: 20px;
    }
}