/* ============================================================================
   private-agent-ppra-lookup.css   (v10 — silent lookup, compact banner)
   ----------------------------------------------------------------------------
   Styles the rebuilt PPRA UX:

     • Background-status strip beneath the name fields (visually hidden in
       v10 — kept as aria-live region for screen readers only)
     • COMPACT "Pulled from PPRA register" centered banner (v10 redesign)
       with disclaimer copy and no per-record subtitle / status pill
     • Disabled-while-looking-up name fields with explanatory tooltip
     • "Multiple matches" combobox-driven candidate picker
     • Source pills (PPRA chip) on auto-filled fields
     • PPRA context chips (trade name, category)
     • Prefilled-input visual treatment

   Loaded AFTER private-agent-profile.css and BEFORE
   private-agent-profile-agency-fix.css.

   v10 changes:
     • Added .pa-visually-hidden utility for the now-silent aria-live region
     • Added .pa-ppra-found-banner--compact variant: centered, smaller font,
       2-row stack (icon + text), no status pill column
     • Added [data-pa-ppra-busy="1"] rules on .pa-input so the name fields
       feel locked while a PPRA lookup is in flight (dim + wait cursor +
       readonly aesthetic). The browser-native title attribute provides the
       hover tooltip; we don't render a custom one.
     • Added .pa-question-row--single layout helper for the now-orphaned
       WhatsApp question (the "How should this number appear" sibling was
       removed from the markup).
   ============================================================================ */


/* ────────────────────────────────────────────────────────────────────────
   0. Visually-hidden utility (a11y — keep aria-live readable to SRs)
   ──────────────────────────────────────────────────────────────────────── */

.pa-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* ────────────────────────────────────────────────────────────────────────
   0a. Disabled name fields during PPRA lookup
   ────────────────────────────────────────────────────────────────────────
   Visual cue ONLY — pointer events stay enabled so the readonly state
   accepts focus and the browser tooltip (title="…") shows on hover.
   We don't use [disabled] because that suppresses tooltips in most
   browsers; readonly is friendlier here.
   ──────────────────────────────────────────────────────────────────────── */

.pa-input[data-pa-ppra-busy="1"] {
    opacity: 0.7;
    cursor: wait !important;
    background: rgba(86, 196, 248, 0.06);
    border-color: rgba(86, 196, 248, 0.32);
    transition: opacity 0.15s ease, background 0.15s ease;
}

    .pa-input[data-pa-ppra-busy="1"]:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(86, 196, 248, 0.15);
    }

/* Pulse the input border subtly while busy so the agent knows something
   is happening even though we removed the visible status text. */
.pa-input[data-pa-ppra-busy="1"] {
    animation: pa-ppra-busy-pulse 1.4s ease-in-out infinite;
}

@keyframes pa-ppra-busy-pulse {
    0%, 100% {
        border-color: rgba(86, 196, 248, 0.32);
    }

    50% {
        border-color: rgba(86, 196, 248, 0.65);
    }
}


/* ────────────────────────────────────────────────────────────────────────
   1. Background-status row — fully hidden in v10
   ────────────────────────────────────────────────────────────────────────
   The status row is no longer rendered. The aria-live span inside is
   wrapped in .pa-visually-hidden so screen readers still hear "Checking
   PPRA register…" while the lookup runs.
   ──────────────────────────────────────────────────────────────────────── */

.pa-ppra-lookup-row.pa-ppra-lookup-row--hidden,
.pa-ppra-lookup-row[hidden] {
    display: none !important;
}

/* Legacy "silent" variant kept for compatibility but rendered as a
   thin spacer (1px) only — no visible content. */
.pa-ppra-lookup-row.pa-ppra-lookup-row--silent {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    min-height: 0;
    display: block;
}

    .pa-ppra-lookup-row.pa-ppra-lookup-row--silent .pa-ppra-lookup-status {
        font-size: 0;
        line-height: 0;
        color: transparent;
    }


/* ────────────────────────────────────────────────────────────────────────
   2. "Pulled from PPRA register" success banner
   ──────────────────────────────────────────────────────────────────────── */

.pa-ppra-found-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px 0;
    padding: 10px 14px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(86, 196, 248, 0.10) 0%, rgba(86, 196, 248, 0.03) 100%);
    border: 1px solid rgba(86, 196, 248, 0.4);
    animation: pa-ppra-banner-in 0.32s ease both;
}

    .pa-ppra-found-banner[data-pa-valid="false"] {
        background: linear-gradient(180deg, rgba(255, 178, 89, 0.12) 0%, rgba(255, 178, 89, 0.03) 100%);
        border-color: rgba(160, 90, 0, 0.4);
    }

@keyframes pa-ppra-banner-in {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pa-ppra-found-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #b9eafc 0%, #7fd6f5 100%);
    color: #07344a;
    flex-shrink: 0;
}

