/* ============================================================================
   private-agent-fixes-v5.css
   ----------------------------------------------------------------------------
   v5 — DEFINITIVE ROOT-CAUSE FIX for all dropdown positioning bugs.

   ═══════════════════════════════════════════════════════════════════════════
   ROOT CAUSE (one sentence)
   ═══════════════════════════════════════════════════════════════════════════
   .pa-panel-body has { overflow-y: auto; max-height: 700px } which creates a
   scroll-clipping context.  Any child with position:absolute whose bottom edge
   exceeds the 700 px viewport is silently clipped.  The City / Suburb / Areas
   inputs sit far enough down the panel that their dropdowns are cut off.
   Combined with .pa-panel-body's pa-panel-in animation (transform:translateY),
   position:fixed children also render in the wrong place while the animation
   runs.

   v4 attempted to ESCAPE the clipping by reparenting dropdowns to .pa-panel
   via JS and repositioning with getBoundingClientRect().  That approach had
   two fatal failure modes:
     (a) The RAF + MutationObserver chain did not reliably run before the first
         paint after a panel opens, causing a visible flash at wrong coordinates.
     (b) The reparented element lost its .pa-field context, breaking DOM
         traversal paths in findAnchor() and leaving the dropdown invisible.

   ═══════════════════════════════════════════════════════════════════════════
   v5 FIX
   ═══════════════════════════════════════════════════════════════════════════
   Remove .pa-panel-body's scroll container entirely.
   Dropdowns stay exactly where they are in the DOM.
   CSS position:absolute relative to their nearest positioned ancestor
   (.pa-field--autocomplete or .pa-candidate-combo) works perfectly with zero JS.

   This mirrors how .pa-multiselect-panel ALREADY works (and has always worked):
       .pa-multiselect        { position: relative }
       .pa-multiselect-panel  { position: absolute; top: calc(100%+3px) }
   The multiselect works because its anchor input is near the panel top,
   fitting inside the 700 px cap.  v5 simply removes the cap for all inputs.

   Section list:
     1. PANEL BODY — remove overflow clipping  ← THE FIX
     2. Place-suggestions — position:absolute, scoped to .pa-field--autocomplete
     3. Candidate listbox — position:absolute, scoped to .pa-candidate-combo
     4. PPRA banner — centered single-line message
     5. Agency panel PPRA-busy lock state
     6. Loader caption inside the panel-head row
     7. Image upload processing loader (.is-processing)
     8. Professional Details panel — spacing
     9. Soon-pill cleanup
    10. Dropdown entry animation
    11. Panel-shake animation
    12. Province auto-pin pill + flash
   ============================================================================ */


/* ─────────────────────────────────────────────────────────────────────────
   1. PANEL BODY — REMOVE THE CLIPPING SCROLL CONTAINER  ← THE FIX
   ─────────────────────────────────────────────────────────────────────────
   Removing overflow-y:auto and max-height makes the panel body grow to
   fit its content naturally.  Since panels are accordion-style (only one
   open at a time), no single panel is pathologically tall.  Removing the
   scroll container means:
     • All position:absolute dropdown children are never clipped.
     • No scroll offset to account for in any positioning calculation.
     • The pa-panel-in transform animation no longer creates a fixed
       containing-block context (transform only affects fixed elements
       when the transform is on an ancestor; once the panel body doesn't
       scroll, no interaction with fixed children either).
   ──────────────────────────────────────────────────────────────────────── */
.pa-panel-body {
    overflow:   visible !important;
    max-height: none    !important;
}


/* ─────────────────────────────────────────────────────────────────────────
   2. PLACE-SUGGESTIONS — position:absolute relative to .pa-field--autocomplete
   ─────────────────────────────────────────────────────────────────────────
   The original profile.css declares:
       .pa-place-suggestions { position: fixed; ... }
   Fixed positioning is broken here because .sj-scroll-track has a permanent
   transform:translateX which creates a new fixed containing block — so the
   dropdown renders relative to that element, not the viewport.

   v5 overrides to position:absolute.  The containing block is
   .pa-field--autocomplete { position: relative } which is already in the
   source CSS; we re-state it here as belt-and-braces.

   With .pa-panel-body's overflow removed (section 1), position:absolute
   is never clipped, so the dropdown fully appears below the input.
   ──────────────────────────────────────────────────────────────────────── */
.pa-field--autocomplete {
    position: relative;
}

.pa-place-suggestions {
    position:   absolute !important;
    top:        calc(100% + 3px) !important;
    left:       0 !important;
    right:      0 !important;
    width:      auto !important;
    /* Neutralise any stale inline fixed-position coordinates from v3/v4 */
    transform:  none !important;
    /* Ensure it sits above all panel content */
    z-index:    250 !important;
}

.pa-place-suggestions:not([hidden]) {
    animation: pa-v5-dropdown-in 0.13s ease both;
}


