/**
 * Registration R1 — progressive wizard (contact → HCN service → family → uw gegevens).
 * HCN brand only (gold/charcoal/black/white via tokens.css), large readable typography, 54px
 * controls, no coloured left borders anywhere (plugin-wide rule). The component must look the same
 * inside any theme, so every custom control pins its own background/colour/size (!important) against
 * theme-level button/input styling. Radius + surface tokens are re-declared on .hcn-reg-step so
 * theme :root overrides cannot break shapes or colours.
 */

/* ================================================================ component root */

.hcn-reg-step {
    /* ---- radius tokens: pinned so theme :root overrides cannot break shapes ---- */
    --hcn-radius-sm: 6px;
    --hcn-radius-md: 8px;
    --hcn-radius-lg: 14px;
    --hcn-radius-pill: 999px;

    /* ---- surface/fallback colours so buttons never show theme gold ------------- */
    --hcn-surface-fb: #ffffff;
    --hcn-heading-fb: var(--hcn-black);
    --hcn-muted-fb:   #6b7280;
    --hcn-border-fb:  rgba(28,28,29,.14);

    /* ---- control & scale -------------------------------------------------------- */
    --hcn-reg-scale: 1;
    --hcn-reg-control: 54px;

    /* ---- ONE registration shell: every screen (Welkom terug, Contact, HCN-service, Uw gegevens,
       Familieleden, Documenten, Controleren) lives inside this same centred 850px wrapper. No
       per-step widths, no theme breakout, no negative margins. ------------------------------ */
    /* The shell now carries a step rail beside the content: 1120px total, of which the content
       column keeps the familiar ~850px reading width. Below 900px the rail folds and the wrapper
       falls back to a single column. */
    --hcn-registration-max-width: 1120px;
    --hcn-registration-rail-width: 264px;

    box-sizing: border-box;
    max-width: var(--hcn-registration-max-width);
    width: 100%;
    margin-inline: auto;
    padding: 40px 0 80px;   /* desktop: the 850px shell IS the content width; gutters only on tablet/mobile */
    font-size: calc(18px * var(--hcn-reg-scale));
    line-height: 1.6;
    color: var(--hcn-color-text, var(--hcn-heading-fb));
}
.hcn-reg-step *, .hcn-reg-step *::before, .hcn-reg-step *::after { box-sizing: border-box; }