.pa-ppra-found-banner[data-pa-valid="false"] .pa-ppra-found-icon {
    background: linear-gradient(135deg, #ffd9a8 0%, #f8b977 100%);
    color: #5a3000;
}

.pa-ppra-found-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
}

    .pa-ppra-found-text strong {
        font-size: 0.92rem;
        font-weight: 700;
        color: var(--pa-fg, #1c2733);
    }

    .pa-ppra-found-text span {
        font-size: 0.78rem;
        color: var(--pa-fg-muted, #5b6b73);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.pa-ppra-found-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(17, 122, 58, 0.12);
    color: #117a3a;
    border: 1px solid rgba(17, 122, 58, 0.3);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
}

    .pa-ppra-found-status.is-warn,
    .pa-ppra-found-status[data-pa-valid="false"] {
        background: rgba(160, 90, 0, 0.10);
        color: #a05a00;
        border-color: rgba(160, 90, 0, 0.3);
    }


/* ────────────────────────────────────────────────────────────────────────
   2a. COMPACT banner variant (v10) — centered, smaller, disclaimer-only
   ────────────────────────────────────────────────────────────────────────
   This is what the user sees today. We dropped the per-record subtitle
   ("Thembela Lingani · LANGEBERG LIFESTYLE PROPERTIES(PTY)LTD") because
   those values are already visible in the inputs below. We also dropped
   the right-side "Valid FFC / Invalid / Expired" pill because the new
   policy treats every PPRA hit as good-enough — the agent overrides
   anything inaccurate. What remains is a tight, centered, low-noise
   confirmation that the form was prefilled.
   ──────────────────────────────────────────────────────────────────────── */

.pa-ppra-found-banner.pa-ppra-found-banner--compact {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 10px 14px;
    margin: 0 0 12px 0;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(86, 196, 248, 0.08) 0%, rgba(86, 196, 248, 0.02) 100%);
    border: 1px solid rgba(86, 196, 248, 0.32);
}

.pa-ppra-found-banner--compact .pa-ppra-found-icon {
    width: 24px;
    height: 24px;
}

    .pa-ppra-found-banner--compact .pa-ppra-found-icon .pa-icon {
        width: 13px;
        height: 13px;
    }

.pa-ppra-found-banner--compact .pa-ppra-found-text {
    align-items: center;
    text-align: center;
    gap: 1px;
}

    .pa-ppra-found-banner--compact .pa-ppra-found-text strong {
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.01em;
    }

    .pa-ppra-found-banner--compact .pa-ppra-found-text span {
        /* Allow the disclaimer to wrap onto two lines on narrow screens
               instead of being cropped with an ellipsis. */
        font-size: 0.72rem;
        line-height: 1.35;
        color: var(--pa-fg-muted, #5b6b73);
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        max-width: 52ch;
    }

@media (max-width: 540px) {
    .pa-ppra-found-banner.pa-ppra-found-banner--compact {
        padding: 9px 10px;
    }

    .pa-ppra-found-banner--compact .pa-ppra-found-text strong {
        font-size: 0.78rem;
    }

    .pa-ppra-found-banner--compact .pa-ppra-found-text span {
        font-size: 0.7rem;
    }
}


/* ────────────────────────────────────────────────────────────────────────
   2b. Single-question-row layout (WhatsApp-only, after virtual-number drop)
   ────────────────────────────────────────────────────────────────────────
   The "How should this number appear on listings?" block was removed in
   v10 (we no longer offer virtual numbers due to costs). The WhatsApp
   question is now the only child of pa-question-row, so we let it
   occupy the full row instead of half-width.
   ──────────────────────────────────────────────────────────────────────── */

.pa-question-row.pa-question-row--single {
    display: block;
}

.pa-question-row--single > .pa-question-block {
    width: 100%;
}


/* ────────────────────────────────────────────────────────────────────────
   3. "Multiple matches" banner + combobox picker
   ──────────────────────────────────────────────────────────────────────── */

.pa-ppra-multiple-banner {
    margin: 0 0 14px 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(86, 196, 248, 0.06) 0%, rgba(86, 196, 248, 0.02) 100%);
    border: 1px solid rgba(86, 196, 248, 0.4);
    animation: pa-ppra-banner-in 0.32s ease both;
}

.pa-ppra-multiple-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.pa-ppra-multiple-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #b9eafc 0%, #7fd6f5 100%);
    color: #07344a;
    flex-shrink: 0;
}

.pa-ppra-multiple-head > div {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.3;
}

.pa-ppra-multiple-head strong {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--pa-fg, #1c2733);
}

