/* KPF Autofill — styling for the BE cascade UI and the legacy
   simple-typeahead status line. All values use kp design tokens from
   shared.css (--color-*, --radius-*, --font-*) so the BE elements
   inherit Kinderplezier's form aesthetic across every form context
   (kpreg-*, kpodm-*, kph-order-*, kpc-*, kpacm-*). */

[data-autofill-cluster] {
    position: relative;
}

/* --- Legacy simple-typeahead status + suggestions (unchanged shape,
       tokenised). Kept for any caller that still falls back to it. --- */

.kpf-autofill-status {
    font-family: var(--font-body, sans-serif);
    font-size: 13px;
    line-height: 1.3;
    margin-top: 4px;
    min-height: 1.3em;
    color: var(--color-grey-mid, #888);
}
.kpf-autofill-status--info { color: var(--color-grey-mid, #888); }
.kpf-autofill-status--warn { color: var(--color-primary, #FF5E00); }

.kpf-autofill-suggestions {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    position: absolute;
    z-index: 200;
    background: var(--color-white, #fff);
    border: 1px solid var(--color-border, #d9d9d9);
    border-radius: var(--radius-sm, 8px);
    box-shadow: var(--shadow-soft, 0 2px 8px rgba(0, 0, 0, 0.08));
    max-height: 320px;
    overflow-y: auto;
    width: 100%;
    left: 0;
    right: 0;
}
.kpf-autofill-suggestion {
    padding: 8px 12px;
    cursor: pointer;
    font-family: var(--font-body, sans-serif);
    font-size: 14px;
    line-height: 1.35;
    border-bottom: 1px solid var(--color-grey-light, #f5f5f5);
}
.kpf-autofill-suggestion:last-child { border-bottom: none; }
.kpf-autofill-suggestion:hover,
.kpf-autofill-suggestion:focus { background: var(--color-grey-light, #f5f5f5); }

/* ============================================================
   BE two-stage address cascade (ported from cadeau, locked 2026-04-10).
   On-screen blocks:
     1) .kpf-leveradres-row — search input + branded dropdown + counter
     2) .kpf-gevonden-adres — selected-address panel (line1/line2 + Wijzig/Opnieuw)
     3) .kpf-manual-toggle  — "Of vul je adres handmatig in ›" link
   The 5-field manual block is wrapped in .kpf-address-manual by the caller and
   stays hidden on BE until the user clicks Wijzig or the manual toggle.

   The polish below mirrors the kpreg-form / kpodm-form input vocabulary so the
   BE elements visually belong to the surrounding form (8px radius, orange
   focus ring, body font, branded primary on hover). Per-form overrides go in
   the per-form stylesheets (registreren.css, nijntjepakket.css,
   prentenboekpakket.css) — keep autofill.css generic.
   ============================================================ */

.kpf-leveradres-row {
    position: relative;
    margin: 0 0 2px; /* item 5 (Willem): tighten so manual link sits under the field */
}
.kpf-leveradres-row[hidden] { display: none; }

.kpf-leveradres-field { position: relative; }

/* Search input — matches kpreg-form__row input shape so the BE search
   field looks like another row of the form rather than a foreign UI. */
.kpf-leveradres-field input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-body, sans-serif);
    font-size: 16px;
    padding: 8px 10px;
    border: 1px solid var(--color-border, #d9d9d9);
    border-radius: var(--radius-sm, 8px);
    background: var(--color-white, #fff);
    color: var(--color-text, #1d1d1b);
    outline: none;
}
.kpf-leveradres-field input[type="text"]::placeholder {
    color: var(--color-grey-mid, #999);
}
.kpf-leveradres-field input[type="text"]:focus {
    border-color: var(--color-primary, #FF5E00);
    box-shadow: 0 0 0 2px rgba(255, 94, 0, 0.12);
}

/* Dropdown — branded primary highlight on hover/active, soft shadow,
   matched border-radius so the corner reads as one element with the input. */
.kpf-autocomplete {
    list-style: none;
    margin: 2px 0 0;
    padding: 4px 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--color-white, #fff);
    border: 1px solid var(--color-border, #d9d9d9);
    border-radius: var(--radius-sm, 8px);
    box-shadow: var(--shadow-card, 4px 4px 12px rgba(0, 0, 0, 0.12));
    max-height: 280px;
    overflow-y: auto;
    z-index: 200;
}
.kpf-autocomplete[hidden] { display: none; }
.kpf-autocomplete li {
    padding: 8px 12px;
    font-family: var(--font-body, sans-serif);
    font-size: 15px;
    line-height: 1.3;
    cursor: pointer;
    color: var(--color-text, #1d1d1b);
}
.kpf-autocomplete li:hover,
.kpf-autocomplete li.is-active {
    background: var(--color-primary, #FF5E00);
    color: var(--color-white, #fff);
}
.kpf-ac__count {
    color: var(--color-grey-mid, #a9a3a0);
    font-size: 13px;
    margin-left: 4px;
}
.kpf-autocomplete li:hover .kpf-ac__count,
.kpf-autocomplete li.is-active .kpf-ac__count {
    color: rgba(255, 255, 255, 0.85);
}

/* Counter — small label-scale text, state-based colour via tokens. */
.kpf-leveradres-count {
    margin: 2px 2px 0;
    font-family: var(--font-body, sans-serif);
    font-size: 13px;
    line-height: 1.3;
    color: var(--color-grey-mid, #777);
    min-height: 0; /* item 5: empty = zero height; grows & pushes down when a message appears */
}
.kpf-leveradres-count.is-found    { color: var(--color-text, #1d1d1b); font-weight: 600; }
.kpf-leveradres-count.is-empty    { color: #b00020; }
.kpf-leveradres-count.is-hint     { color: var(--color-grey-mid, #a9a3a0); font-style: italic; }
/* Q2 (Dick's eyeball + aanvulling): de hint stond grijs-op-accent (onleesbaar)
   op de accent-gekleurde bestelkaart (.kph-order-form — oranje op de
   collectie-orderblokken, per-pakket accent op de pakketpagina's). Daar volgt
   hij nu de on-accent-token (wit op oranje/groen, donker op het gele
   tiener-accent), met off-white fallback waar de token niet bestaat.
   ALLEEN in accent-context: formulieren op een WITTE kaart (landing, /bestellen/
   kpreg, change/stop) houden de grijze default hierboven — de landing hergebruikt
   .kph-order-form-markup op een witte kaart en krijgt daarom expliciet grijs terug. */
.kph-order-form .kpf-leveradres-count.is-hint { color: var(--pakket-on-accent, rgba(255, 255, 255, 0.9)); }
.kp-landing .kph-order-form .kpf-leveradres-count.is-hint { color: var(--color-grey-mid, #a9a3a0); }
.kpf-leveradres-count.is-selected { color: var(--color-green, #00aa55); font-weight: 600; }

/* Gevonden adres panel — light card on cream background, two-line
   address rendered legibly, plain underlined action buttons. The
   panel intentionally avoids extra ornament: per Willem's locked
   spec the "Wijzig" + "Opnieuw zoeken" links are never bold. */
.kpf-gevonden-adres {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 16px;
    margin: 0 0 12px;
    padding: 10px 12px;
    background: var(--color-grey-light, #f5f5f5);
    border: 1px solid var(--color-border, #d9d9d9);
    border-radius: var(--radius-sm, 8px);
    font-family: var(--font-body, sans-serif);
    font-size: 14px;
    color: var(--color-text, #1d1d1b);
    font-weight: 400;
}
.kpf-gevonden-adres[hidden] { display: none; }

.kpf-gevonden-adres__text {
    flex: 1 1 220px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.kpf-gevonden-adres__line1 {
    font-weight: 700;
    color: var(--color-text, #1d1d1b);
    line-height: 1.25;
}
.kpf-gevonden-adres__line2 {
    color: var(--color-text, #1d1d1b);
    line-height: 1.25;
}

.kpf-gevonden-adres__actions {
    display: flex;
    gap: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}

.kpf-gevonden-adres__change,
.kpf-gevonden-adres__reset,
.kpf-manual-toggle {
    display: inline-block;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font-family: var(--font-body, sans-serif);
    font-weight: 400;
    color: var(--color-primary, #FF5E00);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.kpf-gevonden-adres__change,
.kpf-gevonden-adres__reset { font-size: 14px; }

/* Manual-toggle — small ~0.78× of form-label scale, leading the
   manual block visually. Hidden once a pick lands (the JS toggles
   the [hidden] attr). */
.kpf-manual-toggle {
    font-size: 12px;
    margin: 2px 0 8px; /* item 5: link tight under field; less gap to next field */
    /* Willem #13: was the brand orange (var(--color-primary)) which read as an
       alarming red link. Use the site's normal dark link colour (a{color:inherit})
       so "Of vul je adres handmatig in" looks like an ordinary text link. */
    color: var(--color-text, #1d1d1b);
}
.kpf-manual-toggle[hidden] { display: none; }

.kpf-gevonden-adres__change:hover,
.kpf-gevonden-adres__reset:hover,
.kpf-manual-toggle:hover { text-decoration: none; }

/* Readability inside the orange .kph-order-form card (package/landing order
   pages). That card forces its autofill action links white (shared.css) — right
   for the manual-toggle, which sits on the orange card, but Wijzig / Opnieuw
   zoeken live INSIDE the light-grey .kpf-gevonden-adres panel, where white is
   unreadable (Willem). Give just those two an explicit dark text colour. The
   3-class selector outscores the card's 2-class white rule regardless of load
   order; the manual-toggle is deliberately left white. /bestellen/ (kpreg-form)
   and NL forms (no gevonden panel) are unaffected. */
.kph-order-form .kpf-gevonden-adres .kpf-gevonden-adres__change,
.kph-order-form .kpf-gevonden-adres .kpf-gevonden-adres__reset {
    color: var(--color-text, #1d1d1b);
}

/* Manual address block wrapper — invisible when hidden, otherwise
   just a thin top-margin so the revealed fields don't crowd the
   panel above. Inner inputs inherit the surrounding form's styling
   (kpreg-form__row, kph-order-form__field, kpc-form__row, …). */
.kpf-address-manual {
    margin-top: 4px;
}
.kpf-address-manual[hidden] { display: none; }

/* --- Mobile tightening — keep the BE elements legible at 375px.
   Mirrors the kpodm-form input scale (14px font, 12px 14px padding). */
@media (max-width: 767px) {
    .kpf-leveradres-field input[type="text"] {
        font-size: 16px; /* 16+ avoids iOS Safari focus-zoom */
        padding: 12px 14px;
        border-radius: 6px;
    }
    .kpf-autocomplete {
        border-radius: 6px;
    }
    .kpf-autocomplete li {
        font-size: 14px;
        padding: 10px 12px;
    }
    .kpf-leveradres-count {
        font-size: 12px;
    }
    .kpf-gevonden-adres {
        font-size: 13px;
        padding: 10px 12px;
    }
    .kpf-gevonden-adres__change,
    .kpf-gevonden-adres__reset { font-size: 13px; }
    .kpf-manual-toggle { font-size: 11px; }
}