.hcn-reg-step--contrast {
    --hcn-color-text: var(--hcn-black, #000);
    --hcn-color-border: var(--hcn-color-border-strong, #9aa0a6);
    --hcn-color-muted: var(--hcn-color-heading);
}
.hcn-reg-step--contrast .hcn-reg-card { border-color: var(--hcn-color-border-strong, #9aa0a6); }
.hcn-reg-step--contrast .hcn-reg-field input:not([type="hidden"]),
.hcn-reg-step--contrast .hcn-select,
.hcn-reg-step--contrast .hcn-phone__country,
.hcn-reg-step--contrast .hcn-choice__option,
.hcn-reg-step--contrast .hcn-chip,
.hcn-reg-step--contrast .hcn-service-combobox__trigger { border-color: var(--hcn-color-heading, var(--hcn-heading-fb)) !important; }
.hcn-reg-step--contrast .hcn-reg-hint, .hcn-reg-step--contrast .hcn-reg-lead, .hcn-reg-step--contrast .hcn-reg-section__lead { color: var(--hcn-color-heading, var(--hcn-heading-fb)); }
.hcn-reg-step *:focus-visible {
    outline: 3px solid var(--hcn-color-brand-strong, #8B6440);
    outline-offset: 2px;
}

/* ================================================================ top bar — immune to A+/A− scaling */

.hcn-reg-topbar[hidden] { display: none !important; }
.hcn-reg-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: nowrap;                   /* NEVER wrap — tools always stay right */
    margin-bottom: 20px;
    /* freeze at base size so A+/A− only scales the card content below */
    font-size: 16px !important;
}
.hcn-reg-season {
    display: flex;
    flex-wrap: nowrap;                   /* keep label + pill on one line */
    gap: 10px;
    align-items: center;
    min-width: 0;
    overflow: hidden;
}
.hcn-reg-season__label {
    font-weight: 700;
    font-size: 1.05em;
    color: var(--hcn-color-heading, var(--hcn-heading-fb));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hcn-reg-season__phase {
    flex-shrink: 0;
    background: var(--hcn-color-brand-soft, #f5ede0);
    color: var(--hcn-color-brand-strong, #8B6440);
    border-radius: var(--hcn-radius-pill);
    padding: 4px 14px;
    font-size: 0.85em;
    font-weight: 600;
    white-space: nowrap;
}

/* accessibility tools: small, quiet, always reachable (correction pass §1) */
.hcn-a11y { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.hcn-a11y__btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-radius: var(--hcn-radius-pill) !important;
    border: 1px solid var(--hcn-border-fb) !important;
    background: var(--hcn-color-surface, var(--hcn-surface-fb)) !important;
    color: var(--hcn-color-heading, var(--hcn-heading-fb)) !important;
    font: inherit !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: border-color .15s, background .15s;
}
.hcn-a11y__btn:hover { border-color: var(--hcn-color-brand) !important; }
.hcn-a11y__btn:disabled { opacity: .4; cursor: default !important; }
.hcn-a11y__btn[aria-pressed="true"] { background: var(--hcn-color-heading, var(--hcn-heading-fb)) !important; color: #fff !important; border-color: var(--hcn-color-heading, var(--hcn-heading-fb)) !important; }
.hcn-a11y__btn svg { width: 18px; height: 18px; display: block; }
.hcn-a11y__glyph { display: inline-flex; align-items: baseline; }
.hcn-a11y__glyph--small { font-size: 12px; }
.hcn-a11y__sign { font-size: .7em; margin-left: 1px; font-weight: 800; }

/* ================================================================ card */

/* The card is display:grid now, which beats the UA rule for [hidden] — without this the welcome-back
   screen and the form would both be on screen at once. */
.hcn-reg-card[hidden] { display: none !important; }
.hcn-reg-card {
    background: var(--hcn-color-surface, var(--hcn-surface-fb));
    border: 1px solid rgba(28, 28, 29, .10);
    border-radius: var(--hcn-radius-lg);
    /* luxury shadow: layered for depth */
    box-shadow:
        0 2px 4px rgba(28,28,29,.04),
        0 8px 24px rgba(28,28,29,.08),
        0 20px 48px rgba(28,28,29,.05);
    padding: 0;
    position: relative;
    display: grid;
    grid-template-columns: var(--hcn-registration-rail-width) minmax(0, 1fr);
    align-items: stretch;
    overflow: hidden;
}
.hcn-reg-main {
    min-width: 0;
    padding: 52px clamp(28px, 5vw, 60px) 56px;
}

/* ---------------------------------------------------------------- step rail

   Presentation only. Items are list items, never links or buttons: the rail shows where the pilgrim
   is, and Verder / Terug decide where they go. Three states — done, current, upcoming — each legible
   without relying on colour alone (the marker changes from number to tick, and the weight changes). */
.hcn-reg-rail {
    padding: 44px 26px 40px;
    background: linear-gradient(180deg, #FBF8F4 0%, #F6F1EA 100%);
    border-right: 1px solid rgba(28,28,29,.09);
}
.hcn-reg-rail__eyebrow {
    margin: 0 0 6px;
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--hcn-color-brand-strong, #8B6440);
}
.hcn-reg-rail__count {
    margin: 0 0 26px;
    font-size: 1.05em;
    font-weight: 700;
    color: var(--hcn-color-heading, var(--hcn-heading-fb));
}
.hcn-reg-rail__list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.hcn-reg-rail__item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 0 0 26px;
    min-height: 44px;
}
.hcn-reg-rail__item:last-child { padding-bottom: 0; }
/* The connector runs from one marker to the next and fills in as the pilgrim advances. */
.hcn-reg-rail__item::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 36px;
    bottom: 2px;
    width: 2px;
    background: rgba(28,28,29,.12);
}
.hcn-reg-rail__item:last-child::before { display: none; }
.hcn-reg-rail__item.is-done::before { background: var(--hcn-color-brand, #B38F64); }

.hcn-reg-rail__marker {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid rgba(28,28,29,.16);
    background: #fff;
    color: var(--hcn-color-muted, var(--hcn-muted-fb));
    font-size: 0.92em;
    font-weight: 700;
}
.hcn-reg-rail__tick { display: none; }
.hcn-reg-rail__text { display: flex; flex-direction: column; gap: 2px; padding-top: 5px; min-width: 0; }
.hcn-reg-rail__label {
    font-size: 1em;
    font-weight: 600;
    line-height: 1.3;
    color: var(--hcn-color-muted, var(--hcn-muted-fb));
}
.hcn-reg-rail__hint {
    font-size: 0.84em;
    line-height: 1.4;
    color: var(--hcn-color-muted, var(--hcn-muted-fb));
    opacity: .75;
}

/* Done: gold marker with a tick, label in full colour. */
.hcn-reg-rail__item.is-done .hcn-reg-rail__marker {
    border-color: var(--hcn-color-brand, #B38F64);
    background: var(--hcn-color-brand, #B38F64);
    color: #fff;
}
.hcn-reg-rail__item.is-done .hcn-reg-rail__num { display: none; }
.hcn-reg-rail__item.is-done .hcn-reg-rail__tick { display: block; }
.hcn-reg-rail__item.is-done .hcn-reg-rail__label { color: var(--hcn-color-heading, var(--hcn-heading-fb)); font-weight: 600; }

/* Current: filled marker with a soft halo, heavier label. */
.hcn-reg-rail__item.is-current .hcn-reg-rail__marker {
    border-color: var(--hcn-color-brand, #B38F64);
    background: var(--hcn-color-brand, #B38F64);
    color: #fff;
    box-shadow: 0 0 0 5px rgba(179,143,100,.18);
}
.hcn-reg-rail__item.is-current .hcn-reg-rail__label {
    color: var(--hcn-color-heading, var(--hcn-heading-fb));
    font-weight: 800;
    font-size: 1.06em;
}
.hcn-reg-rail__item.is-current .hcn-reg-rail__hint { opacity: 1; color: var(--hcn-color-brand-strong, #8B6440); }

/* Upcoming: quiet, but never below the contrast floor. */
.hcn-reg-rail__item.is-upcoming .hcn-reg-rail__marker { background: #fff; }
.hcn-reg-card.is-busy form { opacity: .55; pointer-events: none; transition: opacity .2s; }

/* "Even geduld…" — centred hourglass while a step is saved and checked (correction pass §3) */
.hcn-reg-busy[hidden] { display: none !important; }
.hcn-reg-busy {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: inherit;
    background: rgba(255,255,255,.55);
    color: var(--hcn-color-heading, var(--hcn-heading-fb));
    font-weight: 600;
    font-size: 0.95em;
    pointer-events: none;
}
.hcn-reg-busy__glass {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--hcn-color-surface, #fff);
    color: var(--hcn-color-brand-strong, #8B6440);
    box-shadow: 0 6px 20px rgba(28,28,29,.12);
}
.hcn-reg-busy__glass svg { animation: hcn-hourglass 1.6s cubic-bezier(.4,0,.2,1) infinite; transform-origin: 50% 50%; }
@keyframes hcn-hourglass {
    0%, 35%  { transform: rotate(0deg); }
    55%, 85% { transform: rotate(180deg); }
    100%     { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) { .hcn-reg-busy__glass svg { animation: none; } }

/* ================================================================ progress + help pill */

/* The bar is a quiet second signal now that the rail carries the progression. */
.hcn-reg-progress { margin-bottom: 30px; }
.hcn-reg-progress__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.hcn-reg-progress__label {
    margin: 0;
    font-size: 0.88em;
    font-weight: 700;
    color: var(--hcn-color-brand-strong, #8B6440);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.hcn-reg-progress__bar {
    height: 4px;
    border-radius: var(--hcn-radius-pill);
    background: rgba(28,28,29,.07);
    overflow: hidden;
}
.hcn-reg-progress__fill {
    display: block;
    height: 100%;
    width: 7%;
    border-radius: var(--hcn-radius-pill);
    background: var(--hcn-color-progress, #25935F);
    transition: width .4s cubic-bezier(.4,0,.2,1);
}

.hcn-help-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px;
    min-height: 34px !important;
    padding: 0 14px 0 10px !important;
    border-radius: var(--hcn-radius-pill) !important;
    border: 1px solid var(--hcn-border-fb) !important;
    background: var(--hcn-color-surface, var(--hcn-surface-fb)) !important;
    color: var(--hcn-color-heading, var(--hcn-heading-fb)) !important;
    font-size: 0.82em !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    white-space: nowrap;
    box-shadow: none !important;
    flex-shrink: 0;
}
.hcn-help-pill svg {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
    color: var(--hcn-color-brand-strong, #8B6440);
    flex-shrink: 0;
}
.hcn-help-pill:hover { border-color: var(--hcn-color-brand) !important; }
.hcn-help-pill__label--short { display: none; }

/* ================================================================ screen / typography */

.hcn-reg-screen[hidden] { display: none !important; }
.hcn-reg-h1 {
    font-size: clamp(1.6em, 4vw, 2em);
    line-height: 1.2;
    margin: 0 0 10px;
    color: var(--hcn-color-heading, var(--hcn-heading-fb));
    font-weight: 800;
    letter-spacing: -0.02em;
}
.hcn-reg-h1:focus { outline: none; }
.hcn-reg-lead { font-size: 1.05em; color: var(--hcn-color-muted, var(--hcn-muted-fb)); margin: 0 0 32px; max-width: 60ch; }
.hcn-reg-section__title {
    margin: 0 0 18px;
    font-size: 1.1em;
    font-weight: 700;
    line-height: 1.3;
    color: var(--hcn-color-heading, var(--hcn-heading-fb));
    letter-spacing: -0.01em;
}
.hcn-reg-hint { margin: 8px 0 0; font-size: 0.9em; line-height: 1.5; color: var(--hcn-color-muted, var(--hcn-muted-fb)); }
.hcn-select-wrap { position: relative; }
.hcn-select-wrap::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--hcn-color-brand-strong, #8B6440);
    border-bottom: 2px solid var(--hcn-color-brand-strong, #8B6440);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}
.hcn-select { appearance: none; -webkit-appearance: none; padding-right: 48px; cursor: pointer; }

/* ================================================================ fields */

.hcn-reg-field { margin-bottom: 26px; }
.hcn-phone-field { position: relative; }
.hcn-reg-field label {
    display: block;
    font-weight: 700;
    font-size: 1em;
    margin-bottom: 8px;
    color: var(--hcn-color-heading, var(--hcn-heading-fb));
    letter-spacing: 0.01em;
}
.hcn-reg-field input[type="email"],
.hcn-reg-field input[type="tel"],
.hcn-reg-field input[type="text"],
.hcn-reg-field textarea,
.hcn-select {
    width: 100%;
    min-height: var(--hcn-reg-control);
    font-size: 1em;
    padding: 14px 18px;
    border: 1.5px solid rgba(28,28,29,.18);
    border-radius: var(--hcn-radius-md);
    background: var(--hcn-color-surface, var(--hcn-surface-fb)) !important;
    color: var(--hcn-color-text, var(--hcn-heading-fb)) !important;
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}
.hcn-reg-field textarea { min-height: 120px; line-height: 1.55; }
.hcn-reg-field input:focus, .hcn-select:focus {
    border-color: var(--hcn-color-brand);
    outline: none;
    box-shadow: 0 0 0 3px rgba(179,143,100,.18);
}
.hcn-reg-error { color: var(--hcn-color-error, #c0392b); font-size: 0.88em; font-weight: 600; margin: 6px 0 0; }
.hcn-reg-error:empty { display: none; }

.hcn-reg-check { margin-top: -6px; }
.hcn-reg-check label { display: flex; align-items: center; gap: 12px; font-weight: 500; cursor: pointer; color: var(--hcn-color-text, var(--hcn-heading-fb)); }
.hcn-reg-check input[type="checkbox"] { width: 22px; height: 22px; margin: 0; accent-color: var(--hcn-color-brand); flex-shrink: 0; }

/* phone */
.hcn-phone { display: flex; gap: 10px; position: relative; }
.hcn-phone__country {
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    min-height: var(--hcn-reg-control) !important;
    padding: 0 14px !important;
    border: 1.5px solid rgba(28,28,29,.18) !important;
    border-radius: var(--hcn-radius-md) !important;
    background: var(--hcn-color-surface, var(--hcn-surface-fb)) !important;
    color: var(--hcn-color-text, var(--hcn-heading-fb)) !important;
    cursor: pointer;
    font-size: 1em !important;
    font-weight: 600;
    flex-shrink: 0;
    box-shadow: none !important;
}
.hcn-phone__country:hover, .hcn-phone__country[aria-expanded="true"] { border-color: var(--hcn-color-brand) !important; }
.hcn-phone__flag { font-size: 1.3em; line-height: 1; }
.hcn-phone input[type="tel"] { flex: 1; min-width: 0; }

.hcn-country-picker {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    width: min(360px, 100%);
    background: var(--hcn-color-surface, var(--hcn-surface-fb));
    border: 1px solid rgba(28,28,29,.12);
    border-radius: var(--hcn-radius-md);
    box-shadow: 0 8px 32px rgba(28,28,29,.14);
    padding: 10px;
}
.hcn-country-picker__search {
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    font-size: 0.95em;
    border: 1px solid rgba(28,28,29,.16);
    border-radius: var(--hcn-radius-md);
    margin-bottom: 8px;
    background: var(--hcn-color-surface, #fff) !important;
    color: var(--hcn-color-text) !important;
}
.hcn-country-picker__list { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow-y: auto; }
.hcn-country-picker__list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    border-radius: var(--hcn-radius-sm);
    cursor: pointer;
}
.hcn-country-picker__list li:hover, .hcn-country-picker__list li:focus { background: var(--hcn-color-subtle-bg, #f7f6f3); }
.hcn-country-picker__dial { margin-left: auto; color: var(--hcn-color-muted, #6b7280); font-size: 0.9em; }

.hcn-reg-autosave { color: var(--hcn-color-error, #c0392b); font-weight: 600; font-size: 0.92em; margin: 0 0 20px; }
.hcn-reg-autosave[hidden], .hcn-reg-autosave:empty { display: none !important; }

/* ================================================================ choice cards (screen 2) */

.hcn-reg-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 24px 0; }
.hcn-reg-card-choice {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px;
    text-align: left;
    padding: 28px 26px;
    min-height: 180px;
    border: 1.5px solid rgba(28,28,29,.14) !important;
    border-radius: var(--hcn-radius-lg) !important;
    background: var(--hcn-color-surface, var(--hcn-surface-fb)) !important;
    cursor: pointer;
    font: inherit !important;
    line-height: 1.4;
    box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s;
}
.hcn-reg-card-choice:hover {
    border-color: var(--hcn-color-brand) !important;
    box-shadow: 0 4px 16px rgba(179,143,100,.12) !important;
}
.hcn-reg-card-choice.is-selected {
    border-color: var(--hcn-color-brand) !important;
    background: var(--hcn-color-brand-soft, #f5ede0) !important;
    box-shadow: 0 4px 16px rgba(179,143,100,.14) !important;
}
.hcn-reg-card-choice__icon { color: var(--hcn-color-brand-strong, #8B6440) !important; margin-bottom: 4px; }
.hcn-reg-card-choice__icon svg { width: 52px; height: 52px; display: block; }
.hcn-reg-card-choice__title { font-weight: 700; font-size: 1.15em; color: var(--hcn-color-heading, var(--hcn-heading-fb)) !important; }
.hcn-reg-card-choice__desc { color: var(--hcn-color-muted, var(--hcn-muted-fb)) !important; font-size: 0.95em; }
.hcn-reg-guidance {
    background: var(--hcn-color-subtle-bg, #f7f6f3);
    border-radius: var(--hcn-radius-md);
    padding: 16px 20px;
    margin: 0 0 28px;
    font-size: 0.95em;
}
.hcn-reg-guidance[hidden] { display: none !important; }
.hcn-reg-guidance strong { display: block; color: var(--hcn-color-heading, var(--hcn-heading-fb)); margin-bottom: 4px; }

/* ================================================================ service cards (screen 3) */

.hcn-reg-services { display: flex; flex-direction: column; gap: 12px; margin: 24px 0 28px; }
.hcn-reg-service {
    display: flex !important;
    gap: 16px;
    align-items: center !important;
    border: 1.5px solid rgba(28,28,29,.14) !important;
    border-radius: var(--hcn-radius-lg) !important;
    padding: 22px 24px;
    min-height: 88px;
    cursor: pointer;
    background: var(--hcn-color-surface, var(--hcn-surface-fb)) !important;
    transition: border-color .15s, box-shadow .15s;
    box-shadow: none !important;
}
.hcn-reg-service:hover {
    border-color: var(--hcn-color-brand) !important;
    box-shadow: 0 4px 12px rgba(179,143,100,.10) !important;
}
.hcn-reg-service.is-selected {
    border-color: var(--hcn-color-brand) !important;
    background: var(--hcn-color-brand-soft, #f5ede0) !important;
}
.hcn-reg-service input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.hcn-reg-service:has(input:focus-visible) { outline: 3px solid var(--hcn-color-brand-strong, #8B6440); outline-offset: 2px; }
.hcn-reg-service__letter {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0;
    border-radius: 50% !important;
    border: 2px solid var(--hcn-color-brand) !important;
    color: var(--hcn-color-brand-strong, #8B6440) !important;
    font-weight: 800;
    font-size: 1em !important;
    background: var(--hcn-color-surface, var(--hcn-surface-fb)) !important;
}
.hcn-reg-service.is-selected .hcn-reg-service__letter {
    background: var(--hcn-color-brand) !important;
    color: var(--hcn-color-brand-text, #1C1C1D) !important;
}
.hcn-reg-service__body { display: flex; flex-direction: column; gap: 3px; line-height: 1.4; }
.hcn-reg-service__title { font-weight: 700; color: var(--hcn-color-heading, var(--hcn-heading-fb)); }
.hcn-reg-service__desc { color: var(--hcn-color-muted, var(--hcn-muted-fb)); font-size: 0.92em; }
/* Service C: the problem selector and its follow-up description are two stacked fields; the nested
   field needs its own top spacing, otherwise its label sits against the select above it. */
.hcn-reg-problem { padding-top: 4px; margin-bottom: 26px; }
.hcn-reg-problem > .hcn-select-wrap { margin-bottom: 0; }
.hcn-reg-problem > .hcn-reg-field {
    margin-top: 22px;
    margin-bottom: 0;
}
.hcn-reg-problem > .hcn-reg-field[hidden] { display: none !important; }
.hcn-reg-problem > .hcn-reg-field label { margin-bottom: 8px; }
.hcn-reg-problem textarea { min-height: 120px; }

/* Inline note under a field (e.g. an unsupported passport country) — informative, not an error. */
.hcn-reg-note {
    margin: 10px 0 0;
    padding: 12px 14px;
    border-radius: var(--hcn-radius-md);
    background: var(--hcn-color-subtle-bg, #f7f6f3);
    color: var(--hcn-color-heading, var(--hcn-heading-fb));
    font-size: 0.9em;
    line-height: 1.55;
}
.hcn-reg-note[hidden] { display: none !important; }

/* ================================================================ actions / buttons */

.hcn-reg-actions { margin-top: 12px; }
.hcn-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: var(--hcn-reg-control) !important;
    padding: 0 36px !important;
    font-size: 1.05em !important;
    font-weight: 700 !important;
    border-radius: var(--hcn-radius-md) !important;
    border: 2px solid transparent !important;
    cursor: pointer !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    transition: background .15s, border-color .15s;
}
.hcn-btn:disabled { opacity: .55; cursor: progress; }
.hcn-btn--primary {
    background: var(--hcn-color-brand) !important;
    color: var(--hcn-color-brand-text, #1C1C1D) !important;
    border-color: transparent !important;
    box-shadow: 0 4px 16px rgba(179,143,100,.25) !important;
}
.hcn-btn--primary:hover {
    background: var(--hcn-color-brand-hover, #9a7a54) !important;
    box-shadow: 0 6px 20px rgba(179,143,100,.35) !important;
}
.hcn-btn--ghost {
    background: transparent !important;
    border-color: rgba(28,28,29,.18) !important;
    color: var(--hcn-color-text, var(--hcn-heading-fb)) !important;
}
.hcn-btn--ghost:hover { border-color: var(--hcn-color-brand) !important; }
.hcn-reg-actions .hcn-btn--primary { width: 100%; }

.hcn-reg-back { margin: 20px 0 0; text-align: center; font-size: 0.92em; }
.hcn-reg-back__link {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 6px 4px !important;
    min-height: 40px !important;
    color: var(--hcn-color-muted, var(--hcn-muted-fb)) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    cursor: pointer !important;
    font: inherit !important;
    font-weight: 600 !important;
}
.hcn-reg-back__link:hover { color: var(--hcn-color-brand-strong, #8B6440) !important; }

/* ================================================================ help modal */

.hcn-help-modal[hidden] { display: none !important; }
.hcn-help-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.hcn-help-modal__backdrop { position: absolute; inset: 0; background: rgba(28,28,29,.58); }
.hcn-help-modal__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 620px;
    max-height: calc(100vh - 48px);
    border-radius: 20px;
    background: var(--hcn-color-surface, var(--hcn-surface-fb));
    box-shadow: 0 32px 84px rgba(28,28,29,.30);
    color: var(--hcn-color-text, var(--hcn-heading-fb));
    overflow: hidden;
}

/* Hero: office photo, dimmed so white text and the hours card stay readable. */
.hcn-help-hero {
    position: relative;
    flex-shrink: 0;
    min-height: 208px;
    display: flex;
    align-items: flex-end;
    padding: 24px 28px 22px;
    background-image:
        linear-gradient(180deg, rgba(23,19,15,.30) 0%, rgba(23,19,15,.52) 42%, rgba(23,19,15,.86) 100%),
        var(--hcn-help-hero-image);
    background-size: cover;
    background-position: center 62%;
    background-repeat: no-repeat;
    color: #fff;
}
.hcn-help-hero__inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; width: 100%; }
.hcn-help-hero__text { min-width: 0; }
.hcn-help-hero h2 {
    margin: 0 0 6px !important;
    font-size: 1.7em !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: -0.015em;
    color: #fff !important;
    text-shadow: 0 2px 14px rgba(0,0,0,.45);
}
.hcn-help-hero__lead { margin: 0; font-size: 1.02em; line-height: 1.5; color: rgba(255,255,255,.90); text-shadow: 0 1px 10px rgba(0,0,0,.45); }

/* Opening hours, right side of the hero. */
.hcn-help-hours {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    padding: 12px 16px;
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 14px;
    background: rgba(23,19,15,.42);
    backdrop-filter: blur(6px);
}
.hcn-help-hours__icon { display: inline-grid; place-items: center; color: var(--hcn-color-brand, #B8925F); flex-shrink: 0; }
.hcn-help-hours__bell { transform-origin: 12px 13.5px; }
.hcn-help-hours__bell--l { animation: hcn-ring-l 2.4s ease-in-out infinite; }
.hcn-help-hours__bell--r { animation: hcn-ring-r 2.4s ease-in-out infinite; }
@keyframes hcn-ring-l {
    0%, 62%, 100% { transform: rotate(0deg); }
    68% { transform: rotate(-9deg); }
    74% { transform: rotate(5deg); }
    80% { transform: rotate(-5deg); }
    86% { transform: rotate(2deg); }
}
@keyframes hcn-ring-r {
    0%, 62%, 100% { transform: rotate(0deg); }
    68% { transform: rotate(9deg); }
    74% { transform: rotate(-5deg); }
    80% { transform: rotate(5deg); }
    86% { transform: rotate(-2deg); }
}
.hcn-help-hours__body { min-width: 0; }
.hcn-help-hours__label {
    display: block;
    margin-bottom: 2px;
    font-size: 0.7em;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: rgba(255,255,255,.72);
}
.hcn-help-hours__value { margin: 0; font-size: 0.95em; line-height: 1.45; font-weight: 600; color: #fff; }

.hcn-help-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.34) !important;
    background: rgba(23,19,15,.42) !important;
    color: #fff !important;
    backdrop-filter: blur(4px);
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    transition: background .15s ease, border-color .15s ease;
}
.hcn-help-modal__close:hover { background: rgba(23,19,15,.72) !important; border-color: rgba(255,255,255,.6) !important; }

.hcn-help-modal__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 24px 28px 26px; }

/* Two equal action buttons on one row. */
.hcn-help-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hcn-help-action {
    display: flex !important;
    align-items: center;
    gap: 12px;
    min-height: 68px;
    padding: 12px 16px !important;
    border-radius: 14px !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: transform .14s ease, box-shadow .14s ease, background .15s ease;
}
.hcn-help-action:hover { transform: translateY(-1px); }
.hcn-help-action__icon { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; }
.hcn-help-action__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hcn-help-action__label { font-size: 1.06em; font-weight: 700; line-height: 1.25; }
.hcn-help-action__meta { font-size: 0.86em; line-height: 1.35; opacity: .82; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hcn-help-action--whatsapp { background: #1FA855 !important; color: #fff !important; }
.hcn-help-action--whatsapp:hover { background: #1B934A !important; box-shadow: 0 10px 24px rgba(31,168,85,.30); }
.hcn-help-action--whatsapp .hcn-help-action__icon { background: rgba(255,255,255,.18); color: #fff; }
.hcn-help-action--phone { background: var(--hcn-color-surface-charcoal, #2D2E2F) !important; color: var(--hcn-color-on-dark, #fff) !important; }
.hcn-help-action--phone:hover { background: var(--hcn-color-heading, #1C1C1D) !important; box-shadow: 0 10px 24px rgba(28,28,29,.26); }
.hcn-help-action--phone .hcn-help-action__icon { background: rgba(255,255,255,.14); color: #fff; }
.hcn-help-action--phone .hcn-help-action__meta { font-variant-numeric: tabular-nums; }

/* Visit card with the Google Maps link. */
.hcn-help-visit {
    margin-top: 18px;
    padding: 20px;
    border: 1px solid rgba(28,28,29,.10);
    border-radius: 16px;
    background: #FBF8F4;
}
.hcn-help-visit__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.hcn-help-visit__icon {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--hcn-color-brand-soft, #F4EEE5);
    color: var(--hcn-color-brand-strong, #8F6E46);
    flex-shrink: 0;
}
.hcn-help-visit h3 { margin: 0 !important; font-size: 1.12em !important; font-weight: 700 !important; color: var(--hcn-color-heading, var(--hcn-heading-fb)) !important; }
.hcn-help-visit__address { margin: 0; font-size: 1.02em; line-height: 1.55; color: var(--hcn-color-heading, var(--hcn-heading-fb)); }
.hcn-help-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin-top: 6px;
    font-size: 0.98em;
    font-weight: 700;
    text-decoration: none;
    color: var(--hcn-color-brand-strong, #8F6E46);
    transition: color .15s ease;
}
.hcn-help-link svg { flex-shrink: 0; }
.hcn-help-link:hover { color: var(--hcn-color-heading, var(--hcn-heading-fb)); text-decoration: underline; text-underline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
    .hcn-help-action, .hcn-help-link { transition: none; }
    .hcn-help-action:hover { transform: none; }
    .hcn-help-hours__bell--l, .hcn-help-hours__bell--r { animation: none; }
}
.hcn-help-unavailable { margin: 12px 0 0; font-size: 0.98em; line-height: 1.55; color: var(--hcn-color-muted, var(--hcn-muted-fb)); }

.hcn-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ================================================================ welkom terug — same-device resume banner (§12/§13) */

.hcn-reg-resume {
    background: var(--hcn-color-surface, var(--hcn-surface-fb));
    border: 1.5px solid var(--hcn-color-border, var(--hcn-border-fb));
    border-radius: var(--hcn-radius-lg);
    padding: 48px clamp(28px, 7vw, 64px);
    text-align: center;
    margin: 0 0 32px;   /* width comes from the shared shell, never its own max-width */
}
.hcn-reg-resume__icon {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
    color: var(--hcn-color-brand-strong, #8B6440);
}
.hcn-reg-resume__icon svg { width: 48px; height: 48px; color: var(--hcn-color-brand); stroke-width: 1.4; }
.hcn-reg-resume__heading {
    margin: 0 0 8px;
    font-size: 1.3em;
    font-weight: 700;
    color: var(--hcn-color-heading, var(--hcn-heading-fb));
}
.hcn-reg-resume__text {
    margin: 0 0 20px;
    color: var(--hcn-color-muted, var(--hcn-muted-fb));
    font-size: 0.95em;
}
.hcn-reg-resume__email {
    margin: -12px 0 20px;
    font-weight: 600;
    color: var(--hcn-color-text, var(--hcn-heading-fb));
}
.hcn-reg-resume__actions {
    /* Equal-size actions (R1 polish §3): same grid cell, same height/padding/typography;
       hierarchy only through colour — gold primary vs. outlined-charcoal secondary. */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    max-width: 640px;   /* action pair only — not a shell width */
    margin: 0 auto;
}
.hcn-reg-resume__actions .hcn-btn {
    width: 100%;
    min-height: var(--hcn-reg-control) !important;
    padding: 10px 16px !important;
    font-size: 1em !important;
    white-space: normal;
    text-align: center;
    line-height: 1.25 !important;
}
.hcn-reg-resume__actions .hcn-btn--ghost {
    background: var(--hcn-color-surface, var(--hcn-surface-fb)) !important;
    border-color: var(--hcn-color-text, var(--hcn-heading-fb)) !important;
    color: var(--hcn-color-text, var(--hcn-heading-fb)) !important;
}
.hcn-reg-resume__actions .hcn-btn--ghost:hover { border-color: var(--hcn-color-brand) !important; }

/* ================================================================ service combobox (§21–§24) */

.hcn-service-combobox {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
}
.hcn-service-combobox [hidden] { display: none !important; }
.hcn-service-combobox__trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: var(--hcn-reg-control) !important;
    padding: 0 18px !important;
    background: var(--hcn-color-surface, var(--hcn-surface-fb)) !important;
    border: 1.5px solid var(--hcn-color-border, var(--hcn-border-fb)) !important;
    border-radius: var(--hcn-radius-md) !important;
    font-size: inherit !important;
    font-family: inherit !important;
    color: var(--hcn-color-text, var(--hcn-heading-fb)) !important;
    cursor: pointer !important;
    text-align: left !important;
    gap: 12px !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
    box-shadow: none !important;
}
.hcn-service-combobox__trigger:hover {
    border-color: var(--hcn-color-brand) !important;
}
.hcn-service-combobox__trigger[aria-expanded="true"] {
    border-color: var(--hcn-color-brand-strong, #8B6440) !important;
    box-shadow: 0 0 0 3px rgba(139,100,64,.18) !important;
}
.hcn-service-combobox__trigger:focus-visible {
    outline: 3px solid var(--hcn-color-brand-strong, #8B6440) !important;
    outline-offset: 2px !important;
}
.hcn-service-combobox__display {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}
.hcn-service-combobox__placeholder {
    color: var(--hcn-color-muted, var(--hcn-muted-fb));
}
.hcn-service-combobox__selected {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.hcn-service-combobox__badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    background: var(--hcn-color-brand-pale, #F5EDE3);
    color: var(--hcn-color-brand-strong, #8B6440);
    border-radius: var(--hcn-radius-sm);
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.hcn-service-combobox__label {
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}
.hcn-service-combobox__chevron {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    color: var(--hcn-color-muted, var(--hcn-muted-fb));
    transition: transform .18s ease;
    pointer-events: none;
}
.hcn-service-combobox__trigger[aria-expanded="true"] .hcn-service-combobox__chevron {
    transform: rotate(180deg);
}
.hcn-service-combobox__dropdown {
    /* In flow, full width of the field: the panel is part of the card, never a floating layer that
       can hang outside it (correction pass §5). */
    position: relative;
    margin-top: 8px;
    width: 100%;
    background: var(--hcn-color-surface, var(--hcn-surface-fb));
    border: 1.5px solid var(--hcn-color-border, var(--hcn-border-fb));
    border-radius: var(--hcn-radius-md);
    box-shadow: 0 8px 24px rgba(28,28,29,.08);
    overflow: hidden;
}

/* Icon variant of the badges: registry SVG from Settings → Services instead of the code letter. */
.hcn-service-combobox__badge--icon,
.hcn-service-option__badge--icon { padding: 0; }
.hcn-service-combobox__badge svg,
.hcn-service-option__badge svg { width: 18px; height: 18px; display: block; }


/* ---- individual option ---- */
.hcn-service-option {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    min-width: 0;
    overflow-wrap: anywhere;
    cursor: pointer;
    transition: background .1s ease;
    border-bottom: 1px solid rgba(28,28,29,.06);
}
.hcn-service-option:last-child { border-bottom: none; }
.hcn-service-option:hover,
.hcn-service-option[aria-selected="true"] {
    background: var(--hcn-color-brand-pale, #F5EDE3);
}
.hcn-service-option:focus-visible {
    outline: 3px solid var(--hcn-color-brand-strong, #8B6440);
    outline-offset: -3px;
}
.hcn-service-option__badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 9px;
    background: var(--hcn-color-brand-pale, #F5EDE3);
    color: var(--hcn-color-brand-strong, #8B6440);
    border-radius: var(--hcn-radius-sm);
    font-size: 0.76em;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-top: 2px;
}
.hcn-service-option__body {
    flex: 1 1 auto;
    min-width: 0;
}
.hcn-service-option__title {
    display: block;
    font-weight: 700;
    font-size: 1em;
    color: var(--hcn-color-heading, var(--hcn-heading-fb));
    line-height: 1.3;
}
.hcn-service-option__desc {
    display: block;
    font-size: 0.9em;
    color: var(--hcn-color-muted, var(--hcn-muted-fb));
    margin-top: 3px;
    line-height: 1.4;
}
/* registry icon badges: round, calm */
.hcn-service-option__badge--icon { min-width: 40px; height: 40px; border-radius: 50%; margin-top: 0; }
.hcn-service-combobox__badge--icon { min-width: 32px; height: 32px; border-radius: 50%; }
.hcn-service-option__badge--icon svg { width: 20px; height: 20px; }

/* ================================================================ skip / inline link */

.hcn-reg-skip { margin: 12px 0 0; text-align: center; }
.hcn-reg-skip,
.hcn-reg-skip__link {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    color: var(--hcn-color-muted, var(--hcn-muted-fb)) !important;
    font-size: 0.88em !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    box-shadow: none !important;
    min-height: 0 !important;
    line-height: 1.4 !important;
}
.hcn-reg-skip:hover { color: var(--hcn-color-text, var(--hcn-heading-fb)) !important; }

/* ================================================================ family accordion foundation (§25–§27 stub) */

.hcn-reg-family-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.hcn-reg-family-header h2 { margin: 0; font-size: 1.1em; }
.hcn-reg-family-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}
.hcn-reg-family-member {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--hcn-color-surface, var(--hcn-surface-fb));
    border: 1.5px solid var(--hcn-color-border, var(--hcn-border-fb));
    border-radius: var(--hcn-radius-md);
    font-size: 0.97em;
}
.hcn-reg-family-member__icon {
    flex: 0 0 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--hcn-color-brand-pale, #F5EDE3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    color: var(--hcn-color-brand-strong, #8B6440);
}
.hcn-reg-family-member__name {
    flex: 1 1 auto;
    font-weight: 600;
    color: var(--hcn-color-heading, var(--hcn-heading-fb));
}
.hcn-reg-family-member__role {
    color: var(--hcn-color-muted, var(--hcn-muted-fb));
    font-size: 0.9em;
}
.hcn-reg-family-add {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px 18px !important;
    background: none !important;
    border: 1.5px dashed var(--hcn-color-border, var(--hcn-border-fb)) !important;
    border-radius: var(--hcn-radius-md) !important;
    color: var(--hcn-color-muted, var(--hcn-muted-fb)) !important;
    font-size: 0.95em !important;
    cursor: pointer !important;
    transition: border-color .15s ease, color .15s ease !important;
    box-shadow: none !important;
    justify-content: center !important;
}
.hcn-reg-family-add:hover {
    border-color: var(--hcn-color-brand) !important;
    color: var(--hcn-color-brand-strong, #8B6440) !important;
}

/* ================================================================ tablet */

@media (max-width: 1024px) {
    .hcn-reg-step { padding: 32px 24px 64px; }   /* tablet: full available width, 24px gutters */
    .hcn-reg-card { padding: 40px clamp(24px, 5vw, 48px) 44px; }
}


/* ================================================================ Step 3 "Uw gegevens" — compact premium form (modules/REGISTRATION.md) */

/* Scope: the details screen only; Step 1/2 keep their own rhythm. Controls stay 54px (52–56 approved). */
[data-screen="details"] .hcn-reg-h1 { margin-bottom: 6px; }
[data-screen="details"] .hcn-reg-lead { margin-bottom: 22px; }
[data-screen="details"] .hcn-reg-field { margin-bottom: 18px; }
[data-screen="details"] .hcn-reg-field label,
[data-screen="details"] .hcn-reg-field__label { font-size: 0.95em; margin-bottom: 7px; }
[data-screen="details"] .hcn-reg-hint { margin-top: 6px; font-size: 0.85em; line-height: 1.45; }
[data-screen="details"] .hcn-reg-error { margin-top: 6px; font-size: 0.85em; }
[data-screen="details"] .hcn-reg-actions { margin-top: 4px; }
[data-screen="details"] .hcn-reg-actions .hcn-btn--primary { width: 100%; min-height: 56px !important; font-size: 1.08em !important; border-radius: 10px !important; box-shadow: 0 6px 18px rgba(179,143,100,.22) !important; }
[data-screen="details"] .hcn-reg-back { margin-top: 14px; }

/* sections: title + hairline; no boxes */
.hcn-reg-section { border: 0; padding: 22px 0 0; margin: 0 0 4px; min-width: 0; border-top: 1px solid rgba(28,28,29,.09); }
.hcn-reg-section:first-of-type { border-top: 0; padding-top: 0; }
.hcn-reg-section legend { padding: 0; float: left; width: 100%; }   /* legend flows like a normal block */
.hcn-reg-section legend + * { clear: both; }
.hcn-reg-section .hcn-reg-section__title,
.hcn-doc__head .hcn-reg-section__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-size: 1.02em;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--hcn-color-heading, var(--hcn-heading-fb));
}
.hcn-reg-section .hcn-reg-section__title::before,
.hcn-doc__head .hcn-reg-section__title::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hcn-color-brand);
    flex-shrink: 0;
}
.hcn-reg-section__lead { clear: both; margin: -6px 0 14px 18px; color: var(--hcn-color-muted, var(--hcn-muted-fb)); font-size: 0.9em; }
.hcn-reg-grid { clear: both; display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; align-items: start; }
.hcn-reg-field--full { grid-column: 1 / -1; }
.hcn-reg-field--half { grid-column: span 1; min-width: 0; }

/* Step 1 passport row: issuing country ~40%, number ~60%, expiry on its own full-width line so the
   most important date is never squeezed. */
.hcn-reg-grid--passport { grid-template-columns: 4fr 6fr; column-gap: 20px; }
.hcn-reg-field--w40 { grid-column: 1 / 2; min-width: 0; }
.hcn-reg-field--w60 { grid-column: 2 / 3; min-width: 0; }
.hcn-reg-field__label {
    display: block;
    font-weight: 700;
    color: var(--hcn-color-heading, var(--hcn-heading-fb));
    letter-spacing: 0.01em;
}
.hcn-reg-field input[data-role="date-input"] { letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }

/* single choice (gender): one segmented control, selected segment filled soft gold with a check */
.hcn-choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5px;                                   /* the gap shows the group background = segment divider */
    border: 1.5px solid rgba(28,28,29,.18);
    border-radius: var(--hcn-radius-md);
    background: rgba(28,28,29,.18);
    overflow: hidden;
}
.hcn-choice__option {
    /* !important: theme/Elementor global button styles (dark fill, gold text) must not win here */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    min-height: calc(var(--hcn-reg-control) - 3px) !important;
    padding: 10px 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--hcn-color-surface, var(--hcn-surface-fb)) !important;
    color: var(--hcn-color-text, var(--hcn-heading-fb)) !important;
    font-size: 1em !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.hcn-choice__option::before {
    content: "";
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 1.5px solid rgba(28,28,29,.28);
    background: transparent;
    flex-shrink: 0;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.hcn-choice__option:hover { background: var(--hcn-color-subtle-bg, #f7f6f3) !important; }
.hcn-choice__option:focus-visible { outline: none; box-shadow: inset 0 0 0 3px rgba(179,143,100,.35) !important; }
.hcn-choice__option.is-selected {
    background: var(--hcn-color-brand-soft, #f4ede4) !important;
    color: var(--hcn-color-brand-strong, #8B6440) !important;
}
.hcn-choice__option.is-selected::before {
    border-color: var(--hcn-color-brand-strong, #8B6440);
    background: var(--hcn-color-brand-strong, #8B6440);
    box-shadow: inset 0 0 0 3px var(--hcn-color-surface, #fff);
}
.hcn-reg-field.is-invalid .hcn-choice { border-color: var(--hcn-color-error, #c0392b); }

/* multi choice (languages): compact pills with a check mark */
.hcn-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hcn-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px;
    min-height: 44px !important;
    padding: 6px 16px 6px 12px !important;
    border: 1.5px solid rgba(28,28,29,.18) !important;
    border-radius: 999px !important;
    background: var(--hcn-color-surface, var(--hcn-surface-fb)) !important;
    color: var(--hcn-color-text, var(--hcn-heading-fb)) !important;
    font-size: 0.95em !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.hcn-chip:hover { border-color: var(--hcn-color-brand) !important; }
.hcn-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(179,143,100,.28) !important; border-color: var(--hcn-color-brand) !important; }
.hcn-chip__check {
    width: 18px; height: 18px;
    border-radius: 50%;
    display: inline-grid; place-items: center;
    font-size: 0.7em;
    color: transparent;
    border: 1.5px solid rgba(28,28,29,.25);
    transition: background .15s, color .15s, border-color .15s;
}
.hcn-chip.is-selected {
    border-color: var(--hcn-color-brand-strong, #8B6440) !important;
    background: var(--hcn-color-brand-soft, #f4ede4) !important;
    color: var(--hcn-color-brand-strong, #8B6440) !important;
}
.hcn-chip.is-selected .hcn-chip__check { background: var(--hcn-color-brand-strong, #8B6440); border-color: var(--hcn-color-brand-strong, #8B6440); color: #fff; }
.hcn-chip--inactive:not(.is-selected) { display: none; }   /* historical (disabled) language: readable only while selected */

/* nationality selector: same HCN country picker, full width, flag + name; matches the blood-group select */
.hcn-country-field { position: relative; }
.hcn-country-field__btn {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    padding: 0 16px !important;
    font-weight: 500 !important;
    color: var(--hcn-color-muted, var(--hcn-muted-fb)) !important;
}
.hcn-country-field__btn.has-value { color: var(--hcn-color-text, var(--hcn-heading-fb)) !important; font-weight: 500 !important; }
.hcn-country-field__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(179,143,100,.18) !important; border-color: var(--hcn-color-brand) !important; }
.hcn-country-field__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hcn-country-field__globe { font-size: 1em; opacity: .7; }
.hcn-country-field__chevron { width: 18px; height: 18px; flex-shrink: 0; color: var(--hcn-color-brand-strong, #8B6440); }
.hcn-country-field .hcn-country-picker { width: 100%; }
.hcn-country-picker__list li[aria-selected="true"] { background: var(--hcn-color-brand-soft, #f4ede4); font-weight: 600; }
[data-screen="details"] .hcn-select { font-weight: 500; }

/* invalid state: red border on the control the error belongs to */
.hcn-reg-field.is-invalid input:not([type="hidden"]),
.hcn-reg-field.is-invalid .hcn-select,
.hcn-reg-field.is-invalid .hcn-phone__country,
.hcn-reg-field.is-invalid .hcn-chip { border-color: var(--hcn-color-error, #c0392b) !important; }

/* ================================================================ Step 4 "Documenten" */

.hcn-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[data-screen="documents"] .hcn-reg-h1 { margin-bottom: 6px; }
[data-screen="documents"] .hcn-reg-lead { margin-bottom: 26px; }
[data-screen="documents"] .hcn-reg-actions { margin-top: 10px; }
[data-screen="documents"] .hcn-reg-actions .hcn-btn--primary { width: 100%; min-height: 56px !important; font-size: 1.08em !important; border-radius: 10px !important; box-shadow: 0 6px 18px rgba(179,143,100,.22) !important; }

/* one row per document: title + status, one guidance line, one control */
.hcn-doc { padding: 26px 0 28px; border-top: 1px solid rgba(28,28,29,.09); }
.hcn-doc:first-of-type { border-top: 0; padding-top: 0; }
.hcn-doc__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
/* specificity + !important: the theme styles bare h2 at 24px/500 and would win otherwise */
.hcn-doc .hcn-doc__title {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
    font-size: 1.02em !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.005em !important;
    color: var(--hcn-color-heading, var(--hcn-heading-fb)) !important;
}
.hcn-doc .hcn-doc__title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--hcn-color-brand); flex-shrink: 0; }
.hcn-doc__badge {
    display: inline-flex; align-items: center; gap: 7px;
    flex-shrink: 0;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.78em;
    font-weight: 700;
    background: var(--hcn-color-subtle-bg, #f7f6f3);
    color: var(--hcn-color-muted, var(--hcn-muted-fb));
}
.hcn-doc[data-status="SAVED"] .hcn-doc__badge { background: rgba(37,147,95,.12); color: var(--hcn-color-success, #25935F); }
.hcn-doc[data-status="FAILED"] .hcn-doc__badge { background: rgba(192,57,43,.10); color: var(--hcn-color-error, #c0392b); }
.hcn-doc[data-status="PROCESSING"] .hcn-doc__badge,
.hcn-doc[data-status="UPLOADING"] .hcn-doc__badge,
.hcn-doc[data-status="DELETING"] .hcn-doc__badge { background: var(--hcn-color-brand-soft, #f4ede4); color: var(--hcn-color-brand-strong, #8B6440); }
/* subtle loader: a small ring, only while busy */
.hcn-doc__spinner { display: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: hcn-spin .8s linear infinite; }
.hcn-doc[data-status="PROCESSING"] .hcn-doc__spinner,
.hcn-doc[data-status="UPLOADING"] .hcn-doc__spinner,
.hcn-doc[data-status="DELETING"] .hcn-doc__spinner { display: inline-block; }
@keyframes hcn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hcn-doc__spinner { animation: none; } }

.hcn-doc__guidance { margin: 0 0 14px 18px; color: var(--hcn-color-muted, var(--hcn-muted-fb)); font-size: 0.9em; line-height: 1.5; max-width: 62ch; }

/* empty / failed: the area IS the control — full card width, one label, no second button */
.hcn-doc__drop {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px;
    width: 100%;
    min-height: 88px;
    padding: 16px 20px !important;
    border: 1.5px dashed rgba(28,28,29,.22) !important;
    border-radius: var(--hcn-radius-md) !important;
    background: var(--hcn-color-surface, var(--hcn-surface-fb)) !important;
    color: var(--hcn-color-heading, var(--hcn-heading-fb)) !important;
    font: inherit !important;
    font-weight: 600 !important;
    font-size: 0.98em !important;
    text-align: center;
    cursor: pointer;
    box-shadow: none !important;
    transition: border-color .15s, background .15s, color .15s;
}
.hcn-doc__drop:hover, .hcn-doc__drop.is-over { border-color: var(--hcn-color-brand) !important; background: var(--hcn-color-brand-soft, #f4ede4) !important; color: var(--hcn-color-brand-strong, #8B6440) !important; }
.hcn-doc__drop:focus-visible { outline: 3px solid var(--hcn-color-brand-strong, #8B6440); outline-offset: 2px; }
.hcn-doc__drop:disabled { opacity: .65; cursor: default; }
.hcn-doc__drop svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--hcn-color-brand-strong, #8B6440); }
.hcn-doc[data-status="FAILED"] .hcn-doc__drop { border-color: var(--hcn-color-error, #c0392b) !important; }
.hcn-doc__drop[hidden], .hcn-doc__saved[hidden] { display: none !important; }

/* saved: thumbnail + quiet text actions */
.hcn-doc__saved { display: flex; align-items: center; gap: 16px; }
.hcn-doc__thumb {
    display: block;
    width: 132px;
    height: 88px;
    object-fit: cover;
    object-position: center;
    background: var(--hcn-color-subtle-bg, #f7f6f3);
    border: 1px solid rgba(28,28,29,.10);
    border-radius: var(--hcn-radius-md);
    flex-shrink: 0;
}
/* Passport: the pilgrim must be able to check that all four corners are in frame, so the whole
   page is shown (contain), never cropped. A portrait photo is framed on its subject (cover). */
.hcn-doc[data-doc="passport"] .hcn-doc__thumb { object-fit: contain; padding: 2px; }
.hcn-doc[data-doc="photo"] .hcn-doc__thumb { width: 74px; height: 96px; }
.hcn-doc__saved-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hcn-doc__action {
    background: none !important;
    border: 0 !important;
    padding: 4px 0 !important;
    min-height: 0 !important;
    font: inherit !important;
    font-size: 0.92em !important;
    font-weight: 700 !important;
    color: var(--hcn-color-brand-strong, #8B6440) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    box-shadow: none !important;
}
.hcn-doc__action:hover { color: var(--hcn-color-heading, var(--hcn-heading-fb)) !important; }
.hcn-doc__action--remove { color: var(--hcn-color-muted, var(--hcn-muted-fb)) !important; font-weight: 600 !important; }
.hcn-doc__action--remove:hover { color: var(--hcn-color-error, #c0392b) !important; }
.hcn-doc__sep { color: rgba(28,28,29,.28); }
.hcn-doc .hcn-reg-error { margin: 8px 0 0; }
.hcn-doc__video { margin: 0 0 18px; }
.hcn-doc__video video { display: block; width: 100%; max-height: 320px; border-radius: var(--hcn-radius-md); background: #000; }

/* small confirmation dialog (delete) */
.hcn-confirm[hidden] { display: none !important; }
.hcn-confirm { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 16px; }
.hcn-confirm__backdrop { position: absolute; inset: 0; background: rgba(28,28,29,.45); }
.hcn-confirm__panel {
    position: relative;
    width: min(420px, 100%);
    background: var(--hcn-color-surface, var(--hcn-surface-fb));
    border-radius: var(--hcn-radius-lg);
    box-shadow: 0 16px 48px rgba(28,28,29,.22);
    padding: 24px 24px 20px;
}
.hcn-confirm .hcn-confirm__title { margin: 0 0 8px !important; font-size: 1.1em !important; font-weight: 700 !important; line-height: 1.3 !important; color: var(--hcn-color-heading, var(--hcn-heading-fb)) !important; }
.hcn-confirm__text { margin: 0 0 18px; font-size: 0.95em; color: var(--hcn-color-muted, var(--hcn-muted-fb)); line-height: 1.5; }
.hcn-confirm__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.hcn-confirm__actions .hcn-btn {
    /* Long Dutch labels must wrap inside the panel instead of pushing past its edges. */
    flex: 1 1 auto;
    min-width: 0 !important;
    max-width: 100%;
    min-height: 48px !important;
    padding: 12px 18px !important;
    font-size: 0.95em !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    text-align: center;
}

/* Wrong-document check: an attention dialog, not a neutral confirm. */
.hcn-doccheck .hcn-confirm__panel { width: min(480px, 100%); padding: 26px 26px 22px; text-align: center; }
.hcn-doccheck__icon {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 999px;
    background: #FBEFD8;
    color: #9A6B12;
}
.hcn-doccheck[data-verdict="FAIL"] .hcn-doccheck__icon { background: #FADFDB; color: var(--hcn-color-error, #C0392B); }
.hcn-doccheck .hcn-confirm__title { font-size: 1.22em !important; margin: 0 0 10px !important; }
.hcn-doccheck .hcn-confirm__text { margin: 0 0 22px; font-size: 1em; line-height: 1.6; }
.hcn-doccheck .hcn-confirm__actions { justify-content: center; }
.hcn-doccheck .hcn-confirm__actions .hcn-btn { flex: 1 1 190px; }
.hcn-doccheck .hcn-btn--primary[hidden] { display: none !important; }
.hcn-btn--danger { background: var(--hcn-color-error, #c0392b) !important; color: #fff !important; border-color: var(--hcn-color-error, #c0392b) !important; }
.hcn-btn--danger:hover { filter: brightness(.92); }

/* Later verdergaan (from Step 4): a quiet secondary action, never a second primary button */
.hcn-reg-later { margin-top: 14px; text-align: center; }
.hcn-reg-later__btn {
    background: none !important;
    border: 0 !important;
    padding: 6px 4px !important;
    min-height: 0 !important;
    font: inherit !important;
    font-size: 0.95em !important;
    font-weight: 700 !important;
    color: var(--hcn-color-brand-strong, #8B6440) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    box-shadow: none !important;
}
.hcn-reg-later__btn:hover { color: var(--hcn-color-heading, var(--hcn-heading-fb)) !important; }
.hcn-reg-later__btn:disabled { opacity: .6; cursor: default; }
.hcn-reg-later__hint { display: block; margin-top: 2px; font-size: 0.85em; color: var(--hcn-color-muted, var(--hcn-muted-fb)); }
.hcn-reg-later__done {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: var(--hcn-radius-md);
    background: rgba(37,147,95,.10);
    color: var(--hcn-color-success, #25935F);
    font-weight: 600;
    font-size: 0.95em;
    text-align: left;
    outline: none;
}
.hcn-reg-later__done[hidden] { display: none !important; }

/* ================================================================ step 4 — terms acceptance */

.hcn-terms { margin: 20px 0 4px; }
.hcn-terms__row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid rgba(28,28,29,.10);
    border-radius: var(--hcn-radius-md);
    background: var(--hcn-color-subtle-bg, #f7f6f3);
    cursor: pointer;
}
.hcn-terms__box {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    accent-color: var(--hcn-color-brand);
    cursor: pointer;
}
.hcn-terms__text {
    font-size: 0.95em;
    line-height: 1.55;
    color: var(--hcn-color-heading, var(--hcn-heading-fb));
}
.hcn-terms__text a { color: var(--hcn-color-brand-strong, #8B6440); font-weight: 700; text-decoration: underline; }
.hcn-terms .hcn-reg-error { margin-top: 6px; }

/* ================================================================ step 5 — familieleden */

/* Read-only recap of the primary pilgrim, so the pilgrim sees their own data is stored. */
.hcn-primary {
    margin: 4px 0 22px;
    padding: 18px 20px;
    border: 1px solid rgba(28,28,29,.10);
    border-radius: var(--hcn-radius-md);
    background: var(--hcn-color-subtle-bg, #f7f6f3);
}
.hcn-primary__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hcn-primary .hcn-primary__title {
    margin: 0 !important;
    font-size: 1.05em !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--hcn-color-heading, var(--hcn-heading-fb)) !important;
}
.hcn-primary__badge {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(37,147,95,.12);
    color: var(--hcn-color-success, #25935F);
    font-size: 0.78em;
    font-weight: 700;
}
.hcn-primary__facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 24px;
    margin: 14px 0 0;
}
.hcn-primary__fact dt { margin: 0; font-size: 0.8em; color: var(--hcn-color-muted, var(--hcn-muted-fb)); }
.hcn-primary__fact dd { margin: 2px 0 0; font-size: 0.95em; font-weight: 600; color: var(--hcn-color-heading, var(--hcn-heading-fb)); }

/* Primary action, deliberately the strongest element on the screen. */
.hcn-family-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 18px; }
.hcn-family-cta__btn { display: inline-flex !important; align-items: center; gap: 10px; }
.hcn-family-cta__btn svg { width: 18px; height: 18px; }
.hcn-family-cta__hint { font-size: 0.85em; color: var(--hcn-color-muted, var(--hcn-muted-fb)); }

.hcn-family-member {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    margin-bottom: 10px;
    border: 1px solid rgba(28,28,29,.10);
    border-radius: var(--hcn-radius-md);
    background: #fff;
}
.hcn-family-member__main { min-width: 0; }
.hcn-family-member .hcn-family-member__name {
    margin: 0 !important;
    font-size: 1em !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--hcn-color-heading, var(--hcn-heading-fb)) !important;
}
.hcn-family-member__meta { margin: 4px 0 0; font-size: 0.88em; color: var(--hcn-color-muted, var(--hcn-muted-fb)); }
.hcn-family-member__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.hcn-family-member__status {
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(28,28,29,.06);
    color: var(--hcn-color-muted, var(--hcn-muted-fb));
    font-size: 0.76em;
    font-weight: 700;
    white-space: nowrap;
}
.hcn-family-member__status.is-complete { background: rgba(37,147,95,.12); color: var(--hcn-color-success, #25935F); }
.hcn-family-member__actions { display: flex; align-items: center; gap: 10px; }

.hcn-family-empty {
    margin: 4px 0 0;
    padding: 18px 0;
    color: var(--hcn-color-muted, var(--hcn-muted-fb));
    font-size: 0.95em;
}
.hcn-family-empty[hidden] { display: none !important; }

.hcn-family-form {
    margin: 0 0 18px;
    padding: 20px;
    border: 1px solid rgba(28,28,29,.12);
    border-radius: var(--hcn-radius-md);
    background: #fff;
}
.hcn-family-form[hidden] { display: none !important; }
.hcn-family-form .hcn-family-form__title {
    margin: 0 0 14px !important;
    font-size: 1.02em !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--hcn-color-heading, var(--hcn-heading-fb)) !important;
    outline: none;
}
.hcn-family-form__actions { display: flex; align-items: center; gap: 16px; margin-top: 8px; }

/* ================================================================ step 1 — passport info */

.hcn-info-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 26px !important;
    height: 26px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 1.5px solid var(--hcn-color-brand) !important;
    border-radius: 50% !important;
    background: none !important;
    color: var(--hcn-color-brand-strong, #8B6440) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    font-style: italic;
    line-height: 1 !important;
    cursor: pointer;
}
.hcn-info-btn:hover { background: var(--hcn-color-brand) !important; color: #fff !important; }

/* ================================================================ step 3 — HCN partner (agency) */

.hcn-agency { position: relative; }
.hcn-agency__btn {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 54px;
    padding: 10px 14px !important;
    border: 1px solid rgba(28,28,29,.18) !important;
    border-radius: var(--hcn-radius-md) !important;
    background: #fff !important;
    color: var(--hcn-color-heading, var(--hcn-heading-fb)) !important;
    font-size: 1em !important;
    font-weight: 600 !important;
    text-align: left;
    cursor: pointer;
}
.hcn-agency__btn[aria-expanded="true"] { border-color: var(--hcn-color-brand) !important; }
.hcn-agency__current { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hcn-agency__logo { width: 28px; height: 28px; object-fit: contain; background: #fff; border-radius: 6px; flex-shrink: 0; }
.hcn-agency__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hcn-agency__list {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    border: 1px solid rgba(28,28,29,.14);
    border-radius: var(--hcn-radius-md);
    background: #fff;
    box-shadow: 0 16px 36px rgba(0,0,0,.14);
}
.hcn-agency__list[hidden] { display: none !important; }
.hcn-agency__list li { margin: 0; list-style: none; }
.hcn-agency__option {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    padding: 8px 10px !important;
    border: 0 !important;
    border-radius: var(--hcn-radius-sm, 8px) !important;
    background: none !important;
    color: var(--hcn-color-heading, var(--hcn-heading-fb)) !important;
    font-size: 0.98em !important;
    font-weight: 600 !important;
    text-align: left;
    cursor: pointer;
}
.hcn-agency__option:hover { background: var(--hcn-color-subtle-bg, #f7f6f3) !important; }
.hcn-agency__option.is-selected { background: var(--hcn-color-brand) !important; color: #fff !important; }

/* ================================================================ step 1 — contact + passport check */

[data-screen="contact"] .hcn-reg-section { padding-top: 26px; margin-bottom: 8px; }
[data-screen="contact"] .hcn-reg-section:first-of-type { padding-top: 6px; }
[data-screen="contact"] .hcn-reg-section__lead {
    margin: -6px 0 18px;
    font-size: 0.95em;
    line-height: 1.55;
    color: var(--hcn-color-muted, var(--hcn-muted-fb));
}
[data-screen="contact"] .hcn-reg-field { margin-bottom: 22px; }
[data-screen="contact"] .hcn-reg-field label,
[data-screen="contact"] .hcn-reg-field__label { font-size: 1em; margin-bottom: 8px; }
[data-screen="contact"] .hcn-reg-check { margin: -8px 0 20px; }
[data-screen="contact"] .hcn-reg-grid--passport .hcn-reg-field { margin-bottom: 20px; }

/* Expiry help trigger: a small passport that slowly turns and pulses, so the pilgrim notices there
   is an explanation behind it. Hover, focus and prefers-reduced-motion all stop the motion. */
.hcn-passport-btn {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: none !important;
    color: var(--hcn-color-brand-strong, #8B6440) !important;
    cursor: pointer;
    flex-shrink: 0;
    perspective: 320px;
}
.hcn-passport-btn:focus-visible { outline: 2px solid var(--hcn-color-brand); outline-offset: 2px; }
.hcn-passport-btn__turn {
    display: block;
    line-height: 0;
    transform-style: preserve-3d;
    animation: hcn-passport-turn 4.8s ease-in-out infinite;
}
.hcn-passport-btn__turn svg { display: block; }
/* Soft halo that breathes behind the document. */
.hcn-passport-btn__ping {
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--hcn-color-brand);
    opacity: .18;
    animation: hcn-passport-ping 2.4s ease-out infinite;
    pointer-events: none;
}
.hcn-passport-btn:hover .hcn-passport-btn__turn,
.hcn-passport-btn:focus .hcn-passport-btn__turn { animation-play-state: paused; }
.hcn-passport-btn:hover .hcn-passport-btn__ping,
.hcn-passport-btn:focus .hcn-passport-btn__ping { animation: none; opacity: .26; }

@keyframes hcn-passport-turn {
    0%, 55%  { transform: rotateY(0deg); }
    70%      { transform: rotateY(180deg); }
    85%      { transform: rotateY(360deg); }
    100%     { transform: rotateY(360deg); }
}
@keyframes hcn-passport-ping {
    0%   { transform: scale(.75); opacity: .26; }
    70%  { transform: scale(1.25); opacity: 0; }
    100% { transform: scale(1.25); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .hcn-passport-btn__turn { animation: none; }
    .hcn-passport-btn__ping { animation: none; opacity: .16; }
}

/* Label + icon on one baseline, with the icon big enough to tap. */
.hcn-reg-field__labelrow { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.hcn-reg-field__labelrow label { margin-bottom: 0 !important; }

/* The expiry field carries the step's decision, so it reads as the anchor of the section:
   one row of Dag / Maand / Jaar, sized so the month reads first. */
.hcn-datesel {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 460px;
}
.hcn-datesel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: var(--hcn-reg-control);
    flex: 0 0 auto;
    color: var(--hcn-color-brand-strong, #8B6440);
}
.hcn-datesel__part { display: block; min-width: 0; }
.hcn-datesel__part--day   { flex: 0 1 92px; }
.hcn-datesel__part--month { flex: 1 1 160px; }
.hcn-datesel__part--year  { flex: 0 1 118px; }
.hcn-datesel .hcn-select {
    width: 100%;
    min-height: var(--hcn-reg-control);
    padding: 12px 34px 12px 14px;
    font-size: 1.02em;
    font-weight: 600;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238B6440' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 8 10 13 15 8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
    cursor: pointer;
}
.hcn-datesel .hcn-select:hover { border-color: rgba(179,143,100,.55); }
.hcn-datesel .hcn-select:focus {
    border-color: var(--hcn-color-brand);
    outline: none;
    box-shadow: 0 0 0 3px rgba(179,143,100,.18);
}
.hcn-reg-field--expiry .hcn-reg-hint { margin-top: 10px; }
.hcn-reg-field--expiry.is-invalid .hcn-datesel .hcn-select { border-color: var(--hcn-color-error, #c0392b); }

/* Passport number: legible character by character, without the "code editor" look. */
.hcn-input--upper {
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    font-weight: 600;
}

/* ================================================================ flag selector (passport country) */

/* Flags are inline SVG, not emoji: Windows has no flag glyphs and would show bare letters. */
.hcn-flag { display: block; width: 20px; height: 14px; border-radius: 2px; flex-shrink: 0; }
.hcn-flagselect { position: relative; }
.hcn-flagselect__btn {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: var(--hcn-reg-control);
    padding: 10px 16px !important;
    border: 1.5px solid rgba(28,28,29,.18) !important;
    border-radius: var(--hcn-radius-md) !important;
    background: var(--hcn-color-surface, var(--hcn-surface-fb)) !important;
    color: var(--hcn-color-text, var(--hcn-heading-fb)) !important;
    font-size: 1em !important;
    font-weight: 500 !important;
    text-align: left;
    cursor: pointer;
}
.hcn-flagselect__btn[aria-expanded="true"] { border-color: var(--hcn-color-brand) !important; }
.hcn-flagselect__current { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hcn-flagselect__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hcn-flagselect__list {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 300px;
    overflow: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    border: 1px solid rgba(28,28,29,.14);
    border-radius: var(--hcn-radius-md);
    background: #fff;
    box-shadow: 0 16px 36px rgba(0,0,0,.14);
}
.hcn-flagselect__list[hidden] { display: none !important; }
.hcn-flagselect__list li { margin: 0; list-style: none; }
.hcn-flagselect__option {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 8px 10px !important;
    border: 0 !important;
    border-radius: var(--hcn-radius-sm, 8px) !important;
    background: none !important;
    color: var(--hcn-color-heading, var(--hcn-heading-fb)) !important;
    font-size: 0.98em !important;
    font-weight: 600 !important;
    text-align: left;
    cursor: pointer;
}
.hcn-flagselect__option:hover { background: var(--hcn-color-subtle-bg, #f7f6f3) !important; }
.hcn-flagselect__option.is-selected { background: var(--hcn-color-brand) !important; color: #fff !important; }

/* ================================================================ passport help + document guide */

.hcn-confirm__panel--wide { max-width: 560px; }
.hcn-confirm__text--strong { font-weight: 700; color: var(--hcn-color-heading, var(--hcn-heading-fb)); }

/* Expiry help: the specimen passport with field 10 framed, plus a zoomed inset of that same area.
   Coordinates are percentages of the image, so the marker tracks the picture at any width. */
.hcn-expiry-help__panel {
    width: min(720px, 100%);
    max-width: 720px;
    max-height: 92vh;
    overflow-y: auto;
    padding: 26px 26px 22px;
    -webkit-overflow-scrolling: touch;
}
.hcn-expiry-help__x {
    position: absolute !important;
    top: 10px;
    right: 12px;
    width: 34px !important;
    height: 34px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: none !important;
    color: var(--hcn-color-muted, var(--hcn-muted-fb)) !important;
    font-size: 26px !important;
    line-height: 1 !important;
    cursor: pointer;
}
.hcn-expiry-help__x:hover { background: var(--hcn-color-subtle-bg, #f7f6f3) !important; }

.hcn-expiry-help__figure { position: relative; margin: 14px 0 0; }
.hcn-expiry-help__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--hcn-radius-md);
    border: 1px solid rgba(28,28,29,.12);
}
/* Field 10 "geldig tot / date of expiry" on the specimen. */
.hcn-expiry-help__marker {
    position: absolute;
    left: 73.5%;
    top: 48%;
    width: 25%;
    height: 9.5%;
    border: 2px solid var(--hcn-color-brand, #B38F64);
    border-radius: 6px;
    box-shadow: 0 0 0 9999px rgba(255,255,255,.34);
}

.hcn-expiry-help__zoom {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 14px 0 4px;
    padding: 12px;
    border: 1px solid rgba(28,28,29,.12);
    border-radius: var(--hcn-radius-md);
    background: var(--hcn-color-subtle-bg, #f7f6f3);
}
.hcn-expiry-help__zoomimg {
    display: block;
    flex: 0 0 auto;
    width: 190px;
    height: 74px;
    border-radius: 6px;
    border: 2px solid var(--hcn-color-brand, #B38F64);
    background-repeat: no-repeat;
    background-size: 640% auto;
    background-position: 86% 53%;
}
.hcn-expiry-help__zoomtext {
    margin: 0;
    font-size: 0.95em;
    font-weight: 600;
    line-height: 1.5;
    color: var(--hcn-color-heading, var(--hcn-heading-fb));
}
.hcn-expiry-help .hcn-confirm__text { font-size: 0.95em; line-height: 1.55; margin: 10px 0 0; }
.hcn-expiry-help .hcn-confirm__actions { margin-top: 18px; }

.hcn-doc-help { margin: -6px 0 18px; }
.hcn-doc-help__btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
    background: none !important;
    color: var(--hcn-color-brand-strong, #8B6440) !important;
    font-size: 0.92em !important;
    font-weight: 700 !important;
    text-decoration: underline;
    cursor: pointer;
}

/* Quality guide: two real specimens side by side, large enough to actually judge. */
.hcn-docguide__panel {
    width: min(760px, 100%);
    max-width: 760px;
    max-height: 92vh;
    overflow-y: auto;
    padding: 26px 26px 22px;
    -webkit-overflow-scrolling: touch;
}
.hcn-docguide__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px; margin: 18px 0 6px; align-items: start; }
.hcn-docguide__item { margin: 0; }
.hcn-docguide__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--hcn-radius-md);
    border: 1px solid rgba(28,28,29,.12);
    background: #fff;
}
.hcn-docguide__img--portrait { max-width: 220px; }
.hcn-docguide__item figcaption { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.hcn-docguide__title { font-size: 1em; font-weight: 700; color: var(--hcn-color-heading, var(--hcn-heading-fb)); }
.hcn-docguide__ok { font-size: 0.9em; line-height: 1.55; color: var(--hcn-color-muted, var(--hcn-muted-fb)); }
.hcn-docguide__no { font-size: 0.9em; line-height: 1.55; color: var(--hcn-color-error, #c0392b); }
/* The one thing the pilgrim must remember, set apart: HCN never crops on their behalf. */
.hcn-docguide__note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 20px 0 4px;
    padding: 16px 18px;
    border-radius: var(--hcn-radius-md);
    background: #DCEBE5;
    color: #1F4B3C;
    font-size: 0.95em;
    font-weight: 600;
    line-height: 1.6;
}
.hcn-docguide__note-icon { flex-shrink: 0; margin-top: 1px; color: var(--hcn-color-success, #25935F); }

/* ================================================================ step 4 — document accordions */

.hcn-acc {
    margin: 0 0 40px;
    border: 1px solid rgba(28,28,29,.12);
    border-radius: var(--hcn-radius-md);
    background: #fff;
    overflow: hidden;
}
.hcn-acc[hidden] { display: none !important; }
.hcn-acc .hcn-acc__h { margin: 0 !important; padding: 0 !important; font-size: 1em !important; }
.hcn-acc__header {
    display: flex !important;
    align-items: center;
    gap: 32px;
    width: 100%;
    min-height: 122px;
    padding: 30px 28px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    color: var(--hcn-color-heading, var(--hcn-heading-fb)) !important;
    text-align: left;
    cursor: pointer;
}
.hcn-acc__header:hover { background: var(--hcn-color-subtle-bg, #f7f6f3) !important; }
.hcn-acc__header:focus-visible { outline: 2px solid var(--hcn-color-brand); outline-offset: -3px; }
.hcn-acc__icons { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; color: var(--hcn-color-brand-strong, #8B6440); }
.hcn-acc__icon { display: block; }
.hcn-acc__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 auto; padding-right: 24px; }
.hcn-acc__title { font-size: 1.16em; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.hcn-acc__sub { max-width: 52ch; font-size: 0.92em; line-height: 1.5; color: var(--hcn-color-muted, var(--hcn-muted-fb)); }
.hcn-acc__state {
    flex-shrink: 0;
    margin-left: auto;
    padding: 9px 18px;
    border-radius: 999px;
    background: rgba(28,28,29,.06);
    color: var(--hcn-color-muted, var(--hcn-muted-fb));
    font-size: 0.8em;
    font-weight: 700;
    white-space: nowrap;
}
.hcn-acc__state.is-complete { background: rgba(37,147,95,.12); color: var(--hcn-color-success, #25935F); }
.hcn-acc__chevron { flex-shrink: 0; color: var(--hcn-color-muted, var(--hcn-muted-fb)); transition: transform .2s ease; }
.hcn-acc.is-open .hcn-acc__chevron { transform: rotate(180deg); }
.hcn-acc__panel { border-top: 1px solid rgba(28,28,29,.09); }
.hcn-acc__panel[hidden] { display: none !important; }
.hcn-acc__inner { padding: 12px 28px 30px; animation: hcn-acc-in .18s ease-out; }
@keyframes hcn-acc-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .hcn-acc__chevron { transition: none; }
    .hcn-acc__inner { animation: none; }
}

/* Document actions are buttons, not a sentence of links. */
.hcn-doc__saved-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hcn-doc__sep { display: none !important; }
.hcn-doc .hcn-doc__action {
    min-height: 44px !important;
    padding: 0 16px !important;
    border: 1px solid rgba(28,28,29,.16) !important;
    border-radius: var(--hcn-radius-md) !important;
    background: #fff !important;
    font-size: 0.92em !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}
.hcn-doc .hcn-doc__action:hover { border-color: var(--hcn-color-brand) !important; background: var(--hcn-color-subtle-bg, #f7f6f3) !important; }
.hcn-doc .hcn-doc__action--remove {
    border-color: transparent !important;
    color: var(--hcn-color-muted, var(--hcn-muted-fb)) !important;
    font-weight: 600 !important;
}
.hcn-doc .hcn-doc__action--remove:hover {
    border-color: rgba(192,57,43,.35) !important;
    background: rgba(192,57,43,.06) !important;
    color: var(--hcn-color-error, #c0392b) !important;
}

/* ================================================================ step 4 — image adjustment */

.hcn-crop { position: fixed; inset: 0; z-index: 10001; display: grid; place-items: center; padding: 16px; }
.hcn-crop[hidden] { display: none !important; }
.hcn-crop__panel {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: 92vh;
    overflow: auto;
    padding: 24px;
    border-radius: var(--hcn-radius-lg, 14px);
    background: #fff;
    box-shadow: 0 24px 60px rgba(0,0,0,.24);
}
.hcn-crop .hcn-crop__title {
    margin: 0 0 6px !important;
    font-size: 1.1em !important;
    font-weight: 700 !important;
    color: var(--hcn-color-heading, var(--hcn-heading-fb)) !important;
    outline: none;
}
.hcn-crop__lead { margin: 0 0 14px; font-size: 0.9em; line-height: 1.5; color: var(--hcn-color-muted, var(--hcn-muted-fb)); }
.hcn-crop__stage { position: relative; background: #f2f1ee; border-radius: var(--hcn-radius-md); overflow: hidden; }
.hcn-crop__canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: grab; }
.hcn-crop__canvas:active { cursor: grabbing; }
.hcn-crop__frame { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 2px rgba(255,255,255,.85); border-radius: var(--hcn-radius-md); }
.hcn-crop__tools { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; flex-wrap: wrap; }
.hcn-crop__tool {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    min-height: 44px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(28,28,29,.16) !important;
    border-radius: var(--hcn-radius-md) !important;
    background: #fff !important;
    color: var(--hcn-color-heading, var(--hcn-heading-fb)) !important;
    font-size: 0.92em !important;
    font-weight: 700 !important;
    cursor: pointer;
}
.hcn-crop__tool:hover { border-color: var(--hcn-color-brand) !important; color: var(--hcn-color-brand-strong, #8B6440) !important; }
.hcn-crop__zoom { display: flex; align-items: center; gap: 12px; margin: 12px 0 6px; font-size: 0.9em; font-weight: 600; }
.hcn-crop__zoom input { flex: 1; accent-color: var(--hcn-color-brand); }
.hcn-crop__hint { margin: 0 0 16px; font-size: 0.85em; color: var(--hcn-color-muted, var(--hcn-muted-fb)); }
.hcn-crop__actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; flex-wrap: wrap; }

/* ================================================================ step 5 — primary profile */

.hcn-profile {
    margin: 4px 0 22px;
    padding: 20px;
    border: 1px solid rgba(28,28,29,.10);
    border-radius: var(--hcn-radius-md);
    background: var(--hcn-color-subtle-bg, #f7f6f3);
}
.hcn-profile__head { display: flex; align-items: center; gap: 16px; }
.hcn-profile__photo {
    width: 64px;
    height: 84px;
    object-fit: cover;
    border-radius: var(--hcn-radius-md);
    border: 1px solid rgba(28,28,29,.10);
    background: #fff;
    flex-shrink: 0;
}
.hcn-profile__photo--empty { display: block; }
.hcn-profile__id { min-width: 0; }
.hcn-profile .hcn-profile__title {
    margin: 0 !important;
    font-size: 1.1em !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--hcn-color-heading, var(--hcn-heading-fb)) !important;
}
.hcn-profile__sub { margin: 3px 0 8px; font-size: 0.9em; color: var(--hcn-color-muted, var(--hcn-muted-fb)); }
.hcn-profile__facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid rgba(28,28,29,.08);
}
.hcn-profile__fact dt { margin: 0; font-size: 0.78em; color: var(--hcn-color-muted, var(--hcn-muted-fb)); }
.hcn-profile__fact dd { margin: 2px 0 0; font-size: 0.95em; font-weight: 600; color: var(--hcn-color-heading, var(--hcn-heading-fb)); }
.hcn-profile__docs { margin: 16px 0 0; font-size: 0.88em; font-weight: 600; color: var(--hcn-color-muted, var(--hcn-muted-fb)); }
.hcn-profile__docs.is-complete { color: var(--hcn-color-success, #25935F); }

.hcn-family-full { margin: 0 0 16px; font-size: 0.92em; font-weight: 600; color: var(--hcn-color-heading, var(--hcn-heading-fb)); }
.hcn-family-full[hidden] { display: none !important; }

.hcn-relation-options { display: grid; gap: 8px; margin: 12px 0 4px; }
.hcn-relation-option {
    width: 100%;
    padding: 14px 16px !important;
    border: 1px solid rgba(28,28,29,.14) !important;
    border-radius: var(--hcn-radius-md) !important;
    background: #fff !important;
    color: var(--hcn-color-heading, var(--hcn-heading-fb)) !important;
    font-size: 0.98em !important;
    font-weight: 600 !important;
    text-align: left;
    cursor: pointer;
}
.hcn-relation-option.is-selected {
    border-color: var(--hcn-color-brand) !important;
    background: var(--hcn-color-brand) !important;
    color: #fff !important;
}

/* ================================================================ mobile */

@media (max-width: 600px) {
    .hcn-reg-step { padding: 20px 16px 56px; font-size: calc(17px * var(--hcn-reg-scale)); }   /* mobile: 16px gutters */
    /* Native mobile feel (R1 polish §2): no outer container border/shadow/radius, no boxed padding.
       Inputs, dropdowns and controls keep their own borders. */
    .hcn-reg-card,
    .hcn-reg-step--contrast .hcn-reg-card {
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 8px 0 24px !important;
    }
    .hcn-help-pill__label--full { display: none; }
    .hcn-help-pill__label--short { display: inline; }
    .hcn-help-pill { padding: 0 12px 0 9px !important; }
    .hcn-reg-cards { grid-template-columns: 1fr; }
    .hcn-reg-card-choice { min-height: 0; padding: 20px; gap: 6px; }
    .hcn-reg-card-choice__icon svg { width: 44px; height: 44px; }
    /* Season block stacks label over phase pill so "Hadj 2027 / 1448 AH" is never truncated;
       the a11y tools still stay on the right of the same row. */
    .hcn-reg-season { flex-direction: column; align-items: flex-start; gap: 4px; }
    .hcn-reg-season__label { font-size: 0.95em; white-space: normal; overflow: visible; text-overflow: clip; }
    .hcn-reg-season__phase { font-size: 0.75em; padding: 3px 10px; }
    /* Progress row: step label on its own line, help pill on the next line (right-aligned). */
    /* With the short "Hulp?" pill both fit on one line; wrap only when the label really needs it. */
    .hcn-reg-progress__row { flex-wrap: wrap; gap: 8px 12px; }
    .hcn-reg-progress__label { flex: 1 1 auto; }
    .hcn-help-pill { margin-left: auto; }
    .hcn-reg-progress__label > span { white-space: nowrap; }
    .hcn-reg-service { padding: 16px; gap: 12px; }
    .hcn-help-modal { padding: 0; align-items: flex-end; }
    .hcn-help-modal__panel { max-width: none; max-height: 94vh; border-radius: 20px 20px 0 0; }
    .hcn-help-hero { min-height: 240px; padding: 20px 18px 18px; }
    .hcn-help-hero__inner { flex-direction: column; align-items: stretch; gap: 14px; }
    .hcn-help-hero h2 { font-size: 1.45em !important; }
    .hcn-help-hours { align-self: stretch; }
    .hcn-help-modal__body { padding: 18px 18px 24px; -webkit-overflow-scrolling: touch; }
    .hcn-help-actions { grid-template-columns: 1fr; }
    .hcn-help-action__meta { white-space: normal; }
    .hcn-reg-topbar { font-size: 14px !important; align-items: flex-start; }
    .hcn-a11y__btn { width: 36px !important; height: 36px !important; }
    .hcn-reg-busy__glass { width: 56px; height: 56px; }
    .hcn-reg-resume { padding: 8px 0 24px !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; max-width: none; }
    .hcn-reg-resume__actions { grid-template-columns: 1fr; }
    .hcn-service-combobox__dropdown { max-height: none; }   /* in flow: show every service, no inner scroll */
    .hcn-service-option { padding: 14px 14px; gap: 10px; }
    .hcn-reg-family-member { padding: 12px 14px; }
    /* Step 3: single column, borderless like the rest of the mobile flow */
    .hcn-reg-grid, .hcn-reg-grid--passport { grid-template-columns: 1fr; column-gap: 0; }
    .hcn-reg-field--half,
    .hcn-reg-field--w40,
    .hcn-reg-field--w60 { grid-column: 1 / -1; }
    /* Step 1 on phones: one field per row, nothing squeezed, primary action full width */
    [data-screen="contact"] .hcn-reg-section { padding-top: 20px; }
    [data-screen="contact"] .hcn-reg-field { margin-bottom: 18px; }
    /* Expiry on phones: icon drops, three balanced columns, nothing to scroll sideways */
    .hcn-datesel { max-width: none; flex-wrap: wrap; gap: 8px; }
    .hcn-datesel__icon { display: none; }
    .hcn-datesel__part--day   { flex: 1 1 68px; }
    .hcn-datesel__part--month { flex: 2 1 120px; }
    .hcn-datesel__part--year  { flex: 1 1 88px; }
    .hcn-datesel .hcn-select { padding-right: 30px; font-size: 1em; }
    .hcn-reg-actions .hcn-btn { width: 100%; }
    .hcn-choice { grid-template-columns: 1fr 1fr; }
    [data-screen="details"] .hcn-reg-field { margin-bottom: 16px; }
    .hcn-reg-section { padding-top: 18px; }
    .hcn-doc__guidance { margin-left: 0; }
    .hcn-doc__drop { min-height: 96px; }
    .hcn-doc__thumb { width: 108px; height: 76px; }
    .hcn-doc[data-doc="photo"] .hcn-doc__thumb { width: 64px; height: 84px; }
    .hcn-confirm__actions { flex-direction: column-reverse; }
    .hcn-confirm__actions .hcn-btn { width: 100%; }
    /* Step 5: borderless on mobile, every row stacked */
    .hcn-primary { padding: 16px 0; border-radius: 0; background: transparent; }
    .hcn-primary__facts { grid-template-columns: 1fr; }
    .hcn-family-cta { flex-direction: column; align-items: stretch; gap: 8px; }
    .hcn-family-cta__btn { width: 100%; }
    .hcn-family-cta__hint { text-align: center; }
    .hcn-family-member { flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 0; border-radius: 0; background: transparent; }
    .hcn-family-member__side { align-items: flex-start; text-align: left; }
    .hcn-family-form { padding: 18px 0; border-radius: 0; background: transparent; }
    .hcn-family-form__actions { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
    .hcn-profile { padding: 16px 0; border-radius: 0; background: transparent; }
    .hcn-profile__facts { grid-template-columns: 1fr; }
    /* Cropper on phones: near full-bleed sheet, big touch stage, actions always reachable */
    .hcn-crop { padding: 0; align-items: stretch; }
    .hcn-crop__panel {
        width: 100%;
        max-width: none;
        max-height: 100dvh;
        border-radius: 0;
        padding: 16px 14px calc(16px + env(safe-area-inset-bottom));
        display: flex;
        flex-direction: column;
    }
    .hcn-crop__stage { flex: 0 0 auto; }
    .hcn-crop__tools { justify-content: space-between; gap: 8px; }
    .hcn-crop__tool { flex: 1 1 0; justify-content: center; padding: 0 8px !important; }
    .hcn-crop__zoom input { min-height: 34px; }
    .hcn-crop__actions {
        position: sticky;
        bottom: 0;
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 10px;
        margin-top: auto;
        padding-top: 12px;
        background: #fff;
    }
    .hcn-crop__actions .hcn-btn { width: 100%; }
    .hcn-docguide__panel { padding: 20px 16px 18px; max-height: 94vh; }
    .hcn-docguide__grid { grid-template-columns: 1fr; gap: 20px; }
    .hcn-docguide__img--portrait { max-width: 180px; }
    .hcn-docguide__note { padding: 14px; gap: 10px; }
    /* Accordions on phones: full width, wrapping header, actions stack */
    .hcn-acc { margin-bottom: 40px; border-radius: var(--hcn-radius-md); }
    .hcn-acc__header { flex-wrap: wrap; gap: 14px 14px; padding: 24px 16px !important; min-height: 106px; }
    .hcn-acc__text { flex: 1 1 100%; order: 2; }
    .hcn-acc__icons { order: 1; }
    .hcn-acc__state { order: 3; }
    .hcn-acc__chevron { order: 1; margin-left: auto; }
    .hcn-acc__inner { padding: 10px 16px 24px; }
    .hcn-doc__saved-actions { width: 100%; }
    .hcn-doc .hcn-doc__action { flex: 1 1 140px; justify-content: center; text-align: center; }
    .hcn-flagselect__list { max-height: 60vh; }
    /* Expiry help on phones: full-width sheet, stacked zoom, nothing cut off */
    .hcn-expiry-help { padding: 10px; align-items: flex-start; }
    .hcn-expiry-help__panel { padding: 20px 16px 18px; max-height: 94vh; }
    .hcn-expiry-help__zoom { flex-direction: column; align-items: stretch; gap: 10px; }
    .hcn-expiry-help__zoomimg { width: 100%; height: 88px; background-size: 520% auto; }
    .hcn-expiry-help__zoomtext { text-align: left; }
    /* Step 3: partner dropdown stacks like every other field on mobile */
    .hcn-agency__btn { min-height: 50px; }
    .hcn-agency__list { max-height: 60vh; }
}

/* Volg HCN — secondary social row under the visit card. Only rendered when Support settings
   carry enabled profiles; never competes with WhatsApp / bellen / route. */
.hcn-help-social {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(28,28,29,.10);
}
.hcn-help-social__label {
    font-size: 0.82em;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hcn-color-muted, var(--hcn-muted-fb));
}
.hcn-help-social__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hcn-help-social__link {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(28,28,29,.12);
    background: #fff;
    color: var(--hcn-color-brand-strong, #8F6E46);
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease, transform .14s ease;
}
.hcn-help-social__link:hover {
    border-color: var(--hcn-color-brand, #B8925F);
    color: var(--hcn-color-heading, var(--hcn-heading-fb));
    transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
    .hcn-help-social__link { transition: none; }
    .hcn-help-social__link:hover { transform: none; }
}

/* ================================================================ step rail — narrow viewports

   Below 900px the vertical rail would eat the reading width, so it folds into a horizontal strip at
   the top of the card: the same three states, the same gold, read left to right. It still navigates
   nothing. Below 600px the labels of the non-current steps drop away and only their markers remain,
   which keeps six steps legible on a phone without shrinking the type. */
@media (max-width: 900px) {
    .hcn-reg-card {
        grid-template-columns: minmax(0, 1fr);
    }
    .hcn-reg-main { padding: 28px clamp(18px, 5vw, 40px) 44px; }
    .hcn-reg-rail {
        padding: 20px clamp(18px, 5vw, 40px) 18px;
        border-right: 0;
        border-bottom: 1px solid rgba(28,28,29,.09);
    }
    .hcn-reg-rail__eyebrow { display: none; }
    .hcn-reg-rail__count { margin-bottom: 14px; font-size: 1em; }
    .hcn-reg-rail__list {
        display: flex;
        align-items: flex-start;
        gap: 4px;
    }
    .hcn-reg-rail__item {
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 0;
        text-align: center;
        min-height: 0;
    }
    /* Connector becomes the horizontal segment between two markers. */
    .hcn-reg-rail__item::before {
        left: calc(50% + 22px);
        right: calc(-50% + 22px);
        top: 17px;
        bottom: auto;
        width: auto;
        height: 2px;
    }
    .hcn-reg-rail__text { padding-top: 0; align-items: center; }
    .hcn-reg-rail__label { font-size: 0.82em; line-height: 1.25; }
    .hcn-reg-rail__item.is-current .hcn-reg-rail__label { font-size: 0.88em; }
    .hcn-reg-rail__hint { display: none; }
}

@media (max-width: 600px) {
    /* Six steps on a phone: markers only, evenly spaced, all the same width so nothing overflows.
       The step's name is not dropped — it is right below the rail as the screen's own label. */
    .hcn-reg-rail__list { gap: 0; }
    .hcn-reg-rail__item { flex: 1 1 0; min-width: 0; }
    .hcn-reg-rail__marker { width: 30px; height: 30px; font-size: 0.86em; }
    .hcn-reg-rail__item::before { left: calc(50% + 19px); right: calc(-50% + 19px); top: 14px; }
    .hcn-reg-rail__item.is-current .hcn-reg-rail__marker { box-shadow: 0 0 0 4px rgba(179,143,100,.18); }
    .hcn-reg-rail__label { display: none; }
    .hcn-reg-rail__text { display: none; }
    .hcn-reg-progress__label { font-size: 0.95em; text-transform: none; letter-spacing: 0; }
}

/* ---------------------------------------------------------------- primary card: collapse
   The recap of the pilgrim's own registration folds to its header once companions exist, so the
   family list is what fills the screen. Toggle only — it never edits anything. */
.hcn-profile__head { position: relative; padding-right: 56px; }
.hcn-profile__toggle {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(28,28,29,.14) !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: var(--hcn-color-muted, var(--hcn-muted-fb)) !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: transform .18s ease, border-color .15s ease, color .15s ease;
}
.hcn-profile__toggle:hover {
    border-color: var(--hcn-color-brand, #B38F64) !important;
    color: var(--hcn-color-brand-strong, #8B6440) !important;
}
.hcn-profile__toggle svg { transition: transform .18s ease; }
.hcn-profile.is-collapsed .hcn-profile__toggle svg { transform: rotate(-90deg); }
.hcn-profile__body[hidden] { display: none !important; }
.hcn-profile.is-collapsed { padding-bottom: 18px; }
@media (prefers-reduced-motion: reduce) {
    .hcn-profile__toggle, .hcn-profile__toggle svg { transition: none; }
}

/* ================================================================ Step 5 — companions

   One task per screen inside the registration shell: the flow panel replaces the list while a
   companion is being added, and the list returns as a set of quiet accordions. Everything stays on
   the HCN palette; status is carried by a word as well as a colour. */

[data-role="family-list"]:not(:empty) { margin-bottom: 32px; }
.hcn-family-heading { margin: 30px 0 14px; font-size: 1.25em; font-weight: 800; color: var(--hcn-color-heading, var(--hcn-heading-fb)); }

.hcn-family-cta__hint { display: block; margin-top: 8px; font-size: 0.92em; color: var(--hcn-color-muted, var(--hcn-muted-fb)); }
.hcn-family-full {
    margin: 12px 0 0;
    padding: 14px 16px;
    border-radius: var(--hcn-radius-md);
    background: var(--hcn-color-brand-soft, #F4EEE5);
    color: var(--hcn-color-brand-strong, #8B6440);
    font-weight: 600;
}

/* ---- mini-flow ---- */
.hcn-family-flow[hidden], .hcn-family-done[hidden], .hcn-family-pane[hidden] { display: none !important; }
.hcn-family-flow {
    margin: 22px 0 8px;
    padding: 24px;
    border: 1px solid rgba(28,28,29,.12);
    border-radius: 16px;
    background: #FCFAF7;
}
.hcn-family-flow__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.hcn-family-flow__title { margin: 0; font-size: 1.25em; font-weight: 800; color: var(--hcn-color-heading, var(--hcn-heading-fb)); }
.hcn-family-flow__sub { margin: 4px 0 0; font-size: 0.95em; color: var(--hcn-color-muted, var(--hcn-muted-fb)); }

.hcn-family-flow__steps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
    font-size: 0.88em;
    color: var(--hcn-color-muted, var(--hcn-muted-fb));
}
.hcn-family-flow__steps li { padding: 5px 12px; border-radius: 999px; background: rgba(28,28,29,.05); }
.hcn-family-flow__steps li.is-done { background: rgba(179,143,100,.16); color: var(--hcn-color-brand-strong, #8B6440); }
.hcn-family-flow__steps li.is-current {
    background: var(--hcn-color-brand, #B38F64);
    color: #fff;
    font-weight: 700;
}
.hcn-family-pane .hcn-flagselect { width: 100%; }
.hcn-family-pane__title { margin: 0 0 16px; font-size: 1.1em; font-weight: 700; color: var(--hcn-color-heading, var(--hcn-heading-fb)); }
/* The theme gives .hcn-btn a display, which beats the UA rule for [hidden]. */
.hcn-btn[hidden] { display: none !important; }
.hcn-family-flow__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hcn-family-flow__actions .hcn-btn { min-height: 52px; }

.hcn-family-review { display: grid; gap: 12px; margin: 0; }
.hcn-family-review__row { display: grid; grid-template-columns: minmax(150px, 34%) 1fr; gap: 10px 18px; }
.hcn-family-review__row dt { font-size: 0.9em; color: var(--hcn-color-muted, var(--hcn-muted-fb)); }
.hcn-family-review__row dd { margin: 0; font-weight: 600; color: var(--hcn-color-heading, var(--hcn-heading-fb)); }

/* ---- saved confirmation ---- */
.hcn-family-done {
    margin: 22px 0;
    padding: 24px;
    border: 1px solid rgba(37,147,95,.28);
    border-radius: 16px;
    background: #F2F9F5;
}
.hcn-family-done__title { margin: 0 0 6px; font-size: 1.2em; font-weight: 800; color: var(--hcn-color-heading, var(--hcn-heading-fb)); }
.hcn-family-done__text { margin: 0 0 18px; font-size: 1em; color: var(--hcn-color-text, var(--hcn-heading-fb)); }
.hcn-family-done__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- companion accordions ---- */
.hcn-family-card {
    margin-bottom: 12px;
    border: 1px solid rgba(28,28,29,.12);
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
}
.hcn-family-card.is-open { box-shadow: 0 10px 28px rgba(28,28,29,.08); }
.hcn-family-card__head {
    /* The theme paints every <button> dark; the accordion header is a surface, not a button. */
    background: #fff !important;
    color: var(--hcn-color-text, var(--hcn-heading-fb)) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 76px;
    padding: 14px 18px;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
}
.hcn-family-card__head:hover { background: #FBF8F4 !important; }
.hcn-family-card__head:focus-visible { outline: 3px solid var(--hcn-color-brand-strong, #8B6440); outline-offset: -3px; }
.hcn-family-card__thumb {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 14px;
    overflow: hidden;
    background: var(--hcn-color-brand-soft, #F4EEE5);
}
.hcn-family-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.hcn-family-card__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.hcn-family-card__name { font-size: 1.08em; color: var(--hcn-color-heading, var(--hcn-heading-fb)) !important; font-weight: 700; color: var(--hcn-color-heading, var(--hcn-heading-fb)); }
.hcn-family-card__meta { font-size: 0.92em; color: var(--hcn-color-muted, var(--hcn-muted-fb)) !important; }
.hcn-family-card__status {
    flex-shrink: 0;
    padding: 6px 13px;
    border-radius: 999px;
    font-size: 0.8em;
    font-weight: 700;
    white-space: nowrap;
}
.hcn-family-card__status.is-complete { background: rgba(37,147,95,.12); color: #1E7A4D; }
.hcn-family-card__status.is-docs { background: var(--hcn-color-brand-soft, #F4EEE5); color: var(--hcn-color-brand-strong, #8B6440); }
.hcn-family-card__status.is-incomplete { background: rgba(28,28,29,.07); color: var(--hcn-color-muted, var(--hcn-muted-fb)); }
.hcn-family-card__chevron { flex-shrink: 0; color: var(--hcn-color-muted, var(--hcn-muted-fb)) !important; transition: transform .18s ease; }
.hcn-family-card.is-open .hcn-family-card__chevron { transform: rotate(180deg); }
.hcn-family-card__body { padding: 4px 18px 20px; border-top: 1px solid rgba(28,28,29,.08); }
.hcn-family-card__facts { display: grid; gap: 10px 24px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 16px 0 18px; }
.hcn-family-card__fact dt { font-size: 0.85em; color: var(--hcn-color-muted, var(--hcn-muted-fb)); }
.hcn-family-card__fact dd { margin: 2px 0 0; font-weight: 600; color: var(--hcn-color-heading, var(--hcn-heading-fb)); }
.hcn-family-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hcn-family-card__actions .hcn-btn { min-height: 48px; }

@media (prefers-reduced-motion: reduce) {
    .hcn-family-card__chevron { transition: none; }
}

@media (max-width: 600px) {
    .hcn-family-flow { padding: 18px 16px; border-radius: 14px; }
    .hcn-family-flow__actions .hcn-btn,
    .hcn-family-done__actions .hcn-btn { width: 100%; }
    .hcn-family-card__head { flex-wrap: wrap; min-height: 0; padding: 14px; }
    .hcn-family-card__status { order: 3; }
    .hcn-family-card__chevron { order: 2; margin-left: auto; }
    .hcn-family-review__row { grid-template-columns: 1fr; gap: 2px; }
}

/* ── Step 5 polish ──────────────────────────────────────────────────────────
   Headings that receive focus programmatically (so a screen reader announces a
   new panel) must not draw a focus rectangle for mouse users: the ring belongs
   to keyboard navigation, and these elements are never tabbed to. */
.hcn-reg-h1[tabindex="-1"]:focus,
.hcn-confirm__title[tabindex="-1"]:focus,
.hcn-crop__title[tabindex="-1"]:focus,
.hcn-family-flow__title[tabindex="-1"]:focus,
.hcn-family-done__title[tabindex="-1"]:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* A companion without a photo yet: initials, not an empty tile. */
.hcn-family-card__initials {
    font-weight: 700;
    font-size: 0.95em;
    letter-spacing: 0.02em;
    color: var(--hcn-color-heading, var(--hcn-heading-fb));
    opacity: 0.55;
}
.hcn-family-card__thumb.is-empty {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* The theme paints every element; [hidden] must still mean hidden. */
.hcn-reg-skip[hidden],
.hcn-family-heading[hidden] { display: none !important; }

/* Second heading inside the flow (emergency contact) sits under a first block. */
.hcn-family-pane__title--sub { margin-top: 28px; }

/* ── Step 5 parity pass ─────────────────────────────────────────────────────
   Accordion controls stay compact: the header row belongs to the name and the
   status, not to the control that opens it. The 44px hit area is unchanged. */
.hcn-family-card__chevron {
    width: 32px;
    height: 32px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
}
.hcn-family-card__head { min-height: 44px; }
.hcn-family-card__head:hover .hcn-family-card__chevron { background: rgba(28, 28, 29, 0.05); }
.hcn-family-card__head:focus-visible { outline: 2px solid var(--hcn-color-brand, #B38F64); outline-offset: 2px; }

/* Pencil beside the collapse control in the hoofdaanvrager header. Same 44px box,
   same border treatment — two equal controls, not one loud and one quiet. */
.hcn-profile__head { padding-right: 108px; }
.hcn-iconbtn {
    position: absolute;
    top: 0;
    right: 52px;
    display: inline-grid !important;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0 !important;
    border: 1px solid rgba(28,28,29,.14) !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: var(--hcn-color-muted, var(--hcn-muted-fb)) !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
.hcn-iconbtn:hover {
    border-color: var(--hcn-color-brand, #B38F64) !important;
    color: var(--hcn-color-brand-strong, #8B6440) !important;
}
.hcn-iconbtn:focus-visible { outline: 2px solid var(--hcn-color-brand, #B38F64); outline-offset: 2px; }

/* Icon + word buttons on the companion cards. */
.hcn-btn--icon { gap: 8px; }
.hcn-btn__icon { display: inline-flex; align-items: center; }

/* "Welke talen spreekt dit familielid?" gets the full row so it stays on one line. */
.hcn-family-pane .hcn-reg-field--full { grid-column: 1 / -1; }

/* The companion dates are the Step 1 control, full width inside the pane grid. */
.hcn-family-pane .hcn-datesel { width: 100%; }

@media (max-width: 600px) {
    .hcn-profile__head { padding-right: 0; }
    .hcn-iconbtn { position: static; margin-left: auto; }
}

/* The theme gives every <button> a min-width; the two header controls must stay square. */
.hcn-profile__toggle,
.hcn-iconbtn {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
}
/* The theme also pads every button; without this the 44px box is forced open by padding. */
.hcn-profile__toggle,
.hcn-iconbtn { padding: 0 !important; }

/* ── Companion editor identity line ─────────────────────────────────────────
   Which companion is open, in one compact line under the title: the name in the
   completed-state green, the relationship in normal text. No badge. */
.hcn-family-flow__sub {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin: 4px 0 0;
    min-width: 0;
    font-size: 0.98em;
}
.hcn-family-flow__sub[hidden] { display: none !important; }
.hcn-family-flow__who {
    font-weight: 700;
    color: var(--hcn-color-success, #25935F);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hcn-family-flow__dot { color: var(--hcn-color-muted, var(--hcn-muted-fb)); }
.hcn-family-flow__relation { font-weight: 600; color: var(--hcn-color-heading, var(--hcn-heading-fb)); }

/* ── Shared date control ────────────────────────────────────────────────────
   Three columns that always fit the field they sit in, so nothing wraps to a
   second row and nothing is clipped: the day and the year get exactly the width
   their digits need, the month takes the rest, and the calendar icon sits in a
   column of its own. The select padding is ours, because the theme pads every
   control and that padding is what cut "20" in half. */
.hcn-datesel {
    display: grid;
    grid-template-columns: 28px minmax(78px, 0.8fr) minmax(104px, 1.6fr) minmax(88px, 1fr);
    align-items: center;
    gap: 10px;
    max-width: 460px;
}
.hcn-datesel__icon { width: 28px; }
.hcn-datesel__part { min-width: 0; }
.hcn-datesel .hcn-select {
    box-sizing: border-box;
    width: 100%;
    min-height: 54px;
    padding: 12px 30px 12px 14px !important;
    text-indent: 0 !important;
    font-size: 1rem;
    line-height: 1.3;
    background-position: right 10px center;
    text-overflow: ellipsis;
}

@media (max-width: 720px) {
    .hcn-datesel {
        grid-template-columns: minmax(70px, 0.8fr) minmax(96px, 1.5fr) minmax(80px, 1fr);
        gap: 8px;
    }
    .hcn-datesel__icon { display: none; }
}

/* ── Step 6 — Controleren & verzenden ───────────────────────────────────────
   Review blocks read like the rest of HCN: white card, charcoal text, gold for
   the one action that matters. No coloured side bars anywhere. */
.hcn-review__loading { color: var(--hcn-color-muted, var(--hcn-muted-fb)); margin: 8px 0 20px; }
.hcn-review__sections { display: grid; gap: 16px; margin: 8px 0 24px; }

.hcn-review-card {
    background: #fff;
    border: 1px solid rgba(28,28,29,.10);
    border-radius: 16px;
    overflow: hidden;
}
.hcn-review-card__bar { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 4px; }
.hcn-review-card__head {
    flex: 1 1 auto;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 10px 6px 10px 18px !important;
    border: 0 !important;
    background: #fff !important;
    color: var(--hcn-color-heading, var(--hcn-heading-fb)) !important;
    box-shadow: none !important;
    cursor: pointer;
    text-align: left;
}
.hcn-review-card__title { font-weight: 700; font-size: 1.02em; }
.hcn-review-card__chevron { display: inline-flex; color: var(--hcn-color-muted, var(--hcn-muted-fb)); transition: transform .18s ease; }
.hcn-review-card.is-open .hcn-review-card__chevron { transform: rotate(180deg); }
.hcn-review-card__edit { position: static !important; }
.hcn-review-card__body { padding: 0 18px 18px; }
.hcn-review-card__body[hidden] { display: none !important; }
.hcn-review-card__facts { display: grid; gap: 10px 24px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 4px 0 0; }
.hcn-review-card__fact dt { font-size: 0.85em; color: var(--hcn-color-muted, var(--hcn-muted-fb)); }
.hcn-review-card__fact dd { margin: 2px 0 0; font-weight: 600; color: var(--hcn-color-heading, var(--hcn-heading-fb)); }

.hcn-review__issues {
    background: #FDF3F2;
    border: 1px solid rgba(192,57,43,.22);
    border-radius: 16px;
    padding: 18px 20px;
    margin: 0 0 20px;
}
.hcn-review__issues[hidden] { display: none !important; }
.hcn-review__issues-title { margin: 0 0 4px; font-size: 1.02em; color: var(--hcn-color-error, #c0392b); }
.hcn-review__issues-lead { margin: 0 0 10px; color: var(--hcn-color-heading, var(--hcn-heading-fb)); }
.hcn-review__issues-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.hcn-review__issue {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    color: var(--hcn-color-heading, var(--hcn-heading-fb)) !important;
    text-align: left;
    text-decoration: underline;
    cursor: pointer;
    box-shadow: none !important;
}
.hcn-review__issue:hover { color: var(--hcn-color-brand-strong, #8B6440) !important; }

.hcn-review__total[hidden] { display: none !important; }
.hcn-review-total__box {
    background: #FBF8F4;
    border: 1px solid rgba(179,143,100,.30);
    border-radius: 16px;
    padding: 18px 20px;
    margin: 0 0 24px;
}
.hcn-review-total__title { margin: 0 0 10px; font-size: 1.05em; }
.hcn-review-total__note { margin: 12px 0 0; color: var(--hcn-color-muted, var(--hcn-muted-fb)); font-size: 0.92em; }

.hcn-review-done {
    background: #F3F9F5;
    border: 1px solid rgba(37,147,95,.28);
    border-radius: 16px;
    padding: 24px;
}
.hcn-review-done[hidden] { display: none !important; }
.hcn-review-done__title { margin: 0 0 6px; color: var(--hcn-color-success, #25935F); }
.hcn-review-done__title[tabindex="-1"]:focus { outline: none !important; }
.hcn-review-done__facts { display: grid; gap: 10px 24px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 14px 0 0; }
.hcn-review-done__next { margin: 16px 0 0; font-weight: 600; }

/* ── "Wat wilt u aanpassen?" — the hoofdaanvrager edit chooser ──────────────
   Four destinations, each one a row with its own subtitle so the pilgrim picks
   by meaning rather than by guessing which step held which field. */
.hcn-editmenu { max-width: 460px; }
.hcn-editmenu__list { list-style: none; margin: 14px 0 4px; padding: 0; display: grid; gap: 10px; }
.hcn-editmenu__item {
    width: 100%;
    display: grid !important;
    gap: 2px;
    text-align: left;
    padding: 14px 16px !important;
    min-height: 44px;
    border: 1px solid rgba(28,28,29,.12) !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: var(--hcn-color-heading, var(--hcn-heading-fb)) !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.hcn-editmenu__item:hover {
    border-color: var(--hcn-color-brand, #B38F64) !important;
    background: #FBF8F4 !important;
}
.hcn-editmenu__item:focus-visible { outline: 2px solid var(--hcn-color-brand, #B38F64); outline-offset: 2px; }
.hcn-editmenu__label { font-weight: 700; }
.hcn-editmenu__hint { font-size: 0.88em; color: var(--hcn-color-muted, var(--hcn-muted-fb)); }

/* Manual passport review notice under the country selector: information, not an error. */
.hcn-reg-note--review { color: var(--hcn-color-heading, var(--hcn-heading-fb)); font-weight: 600; }
.hcn-reg-note--review[hidden] { display: none !important; }