/*
 * Payments engine — checkout-form.css  (maker: HappyHealthy B.V.)
 * Floating-label velden + client-side validatie (zie checkout-form.js).
 * Outlined-notch stijl: rust = placeholder verticaal gecentreerd; focus/ingevuld
 * = label springt op de bovenrand (notch). Theme-agnostisch via --cf-* (fallbacks).
 *
 * Markup:
 *   <div class="cf-field">
 *     <input ... placeholder=" " data-required data-msg-required="..." [data-msg-invalid="..."]>
 *     <label for="...">Veldnaam</label>
 *     <span class="cf-check" aria-hidden="true">✓</span>
 *     <span class="cf-msg" aria-live="polite"></span>
 *   </div>
 */
.cf-field{position:relative;margin:0 0 16px;}
.cf-field > input{
    width:100%;
    height:54px;
    padding:0 40px 0 15px;                  /* geen verticale padding -> tekst verticaal gecentreerd */
    border:1.5px solid var(--cf-border, #cfd6de);
    border-radius:12px;
    font-size:1.05rem;
    font-family:inherit;
    color:#1f2a37;
    background:#fff;
    transition:border-color .15s ease, box-shadow .15s ease;
}
.cf-field > input::placeholder{color:transparent;}          /* placeholder=" " onzichtbaar */
.cf-field > input:focus{outline:none;border-color:var(--cf-focus, #2D5A47);box-shadow:0 0 0 1px var(--cf-focus, #2D5A47);}
/* rust: verticaal gecentreerd, lijkt op een placeholder */
.cf-field > label{
    position:absolute;left:11px;top:27px;transform:translateY(-50%);   /* 27px = midden van het 54px veld; vast, dus de melding eronder verschuift het label niet */
    color:#9aa3ad;font-size:1.05rem;font-weight:400;line-height:1;
    padding:0 4px;background:transparent;
    pointer-events:none;transition:top .15s ease, font-size .15s ease, color .15s ease;
}
/* floating: op de bovenrand (notch — achtergrond doorsnijdt de border) */
.cf-field > input:focus + label,
.cf-field > input:not(:placeholder-shown) + label{
    top:0;font-size:.74rem;font-weight:600;color:var(--cf-focus, #2D5A47);
    background:var(--cf-bg, #fff);
}
/* geldig: groene rand + ✓ + groen label */
.cf-field.cf-valid > input{border-color:var(--cf-ok, #2e9e5b);}
.cf-field.cf-valid > input:focus{box-shadow:0 0 0 1px var(--cf-ok, #2e9e5b);}
.cf-field.cf-valid > input + label{color:var(--cf-ok, #2e9e5b);}
.cf-field .cf-check{
    position:absolute;right:14px;top:27px;transform:translateY(-50%);
    color:var(--cf-ok, #2e9e5b);font-size:1.05rem;line-height:1;opacity:0;transition:opacity .15s;
}
.cf-field.cf-valid .cf-check{opacity:1;}
/* ongeldig: rode rand + rood label + melding eronder */
.cf-field.cf-invalid > input{border-color:var(--cf-err, #d84a3c);}
.cf-field.cf-invalid > input:focus{box-shadow:0 0 0 1px var(--cf-err, #d84a3c);}
.cf-field.cf-invalid > input + label{color:var(--cf-err, #d84a3c);}
.cf-field .cf-msg{display:none;color:var(--cf-err, #d84a3c);font-size:.86rem;margin:6px 2px 0;line-height:1.35;}
.cf-field.cf-invalid .cf-msg{display:block;}
/* AV/checkbox-melding (los element onder de voorwaarden) */
.cf-terms-msg{display:none;color:var(--cf-err, #d84a3c);font-size:.86rem;margin:6px 0 0;line-height:1.35;}
.cf-terms-msg.cf-show{display:block;}
/* Laad-/verzendstatus van de betaalknop (zie checkout-form.js: setLoading).
   Spinner in de tekstkleur (currentColor) -> werkt op elke knop-achtergrond. */
.cf-loading{pointer-events:none;cursor:progress;}
.cf-loading .cf-loading-text{vertical-align:middle;}
.cf-spin{
    display:inline-block;width:1em;height:1em;margin-right:.55em;vertical-align:-.15em;
    border:2px solid currentColor;border-top-color:transparent;border-radius:50%;
    animation:cf-spin .6s linear infinite;
}
@keyframes cf-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){ .cf-spin{animation-duration:1.4s;} }