/* ─────────────────────────────────────────────────────────────────────────
   3. CANDIDATE LISTBOX — position:absolute relative to .pa-candidate-combo
   ─────────────────────────────────────────────────────────────────────────
   #paCandidateListbox is a child of .pa-candidate-combo which already has
   position:relative in private-agent-ppra-lookup.css.  With the panel-body
   overflow removed (section 1) the dropdown is no longer clipped.
   We override position:absolute (in case any prior fix wrote fixed/other).
   ──────────────────────────────────────────────────────────────────────── */
.pa-candidate-combo {
    position: relative;
}

#paCandidateListbox {
    position:   absolute !important;
    top:        calc(100% + 4px) !important;
    left:       0 !important;
    right:      0 !important;
    width:      auto !important;
    transform:  none !important;
    z-index:    250 !important;
    /* Visual treatment (restores ppra-lookup.css values if reparenting
       in a prior patch corrupted the inherited context)                */
    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;
    max-height:   280px;
    overflow-y:   auto;
}

#paCandidateListbox:not([hidden]) {
    animation: pa-v5-dropdown-in 0.13s ease both;
}

    #paCandidateListbox::-webkit-scrollbar       { width: 8px; }
    #paCandidateListbox::-webkit-scrollbar-thumb {
        background:    rgba(86, 196, 248, 0.35);
        border-radius: 4px;
    }
    #paCandidateListbox::-webkit-scrollbar-thumb:hover {
        background: rgba(86, 196, 248, 0.55);
    }

/* Un-do any reparenting done by v4 JS: if the listbox was moved out of
   .pa-candidate-combo it is now an orphan with wrong inherited styles.
   This guard only matters if v4's JS ran; if it didn't, the rule is a no-op. */
.pa-candidate-combo > #paCandidateListbox {
    /* Confirm correct context — redundant after section 1 fix, but safe */
    position: absolute !important;
}


/* ─────────────────────────────────────────────────────────────────────────
   4. PPRA "Found" banner — small, CENTERED, single-line message
   ──────────────────────────────────────────────────────────────────────── */
#paPpraFoundTitle {
    display: none !important;
}

#paPpraFoundBanner {
    text-align:      center    !important;
    justify-content: center    !important;
    padding:         10px 14px !important;
    margin-bottom:   14px      !important;
}

    #paPpraFoundBanner .pa-ppra-found-text {
        align-items: center !important;
        text-align:  center !important;
        gap:         0      !important;
        width:       100%   !important;
    }

    #paPpraFoundBanner #paPpraFoundSub,
    #paPpraFoundBanner .pa-fixes-banner-msg {
        display:     block                           !important;
        font-size:   10.5px                          !important;
        font-weight: 500                             !important;
        color:       var(--pa-ink-mute, #7a7e8c)    !important;
        line-height: 1.45                            !important;
        text-align:  center                          !important;
        max-width:   380px                           !important;
        margin:      0 auto                          !important;
    }

#paPpraFoundBanner[data-pa-fixes-rebuilt="1"] {
    display:         flex           !important;
    flex-direction:  column         !important;
    align-items:     center         !important;
    justify-content: center         !important;
}


/* ─────────────────────────────────────────────────────────────────────────
   5. AGENCY PANEL — PPRA-busy lock state (force-collapsed + dim)
   ──────────────────────────────────────────────────────────────────────── */
.pa-panel--ppra-busy {
    position:       relative;
    pointer-events: none;
    cursor:         progress;
}

    .pa-panel--ppra-busy.pa-panel-open > .pa-panel-body,
    .pa-panel--ppra-busy > .pa-panel-body {
        display: none !important;
    }

    .pa-panel--ppra-busy .pa-panel-head {
        opacity:    0.78;
        background: linear-gradient(
            90deg,
            rgba(86,196,248,.06) 0%,
            rgba(86,196,248,.02) 100%
        );
        transition: opacity 0.2s ease, background 0.2s ease;
    }

    .pa-panel--ppra-busy .pa-panel-toggle {
        opacity: 0.35;
    }

    .pa-panel--ppra-busy #paPanelStatusAgency {
        opacity: 0.5;
    }


/* ─────────────────────────────────────────────────────────────────────────
   6. LOADER CAPTION inside the panel-head row
   ──────────────────────────────────────────────────────────────────────── */
