/* Gedeelde componenten (.vr-*) — bouwstenen uit docs/merk.md p.8. */

.vr-container {
    max-width: 1080px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

/* Knoppen: volledig ronde pillen; groen primair, outline secundair, koraal voor actie */
.vr-knop {
    display: inline-block;
    font-family: var(--vr-font-tekst);
    font-weight: 600;
    font-size: var(--vr-fs-body);
    padding: 0.75rem 1.6rem;
    border-radius: var(--vr-radius-pil);
    border: 2px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s var(--vr-ease), background-color 0.15s;
}
.vr-knop:hover { transform: translateY(-1px); }
.vr-knop--primair { background: var(--vr-groen); color: var(--vr-wit); }
.vr-knop--primair:hover { background: var(--vr-groen-donker); }
.vr-knop--outline { border-color: var(--vr-groen); color: var(--vr-groen-donker); background: transparent; }
.vr-knop--outline:hover { background: var(--vr-mint); }
.vr-knop--koraal { background: var(--vr-koraal); color: var(--vr-wit); }
.vr-knop--koraal:hover { background: var(--vr-koraal-donker); }
.vr-knop--klein { padding: 0.5rem 1.1rem; font-size: var(--vr-fs-klein); }
/* Laadstatus (progressive enhancement, vr-ui.js): spinner + geen dubbelklik bij verzenden. */
.vr-knop.is-bezig { pointer-events: none; opacity: 0.9; }
.vr-knop.is-bezig::after {
    content: ""; display: inline-block; width: 0.85em; height: 0.85em; margin-left: 0.5em; vertical-align: -0.12em;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: vr-spin 0.6s linear infinite;
}
@keyframes vr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vr-knop.is-bezig::after { animation-duration: 1.6s; } }

/* Kaarten: flinke ronding, zachte rand, nooit zware schaduw */
.vr-kaart {
    background: var(--vr-wit);
    border: 1px solid var(--vr-lijn);
    border-radius: var(--vr-radius-kaart);
    box-shadow: var(--vr-schaduw-kaart);
    padding: 1.5rem;
}
.vr-kaart--mint { background: var(--vr-mint); border-color: transparent; }
.vr-kaart--perzik { background: var(--vr-perzik); border-color: transparent; }
.vr-kaart--zonlicht { background: var(--vr-zonlicht); border-color: transparent; }

