/* ============================================================================
   wwwroot/css/private-agent-profile-split.css   (v5 — PRODUCTION REDESIGN)
   ----------------------------------------------------------------------------
   v5 — WHAT'S NEW vs v4

   1.  CYAN WRAPPER FULLY KILLED
       v4 only zeroed .pa-panel chrome; v5 also zeroes .pa-panel--solo,
       the .pa-panel-body padding/max-height/border-radius, and the
       form element's residual margin. The form now fills .pa-left-body
       edge-to-edge with no visible card around it.

   2.  HTML CLASSES NOW MATCH
       v4 selectors referenced .pa-3col-core / .pa-col--photo / etc. but
       the actual partials emitted .pa-side-row--core / .pa-side-col-photo.
       The cshtml partials are rewritten in this revision to emit the
       new class names; this CSS is the matching contract.

   3.  AGENCY LOGO COLUMN MIRRORS PROFILE PHOTO COLUMN
       Same fixed width (160px), same upload-zone aspect (1:1 square),
       same hover overlay, same actions row beneath. Visual parity across
       Core and Agency scenes.

   4.  THREE GENUINE 3-COL GRIDS — no row spans whole width
         Core      → photo (160) | identity stack | contact stack
         Agency    → logo  (160) | identity stack | location stack
         Additional→ prefs        | bio (1.4fr)   | timing
       Each scene then has a SUBORDINATE 3-col row for the dense fields.

   5.  PREMIUM FORM TOKENS
       Every input/select/textarea shares ONE height token (--pa-input-h),
       ONE radius token, ONE label rhythm, ONE focus ring. No drift.

   6.  RESPONSIVE — three tiers
         ≥1100px  3-col
         720–1099 2-col (photo/logo above fields, fields → 2-col)
         <720     1-col stack

   7.  Z-INDEX HARDENING
       Dial-code listbox, place-suggestions, multiselect panel all sit
       above the form scroll context so they're not clipped.

   DESIGN TOKENS (brand-aligned)
     Cyan dominant  : #56c4f8  / rgba(86,196,248,…)
     Deep cyan      : #2a7da8  (3FA9D9 lineage)
     Charcoal       : #0e0e11 / #1a1a1f
     Orange accent  : #f58220 / #f89622
     Soft surfaces  : #ffffff / #f7f9fc / #f0f7fc
   ============================================================================ */


/* ════════════════════════════════════════════════════════════════════════════
   § 0. LOCAL TOKENS — scoped to the three profile scenes
   ════════════════════════════════════════════════════════════════════════════ */
