/* ==================================================================== *
 * Vermelding claimen (3B) - de publieke claimpagina (public_claim.php).
 * Alle kleuren/maten via de --portal-*-tokens; eenmalige mockup-waarden
 * staan als rgb() met de mockup-hex in commentaar.
 *
 * Heette tot v014.11.224 mijn.css en had toen een tweede deel: het
 * zelfbeheer-dashboard "Mijn bedrijf". Dat scherm is naar de beheer-
 * omgeving verhuisd (/admin/mijn-bedrijf), dus dat deel is hier weg.
 * Component-prefix: bcm-.
 * ==================================================================== */

/* --------------------------- A. Claimpagina --------------------------- */
.bcm-mijn--narrow { max-width: 46rem; }

.bcm-crumbs { margin: 0; font-size: 13px; font-weight: 500; color: var(--portal-muted); }
.bcm-crumbs a { color: var(--portal-muted); text-decoration: none; font-weight: 500; }
.bcm-crumbs a:hover { color: var(--portal-primary); }

.bcm-mijn__hero h1 {
    margin: 0; color: var(--portal-heading-ink);
    font-family: var(--portal-font-serif); font-weight: 500;
    font-size: clamp(28px, 4vw, 42px); line-height: 1.06; letter-spacing: -.015em;
}
.bcm-mijn__hero h1 em { font-style: italic; color: var(--portal-primary); }
.bcm-mijn__intro { max-width: 600px; margin: 13px 0 0; color: rgb(85, 86, 91); /* mockup #55565b */ font-size: 17px; line-height: 1.55; }

.bcm-panel {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 18px;
    padding: 24px 28px;
}
.bcm-panel h2 { margin: 0 0 8px; color: var(--portal-heading-ink); font-family: var(--portal-font-serif); font-weight: 500; font-size: 22px; line-height: 1.2; }
.bcm-panel p { color: var(--portal-text); font-size: 14px; line-height: 1.6; }
.bcm-panel__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.bcm-panel--ok { border-color: rgb(207, 229, 203); background: rgb(240, 247, 238); }   /* Statesheet §5-08: #cfe5cb / #f0f7ee */
.bcm-panel--info { border-color: var(--portal-border-strong); }
.bcm-panel--warn { border-color: rgb(236, 208, 204); background: rgb(250, 241, 240); } /* Statesheet §5-09: #ecd0cc / #faf1f0 */

.bcm-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 12px 20px; border-radius: 10px;
    border: 1px solid var(--portal-border-strong);
    background: var(--portal-surface); color: var(--portal-heading-ink);
    font-weight: 600; font-size: 13.5px; line-height: 1; text-decoration: none; cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.bcm-btn:hover { border-color: var(--portal-primary); color: var(--portal-primary); }
.bcm-btn--primary { background: var(--portal-primary); border-color: var(--portal-primary); color: var(--portal-surface); }
.bcm-btn--primary:hover { background: var(--portal-primary-strong); border-color: var(--portal-primary-strong); color: var(--portal-surface); }

.bcm-formmsg { display: flex; align-items: flex-start; gap: 8px; padding: 11px 15px; border-radius: 11px; font-size: 13.5px; line-height: 1.5; }
.bcm-formmsg--ok { background: var(--portal-open-soft); color: var(--portal-open); border: 1px solid rgb(211, 230, 208); } /* #d3e6d0 */
.bcm-formmsg--error { background: rgb(250, 241, 240); color: var(--portal-danger); border: 1px solid rgb(236, 208, 204); }
.bcm-formmsg--info { background: var(--portal-surface-soft); color: var(--portal-text); border: 1px solid var(--portal-border); }

.bcm-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.bcm-field label, .bcm-field__inline { font-weight: 600; color: var(--portal-text); font-size: 13px; }
.bcm-opt { color: var(--portal-muted); font-weight: 400; }
.bcm-field__hint { color: var(--portal-muted-faint); font-size: 12px; line-height: 1.5; }
.bcm-mijn input[type="text"], .bcm-mijn input[type="email"], .bcm-mijn input[type="time"],
.bcm-mijn input[type="file"], .bcm-mijn textarea, .bcm-mijn select {
    width: 100%;
    padding: 12px 14px; border-radius: 10px;
    border: 1px solid rgb(226, 220, 205); /* mockup #e2dccd */
    background: var(--portal-surface); color: var(--portal-heading-ink);
    font: inherit; font-size: 14px;
}
.bcm-mijn input[type="time"], .bcm-mijn select { width: auto; }
.bcm-mijn textarea { resize: vertical; }
.bcm-mijn input:focus-visible, .bcm-mijn textarea:focus-visible, .bcm-mijn select:focus-visible {
    outline: none; border-color: var(--portal-primary);
    box-shadow: 0 0 0 3px rgba(192, 71, 46, .12);
}
.bcm-form__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.bcm-verifynote { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 14px; padding: 11px 13px; border-radius: 10px; background: var(--portal-surface-soft); border: 1px dashed var(--portal-border-dashed); color: var(--portal-text-soft); font-size: 13px; line-height: 1.55; }
.bcm-verifynote .bi { color: var(--portal-primary); }

@media (prefers-reduced-motion: reduce) {
    .bcm-btn { transition: none; }
}