/* Ronde tags/labels in zachte tinten */
.vr-tag {
    display: inline-block;
    font-size: var(--vr-fs-klein);
    font-weight: 600;
    padding: 0.3rem 0.9rem;
    border-radius: var(--vr-radius-pil);
    background: var(--vr-mint);
    color: var(--vr-groen-donker);
}
.vr-tag--perzik { background: var(--vr-perzik); color: var(--vr-koraal-donker); }
.vr-tag--zon { background: var(--vr-zonlicht); color: #9A6B00; }
.vr-tag--mint { background: var(--vr-mint); color: var(--vr-groen-donker, #0e8a52); }
.vr-tag--groen { background: var(--vr-groen-donker, #0e8a52); color: #fff; }

/* Kantelende sticker met dikke rand (spaarzaam!) */
.vr-sticker {
    display: inline-block;
    font-family: var(--vr-font-kop);
    font-weight: 700;
    background: var(--vr-zon);
    border: 3px solid var(--vr-ink);
    border-radius: 12px;
    padding: 0.35rem 1rem;
    transform: rotate(5deg);
}

/* Signatuur: gestippelde scheiding tussen secties */
.vr-scheiding { border: 0; border-top: 2px dashed var(--vr-lijn); margin: 0; }

/* Handgetekende koraal onderstreping onder één sleutelwoord (SVG-krul als data-URI) */
.vr-onderstreept {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 30 3, 60 11, 117 5' fill='none' stroke='%23FF6B4A' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 0.32em;
    padding-bottom: 0.18em;
}

/* Logo: twee pratende tekstballonnen + wordmark met koraal punt */
.vr-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--vr-font-kop);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--vr-ink);
    text-decoration: none;
}
.vr-logo__merkteken { position: relative; width: 34px; height: 28px; flex: none; }
.vr-logo__merkteken::before {
    content: "";
    position: absolute; left: 0; top: 0;
    width: 24px; height: 18px;
    border-radius: 9px 9px 9px 2px;
    background: var(--vr-groen);
}
.vr-logo__merkteken::after {
    content: "";
    position: absolute; right: 0; bottom: 0;
    width: 18px; height: 14px;
    border-radius: 7px 7px 2px 7px;
    background: var(--vr-koraal);
}
.vr-logo__punt { color: var(--vr-koraal); }
/* Eigen SVG-logo in de header (volledig woordmerk). Hoogte bepaalt de grootte; breedte schaalt mee
   via de vaste verhouding (viewBox 420.64 × 99.26), robuust ook als de SVG geen intrinsieke breedte geeft. */
.vr-logo__beeld { display: block; height: 1.75rem; width: 7.42rem; flex: none; }  /* 7.42:1.75 ≈ viewBox 420.64:99.26 */
/* Compact icoon: alleen op mobiel, i.p.v. het brede woordmerk (2.6:2 ≈ viewBox 388:300). */
.vr-logo__icoon { display: none; height: 2rem; width: 2.6rem; flex: none; }
/* Alleen in de topbalk wisselen naar het icoon op mobiel; de footer houdt het volledige woordmerk. */
@media (max-width: 640px) {
    .vr-topbalk .vr-logo__beeld { display: none; }
    .vr-topbalk .vr-logo__icoon { display: block; }
}

/* Formulieren: focus in groen met dikke ronde rand (merkdoc p.8) */
.vr-veld { margin-bottom: 1.1rem; }
.vr-veld label {
    display: block;
    font-weight: 600;
    font-size: var(--vr-fs-klein);
    margin-bottom: 0.35rem;
}
.vr-veld input,
.vr-veld textarea,
.vr-veld select {
    width: 100%;
    font: inherit;
    color: var(--vr-ink);
    background: var(--vr-wit);
    border: 2px solid var(--vr-lijn);
    border-radius: 12px;
    padding: 0.65rem 0.9rem;
    transition: border-color 0.15s;
}
.vr-veld input:focus,
.vr-veld textarea:focus,
.vr-veld select:focus {
    outline: none;
    border-color: var(--vr-groen);
    box-shadow: var(--vr-focus);
}
.vr-veld input[type="checkbox"] { width: auto; accent-color: var(--vr-groen); }
.vr-veld input[type="color"] { width: 4rem; height: 2.4rem; padding: 0.2rem; margin-top: 0.4rem; }
/* Bestand kiezen: de "bladeren"-knop in Vraply-stijl (pil, groen). */
.vr-veld input[type="file"] { width: 100%; border: 2px dashed var(--vr-lijn); background: var(--vr-cream); padding: 0.6rem 0.8rem; cursor: pointer; }
.vr-veld input[type="file"]::file-selector-button {
    font: inherit; font-weight: 600; font-size: var(--vr-fs-klein);
    margin-right: 0.9rem; padding: 0.5rem 1.15rem;
    border: 2px solid var(--vr-groen); border-radius: var(--vr-radius-pil);
    background: var(--vr-wit); color: var(--vr-groen-donker); cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.vr-veld input[type="file"]::file-selector-button:hover { background: var(--vr-groen); color: var(--vr-wit); }
.vr-veld__hint { font-size: var(--vr-fs-klein); color: var(--vr-tekst-zacht); margin: 0.3rem 0 0; }
.vr-veld__fout { font-size: var(--vr-fs-klein); color: var(--vr-koraal-donker); font-weight: 500; margin: 0.3rem 0 0; }
.vr-veld--fout input,
.vr-veld--fout textarea { border-color: var(--vr-koraal); }
.vr-melding {
    background: var(--vr-mint);
    border-radius: 12px;
    border-left: 3px solid var(--vr-groen);
    padding: 0.8rem 1.1rem;
    font-size: var(--vr-fs-klein);
    line-height: 1.45;
    margin-bottom: 1.1rem;
}
.vr-melding--info { background: var(--vr-zonlicht); border-left-color: var(--vr-zon); }
.vr-melding--waarschuwing { background: var(--vr-perzik); border-left-color: var(--vr-koraal); }

/* Gevaar-knop: voor onomkeerbare acties (verwijderen). */
.vr-knop--gevaar { background: var(--vr-koraal-donker); color: var(--vr-wit); }
.vr-knop--gevaar:hover { background: #cf4a2c; }

/* ============================================================
   Vraply-bevestigingsmodal (vr-ui.js): vervangt window.confirm.
   ============================================================ */
.vr-dialog {
    position: fixed; inset: 0; z-index: 80;
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem;
    background: rgba(23, 37, 31, 0.5);
    animation: vr-dialog-in 0.12s var(--vr-ease, ease);
}
.vr-dialog[hidden] { display: none; }
@keyframes vr-dialog-in { from { opacity: 0; } to { opacity: 1; } }
.vr-dialog__kaart {
    background: var(--vr-wit);
    border-radius: var(--vr-radius, 18px);
    padding: 1.75rem 1.6rem 1.5rem;
    max-width: 26rem; width: 100%;
    text-align: center;
    box-shadow: 0 20px 50px rgba(23, 37, 31, 0.28);
}
.vr-dialog__icoon {
    width: 3.2rem; height: 3.2rem; margin: 0 auto 0.8rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; border-radius: 50%;
    background: var(--vr-perzik);
}
.vr-dialog__titel { font-size: 1.2rem; margin: 0 0 0.4rem; }
.vr-dialog__tekst { color: var(--vr-tekst-zacht); font-size: var(--vr-fs-klein); margin: 0 0 1.25rem; }
.vr-dialog__acties { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }
.vr-dialog__acties .vr-knop { flex: 1 1 auto; min-width: 8rem; }

/* Hulpklassen */
.vr-tekst-zacht { color: var(--vr-tekst-zacht); }
.vr-accent-koraal { color: var(--vr-koraal); }
.vr-accent-groen { color: var(--vr-groen-donker); }
.vr-visueel-verborgen {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Afsluitende CTA-band (component): donker, met de startknop in koraal. Op elke
   pagina die partials/cta-band insluit (home, beveiliging, prijzen, betalen, ...). */
.vr-ctaband {
    background: var(--vr-ink);
    color: var(--vr-wit);
    border-radius: var(--vr-radius-kaart);
    padding: 2rem 2.25rem;
    margin-top: var(--vr-sectie);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
}
.vr-ctaband h2 { margin: 0 0 0.15em; color: var(--vr-wit); }
.vr-ctaband p { margin: 0; font-size: var(--vr-fs-klein); color: rgba(255, 255, 255, 0.75); }

/* Uitklapvragen (FAQ-accordeon, component): nette accordeon zonder JS, op elke pagina die hem gebruikt
   (home, functies, prijzen, faq, beveiliging, betalen, ...). Zonder deze regel valt de home-FAQ terug op
   de kale browserstijl (vr-content.css wordt daar niet geladen). */
.vr-uitklap {
    background: var(--vr-wit);
    border: 1px solid var(--vr-lijn);
    border-radius: var(--vr-radius-kaart);
    margin-bottom: 0.75rem;
    padding: 0;
}
.vr-uitklap summary {
    font-family: var(--vr-font-kop);
    font-weight: 700;
    padding: 1rem 1.25rem;
    cursor: pointer;
    list-style-position: inside;
}
.vr-uitklap summary:hover { color: var(--vr-groen-donker); }
.vr-uitklap p { padding: 0 1.25rem 1.1rem; margin: 0; color: var(--vr-tekst-zacht); }