.pa-scene-profile-core,
.pa-scene-profile-agency,
.pa-scene-profile-additional {
    /* Layout */
    --pa-col-gap: 24px;
    --pa-row-gap: 16px;
    --pa-field-gap: 14px;
    --pa-stack-gap: 14px;
    /* Inputs */
    --pa-input-h: 40px;
    --pa-input-radius: 8px;
    --pa-input-fs: 0.875rem;
    --pa-input-pad: 0 12px 0 36px;
    --pa-input-pad-bare: 0 12px;
    /* Labels */
    --pa-label-fs: 0.7rem;
    --pa-label-mb: 6px;
    --pa-label-weight: 700;
    --pa-label-track: 0.05em;
    /* Helpers / errors */
    --pa-helper-fs: 0.72rem;
    --pa-error-fs: 0.72rem;
    /* Section labels */
    --pa-section-fs: 0.68rem;
    --pa-section-color: #5e6371;
    /* Photos & logos */
    --pa-photo-size: 160px;
    --pa-logo-size: 160px;
    /* Required asterisk */
    --pa-req-color: #ef4444;
}


    /* ════════════════════════════════════════════════════════════════════════════
   § 1. KILL THE CYAN WRAPPER  (scoped to profile scenes only)
   The original .pa-panel.pa-panel-open painted a cyan border + box-shadow,
   creating a card around the form. We strip every chrome property and let
   the form fill .pa-left-body directly.
   ════════════════════════════════════════════════════════════════════════════ */

    /* ── BULLETPROOF HIDDEN-INPUT SAFETY (added v5.1) ────────────────────────
   Under .NET projects with nullable-reference-types enabled, the asp-for
   tag helper has been observed to mis-render the `type` attribute as an
   empty string on non-nullable string properties (e.g. OriginalAgencyName).
   The browser then renders the "hidden" input as a visible text field,
   pushing the rest of the form below the viewport.  We guard against
   that here with a high-specificity rule that hides:
     • any input with type="hidden" (the intended case)
     • any input whose type attribute is empty (the bug case)
     • any input with no type attribute at all (defensive)
   inside the three Profile scenes.  Scoped tightly so we don't affect
   other parts of the page. */
    .pa-scene-profile-core input[type="hidden"],
    .pa-scene-profile-agency input[type="hidden"],
    .pa-scene-profile-additional input[type="hidden"],
    .pa-scene-profile-core input[type=""],
    .pa-scene-profile-agency input[type=""],
    .pa-scene-profile-additional input[type=""],
    .pa-scene-profile-core .agent-form > input:not([type]),
    .pa-scene-profile-agency .agent-form > input:not([type]),
    .pa-scene-profile-additional .agent-form > input:not([type]) {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        position: absolute !important;
        pointer-events: none !important;
        /* The above belt-and-suspenders combo means even if browser CSS resets
       the display rule, the input still occupies zero space. */
    }

    /* ── PANEL-OPEN INDEPENDENCE (added v5.2) ────────────────────────────────
   The legacy private-agent-profile.css has a hard rule:
       .pa-panel:not(.pa-panel-open) > .pa-panel-body { display: none !important }
   And private-agent-fixes.js's installAgencyLock() can strip the
   `pa-panel-open` class from the Agency panel when a PPRA lookup is
   in-flight and forgets to put it back when the lookup completes.
   The result is a permanently invisible Agency form body.

   Our three split partials don't have collapsible UI (no .pa-panel-head),
   so there is no "closed" state to honour anyway.  We unconditionally
   force the body visible on all three Profile scenes, scoped tightly so
   we don't disturb other scenes that DO use accordion behaviour. */
    .pa-scene-profile-core .pa-panel > .pa-panel-body,
    .pa-scene-profile-agency .pa-panel > .pa-panel-body,
    .pa-scene-profile-additional .pa-panel > .pa-panel-body,
    .pa-scene-profile-core .pa-panel:not(.pa-panel-open) > .pa-panel-body,
    .pa-scene-profile-agency .pa-panel:not(.pa-panel-open) > .pa-panel-body,
    .pa-scene-profile-additional .pa-panel:not(.pa-panel-open) > .pa-panel-body {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        pointer-events: auto !important;
    }

    /* Also defeat any --ppra-busy styling that might dim or hide content while
   a PPRA lookup is in flight — the inline banner already conveys "we're
   checking PPRA" so users don't need a blanked-out form too. */
    .pa-scene-profile-agency .pa-panel.pa-panel--ppra-busy,
    .pa-scene-profile-agency .pa-panel.pa-panel--ppra-busy > .pa-panel-body {
        opacity: 1 !important;
        pointer-events: auto !important;
        filter: none !important;
    }

    .pa-scene-profile-core .pa-panel,
    .pa-scene-profile-agency .pa-panel,
    .pa-scene-profile-additional .pa-panel,
    .pa-scene-profile-core .pa-panel.pa-panel-open,
    .pa-scene-profile-agency .pa-panel.pa-panel-open,
    .pa-scene-profile-additional .pa-panel.pa-panel-open,
    .pa-scene-profile-core .pa-panel--solo,
    .pa-scene-profile-agency .pa-panel--solo,
    .pa-scene-profile-additional .pa-panel--solo {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        border-radius: 0 !important;
        z-index: auto !important;
        overflow: visible !important;
        margin: 0 !important;
        /* REQUIRED: private-agent-fixes.js reparents .pa-place-suggestions
           into .pa-panel and uses position:absolute with getBoundingClientRect()
           panel-relative coords. position:relative here makes .pa-panel the
           CSS containing block so those coords resolve correctly.
           Without this the dropdown lands at the wrong (far-below) position. */
        position: relative !important;
    }

    /* Kill the panel-head so it cannot accidentally render */
    .pa-scene-profile-core .pa-panel-head,
    .pa-scene-profile-agency .pa-panel-head,
    .pa-scene-profile-additional .pa-panel-head,
    .pa-scene-profile-core .pa-panel-toggle,
    .pa-scene-profile-agency .pa-panel-toggle,
    .pa-scene-profile-additional .pa-panel-toggle {
        display: none !important;
    }

    /* Zero the panel-body padding/scroll/max-height — pa-left-body owns layout */
    .pa-scene-profile-core .pa-panel-body,
    .pa-scene-profile-agency .pa-panel-body,
    .pa-scene-profile-additional .pa-panel-body {
        padding: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        border-radius: 0 !important;
        animation: none !important;
    }

    /* pa-panels wrapper (if present) — no margin/gap leak */
    .pa-scene-profile-core .pa-panels,
    .pa-scene-profile-agency .pa-panels,
    .pa-scene-profile-additional .pa-panels {
        gap: 0 !important;
        margin: 0 !important;
    }

    /* Form element residual margin */
    .pa-scene-profile-core .agent-form,
    .pa-scene-profile-agency .agent-form,
    .pa-scene-profile-additional .agent-form {
        margin: 0;
        padding: 0;
    }

    /* Scoped left-body padding — generous but compact */
    .pa-scene-profile-core .pa-left-body,
    .pa-scene-profile-agency .pa-left-body,
    .pa-scene-profile-additional .pa-left-body {
        padding: 22px 24px !important;
    }


/* ════════════════════════════════════════════════════════════════════════════
   § 2. SECTION LABELS (above each column group)
   ════════════════════════════════════════════════════════════════════════════ */
.pa-section-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: var(--pa-section-fs, 0.68rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pa-section-color, #5e6371);
}

    .pa-section-divider span {
        flex-shrink: 0;
    }

    .pa-section-divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: linear-gradient(90deg, rgba(86,196,248,0.30), rgba(86,196,248,0.04));
    }

.pa-section-divider--first {
    margin-top: 0;
}

.pa-section-divider + .pa-section-divider {
    margin-top: 18px;
}

