/* Vrijwilligersovereenkomst — ondertekenpagina (mobiel-first) */
.md-vsign { padding: 1.5rem 1rem; }
.md-vsign-card {
    max-width: 640px; margin: 0 auto; background: #fff; border: 1px solid #e5e7eb;
    border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.08); padding: 1.5rem;
}
.md-vsign-title { font-size: 1.4rem; margin: 0 0 .15rem; }
.md-vsign-sub { color: #6b7280; margin: 0 0 1.25rem; }

.md-vsign-msg { padding: .9rem 1rem; border-radius: 8px; margin: .5rem 0; }
.md-vsign-error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.md-vsign-ok { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }

.md-vsign-btn {
    display: inline-block; background: #059669; color: #fff; border: 0; cursor: pointer;
    padding: .85rem 1.5rem; border-radius: 8px; font-weight: 600; font-size: 1rem; margin-top: .5rem;
}
.md-vsign-btn:disabled { opacity: .6; cursor: default; }
.md-vsign-btn-primary { width: 100%; }
.md-vsign-link { display: inline-block; background: none; border: 0; color: #2563eb; cursor: pointer; padding: .5rem 0; font-size: .9rem; text-decoration: underline; }

.md-vsign-code {
    display: block; width: 100%; max-width: 220px; font-size: 1.6rem; letter-spacing: .4rem;
    text-align: center; padding: .6rem; border: 1px solid #d1d5db; border-radius: 8px; margin: .5rem 0;
}
.md-vsign-inline { font-size: .9rem; margin-top: .5rem; }
.md-vsign-inline-error { color: #b91c1c; }

.md-vsign-contract {
    border: 1px solid #e5e7eb; border-radius: 8px; padding: 1rem; max-height: 45vh; overflow-y: auto;
    background: #f9fafb; margin-bottom: 1rem; font-size: .95rem; line-height: 1.55;
}
.md-vsign-field { display: block; margin: .75rem 0; }
.md-vsign-field span { display: block; font-size: .85rem; color: #6b7280; margin-bottom: .25rem; }
.md-vsign-field input, .md-vsign-field textarea { width: 100%; padding: .6rem; border: 1px solid #d1d5db; border-radius: 8px; font-size: 1rem; box-sizing: border-box; }

.md-vsign-place { display: block; margin: .75rem 0; }
.md-vsign-place span { display: block; font-size: .85rem; color: #6b7280; margin-bottom: .25rem; }
.md-vsign-place input { width: 100%; padding: .6rem; border: 1px solid #d1d5db; border-radius: 8px; }

.md-vsign-caption { font-size: .9rem; color: #374151; margin: .5rem 0 .25rem; }
.md-vsign-pad-wrap { border: 2px dashed #cbd5e1; border-radius: 8px; background: #fff; touch-action: none; }
.md-vsign-pad { display: block; width: 100%; height: 180px; cursor: crosshair; touch-action: none; }

.md-vsign-toggle { display: flex; align-items: center; gap: .7rem; margin: 1.1rem 0; font-size: .95rem; cursor: pointer; }
.md-vsign-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.md-vsign-track { flex: none; width: 48px; height: 28px; background: #cbd5e1; border-radius: 999px; position: relative; transition: background .2s; }
.md-vsign-thumb { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.md-vsign-toggle input:checked + .md-vsign-track { background: #059669; }
.md-vsign-toggle input:checked + .md-vsign-track .md-vsign-thumb { transform: translateX(20px); }
.md-vsign-toggle input:focus-visible + .md-vsign-track { box-shadow: 0 0 0 3px rgba(5,150,105,.35); }
.md-vsign-toggle-label { flex: 1; }