.pa-fixes-loader-cap {
    display:         inline-flex !important;
    align-items:     center      !important;
    gap:             6px         !important;
    margin-left:     auto        !important;
    padding:         4px 10px   !important;
    background:      rgba(86,196,248,.12) !important;
    border:          1px solid rgba(86,196,248,.32) !important;
    border-radius:   999px       !important;
    font-size:       10.5px      !important;
    font-weight:     600         !important;
    color:           var(--brand-cyan-deep, #2a7da8) !important;
    letter-spacing:  0.01em      !important;
    white-space:     nowrap      !important;
    flex-shrink:     0           !important;
    pointer-events:  none        !important;
}

.pa-fixes-spinner-mini {
    display:         inline-block !important;
    width:           12px         !important;
    height:          12px         !important;
    border:          2px solid rgba(86,196,248,.30) !important;
    border-top-color: var(--brand-cyan-deep, #2a7da8) !important;
    border-radius:   50%          !important;
    animation:       pa-v5-spin 0.85s linear infinite !important;
    flex-shrink:     0            !important;
}

.pa-fixes-loader-text {
    animation: pa-v5-pulse 1.4s ease-in-out infinite !important;
}

@keyframes pa-v5-spin {
    to { transform: rotate(360deg); }
}

@keyframes pa-v5-pulse {
    0%, 100% { opacity: 0.7; }
    50%       { opacity: 1;   }
}


/* ─────────────────────────────────────────────────────────────────────────
   7. IMAGE UPLOAD — persistent processing loader
   ──────────────────────────────────────────────────────────────────────── */
.pa-photo-upload-zone.is-processing,
.pa-image-frame.is-processing {
    position:       relative;
    pointer-events: none;
}

    .pa-photo-upload-zone.is-processing::before,
    .pa-image-frame.is-processing::before {
        content:            '';
        position:           absolute;
        inset:              0;
        border-radius:      inherit;
        background:         rgba(86,196,248,.22);
        backdrop-filter:    blur(2px);
        -webkit-backdrop-filter: blur(2px);
        z-index:            5;
        animation:          pa-v5-veil-in 0.18s ease;
    }

    .pa-photo-upload-zone.is-processing::after,
    .pa-image-frame.is-processing::after {
        content:        '';
        position:       absolute;
        top:  50%; left: 50%;
        width:  32px; height: 32px;
        margin: -16px 0 0 -16px;
        border-radius:  50%;
        border:         3px solid rgba(86,196,248,.25);
        border-top-color: var(--brand-cyan-deep, #2a7da8);
        animation:      pa-v5-spin 0.85s linear infinite;
        z-index:        6;
    }

@keyframes pa-v5-veil-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* ─────────────────────────────────────────────────────────────────────────
   8. PROFESSIONAL DETAILS PANEL — uncramped padding + spacing
   ──────────────────────────────────────────────────────────────────────── */
.pa-panel[data-pa-panel="professional"] .pa-panel-body {
    padding-top:    18px;
    padding-bottom: 18px;
}

    .pa-panel[data-pa-panel="professional"] .pa-panel-body > .pa-row-2,
    .pa-panel[data-pa-panel="professional"] .pa-panel-body > .pa-field {
        margin-bottom: 16px;
    }

        .pa-panel[data-pa-panel="professional"] .pa-panel-body > .pa-row-2:last-child,
        .pa-panel[data-pa-panel="professional"] .pa-panel-body > .pa-field:last-child {
            margin-bottom: 0;
        }

.pa-panel[data-pa-panel="professional"] .pa-row-2 {
    gap: 16px;
}

.pa-panel[data-pa-panel="professional"] .pa-field {
    gap: 7px;
}

.pa-panel[data-pa-panel="professional"] .pa-area-chips {
    margin-top: 10px;
}

.pa-panel[data-pa-panel="professional"] .pa-helper {
    margin-top: 4px;
}

.pa-panel[data-pa-panel="professional"] .pa-num-pref {
    gap: 8px;
}


/* ─────────────────────────────────────────────────────────────────────────
   9. "Use my current location" — Soon pill removal + disabled affordance
   ──────────────────────────────────────────────────────────────────────── */
.pa-soon-pill,
#paGeoLocate .pa-soon-pill,
.pa-geo-btn-sm .pa-soon-pill {
    display:    none    !important;
    visibility: hidden  !important;
    width:      0       !important;
    height:     0       !important;
    overflow:   hidden  !important;
}

#paGeoLocate[data-pa-geo-disabled="true"] {
    opacity: 0.78;
}


/* ─────────────────────────────────────────────────────────────────────────
   10. Dropdown entry animation
   ──────────────────────────────────────────────────────────────────────── */
@keyframes pa-v5-dropdown-in {
    from {
        opacity:   0;
        transform: translateY(-3px);
    }
    to {
        opacity:   1;
        transform: translateY(0);
    }
}


/* ─────────────────────────────────────────────────────────────────────────
   11. Panel-shake animation (agency-busy click trap)
   ──────────────────────────────────────────────────────────────────────── */
@keyframes pa-v5-shake {
    10%, 90%      { transform: translateX(-1px); }
    20%, 80%      { transform: translateX(2px);  }
    30%, 50%, 70% { transform: translateX(-3px); }
    40%, 60%      { transform: translateX(3px);  }
}

.pa-panel--ppra-busy.pa-panel--shake {
    animation: pa-v5-shake 0.42s ease;
}


/* ─────────────────────────────────────────────────────────────────────────
   12. Province auto-pin pill + flash animation
   ──────────────────────────────────────────────────────────────────────── */
.pa-field--province-pinned .pa-input {
    pointer-events: none;
    cursor:         default;
}

.pa-field--province-pinned::after {
    content:          "Auto";
    display:          inline-block;
    margin-left:      6px;
    padding:          1px 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;
}

@keyframes pa-v5-province-flash {
    0%   { background: rgba(86, 196, 248, 0.25); }
    100% { background: transparent; }
}

.pa-province-flash {
    animation: pa-v5-province-flash 0.9s ease both;
}