.pa-section-divider .pa-icon {
    color: var(--brand-cyan-deep, #2a7da8);
    font-size: 0.95em;
}

/* Smaller column label — tiny uppercase hint above a single column */
.pa-col-label {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pa-section-color, #5e6371);
    margin: 0 0 10px 0;
    line-height: 1;
}


/* ════════════════════════════════════════════════════════════════════════════
   § 3. CORE IDENTITY — 3-COLUMN GRID
   Layout:  Photo (160) │ Identity stack │ Contact stack
   Beneath: PPRA Role + Principal row, full width
   ════════════════════════════════════════════════════════════════════════════ */

.pa-scene-profile-core .pa-3col-core {
    display: grid;
    grid-template-columns: var(--pa-photo-size, 160px) 1fr 1fr;
    column-gap: var(--pa-col-gap, 24px);
    row-gap: 0;
    align-items: start;
}

.pa-scene-profile-core .pa-col--photo {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.pa-scene-profile-core .pa-col--identity,
.pa-scene-profile-core .pa-col--contact {
    display: flex;
    flex-direction: column;
    gap: var(--pa-stack-gap, 14px);
    min-width: 0;
}

/* Below-grid row: PPRA Role + Principal — full width, lined up to grid */
.pa-scene-profile-core .pa-core-row-role {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--pa-col-gap, 24px);
    row-gap: var(--pa-stack-gap, 14px);
    align-items: start;
}


/* ════════════════════════════════════════════════════════════════════════════
   § 4. AGENCY INFORMATION — 3-COLUMN GRID
   Layout:  Logo (160) │ Identity stack │ Location stack
   Logo column mirrors the Core photo column 1:1 for visual consistency.
   ════════════════════════════════════════════════════════════════════════════ */

.pa-scene-profile-agency .pa-3col-agency {
    display: grid;
    grid-template-columns: var(--pa-logo-size, 160px) 1fr 1fr;
    column-gap: var(--pa-col-gap, 24px);
    row-gap: 0;
    align-items: start;
}

.pa-scene-profile-agency .pa-col--logo {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.pa-scene-profile-agency .pa-col--agency-id,
.pa-scene-profile-agency .pa-col--location {
    display: flex;
    flex-direction: column;
    gap: var(--pa-stack-gap, 14px);
    min-width: 0;
}

/* Below-grid rows: FFC full width + coverage area + spec/linkedin */
.pa-scene-profile-agency .pa-agency-below {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.pa-scene-profile-agency .pa-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: var(--pa-col-gap, 24px);
    row-gap: var(--pa-stack-gap, 14px);
    align-items: start;
}

.pa-scene-profile-agency .pa-row-3--ffc .pa-field--span-3 {
    grid-column: 1 / -1;
}

.pa-scene-profile-agency .pa-row-3--spec .pa-field--span-2 {
    grid-column: span 2;
}


/* ════════════════════════════════════════════════════════════════════════════
   § 5. ADDITIONAL DETAILS — 3-COLUMN GRID
   Layout:  Prefs │ Bio (1.4fr) │ Timing
   Beneath: 3-col socials row
   ════════════════════════════════════════════════════════════════════════════ */

.pa-scene-profile-additional .pa-3col-additional {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr;
    column-gap: var(--pa-col-gap, 24px);
    row-gap: 0;
    align-items: start;
}

.pa-scene-profile-additional .pa-col--prefs,
.pa-scene-profile-additional .pa-col--bio,
.pa-scene-profile-additional .pa-col--timing {
    display: flex;
    flex-direction: column;
    gap: var(--pa-stack-gap, 14px);
    min-width: 0;
}

.pa-scene-profile-additional .pa-3col-socials {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: var(--pa-col-gap, 24px);
    row-gap: var(--pa-stack-gap, 14px);
    align-items: start;
}


/* ════════════════════════════════════════════════════════════════════════════
   § 6. FORM FIELDS — premium tokens
   ════════════════════════════════════════════════════════════════════════════ */

/* -- pa-field -------------------------------------------------------------- */
.pa-scene-profile-core .pa-field,
.pa-scene-profile-agency .pa-field,
.pa-scene-profile-additional .pa-field {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.pa-scene-profile-core .pa-field--full,
.pa-scene-profile-agency .pa-field--full,
.pa-scene-profile-additional .pa-field--full {
    grid-column: 1 / -1;
}

/* -- pa-label -------------------------------------------------------------- */
.pa-scene-profile-core .pa-label,
.pa-scene-profile-agency .pa-label,
.pa-scene-profile-additional .pa-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    font-size: var(--pa-label-fs, 0.7rem);
    font-weight: var(--pa-label-weight, 700);
    color: var(--pa-ink, #0e0e11);
    text-transform: uppercase;
    letter-spacing: var(--pa-label-track, 0.05em);
    margin: 0 0 var(--pa-label-mb, 6px) 0;
    line-height: 1.2;
    user-select: none;
}

    .pa-scene-profile-core .pa-label .pa-icon,
    .pa-scene-profile-agency .pa-label .pa-icon,
    .pa-scene-profile-additional .pa-label .pa-icon {
        font-size: 0.95em;
        color: var(--brand-cyan-deep, #2a7da8);
        flex-shrink: 0;
    }

.pa-req {
    color: var(--pa-req-color, #ef4444);
    font-weight: 700;
    margin-left: 2px;
}

.pa-optional {
    color: var(--pa-ink-mute, #7a7e8c);
    font-weight: 500;
    font-size: 0.65rem;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 4px;
}

/* -- pa-input-wrap --------------------------------------------------------- */
.pa-scene-profile-core .pa-input-wrap,
.pa-scene-profile-agency .pa-input-wrap,
.pa-scene-profile-additional .pa-input-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
}

.pa-scene-profile-core .pa-input-icon,
.pa-scene-profile-agency .pa-input-icon,
.pa-scene-profile-additional .pa-input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.92em;
    color: var(--pa-ink-mute, #7a7e8c);
    pointer-events: none;
    z-index: 1;
    width: 14px;
    height: 14px;
}

/* -- pa-input / pa-select / pa-textarea : ONE source of truth ------------- */
.pa-scene-profile-core .pa-input,
.pa-scene-profile-core .pa-select,
.pa-scene-profile-agency .pa-input,
.pa-scene-profile-agency .pa-select,
.pa-scene-profile-additional .pa-input,
.pa-scene-profile-additional .pa-select {
    width: 100%;
    height: var(--pa-input-h, 40px);
    padding: var(--pa-input-pad, 0 12px 0 36px);
    font-family: inherit;
    font-size: var(--pa-input-fs, 0.875rem);
    font-weight: 500;
    color: var(--pa-ink, #0e0e11);
    background: #ffffff;
    border: 1.5px solid var(--pa-line-strong, rgba(14,14,17,0.16));
    border-radius: var(--pa-input-radius, 8px);
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    line-height: var(--pa-input-h, 40px);
}

    .pa-scene-profile-core .pa-input:hover,
    .pa-scene-profile-core .pa-select:hover,
    .pa-scene-profile-agency .pa-input:hover,
    .pa-scene-profile-agency .pa-select:hover,
    .pa-scene-profile-additional .pa-input:hover,
    .pa-scene-profile-additional .pa-select:hover {
        border-color: rgba(86,196,248,0.50);
    }

    .pa-scene-profile-core .pa-input:focus,
    .pa-scene-profile-core .pa-select:focus,
    .pa-scene-profile-agency .pa-input:focus,
    .pa-scene-profile-agency .pa-select:focus,
    .pa-scene-profile-additional .pa-input:focus,
    .pa-scene-profile-additional .pa-select:focus {
        border-color: var(--brand-cyan, #56c4f8);
        box-shadow: 0 0 0 3px rgba(86, 196, 248, 0.18);
        background: #ffffff;
    }

    .pa-scene-profile-core .pa-input:disabled,
    .pa-scene-profile-core .pa-select:disabled,
    .pa-scene-profile-agency .pa-input:disabled,
    .pa-scene-profile-agency .pa-select:disabled,
    .pa-scene-profile-additional .pa-input:disabled,
    .pa-scene-profile-additional .pa-select:disabled {
        background: var(--pa-bg-soft, #f7f9fc);
        color: var(--pa-ink-mute, #7a7e8c);
        cursor: not-allowed;
    }

    .pa-scene-profile-core .pa-input::placeholder,
    .pa-scene-profile-agency .pa-input::placeholder,
    .pa-scene-profile-additional .pa-input::placeholder {
        color: var(--pa-ink-mute, #7a7e8c);
        font-weight: 400;
        opacity: 0.85;
    }

/* Select chevron */
.pa-scene-profile-core .pa-select,
.pa-scene-profile-agency .pa-select,
.pa-scene-profile-additional .pa-select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%237a7e8c' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 32px;
}

/* Textarea */
.pa-scene-profile-core .pa-textarea,
.pa-scene-profile-agency .pa-textarea,
.pa-scene-profile-additional .pa-textarea {
    width: 100%;
    min-height: 96px;
    padding: 12px 12px 12px 12px;
    font-family: inherit;
    font-size: var(--pa-input-fs, 0.875rem);
    font-weight: 500;
    color: var(--pa-ink, #0e0e11);
    background: #ffffff;
    border: 1.5px solid var(--pa-line-strong, rgba(14,14,17,0.16));
    border-radius: var(--pa-input-radius, 8px);
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    line-height: 1.55;
    resize: vertical;
    box-sizing: border-box;
}

    .pa-scene-profile-additional .pa-textarea:focus {
        border-color: var(--brand-cyan, #56c4f8);
        box-shadow: 0 0 0 3px rgba(86,196,248,0.18);
    }

.pa-scene-profile-additional .pa-textarea--bio {
    min-height: 152px;
}

/* Helper text + field error */
.pa-helper,
.pa-helper-text {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--pa-helper-fs, 0.72rem);
    color: var(--pa-ink-mute, #7a7e8c);
    margin: 6px 0 0;
    line-height: 1.45;
}

    .pa-helper .pa-icon,
    .pa-helper-text .pa-icon {
        font-size: 0.9em;
        color: var(--brand-cyan-deep, #2a7da8);
        flex-shrink: 0;
    }

.pa-field-error {
    font-size: var(--pa-error-fs, 0.72rem);
    color: #ef4444;
    margin: 5px 0 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

    .pa-field-error[hidden] {
        display: none !important;
    }


/* ════════════════════════════════════════════════════════════════════════════
   § 7. PHOTO / LOGO UPLOAD ZONE (square, consistent across Core & Agency)
   ════════════════════════════════════════════════════════════════════════════ */

.pa-scene-profile-core .pa-photo-upload-zone,
.pa-scene-profile-agency .pa-photo-upload-zone {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: var(--pa-photo-size, 160px);
    border-radius: 14px;
    background: linear-gradient(180deg, #f7fbfe 0%, #ecf6fc 100%);
    border: 2px dashed rgba(86,196,248,0.55);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .pa-scene-profile-core .pa-photo-upload-zone:hover,
    .pa-scene-profile-core .pa-photo-upload-zone:focus-visible,
    .pa-scene-profile-agency .pa-photo-upload-zone:hover,
    .pa-scene-profile-agency .pa-photo-upload-zone:focus-visible {
        border-color: var(--brand-cyan, #56c4f8);
        background: linear-gradient(180deg, #f0f9fe 0%, #e0f1fb 100%);
        box-shadow: 0 0 0 4px rgba(86,196,248,0.15);
        outline: none;
    }

    .pa-scene-profile-core .pa-photo-upload-zone.has-image,
    .pa-scene-profile-core .pa-photo-upload-zone.has-photo,
    .pa-scene-profile-agency .pa-photo-upload-zone.has-image,
    .pa-scene-profile-agency .pa-photo-upload-zone.has-logo {
        border-style: solid;
        border-color: var(--brand-cyan, #56c4f8);
        background: #ffffff;
        box-shadow: 0 4px 14px -4px rgba(86,196,248,0.30);
    }

    .pa-scene-profile-core .pa-photo-upload-zone img,
    .pa-scene-profile-agency .pa-photo-upload-zone img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 12px;
        display: none;
    }

.pa-scene-profile-agency .pa-photo-upload-zone--logo img {
    object-fit: contain;
    padding: 14px;
    background: #ffffff;
}

.pa-scene-profile-core .pa-photo-upload-zone.has-image img,
.pa-scene-profile-core .pa-photo-upload-zone.has-photo img,
.pa-scene-profile-agency .pa-photo-upload-zone.has-image img,
.pa-scene-profile-agency .pa-photo-upload-zone.has-logo img {
    display: block;
}

.pa-scene-profile-core .pa-photo-upload-zone.has-image .pa-photo-empty-state,
.pa-scene-profile-core .pa-photo-upload-zone.has-photo .pa-photo-empty-state,
.pa-scene-profile-agency .pa-photo-upload-zone.has-image .pa-photo-empty-state,
.pa-scene-profile-agency .pa-photo-upload-zone.has-logo .pa-photo-empty-state {
    display: none;
}

.pa-photo-empty-state {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    pointer-events: none;
    text-align: center;
    padding: 8px;
}

.pa-photo-camera-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-cyan, #56c4f8) 0%, var(--brand-cyan-deep, #2a7da8) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.05rem;
    box-shadow: 0 4px 10px -2px rgba(86,196,248,0.45);
    margin-bottom: 2px;
}

    .pa-photo-camera-icon .pa-icon {
        color: #ffffff;
        font-size: 1em;
    }

.pa-photo-prompt-title {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--pa-ink, #0e0e11);
    letter-spacing: 0.02em;
}

.pa-photo-prompt-sub {
    font-size: 0.62rem;
    color: var(--pa-ink-mute, #7a7e8c);
    line-height: 1.35;
}

/* Hover overlay (appears on top of uploaded image) */
.pa-photo-hover-overlay {
    position: absolute;
    inset: 0;
    background: rgba(14,14,17,0.55);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

    .pa-photo-hover-overlay .pa-icon {
        font-size: 1.3rem;
    }

.pa-photo-upload-zone.has-image:hover .pa-photo-hover-overlay,
.pa-photo-upload-zone.has-photo:hover .pa-photo-hover-overlay,
.pa-photo-upload-zone.has-logo:hover .pa-photo-hover-overlay {
    opacity: 1;
}

/* Loading spinner */
.pa-photo-upload-zone.is-loading {
    cursor: wait;
    pointer-events: none;
    opacity: 0.78;
    border-color: var(--brand-cyan, #56c4f8);
    background: rgba(86,196,248,0.05);
}

    .pa-photo-upload-zone.is-loading::after {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 3px solid rgba(86,196,248,0.25);
        border-top-color: var(--brand-cyan-deep, #2a7da8);
        animation: paZoneSpin 0.7s linear infinite;
        z-index: 4;
    }

@keyframes paZoneSpin {
    to {
        transform: rotate(360deg);
    }
}

/* Photo / logo actions row (Replace / Remove) */
.pa-photo-actions,
.pa-image-mini-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 2px;
}

    .pa-photo-actions[hidden],
    .pa-image-mini-actions[hidden] {
        display: none !important;
    }

.pa-photo-action-btn,
.pa-mini-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid var(--pa-line-strong, rgba(14,14,17,0.14));
    background: #ffffff;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--pa-ink-soft, #3f4350);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
    font-family: inherit;
}

    .pa-photo-action-btn:hover,
    .pa-mini-btn:hover {
        border-color: var(--brand-cyan, #56c4f8);
        background: rgba(86,196,248,0.08);
        color: var(--brand-cyan-deep, #2a7da8);
    }

.pa-photo-action-btn--danger,
.pa-mini-btn--danger {
    color: #b91c1c;
}

    .pa-photo-action-btn--danger:hover,
    .pa-mini-btn--danger:hover {
        border-color: #ef4444;
        background: rgba(239,68,68,0.08);
        color: #b91c1c;
    }

.pa-mini-sep {
    color: var(--pa-line-strong, rgba(14,14,17,0.14));
    font-size: 0.7rem;
}


/* ════════════════════════════════════════════════════════════════════════════
   § 8. PHONE INPUT WITH DIAL CODE PREFIX
   ════════════════════════════════════════════════════════════════════════════ */
.pa-input-wrap--phone {
    align-items: stretch;
    gap: 0;
}

    .pa-input-wrap--phone .pa-input--phone {
        border-left: none;
        border-radius: 0 var(--pa-input-radius, 8px) var(--pa-input-radius, 8px) 0;
        padding: 0 12px;
        flex: 1;
    }

        .pa-input-wrap--phone .pa-input--phone:focus {
            z-index: 2;
        }

.pa-dial-code-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: var(--pa-input-h, 40px);
    padding: 0 10px;
    border: 1.5px solid var(--pa-line-strong, rgba(14,14,17,0.16));
    border-right: 1px solid var(--pa-line, rgba(14,14,17,0.08));
    border-radius: var(--pa-input-radius, 8px) 0 0 var(--pa-input-radius, 8px);
    background: var(--pa-bg-soft, #f7f9fc);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--pa-ink, #0e0e11);
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s ease, border-color 0.15s ease;
    font-family: inherit;
    box-sizing: border-box;
}

    .pa-dial-code-trigger:hover {
        background: var(--pa-bg-tint, #f0f7fc);
        border-color: var(--brand-cyan, #56c4f8);
    }

.pa-dial-code-trigger--passive {
    pointer-events: none;
    cursor: default;
}

.pa-dial-flag {
    font-size: 1.05em;
    line-height: 1;
}

.pa-dial-prefix {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.pa-dial-chevron {
    font-size: 0.7em;
    color: var(--pa-ink-mute, #7a7e8c);
}

/* Dial-code dropdown — high z so it's never clipped */
.pa-dial-listbox {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 300;
    width: 280px;
    background: #ffffff;
    border: 1.5px solid var(--pa-line-strong, rgba(14,14,17,0.16));
    border-radius: 10px;
    box-shadow: 0 12px 28px -6px rgba(14,14,17,0.18);
    overflow: hidden;
}

.pa-dial-search {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--pa-line, rgba(14,14,17,0.08));
}

    .pa-dial-search input {
        flex: 1;
        border: none;
        outline: none;
        font-size: 0.82rem;
        font-family: inherit;
        color: var(--pa-ink, #0e0e11);
        background: transparent;
    }

.pa-dial-list {
    list-style: none;
    margin: 0;
    padding: 4px;
    max-height: 240px;
    overflow-y: auto;
    scrollbar-width: thin;
}

    .pa-dial-list li {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 7px 10px;
        border-radius: 6px;
        font-size: 0.82rem;
        cursor: pointer;
        transition: background 0.12s ease;
    }

        .pa-dial-list li:hover,
        .pa-dial-list li[aria-selected="true"] {
            background: var(--pa-bg-tint, #f0f7fc);
        }


/* ════════════════════════════════════════════════════════════════════════════
   § 9. RADIO PILLS  (WhatsApp Yes/No, ContactPref, etc.)
   ════════════════════════════════════════════════════════════════════════════ */
.pa-num-pref {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    border-radius: 20px;
    padding: 3px;
    background: var(--pa-bg-soft, #f7f9fc);
    border: 1px solid var(--pa-line-strong, rgba(14,14,17,0.10));
    height: var(--pa-input-h, 40px);
    box-sizing: border-box;
}

.pa-num-pref--wa-row,
.pa-num-pref--three {
    width: fit-content;
}

.pa-num-pref .pa-radio-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border-radius: 17px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--pa-ink-soft, #3f4350);
    transition: background 0.15s ease, color 0.15s ease;
    user-select: none;
    white-space: nowrap;
    line-height: 1;
    min-width: 52px;
}

    .pa-num-pref .pa-radio-pill input[type="radio"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        pointer-events: none;
    }

    .pa-num-pref .pa-radio-pill:has(input:checked) {
        background: #ffffff;
        color: var(--brand-cyan-deep, #2a7da8);
        box-shadow: 0 1px 3px rgba(14,14,17,0.12);
    }

    .pa-num-pref .pa-radio-pill .pa-icon {
        font-size: 0.95em;
        flex-shrink: 0;
    }

.pa-num-pref--three .pa-radio-pill {
    min-width: 44px;
    padding: 0 12px;
}

    .pa-num-pref--three .pa-radio-pill .pa-icon {
        font-size: 1.05em;
    }


/* ════════════════════════════════════════════════════════════════════════════
   § 10. MULTISELECT (Languages, Specialisations)
   ════════════════════════════════════════════════════════════════════════════ */
.pa-multiselect {
    position: relative;
    width: 100%;
}

.pa-multiselect-trigger {
    width: 100%;
    height: var(--pa-input-h, 40px);
    padding: 0 36px 0 36px;
    background: #ffffff;
    border: 1.5px solid var(--pa-line-strong, rgba(14,14,17,0.16));
    border-radius: var(--pa-input-radius, 8px);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    font-size: var(--pa-input-fs, 0.875rem);
    font-weight: 500;
    color: var(--pa-ink, #0e0e11);
    position: relative;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    text-align: left;
    box-sizing: border-box;
}

    .pa-multiselect-trigger:hover {
        border-color: rgba(86,196,248,0.50);
    }

    .pa-multiselect-trigger:focus-visible,
    .pa-multiselect-trigger[aria-expanded="true"] {
        border-color: var(--brand-cyan, #56c4f8);
        box-shadow: 0 0 0 3px rgba(86,196,248,0.18);
        outline: none;
    }

    .pa-multiselect-trigger .pa-ms-icon {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--brand-cyan-deep, #2a7da8);
        font-size: 0.92em;
    }

    .pa-multiselect-trigger .pa-ms-label {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--pa-ink-mute, #7a7e8c);
    }

        .pa-multiselect-trigger .pa-ms-label:not(:empty) {
            color: var(--pa-ink, #0e0e11);
        }

    .pa-multiselect-trigger .pa-ms-chevron {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.7em;
        color: var(--pa-ink-mute, #7a7e8c);
        transition: transform 0.18s ease;
    }

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

.pa-multiselect-panel {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1.5px solid var(--pa-line-strong, rgba(14,14,17,0.16));
    border-radius: 10px;
    box-shadow: 0 12px 28px -6px rgba(14,14,17,0.18);
    padding: 6px;
    max-height: 280px;
    overflow-y: auto;
    z-index: 250;
    scrollbar-width: thin;
}

    .pa-multiselect-panel[hidden] {
        display: none !important;
    }

.pa-ms-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--pa-ink, #0e0e11);
    transition: background 0.12s ease;
    user-select: none;
}

    .pa-ms-option:hover {
        background: var(--pa-bg-tint, #f0f7fc);
    }

    .pa-ms-option input[type="checkbox"] {
        display: none;
    }

.pa-ms-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1.5px solid var(--pa-line-strong, rgba(14,14,17,0.20));
    background: #ffffff;
    color: transparent;
    font-size: 0.7rem;
    flex-shrink: 0;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.pa-ms-option input:checked ~ .pa-ms-check {
    background: var(--brand-cyan, #56c4f8);
    border-color: var(--brand-cyan, #56c4f8);
    color: #ffffff;
}

.pa-ms-opt-label {
    flex: 1;
}

[data-ms-all] {
    border-bottom: 1px solid var(--pa-line, rgba(14,14,17,0.08));
    margin-bottom: 4px;
    padding-bottom: 9px;
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--pa-ink-soft, #3f4350);
}


/* ════════════════════════════════════════════════════════════════════════════
   § 11. CHIPS  (Languages selected, Area chips)
   ════════════════════════════════════════════════════════════════════════════ */
.pa-selected-chips,
.pa-area-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
    min-height: 0;
}

    .pa-selected-chips:empty,
    .pa-area-chips:empty {
        margin-top: 0;
    }

.pa-chip,
.pa-area-chip,
.pa-selected-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 14px;
    background: rgba(86,196,248,0.12);
    border: 1px solid rgba(86,196,248,0.35);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--brand-cyan-deep, #2a7da8);
    line-height: 1;
}

.pa-chip-x,
.pa-area-chip-x,
.pa-selected-chip-x {
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
    color: inherit;
    font-size: 0.9em;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.12s ease;
}

    .pa-chip-x:hover {
        opacity: 1;
    }


/* ════════════════════════════════════════════════════════════════════════════
   § 12. PLACE SUGGESTIONS dropdown (City/Suburb/Area autocomplete)
   ════════════════════════════════════════════════════════════════════════════ */

/* Ensure no grid/flex ancestor of .pa-field--autocomplete clips the
   absolutely-positioned dropdown.  The grid columns and panel-body must
   all have overflow:visible for the dropdown to escape them. */
.pa-scene-profile-agency .pa-col--location,
.pa-scene-profile-agency .pa-col--agency-id,
.pa-scene-profile-agency .pa-3col-agency,
.pa-scene-profile-agency .pa-agency-below,
.pa-scene-profile-agency .pa-row-3,
.pa-scene-profile-core .pa-col--identity,
.pa-scene-profile-core .pa-col--contact,
.pa-scene-profile-core .pa-3col-core {
    overflow: visible !important;
}

.pa-place-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1.5px solid var(--pa-line-strong, rgba(14,14,17,0.16));
    border-radius: 10px;
    box-shadow: 0 12px 28px -6px rgba(14,14,17,0.18);
    max-height: 240px;
    overflow-y: auto;
    z-index: 220;
    padding: 4px;
}

    .pa-place-suggestions[hidden] {
        display: none !important;
    }

.pa-place-suggestion {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--pa-ink, #0e0e11);
    transition: background 0.12s ease;
}

    .pa-place-suggestion:hover,
    .pa-place-suggestion[aria-selected="true"] {
        background: var(--pa-bg-tint, #f0f7fc);
    }

.pa-field--autocomplete {
    position: relative;
}


/* ── SOFT PROVINCE PIN (v5.3) ────────────────────────────────────────────
   The original .pa-field--province-pinned rule in private-agent-profile.css
   sets `pointer-events: none` on the locked select, which prevents the
   user from correcting Google's choice when the API returns a wrong
   province (rare for major cities, common for small suburbs).  The user
   needs to keep the auto-fill convenience BUT also be able to override.
   We undo the pointer lock here while preserving the visual "Auto" badge
   and the cyan tint that signals the field was auto-completed. */
.pa-scene-profile-agency .pa-input.pa-select[data-pa-province-pinned="1"],
.pa-scene-profile-agency .pa-field--province-pinned .pa-input.pa-select {
    pointer-events: auto !important;
    cursor: pointer !important;
}

    /* When the select is :focus-within or actively being interacted with,
   drop the cyan tint so the user gets unambiguous "I'm now editing this"
   feedback. */
    .pa-scene-profile-agency .pa-input.pa-select[data-pa-province-pinned="1"]:focus,
    .pa-scene-profile-agency .pa-field--province-pinned .pa-input.pa-select:focus {
        background: #ffffff !important;
        border-color: var(--pa-cyan, #56C4F8) !important;
        outline: 2px solid rgba(86, 196, 248, 0.18) !important;
        outline-offset: 0 !important;
    }


/* ════════════════════════════════════════════════════════════════════════════
   § 13. PPRA STATUS PILL  (inside the FFC input)
   ════════════════════════════════════════════════════════════════════════════ */
.pa-input-wrap--ppra {
    position: relative;
}

.pa-ppra-status {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 12px;
    background: rgba(245,130,32,0.12);
    border: 1px solid rgba(245,130,32,0.30);
    font-size: 0.65rem;
    font-weight: 700;
    color: #b85816;
    pointer-events: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

    .pa-ppra-status.is-verified {
        background: rgba(16,185,129,0.10);
        border-color: rgba(16,185,129,0.30);
        color: #047857;
    }

    .pa-ppra-status[hidden] {
        display: none !important;
    }

.pa-input--ppra {
    padding-right: 110px !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   § 14. PPRA BANNERS (inside Agency panel)
   ════════════════════════════════════════════════════════════════════════════ */
.pa-ppra-found-banner,
.pa-ppra-multiple-banner {
    margin: 0 0 18px;
    padding: 12px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(245,130,32,0.06) 0%, rgba(86,196,248,0.06) 100%);
    border: 1px solid rgba(86,196,248,0.30);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--pa-ink, #0e0e11);
}

    .pa-ppra-found-banner[hidden],
    .pa-ppra-multiple-banner[hidden] {
        display: none !important;
    }

.pa-ppra-found-banner-icon,
.pa-ppra-multiple-icon {
    flex-shrink: 0;
    color: var(--brand-cyan-deep, #2a7da8);
    font-size: 1.05rem;
    line-height: 1;
}

.pa-ppra-multiple-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

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

.pa-ppra-multiple-text {
    flex: 1;
}

.pa-ppra-multiple-line {
    display: block;
    font-weight: 600;
}

.pa-ppra-multiple-help {
    display: block;
    color: var(--pa-ink-mute, #7a7e8c);
    font-size: 0.72rem;
    margin-top: 3px;
}


/* ════════════════════════════════════════════════════════════════════════════
   § 15. PILLS (Required / Optional / Source = PPRA)
   ════════════════════════════════════════════════════════════════════════════ */
.pa-required-pill,
.pa-source-pill,
.pa-optional-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 11px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.4;
}

.pa-required-pill {
    background: rgba(245,130,32,0.10);
    color: #b85816;
    border: 1px solid rgba(245,130,32,0.25);
}

.pa-required-pill--optional {
    background: rgba(122,126,140,0.10);
    color: var(--pa-ink-mute, #7a7e8c);
    border: 1px solid rgba(122,126,140,0.20);
}

.pa-source-pill {
    background: rgba(86,196,248,0.12);
    color: var(--brand-cyan-deep, #2a7da8);
    border: 1px solid rgba(86,196,248,0.30);
    margin-left: 6px;
    font-size: 0.55rem;
}


/* ════════════════════════════════════════════════════════════════════════════
   § 16. STICKY HEADER + STICKY NAV
   ════════════════════════════════════════════════════════════════════════════ */
.pa-scene-profile-core .pa-sticky-header,
.pa-scene-profile-agency .pa-sticky-header,
.pa-scene-profile-additional .pa-sticky-header {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--pa-line, rgba(14,14,17,0.08));
    margin-bottom: 18px;
}

.pa-scene-profile-core .ps-scene-label,
.pa-scene-profile-agency .ps-scene-label,
.pa-scene-profile-additional .ps-scene-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--brand-cyan-deep, #2a7da8);
}

.pa-scene-profile-core .ps-question,
.pa-scene-profile-agency .ps-question,
.pa-scene-profile-additional .ps-question {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--pa-ink, #0e0e11);
    margin: 8px 0 4px;
    line-height: 1.25;
}

    .pa-scene-profile-core .ps-question em,
    .pa-scene-profile-agency .ps-question em,
    .pa-scene-profile-additional .ps-question em {
        font-style: normal;
        color: var(--brand-cyan-deep, #2a7da8);
        background: linear-gradient(120deg, rgba(86,196,248,0.20) 0%, rgba(245,130,32,0.12) 100%);
        padding: 0 6px;
        border-radius: 4px;
    }

.pa-scene-profile-core .ps-subtitle,
.pa-scene-profile-agency .ps-subtitle,
.pa-scene-profile-additional .ps-subtitle {
    font-size: 0.82rem;
    color: var(--pa-ink-soft, #3f4350);
    margin: 0;
    line-height: 1.5;
}


/* ════════════════════════════════════════════════════════════════════════════
   § 17. RESPONSIVE BREAKPOINTS
   ════════════════════════════════════════════════════════════════════════════ */

/* ── DESKTOP-WIDE ── default 3-col above (no rule needed) */

/* ── MEDIUM (720px – 1099px): 3-col → 2-col with photo/logo above ── */
@media (max-width: 1099px) {
    .pa-scene-profile-core .pa-3col-core {
        grid-template-columns: var(--pa-photo-size, 160px) 1fr;
        grid-template-areas:
            "photo identity"
            "photo contact";
        row-gap: var(--pa-stack-gap, 14px);
    }

    .pa-scene-profile-core .pa-col--photo {
        grid-area: photo;
    }

    .pa-scene-profile-core .pa-col--identity {
        grid-area: identity;
    }

    .pa-scene-profile-core .pa-col--contact {
        grid-area: contact;
    }

    .pa-scene-profile-agency .pa-3col-agency {
        grid-template-columns: var(--pa-logo-size, 160px) 1fr;
        grid-template-areas:
            "logo agency-id"
            "logo location";
        row-gap: var(--pa-stack-gap, 14px);
    }

    .pa-scene-profile-agency .pa-col--logo {
        grid-area: logo;
    }

    .pa-scene-profile-agency .pa-col--agency-id {
        grid-area: agency-id;
    }

    .pa-scene-profile-agency .pa-col--location {
        grid-area: location;
    }

    .pa-scene-profile-additional .pa-3col-additional {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "bio    bio"
            "prefs  timing";
        row-gap: var(--pa-stack-gap, 14px);
    }

    .pa-scene-profile-additional .pa-col--bio {
        grid-area: bio;
    }

    .pa-scene-profile-additional .pa-col--prefs {
        grid-area: prefs;
    }

    .pa-scene-profile-additional .pa-col--timing {
        grid-area: timing;
    }
}

/* ── TABLET (560px – 719px): 2-col → 1-col but photo/logo still inline ── */
@media (max-width: 819px) {
    .pa-scene-profile-agency .pa-row-3,
    .pa-scene-profile-additional .pa-3col-socials {
        grid-template-columns: 1fr 1fr;
    }

        .pa-scene-profile-agency .pa-row-3 .pa-field--span-2 {
            grid-column: span 2;
        }

    .pa-scene-profile-agency .pa-row-3--ffc .pa-field--span-3 {
        grid-column: 1 / -1;
    }
}

/* ── MOBILE (<560px): single column stack ── */
@media (max-width: 559px) {
    .pa-scene-profile-core .pa-left-body,
    .pa-scene-profile-agency .pa-left-body,
    .pa-scene-profile-additional .pa-left-body {
        padding: 16px !important;
    }

    .pa-scene-profile-core .pa-3col-core {
        grid-template-columns: 1fr;
        grid-template-areas: "photo" "identity" "contact";
    }

    .pa-scene-profile-agency .pa-3col-agency {
        grid-template-columns: 1fr;
        grid-template-areas: "logo" "agency-id" "location";
    }

    .pa-scene-profile-additional .pa-3col-additional {
        grid-template-columns: 1fr;
        grid-template-areas: "bio" "prefs" "timing";
    }

    .pa-scene-profile-core .pa-col--photo,
    .pa-scene-profile-agency .pa-col--logo {
        align-items: center;
    }

    .pa-scene-profile-core .pa-photo-upload-zone,
    .pa-scene-profile-agency .pa-photo-upload-zone {
        max-width: 140px;
    }

    .pa-scene-profile-core .pa-core-row-role,
    .pa-scene-profile-agency .pa-row-3,
    .pa-scene-profile-additional .pa-3col-socials {
        grid-template-columns: 1fr;
    }

        .pa-scene-profile-agency .pa-row-3 .pa-field--span-2,
        .pa-scene-profile-agency .pa-row-3--ffc .pa-field--span-3 {
            grid-column: 1 / -1;
        }

    .pa-scene-profile-core .ps-question,
    .pa-scene-profile-agency .ps-question,
    .pa-scene-profile-additional .ps-question {
        font-size: 1.2rem;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   § 18. ACCESSIBILITY HELPERS
   ════════════════════════════════════════════════════════════════════════════ */
.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;
}

/* Background PPRA lookup strip — silent visual presence preserved */
.pa-ppra-lookup-row--silent,
.pa-ppra-lookup-row--hidden {
    display: none !important;
}