.pa-ppra-multiple-head span {
    font-size: 0.78rem;
    color: var(--pa-fg-muted, #5b6b73);
}


/* ── Combobox/listbox ──────────────────────────────────────────────── */

.pa-candidate-combo {
    position: relative;
}

.pa-candidate-combo-wrap {
    position: relative;
}

.pa-candidate-combo-input {
    padding-right: 2.4rem;
    cursor: pointer;
}

    .pa-candidate-combo-input:focus {
        cursor: text;
    }

.pa-candidate-combo-chevron {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--pa-fg-muted, #5b6b73);
    cursor: pointer;
    display: grid;
    place-items: center;
    border-radius: 6px;
    transition: background 0.15s ease, transform 0.18s ease;
}

    .pa-candidate-combo-chevron:hover {
        background: rgba(86, 196, 248, 0.10);
    }

.pa-candidate-combo[aria-expanded="true"] .pa-candidate-combo-chevron {
    transform: translateY(-50%) rotate(180deg);
}

.pa-candidate-listbox {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    max-height: 320px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid rgba(86, 196, 248, 0.5);
    border-radius: 12px;
    box-shadow: 0 12px 32px -8px rgba(7, 52, 74, 0.20), 0 4px 10px -4px rgba(7, 52, 74, 0.12);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: pa-ppra-banner-in 0.15s ease both;
}

    .pa-candidate-listbox::-webkit-scrollbar {
        width: 8px;
    }

    .pa-candidate-listbox::-webkit-scrollbar-thumb {
        background: rgba(86, 196, 248, 0.35);
        border-radius: 4px;
    }

        .pa-candidate-listbox::-webkit-scrollbar-thumb:hover {
            background: rgba(86, 196, 248, 0.55);
        }

.pa-candidate-option {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
        "name badge"
        "firm ffc";
    gap: 2px 12px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s ease;
    user-select: none;
}

    .pa-candidate-option:hover,
    .pa-candidate-option.is-active {
        background: rgba(86, 196, 248, 0.10);
        outline: none;
    }

.pa-candidate-option-name {
    grid-area: name;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--pa-fg, #1c2733);
    line-height: 1.25;
}

.pa-candidate-option-firm {
    grid-area: firm;
    font-size: 0.78rem;
    color: var(--pa-fg-muted, #5b6b73);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pa-candidate-option-ffc {
    grid-area: ffc;
    font-size: 0.74rem;
    color: var(--pa-fg-muted, #5b6b73);
    text-align: right;
    align-self: end;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    letter-spacing: 0.04em;
}

.pa-candidate-option-badge {
    grid-area: badge;
    align-self: start;
    justify-self: end;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.pa-candidate-option-badge--good {
    background: rgba(17, 122, 58, 0.12);
    color: #117a3a;
    border: 1px solid rgba(17, 122, 58, 0.3);
}

.pa-candidate-option-badge--warn {
    background: rgba(160, 90, 0, 0.10);
    color: #a05a00;
    border: 1px solid rgba(160, 90, 0, 0.3);
}

.pa-candidate-empty-hint {
    margin: 0.45rem 0 0 0;
    font-style: italic;
}


/* ────────────────────────────────────────────────────────────────────────
   4. Source pills next to auto-filled inputs
   ──────────────────────────────────────────────────────────────────────── */

.pa-source-pill {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    margin-left: 6px;
    border-radius: 999px;
    background: rgba(86, 196, 248, 0.13);
    border: 1px solid rgba(86, 196, 248, 0.32);
    color: var(--brand-cyan-deep, #2a7da8);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    vertical-align: middle;
}


/* ────────────────────────────────────────────────────────────────────────
   5. Prefilled-input treatment (subtle cyan tint)
   ──────────────────────────────────────────────────────────────────────── */

.pa-input.pa-input--prefilled {
    background: rgba(86, 196, 248, 0.06);
    border-color: rgba(86, 196, 248, 0.4);
}

    .pa-input.pa-input--prefilled:focus {
        background: #ffffff;
    }


/* ────────────────────────────────────────────────────────────────────────
   6. PPRA context chips (Trade name / Category) below the form
   ──────────────────────────────────────────────────────────────────────── */

.pa-ppra-context {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px dashed rgba(86, 196, 248, 0.25);
}

.pa-ppra-context-item {
    font-size: 0.78rem;
    color: var(--pa-fg-muted, #5b6b73);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .pa-ppra-context-item strong {
        color: var(--pa-fg, #1c2733);
        font-weight: 600;
    }


/* ────────────────────────────────────────────────────────────────────────
   7. Mobile tightening
   ──────────────────────────────────────────────────────────────────────── */

@media (max-width: 540px) {
    .pa-candidate-listbox {
        max-height: 260px;
    }

    .pa-candidate-option {
        grid-template-columns: 1fr;
        grid-template-areas:
            "name"
            "firm"
            "ffc"
            "badge";
        gap: 3px;
    }

    .pa-candidate-option-ffc {
        text-align: left;
    }

    .pa-candidate-option-badge {
        justify-self: start;
    }

    .pa-ppra-found-banner {
        flex-wrap: wrap;
    }

    .pa-ppra-found-status {
        flex-basis: 100%;
        justify-content: center;
    }
}