/* ===========================================================================
   private-agent-profile.css   (v7 — sticky/upload/nav surgical fixes)
   ---------------------------------------------------------------------------
   CHANGED in v7 vs v6.3:

     1. STICKY HEADER (Issue #1 — body content went above heading; breadcrumb
        disappeared when Core Identity collapsed):
        - The wrapper rule (.pa-sticky-header) was being out-specified by
          seller-additions.css v4 which sets per-element `position: sticky`
          on .ps-progress / .ps-scene-label / .ps-question with stacked
          `top` values. The children were re-sticking inside the wrapper.
        - Added a bulletproof override (4-class specificity + !important)
          that forces those children back to `position: static` whenever
          they live inside a .pa-sticky-header. Now ONLY the wrapper sticks
          and the breadcrumb + heading move as one block, regardless of
          which panels are expanded or collapsed.
        - Disabled the v4 fade pseudo-element via :has() when the wrapper
          is present (it was anchored at top:110px which assumed the old
          stacked-stickies layout).

     2. PROFILE PHOTO + AGENCY LOGO SHAPE (Issue #3):
        - .pa-photo-upload-zone and its inner img / hover-overlay changed
          from border-radius:50% (circle) to 14px (rounded square),
          matching the rest of the icon wrappers on the site.
        - Legacy .pa-image-frame (agency-logo zone) now defaults to
          border-radius:11px (square). The --circle modifier is preserved
          for backward compat but no longer used in the agent profile UI.

     3. UPLOAD CLICK FEEDBACK (Issue #2 — clicks felt slow/unresponsive):
        - Added .pa-photo-upload-zone.is-loading and .pa-image-frame.is-loading
          styles: cursor:wait, dimmed opacity, cyan-tinted border + a small
          spinner overlay (paZoneSpin keyframes). The class is toggled on
          for ~700 ms by triggerFileInput() in private-agent-profile.js v9
          so the user gets immediate visual confirmation that the OS file
          picker is opening.

     4. FIXED-POSITION BACK / CONTINUE BUTTONS (Issue #4 — buttons
        fluctuated between scenes):
        - .pa-host .ps-left .ps-nav (and .ps-nav-dna) is now sticky to the
          bottom of .ps-left with a 1-px top border + soft shadow, so the
          buttons stay in the SAME position on every panel/scene of the
          agent flow regardless of body height.
        - The matching sticky-bottom rule for the embedded seller portion
          when in agent flow lives in seller-additions.css v6.

   v6.3 → v7 is purely additive on top of the existing rules; no
   pre-existing selectors were renamed or removed.
   =========================================================================== */
:root {
    /* Background surfaces (white-themed, sit on top of dark seller bg) */
    --pa-bg: #ffffff;
    --pa-bg-soft: #f7f9fc;
    --pa-bg-tint: #f0f7fc;
    /* Borders */
    --pa-line: rgba(14, 14, 17, 0.08);
    --pa-line-strong: rgba(14, 14, 17, 0.16);
    --pa-line-cyan: rgba(86, 196, 248, 0.32);
    /* Ink */
    --pa-ink: #0e0e11;
    --pa-ink-soft: #3f4350;
    --pa-ink-mute: #7a7e8c;
    /* Status */
    --pa-success: #10b981;
    --pa-warn: #f59e0b;
    --pa-danger: #ef4444;
    /* Brand accents */
    --brand-cyan: #56c4f8;
    --brand-cyan-deep: #2a7da8;
    --brand-charcoal: #0e0e11;
    /* Shadows */
    --pa-shadow-soft: 0 1px 2px rgba(14,14,17,0.04), 0 1px 3px rgba(14,14,17,0.06);
    --pa-shadow-card: 0 4px 12px -2px rgba(14,14,17,0.08), 0 8px 20px -6px rgba(14,14,17,0.10);
}

/* === AGENT BREADCRUMB (clickable, matches seller .ps-breadcrumb) ======= */
.pa-breadcrumb-back {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 700;
    color: var(--brand-cyan-deep);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.18s ease, text-decoration 0.18s ease;
    letter-spacing: -0.005em;
    white-space: nowrap;
}

    .pa-breadcrumb-back:hover {
        color: var(--brand-cyan);
        text-decoration: underline;
    }

.pa-breadcrumb-current {
    font-weight: 700;
    color: var(--pa-ink);
    letter-spacing: -0.005em;
    white-space: nowrap;
}

/* === SHELL / TWO-COLUMN ADJUSTMENTS ==================================== */
#paAgentSlot .ps-left {
    flex: 1 1 64%;
    padding: 14px 18px 14px 22px;
}

#paAgentSlot .ps-right {
    flex: 0 0 36%;
    min-width: 280px;
    max-width: 360px;
    padding: 14px 18px;
}

    #paAgentSlot .ps-right > .pa-intel-card:first-child {
        position: sticky;
        top: 0;
    }

/* ── PANEL CONTAINER ──────────────────────────────────────────────── */
.pa-panels {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 12px;
}

/* === PANEL ============================================================ */
.pa-panel {
    background: var(--pa-bg);
    border: 1px solid var(--pa-line);
    border-radius: 12px;
    overflow: visible;
    box-shadow: var(--pa-shadow-soft);
    transition: box-shadow .25s ease, border-color .25s ease;
    /* v6.6: ensure panel content sites above sticky header for click hit-testing */
    position: relative;
    z-index: 1;
}


    .pa-panel.pa-panel-open {
        border-color: var(--pa-line-cyan);
        box-shadow: 0 0 0 1px rgba(86,196,248,0.18), var(--pa-shadow-card);
        /* v6.6: open panels get higher z so upload zones always beat sticky header */
        z-index: 6;
    }

.pa-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    background: var(--pa-bg-soft);
    border-bottom: 1px solid transparent;
    transition: background .18s ease;
    user-select: none;
    border-radius: 12px 12px 0 0;
}

.pa-panel.pa-panel-open .pa-panel-head {
    background: var(--pa-bg-tint);
    border-bottom-color: var(--pa-line);
}

.pa-panel-head:hover {
    background: var(--pa-bg-tint);
}

.pa-panel-step {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--pa-bg);
    border: 1.5px solid var(--pa-line-strong);
    color: var(--pa-ink-soft);
    font-weight: 700;
    font-size: 11px;
    display: grid;
    place-items: center;
    line-height: 1;
}

.pa-panel.pa-panel-open .pa-panel-step {
    background: var(--brand-cyan);
    border-color: var(--brand-cyan);
    color: var(--brand-charcoal);
}

.pa-panel-title-block {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    line-height: 1.25;
}

.pa-panel-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--pa-ink);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pa-panel-sub {
    font-size: 10px;
    color: var(--pa-ink-mute);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pa-panel-status {
    flex-shrink: 0;
    font-size: 9.5px;
    font-weight: 700;
    color: var(--pa-ink-mute);
    text-transform: uppercase;
    letter-spacing: .06em;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

    .pa-panel-status.is-complete {
        color: var(--pa-success);
    }

    .pa-panel-status i,
    .pa-panel-status .pa-icon {
        font-size: 11px;
        width: 11px;
        height: 11px;
        flex-shrink: 0;
    }

.pa-panel-toggle {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    border: 1px solid var(--pa-line);
    background: var(--pa-bg);
    color: var(--pa-ink-soft);
    display: grid;
    place-items: center;
    pointer-events: none;
}

    .pa-panel-toggle i,
    .pa-panel-toggle .pa-icon {
        font-size: 12px;
        width: 12px;
        height: 12px;
        transition: transform .25s ease;
    }

.pa-panel.pa-panel-open .pa-panel-toggle i,
.pa-panel.pa-panel-open .pa-panel-toggle .pa-icon {
    transform: rotate(180deg);
}

/* CRITICAL DISPLAY RULES */
.pa-panel:not(.pa-panel-open) > .pa-panel-body {
    display: none !important;
}

.pa-panel.pa-panel-open > .pa-panel-body {
    display: block !important;
}

.pa-panel-body {
    padding: 12px 14px;
    max-height: 700px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(14,14,17,0.18) transparent;
    animation: pa-panel-in .3s ease;
    border-radius: 0 0 12px 12px;
    /* v6.6: ensure body content receives clicks above any sticky overlays */
    position: relative;
    z-index: 1;
}

    .pa-panel-body::-webkit-scrollbar {
        width: 6px;
    }

    .pa-panel-body::-webkit-scrollbar-track {
        background: transparent;
    }

    .pa-panel-body::-webkit-scrollbar-thumb {
        background: rgba(14,14,17,0.18);
        border-radius: 3px;
    }

@keyframes pa-panel-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pa-panel.pa-panel-open > .pa-panel-body {
        animation: none;
    }
}

/* === SIDE ROW (photo + fields) ========================================== */
.pa-side-row {
    display: flex;
    gap: 18px;
    align-items: center;
}

.pa-side-col-photo {
    flex-shrink: 0;
    width: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.pa-side-col-fields {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Enhanced Photo Upload Zone ──────────────────────────────────────────── */
.pa-photo-upload-zone {
    width: 120px;
    height: 120px;
    /* v7: square frame (matches the rest of the icon wrappers on site) */
    border-radius: 14px;
    background: var(--pa-bg-soft);
    border: 2.5px dashed var(--pa-line-strong);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease, transform .18s ease, opacity .18s ease;
    flex-shrink: 0;
    pointer-events: auto;
}

    .pa-photo-upload-zone:hover,
    .pa-photo-upload-zone:focus-visible {
        border-color: var(--brand-cyan);
        box-shadow: 0 0 0 4px rgba(86,196,248,0.15);
        outline: none;
    }

    .pa-photo-upload-zone:focus-visible {
        box-shadow: 0 0 0 3px rgba(86,196,248,0.4);
    }

    .pa-photo-upload-zone.has-image {
        border-style: solid;
        border-color: var(--brand-cyan);
        box-shadow: 0 0 0 3px rgba(86,196,248,0.18);
    }

    .pa-photo-upload-zone.is-dragover {
        border-color: var(--brand-cyan);
        background: var(--pa-bg-tint);
        transform: scale(1.04);
    }

    /* v7: visual feedback while the OS file-picker is opening (set by JS for ~700 ms) */
    .pa-photo-upload-zone.is-loading {
        cursor: wait;
        pointer-events: none;
        opacity: 0.78;
        border-color: var(--brand-cyan);
        background: var(--pa-bg-tint);
    }

        .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);
            animation: paZoneSpin 0.7s linear infinite;
            z-index: 4;
            pointer-events: none;
        }

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

.pa-photo-upload-zone img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
    /* v7: square frame */
    border-radius: 12px;
}

.pa-photo-upload-zone.has-image img {
    display: block;
}

.pa-photo-upload-zone.has-image .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: 3px;
    pointer-events: none;
}

.pa-photo-camera-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-cyan) 0%, var(--brand-cyan-deep) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    box-shadow: 0 4px 12px rgba(86,196,248,0.35);
}

    .pa-photo-camera-icon i,
    .pa-photo-camera-icon .pa-icon {
        font-size: 20px;
        color: #0e0e11;
        width: 20px;
        height: 20px;
    }

.pa-photo-prompt-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--pa-ink-soft);
    line-height: 1.2;
}

.pa-photo-prompt-sub {
    font-size: 9px;
    color: var(--pa-ink-mute);
    text-align: center;
    line-height: 1.4;
}

.pa-photo-hover-overlay {
    position: absolute;
    inset: 0;
    /* v7: square frame to match photo zone */
    border-radius: 12px;
    background: rgba(14,14,17,0.52);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    opacity: 0;
    transition: opacity .18s ease;
    pointer-events: none;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

    .pa-photo-hover-overlay i,
    .pa-photo-hover-overlay .pa-icon {
        font-size: 18px;
        width: 18px;
        height: 18px;
    }

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

.pa-photo-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
}

.pa-photo-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 9px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
    background: transparent;
    border: 1px solid var(--pa-line-strong);
    color: var(--pa-ink-soft);
}

    .pa-photo-action-btn:hover {
        border-color: var(--brand-cyan);
        color: var(--brand-cyan-deep);
    }

.pa-photo-action-btn--edit {
    border-color: rgba(86,196,248,0.4);
    color: var(--brand-cyan-deep);
}

    .pa-photo-action-btn--edit:hover {
        background: var(--pa-bg-tint);
    }

.pa-photo-action-btn--danger {
    border-color: rgba(239,68,68,0.3);
    color: var(--pa-danger);
    padding: 4px 8px;
}

    .pa-photo-action-btn--danger:hover {
        background: rgba(239,68,68,0.06);
        border-color: var(--pa-danger);
    }

.pa-image-warning {
    font-size: 9.5px;
    color: var(--pa-warn);
    display: flex;
    align-items: center;
    gap: 3px;
    text-align: center;
    line-height: 1.3;
}

@media (max-width: 540px) {
    .pa-side-row {
        flex-direction: column;
        align-items: center;
    }

    .pa-side-col-photo {
        width: 100%;
        align-items: center;
    }

    .pa-photo-upload-zone {
        width: 110px;
        height: 110px;
    }
}

/* === FIELD CHROME ===================================================== */
.pa-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.pa-field--full {
    grid-column: 1 / -1;
}

.pa-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
}

.pa-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px 12px; /* ↑ row-gap 8→14 and col-gap 10→12 for breathing room */
}

@media (max-width: 720px) {
    .pa-row-3 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 540px) {
    .pa-row-2,
    .pa-row-3 {
        grid-template-columns: 1fr;
    }
}

.pa-label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--pa-ink-soft);
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.3;
}

.pa-req {
    color: var(--brand-cyan-deep);
    margin-left: 2px;
}

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

.pa-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.pa-input-icon {
    position: absolute;
    left: 10px;
    color: var(--pa-ink-mute);
    font-size: 12.5px;
    pointer-events: none;
    width: 12.5px;
    height: 12.5px;
}

.pa-input,
.pa-textarea,
.pa-select {
    width: 100%;
    padding: 7px 10px 7px 30px;
    font-family: inherit;
    font-size: 12px;
    background: var(--pa-bg);
    border: 1px solid var(--pa-line-strong);
    border-radius: 8px;
    color: var(--pa-ink);
    transition: border-color .18s ease, box-shadow .18s ease;
    line-height: 1.4;
}

.pa-textarea {
    padding: 8px 10px;
    resize: vertical;
    min-height: 50px;
    line-height: 1.5;
}

    .pa-input:focus,
    .pa-textarea:focus,
    .pa-select:focus {
        outline: none;
        border-color: var(--brand-cyan);
        box-shadow: 0 0 0 2px rgba(86,196,248,0.16);
    }

.pa-select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%237a7e8c' d='M4 6l4 4 4-4z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 26px;
}

/* === PHOTO EDITOR MODAL ================================================= */
.pa-photo-editor-backdrop {
    position: fixed;
    inset: 0;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 99999;
    display: flex;
    /*   align-items: center;*/
    justify-content: center;
    /* v6.5: Reduced padding so the shell has maximum room on short viewports */
    padding: 12px;
    overflow: hidden;
    animation: pa-backdrop-in .2s ease;
    overscroll-behavior: contain;
}

@keyframes pa-backdrop-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.pa-photo-editor-backdrop[hidden] {
    display: none !important;
}

.pa-photo-editor-shell {
    background: var(--pa-bg, #fff);
    border-radius: 16px;
    box-shadow: 0 32px 64px -16px rgba(14,14,17,0.55), 0 0 0 1px rgba(14,14,17,0.06);
    width: min(540px, 100%);
    /* v6.5: Use dvh with a generous fallback so the shell always fits.
       The key fix: max-height must allow the full modal to render without
       internal clipping.  On a 720px viewport, 12px padding × 2 = 24px
       leaves 696px for the shell.  Shell content is roughly:
          header 50px + canvas 260px + controls 90px + filters 65px + footer 55px
          = ~520px.  But add borders/padding and it's ~580px.
       696px is enough.  For safety we cap at 95dvh. */
    max-height: min(800px, calc(100dvh - 24px));
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(14,14,17,0.18) transparent;
    display: flex;
    flex-direction: column;
    animation: pa-editor-in .22s ease;
    container-type: inline-size;
}

    .pa-photo-editor-shell::-webkit-scrollbar {
        width: 5px;
    }

    .pa-photo-editor-shell::-webkit-scrollbar-track {
        background: transparent;
    }

    .pa-photo-editor-shell::-webkit-scrollbar-thumb {
        background: rgba(14,14,17,0.18);
        border-radius: 3px;
    }

    .pa-photo-editor-shell .pa-panel-body,
    .pa-photo-editor-shell > * {
        max-height: none !important;
        overflow: visible !important;
    }

@keyframes pa-editor-in {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.pa-photo-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px 2px;
    border-bottom: 1px solid var(--pa-line);
    flex-shrink: 0;
}

.pa-photo-editor-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--pa-ink);
    display: flex;
    align-items: center;
    gap: 7px;
}

    .pa-photo-editor-title i,
    .pa-photo-editor-title .pa-icon {
        color: var(--brand-cyan-deep);
        font-size: 14px;
        width: 14px;
        height: 14px;
    }

.pa-photo-editor-close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--pa-line-strong);
    background: var(--pa-bg-soft);
    cursor: pointer;
    display: grid;
    place-items: center;
    color: var(--pa-ink-soft);
    transition: all .15s ease;
    font-size: 13px;
}

    .pa-photo-editor-close:hover {
        background: rgba(239,68,68,0.08);
        border-color: rgba(239,68,68,0.4);
        color: var(--pa-danger);
    }

/* Canvas area — v6.5: compact, responsive, never clipped */
.pa-photo-editor-canvas-wrap {
    position: relative;
    background: whitesmoke;
    display: flex;
    align-items: center;
    justify-content: center;
    /* v6.5: Reduced padding so canvas takes maximum space */
    padding: 3px;
    user-select: none;
    touch-action: none;
    overflow: hidden;
    flex-shrink: 0;
}

#paPhotoEditorCanvas {
    display: block;
    /* v6.5: Canvas scales to fit available space while maintaining square shape */
    width: min(300px, 80cqi, calc(100dvh - 380px));
    height: min(300px, 80cqi, calc(100dvh - 380px));
    min-width: 180px;
    min-height: 180px;
    max-width: 300px;
    max-height: 300px;
    border-radius: 50%;
    cursor: grab;
    box-shadow: 0 0 0 2px rgba(86,196,248,0.5), 0 8px 24px rgba(14,14,17,0.4);
    image-rendering: crisp-edges;
    object-fit: cover;
}

    #paPhotoEditorCanvas:active {
        cursor: grabbing;
    }

.pa-photo-editor-circle-guide {
    display: none;
}

/* Adjustment controls */
.pa-photo-editor-controls {
    display: grid;
    grid-template-columns: 2fr 2fr 2fr;
    gap: 10px 16px;
    padding: 14px 18px 10px;
    border-top: 1px solid var(--pa-line);
    flex-shrink: 0;
}

.pa-photo-control-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pa-photo-control-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--pa-ink-soft);
    text-transform: uppercase;
    letter-spacing: .05em;
    display: flex;
    align-items: center;
    gap: 4px;
}

    .pa-photo-control-label i,
    .pa-photo-control-label .pa-icon {
        color: var(--brand-cyan-deep);
        font-size: 11px;
        width: 11px;
        height: 11px;
    }

.pa-photo-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: var(--pa-line-strong);
    outline: none;
    cursor: pointer;
}

    .pa-photo-range::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--brand-cyan);
        border: 2px solid #fff;
        box-shadow: 0 1px 4px rgba(86,196,248,0.5);
        cursor: pointer;
    }

    .pa-photo-range::-moz-range-thumb {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--brand-cyan);
        border: 2px solid #fff;
        cursor: pointer;
    }

.pa-photo-range-val {
    font-size: 9.5px;
    color: var(--pa-ink-mute);
    font-weight: 600;
    text-align: right;
}

/* Filters strip */
.pa-photo-editor-filters {
    padding: 10px 18px 12px;
    border-top: 1px solid var(--pa-line);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.pa-photo-filter-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--pa-ink-soft);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.pa-photo-filter-strip {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}

    .pa-photo-filter-strip::-webkit-scrollbar {
        display: none;
    }

.pa-filter-chip {
    flex-shrink: 0;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1.5px solid var(--pa-line-strong);
    background: var(--pa-bg-soft);
    color: var(--pa-ink-soft);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
    white-space: nowrap;
}

    .pa-filter-chip:hover {
        border-color: var(--brand-cyan);
        color: var(--brand-cyan-deep);
    }

.pa-filter-chip--active {
    background: linear-gradient(135deg, var(--brand-cyan) 0%, var(--brand-cyan-deep) 100%);
    border-color: transparent;
    color: #0e0e11;
}

/* Editor footer */
.pa-photo-editor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px 16px;
    border-top: 1px solid var(--pa-line);
    gap: 8px;
    flex-shrink: 0;
}

.pa-photo-editor-footer-right {
    display: flex;
    gap: 8px;
}

.pa-photo-editor-reset {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 13px;
    border-radius: 8px;
    border: 1px solid var(--pa-line-strong);
    background: transparent;
    color: var(--pa-ink-mute);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
}

    .pa-photo-editor-reset:hover {
        border-color: var(--pa-line-cyan);
        color: var(--brand-cyan-deep);
    }

.pa-photo-editor-cancel {
    padding: 7px 14px;
    border-radius: 8px;
    border: 1px solid var(--pa-line-strong);
    background: transparent;
    color: var(--pa-ink-soft);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
}

    .pa-photo-editor-cancel:hover {
        background: var(--pa-bg-soft);
    }

.pa-photo-editor-apply {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 18px;
    border-radius: 8px;
    border: none;
    background: linear-gradient(135deg, var(--brand-cyan) 0%, var(--brand-cyan-deep) 100%);
    color: #0e0e11;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(86,196,248,0.3);
    transition: all .15s ease;
}

    .pa-photo-editor-apply:hover {
        box-shadow: 0 6px 18px rgba(86,196,248,0.45);
        transform: translateY(-1px);
    }

/* ═══════════════════════════════════════════════════════════════
   v6.5 — RESPONSIVE PHOTO EDITOR (not truncated at any viewport)
   ═══════════════════════════════════════════════════════════════ */

/* Tablet / narrow desktop: canvas gets slightly smaller, controls stay 2-col */
@media (max-width: 640px) {
    .pa-photo-editor-shell {
        border-radius: 14px;
    }

    .pa-photo-editor-header {
        padding: 2px 4px 2px;
    }

    .pa-photo-editor-canvas-wrap {
        padding: 12px;
    }

    #paPhotoEditorCanvas {
        width: min(260px, 75cqi, calc(100dvh - 360px));
        height: min(260px, 75cqi, calc(100dvh - 360px));
        min-width: 160px;
        min-height: 160px;
        max-width: 260px;
        max-height: 260px;
    }

    .pa-photo-editor-controls {
        padding: 10px 14px 8px;
        gap: 8px 12px;
    }

    .pa-photo-editor-filters {
        padding: 8px 14px 10px;
    }

    .pa-photo-editor-footer {
        padding: 10px 14px 12px;
    }
}

/* Phone: single-column controls, smaller canvas, compact footer */
@media (max-width: 480px) {
    .pa-photo-editor-backdrop {
        padding: 8px;
    }

    .pa-photo-editor-shell {
        border-radius: 12px;
        max-height: calc(100dvh - 16px);
    }

    .pa-photo-editor-header {
        padding: 2px 2px 2px;
    }

    .pa-photo-editor-title {
        font-size: 13px;
    }

    .pa-photo-editor-close {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }

    .pa-photo-editor-canvas-wrap {
        padding: 10px;
    }

    #paPhotoEditorCanvas {
        width: min(220px, 70cqi, calc(100dvh - 340px));
        height: min(220px, 70cqi, calc(100dvh - 340px));
        min-width: 140px;
        min-height: 140px;
        max-width: 220px;
        max-height: 220px;
    }

    .pa-photo-editor-controls {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 8px 12px;
    }

    .pa-photo-editor-filters {
        padding: 6px 12px 8px;
    }

    .pa-photo-filter-label {
        font-size: 9px;
    }

    .pa-photo-editor-footer {
        padding: 8px 12px 10px;
        flex-wrap: wrap;
        gap: 6px;
    }

    .pa-photo-editor-footer-right {
        width: 100%;
        justify-content: flex-end;
    }

    .pa-photo-editor-reset {
        font-size: 11px;
        padding: 6px 10px;
    }

    .pa-photo-editor-cancel {
        font-size: 11px;
        padding: 6px 12px;
        flex: 1;
        text-align: center;
        justify-content: center;
    }

    .pa-photo-editor-apply {
        font-size: 11px;
        padding: 6px 14px;
        flex: 2;
        text-align: center;
        justify-content: center;
    }
}

/* Very short viewports (landscape phone, ≤ 400px height) */
@media (max-height: 420px) {
    .pa-photo-editor-backdrop {
        padding: 4px;
    }

    .pa-photo-editor-shell {
        max-height: calc(100dvh - 8px);
        border-radius: 10px;
    }

    .pa-photo-editor-header {
        padding: 4px 6px 4px;
    }

    .pa-photo-editor-title {
        font-size: 12px;
    }

    .pa-photo-editor-canvas-wrap {
        padding: 6px;
    }

    #paPhotoEditorCanvas {
        width: min(150px, 60cqi, 140px);
        height: min(150px, 60cqi, 140px);
        min-width: 100px;
        min-height: 100px;
        max-width: 150px;
        max-height: 150px;
    }

    .pa-photo-editor-controls {
        grid-template-columns: 1fr 1fr 1fr;
        padding: 6px 10px;
        gap: 4px 8px;
    }

    .pa-photo-control-label {
        font-size: 8px;
    }

    .pa-photo-range-val {
        font-size: 8px;
    }

    .pa-photo-editor-filters {
        padding: 4px 10px 6px;
    }

    .pa-photo-filter-label {
        font-size: 8px;
    }

    .pa-filter-chip {
        font-size: 9px;
        padding: 3px 9px;
    }

    .pa-photo-editor-footer {
        padding: 6px 10px 8px;
    }

    .pa-photo-editor-footer-right {
        gap: 4px;
    }
}

/* === Continue button ==================================================== */
/* v7: pin Back/Continue to the bottom of .ps-left so the buttons stay in
   the SAME position throughout the multi-step form (mirrors the seller flow).
   The sticky-bottom rule is scoped via .pa-host so it only applies inside
   the agent shell — standalone seller behaviour is untouched here.
   Also applied to the embedded seller portion when in agent flow (see
   seller-additions.css v6). */
.pa-host .ps-left .ps-nav,
.pa-host .ps-left .ps-nav-dna {
    position: sticky;
    bottom: 0;
    z-index: 25;
    background: var(--pa-bg, #fff);
    /* Bleed horizontally so the bar masks scrolling content under the
       .ps-left padding edges, matching the .pa-sticky-header bleed. */
    margin: 12px -22px 0;
    padding: 12px 22px;
    border-top: 1px solid var(--pa-line);
    box-shadow: 0 -4px 12px -8px rgba(14, 14, 17, 0.10);
}

@media (max-width: 720px) {
    .pa-host .ps-left .ps-nav,
    .pa-host .ps-left .ps-nav-dna {
        margin: 12px -14px 0;
        padding: 10px 14px;
    }
}

.ps-nav {
    position: relative;
    z-index: 20;
    background: var(--pa-bg, #fff);
}

#paBtnNextProfile {
    position: relative;
    z-index: 21;
}

    #paBtnNextProfile:disabled {
        pointer-events: auto;
    }

    #paBtnNextProfile[title]:disabled:hover::after {
        content: attr(title);
        position: absolute;
        bottom: calc(100% + 8px);
        right: 0;
        white-space: nowrap;
        background: var(--brand-charcoal);
        color: #fff;
        font-size: 10.5px;
        font-weight: 500;
        padding: 5px 10px;
        border-radius: 7px;
        pointer-events: none;
        z-index: 9999;
        box-shadow: 0 4px 12px rgba(14,14,17,0.25);
    }

/* === Old image frame compat =============================================== */
/* v7: default to a square (rounded-corner) frame so the agency-logo zone
   matches the new square profile-photo zone and the rest of the icon
   wrappers on the site. The --circle modifier is preserved for any
   legacy callers but should no longer be used in the agent profile UI. */
.pa-image-frame {
    width: 76px;
    height: 76px;
    border-radius: 11px;
    background: var(--pa-bg-soft);
    border: 1.5px dashed var(--pa-line-strong);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all .18s ease, opacity .18s ease;
    pointer-events: auto;
}

.pa-image-frame--circle {
    border-radius: 50%;
}

.pa-image-frame--square {
    border-radius: 11px;
}

/* v7: same loading feedback applied when JS triggers the file picker */
.pa-image-frame.is-loading {
    cursor: wait;
    pointer-events: none;
    opacity: 0.78;
    border-color: var(--brand-cyan);
    background: var(--pa-bg-tint);
}

    .pa-image-frame.is-loading::after {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        border: 2.5px solid rgba(86, 196, 248, 0.25);
        border-top-color: var(--brand-cyan-deep);
        animation: paZoneSpin 0.7s linear infinite;
        z-index: 4;
        pointer-events: none;
    }

.pa-image-frame:hover,
.pa-image-frame.is-dragover {
    border-color: var(--brand-cyan);
    background: var(--pa-bg-tint);
}

.pa-image-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.pa-image-frame.has-image img {
    display: block;
}

.pa-image-frame.has-image .pa-image-empty {
    display: none;
}

.pa-image-frame.has-image {
    border-style: solid;
    border-color: var(--brand-cyan);
}

.pa-image-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--brand-cyan-deep);
    font-size: 9.5px;
    font-weight: 600;
    text-align: center;
    padding: 4px;
    line-height: 1.15;
}

    .pa-image-empty i,
    .pa-image-empty .pa-icon {
        font-size: 18px;
        color: var(--brand-cyan-deep);
        margin-bottom: 2px;
        width: 18px;
        height: 18px;
    }

.pa-image-mini-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    margin-top: 2px;
}

.pa-mini-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--brand-cyan-deep);
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

    .pa-mini-btn:hover {
        text-decoration: underline;
    }

.pa-mini-btn--danger {
    color: var(--pa-danger);
}

.pa-mini-sep {
    color: var(--pa-ink-mute);
}

.pa-image-warning {
    font-size: 9px;
    color: var(--pa-warn);
    text-align: center;
    margin-top: 2px;
    line-height: 1.3;
    max-width: 86px;
}

/* === RADIO PILLS ======================================================= */
.pa-num-pref {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.pa-num-pref-row {
    margin-top: 4px;
}

.pa-radio-pill {
    flex: 1;
    min-width: 0;
    cursor: pointer;
    display: flex;
}

    .pa-radio-pill input {
        display: none;
    }

    .pa-radio-pill > span {
        flex: 1;
        text-align: center;
        padding: 6px 8px;
        border-radius: 7px;
        border: 1px solid var(--pa-line-strong);
        background: var(--pa-bg);
        color: var(--pa-ink-soft);
        font-size: 10.5px;
        font-weight: 600;
        transition: all .18s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        white-space: nowrap;
        line-height: 1.3;
    }

        .pa-radio-pill > span i,
        .pa-radio-pill > span .pa-icon {
            font-size: 11px;
            width: 11px;
            height: 11px;
            flex-shrink: 0;
        }

    .pa-radio-pill input:checked + span {
        background: var(--brand-cyan);
        color: var(--brand-charcoal);
        border-color: var(--brand-cyan);
    }

    .pa-radio-pill:hover > span {
        border-color: var(--brand-cyan);
        color: var(--brand-cyan-deep);
    }

.pa-num-pref--three .pa-radio-pill > span {
    padding: 6px 4px;
}

/* === HELPER LINE ======================================================= */
.pa-helper {
    font-size: 10px;
    color: var(--pa-ink-mute);
    line-height: 1.4;
    margin: 4px 0 0;
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

    .pa-helper i,
    .pa-helper .pa-icon {
        color: var(--brand-cyan-deep);
        flex-shrink: 0;
        margin-top: 1px;
        font-size: 11px;
        width: 11px;
        height: 11px;
    }

    .pa-helper strong {
        color: var(--pa-ink);
        font-weight: 600;
    }

/* === WHATSAPP TOGGLE SWITCH ============================================ */
.pa-toggle-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    margin-top: 4px;
}

    .pa-toggle-switch input {
        display: none;
    }

.pa-toggle-track {
    width: 32px;
    height: 18px;
    border-radius: 999px;
    background: rgba(14,14,17,0.18);
    position: relative;
    flex-shrink: 0;
    transition: background .2s ease;
}

.pa-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    transition: transform .2s ease;
    box-shadow: 0 1px 3px rgba(14,14,17,0.18);
}

.pa-toggle-switch input:checked ~ .pa-toggle-track {
    background: #25D366;
}

    .pa-toggle-switch input:checked ~ .pa-toggle-track .pa-toggle-thumb {
        transform: translateX(14px);
    }

.pa-toggle-label {
    color: var(--pa-ink);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .pa-toggle-label i,
    .pa-toggle-label .pa-icon {
        font-size: 13px;
        width: 13px;
        height: 13px;
    }

.pa-wa-input-wrap {
    margin-top: 4px;
}

/* === PPRA STATUS CHIP ================================================== */
.pa-input--ppra {
    padding-right: 96px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.pa-ppra-status {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(14,14,17,0.06);
    border: 1px solid var(--pa-line-strong);
    color: var(--pa-ink-mute);
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    pointer-events: none;
}

    .pa-ppra-status.is-checking {
        color: var(--pa-warn);
        border-color: rgba(245,158,11,0.4);
        background: rgba(245,158,11,0.08);
    }

    .pa-ppra-status.is-valid {
        color: var(--pa-success);
        border-color: rgba(16,185,129,0.4);
        background: rgba(16,185,129,0.10);
    }

    .pa-ppra-status.is-invalid {
        color: var(--pa-danger);
        border-color: rgba(239,68,68,0.4);
        background: rgba(239,68,68,0.08);
    }

    .pa-ppra-status i,
    .pa-ppra-status .pa-icon {
        font-size: 10px;
        width: 10px;
        height: 10px;
        flex-shrink: 0;
    }

/* === GEO BUTTON ======================================================== */
.pa-geo-btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 8px;
    background: var(--pa-bg-tint);
    border: 1px dashed var(--pa-line-cyan);
    color: var(--brand-cyan-deep);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: not-allowed;
    transition: all .18s ease;
    margin-bottom: 8px;
    opacity: .8;
}

    .pa-geo-btn-sm[data-pa-geo-disabled="false"] {
        cursor: pointer;
        opacity: 1;
    }

        .pa-geo-btn-sm[data-pa-geo-disabled="false"]:hover {
            background: rgba(86,196,248,0.16);
            border-style: solid;
        }

.pa-soon-pill {
    margin-left: 2px;
    padding: 1px 5px;
    border-radius: 999px;
    background: rgba(14,14,17,0.08);
    color: var(--pa-ink-mute);
    font-size: 8.5px;
    letter-spacing: .04em;
    font-weight: 700;
    text-transform: uppercase;
}

/* === PLACE AUTOCOMPLETE SUGGESTIONS ==================================== */
.pa-field--autocomplete {
    position: relative;
}

.pa-place-suggestions {
    /* Use fixed positioning so the dropdown escapes any overflow:hidden/auto
       ancestor (pa-panel-body, pa-row-3, etc.) and always renders above
       the panel. JS in paPositionDropdown() sets top/left/width via
       getBoundingClientRect() each time the box is shown. */
    position: fixed;
    background: var(--pa-bg);
    border: 1px solid var(--pa-line-strong);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(14,14,17,0.18), 0 2px 8px rgba(14,14,17,0.10);
    max-height: 220px;
    overflow-y: auto;
    z-index: 9999;
    /* Sensible fallback widths until JS sets them */
    min-width: 200px;
}

.pa-place-suggestion {
    padding: 7px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    border-bottom: 1px solid var(--pa-line);
    font-size: 11.5px;
    color: var(--pa-ink);
    line-height: 1.35;
}

    .pa-place-suggestion:last-child {
        border-bottom: none;
    }

    .pa-place-suggestion:hover,
    .pa-place-suggestion.is-active {
        background: var(--pa-bg-tint);
    }

    .pa-place-suggestion i,
    .pa-place-suggestion .pa-icon {
        color: var(--brand-cyan-deep);
        flex-shrink: 0;
        font-size: 12px;
        width: 12px;
        height: 12px;
    }

/* === MULTI-SELECT DROPDOWN ============================================= */
.pa-field--multiselect {
    position: relative;
}

.pa-multiselect {
    position: relative;
}

.pa-multiselect-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid var(--pa-line-strong);
    border-radius: 8px;
    background: var(--pa-bg);
    font-family: inherit;
    font-size: 12px;
    color: var(--pa-ink-soft);
    cursor: pointer;
    transition: border-color .18s ease;
    text-align: left;
    line-height: 1.4;
}

    .pa-multiselect-trigger:hover {
        border-color: var(--brand-cyan);
    }

    .pa-multiselect-trigger[aria-expanded="true"] {
        border-color: var(--brand-cyan);
        box-shadow: 0 0 0 2px rgba(86,196,248,0.16);
    }

.pa-ms-icon {
    color: var(--pa-ink-mute);
    font-size: 13px;
    flex-shrink: 0;
}

.pa-ms-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .pa-ms-label.has-selection {
        color: var(--pa-ink);
        font-weight: 500;
    }

.pa-ms-chevron {
    color: var(--pa-ink-mute);
    font-size: 11px;
    flex-shrink: 0;
    transition: transform .2s ease;
}

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

.pa-multiselect-panel {
    position: absolute;
    top: calc(100% + 3px);
    left: 0;
    right: 0;
    background: var(--pa-bg);
    border: 1px solid var(--pa-line-strong);
    border-radius: 8px;
    box-shadow: var(--pa-shadow-card);
    max-height: 220px;
    overflow-y: auto;
    z-index: 100;
    padding: 4px;
}

.pa-ms-option {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 8px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 11.5px;
    color: var(--pa-ink);
    transition: background .15s ease;
}

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

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

.pa-ms-check {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1.5px solid var(--pa-line-strong);
    background: var(--pa-bg);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: transparent;
    transition: all .15s ease;
}

    .pa-ms-check i,
    .pa-ms-check .pa-icon {
        font-size: 10px;
        width: 8px;
        height: 8px;
    }

.pa-ms-option input:checked + .pa-ms-check {
    background: var(--brand-cyan);
    border-color: var(--brand-cyan);
    color: var(--brand-charcoal);
}

.pa-ms-option[data-ms-all] {
    border-bottom: 1px solid var(--pa-line);
    margin-bottom: 2px;
    padding-bottom: 6px;
    font-weight: 700;
    color: var(--pa-ink-soft);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: .04em;
}

.pa-ms-opt-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pa-selected-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 5px;
}

    .pa-selected-chips:empty {
        display: none;
    }

/* === AREAS OF OPERATION CHIPS ========================================== */
.pa-area-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    min-height: 0;
}

.pa-area-chip {
    background: var(--pa-bg-tint);
    border: 1px solid var(--pa-line-cyan);
    color: var(--brand-cyan-deep);
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 4px 3px 9px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.3;
    animation: pa-chip-in .25s ease;
}

@keyframes pa-chip-in {
    from {
        opacity: 0;
        transform: scale(0.85);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.pa-area-chip-remove {
    border: none;
    background: transparent;
    color: var(--brand-cyan-deep);
    cursor: pointer;
    padding: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    transition: background .18s ease;
}

    .pa-area-chip-remove:hover {
        background: rgba(86,196,248,0.25);
    }

    .pa-area-chip-remove i,
    .pa-area-chip-remove .pa-icon {
        font-size: 10px;
        width: 10px;
        height: 10px;
    }

/* === RIGHT COLUMN — Verified Agent Card =============================== */
.pa-twin-card-v2 {
    padding: 14px 16px;
}

.pa-twin-stage {
    display: flex;
    justify-content: center;
    padding: 6px 0 4px;
}

.pa-twin-photo-wrap {
    position: relative;
    width: 92px;
    height: 92px;
}

.pa-twin-photo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--pa-bg-tint) center/cover no-repeat;
    border: 3px solid var(--pa-bg);
    box-shadow: 0 0 0 1px var(--pa-line-strong), 0 8px 18px -6px rgba(14,14,17,0.18);
    display: grid;
    place-items: center;
    color: var(--pa-ink-mute);
    font-size: 32px;
    overflow: hidden;
}

    .pa-twin-photo .pa-icon {
        width: 32px;
        height: 32px;
    }

.pa-twin-logo-attach {
    position: absolute;
    bottom: -3px;
    left: -5px;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var(--pa-bg) center/contain no-repeat;
    border: 2px solid var(--pa-bg);
    box-shadow: 0 3px 8px -2px rgba(14,14,17,0.18);
    display: grid;
    place-items: center;
    color: var(--pa-ink-mute);
    font-size: 15px;
    overflow: hidden;
}

    .pa-twin-logo-attach .pa-icon {
        width: 15px;
        height: 15px;
    }

.pa-twin-verify-badge {
    position: absolute;
    bottom: 4px;
    right: -2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--pa-warn);
    color: #fff;
    border: 3px solid var(--pa-bg);
    display: grid;
    place-items: center;
    font-size: 11px;
}

    .pa-twin-verify-badge .pa-icon {
        width: 11px;
        height: 11px;
    }

    .pa-twin-verify-badge.is-verified {
        background: var(--pa-success);
    }

    .pa-twin-verify-badge.is-invalid {
        background: var(--pa-danger);
    }

.pa-twin-name-block {
    text-align: center;
    margin: 10px 0 4px;
}

.pa-twin-name {
    display: block;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--pa-ink);
    line-height: 1.2;
}

.pa-twin-agency {
    display: block;
    font-size: 11px;
    color: var(--pa-ink-mute);
    margin-top: 1px;
    line-height: 1.3;
}

.pa-twin-location {
    display: block;
    font-size: 10.5px;
    color: var(--brand-cyan-deep);
    font-weight: 600;
    margin-top: 2px;
    line-height: 1.3;
}

.pa-twin-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
    width: 100%;
    margin-top: 8px;
    padding-top: 9px;
    border-top: 1px solid var(--pa-line);
}

.pa-twin-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.pa-twin-stat-label {
    font-size: 8.5px;
    letter-spacing: .12em;
    color: var(--pa-ink-mute);
    font-weight: 700;
    text-transform: uppercase;
}

.pa-twin-stat-value {
    font-size: 11.5px;
    color: var(--pa-ink);
    font-weight: 600;
}

.pa-twin-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    justify-content: center;
    margin-top: 8px;
}

    .pa-twin-tags:empty {
        display: none;
    }

.pa-twin-tag {
    font-size: 9.5px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--pa-bg-tint);
    color: var(--brand-cyan-deep);
    border: 1px solid var(--pa-line-cyan);
    font-weight: 600;
    line-height: 1.3;
}

/* === COMPLETENESS METER ================================================ */
.pa-completeness {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--pa-line);
}

.pa-completeness-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 5px;
}

.pa-completeness-label {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--pa-ink-mute);
    font-weight: 700;
}

.pa-completeness-value {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-cyan-deep);
}

.pa-completeness-bar {
    width: 100%;
    height: 5px;
    background: var(--pa-line);
    border-radius: 3px;
    overflow: hidden;
}

.pa-completeness-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--brand-cyan) 0%, var(--brand-cyan-deep) 100%);
    border-radius: 3px;
    transition: width .35s ease;
}

.pa-completeness-hint {
    font-size: 10px;
    color: var(--pa-ink-mute);
    margin: 5px 0 0;
    line-height: 1.4;
}

/* === COMPACT TIP CARD =================================================== */
.pa-tip-card-compact {
    margin-top: 10px;
    padding: 12px 14px;
}

.pa-intel-card {
    background: var(--pa-bg);
    border: 1px solid var(--pa-line);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: var(--pa-shadow-soft);
}

.pa-intel-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 9.5px;
    letter-spacing: .12em;
    color: var(--pa-ink-mute);
    font-weight: 700;
    padding-bottom: 7px;
    margin-bottom: 9px;
    border-bottom: 1px solid var(--pa-line);
    text-transform: uppercase;
}

    .pa-intel-header i,
    .pa-intel-header .pa-icon {
        color: var(--brand-cyan-deep);
        width: 11px;
        height: 11px;
        flex-shrink: 0;
    }

.pa-twin-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pa-success);
    box-shadow: 0 0 0 0 rgba(16,185,129,0.6);
    animation: pa-pulse 2s infinite;
    flex-shrink: 0;
}

@keyframes pa-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16,185,129,0.6);
    }

    70% {
        box-shadow: 0 0 0 9px rgba(16,185,129,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(16,185,129,0);
    }
}

.pa-tip-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

    .pa-tip-list li {
        display: flex;
        gap: 6px;
        align-items: flex-start;
        font-size: 11px;
        color: var(--pa-ink-soft);
        line-height: 1.45;
    }

    .pa-tip-list i,
    .pa-tip-list .pa-icon {
        color: var(--brand-cyan-deep);
        flex-shrink: 0;
        margin-top: 1px;
        font-size: 11px;
        width: 11px;
        height: 11px;
    }

    .pa-tip-list strong {
        color: var(--pa-ink);
        font-weight: 600;
    }

/* === REQUIRED PILL ===================================================== */
.pa-required-pill {
    display: inline-block;
    margin-left: auto;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(86,196,248,0.14);
    color: var(--brand-cyan-deep);
    border: 1px solid rgba(86,196,248,0.32);
    font-size: 9px;
    letter-spacing: .12em;
    font-weight: 700;
    text-transform: uppercase;
}

.pa-province-flash {
    animation: pa-province-flash .9s ease;
}

@keyframes pa-province-flash {
    0%,100% {
        background: var(--pa-bg);
    }

    40% {
        background: rgba(86,196,248,0.18);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v7 STICKY HEADER — single-block wrapper (breadcrumb + progress + scene
   label + h2 question) pinned to the top of .ps-left.

   IMPORTANT: seller-additions.css v4 sets per-element `position: sticky`
   on `.pa-host .ps-left .ps-progress`, `.ps-scene-label` and `.ps-question`
   with stacked top values (0 / 30 / 52). When the JS wraps those four
   elements into <div class="pa-sticky-header">, those individual rules
   FIGHT the wrapper — children re-stick inside the wrapper and content
   scrolls ABOVE the heading. The override block below uses higher
   specificity (4 classes) AND `!important` to neutralise the per-element
   stickiness so ONLY the wrapper sticks.

   This guarantees the breadcrumb AND the question/scene-label stay
   anchored together, even when the Core Identity panel is collapsed.
   ═══════════════════════════════════════════════════════════════════════════ */

.pa-sticky-header {
    position: sticky;
    top: 0;
    /* z-index 30 so the sticky bar sits above panel cards (which can rise
       to z-index 6 when an open panel needs upload-zone hit-testing). */
    z-index: 30;
    background: var(--pa-bg);
    /* Bleed horizontally so the sticky bar masks content scrolling under
       the .ps-left padding edges, not just the inner column. */
    margin: 0 -22px 6px;
    padding: 14px 22px 12px;
    border-bottom: 1px solid var(--pa-line);
    /* Subtle shadow appears as the user scrolls so the seam between
       the sticky header and scrolling body is legible. */
    box-shadow: 0 4px 12px -8px rgba(14, 14, 17, 0.10);
}

/* v7 BULLETPROOF OVERRIDE — kill per-element sticky inside the wrap.
       Higher specificity (4 classes) than seller-additions.css v4
       (3 classes) PLUS !important so cascade order is irrelevant. */
.pa-host .ps-left .pa-sticky-header > .ps-breadcrumb,
.pa-host .ps-left .pa-sticky-header > #paBreadcrumbProfile,
.pa-host .ps-left .pa-sticky-header .ps-progress,
.pa-host .ps-left .pa-sticky-header .ps-scene-label,
.pa-host .ps-left .pa-sticky-header .ps-question {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    background: transparent !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Tighten vertical rhythm inside the sticky bar so it stays compact. */
.pa-sticky-header > #paBreadcrumbProfile {
    margin-bottom: 6px;
}

.pa-sticky-header .ps-progress {
    margin: 4px 0;
}

.pa-sticky-header .ps-scene-label {
    margin: 6px 0 2px;
}

.pa-sticky-header .ps-question {
    margin: 4px 0 0;
}

/* v7: also neutralise the v4 fade pseudo-element when the wrapper is
   present — it was anchored at top:110px which only made sense when
   the per-element stickies stacked there. The wrapper provides its own
   bottom border + soft shadow, so the fade is no longer needed. */
.pa-host .ps-left:has(.pa-sticky-header)::before {
    display: none !important;
}

/* Mobile: reduce horizontal bleed to match smaller .ps-left padding. */
@media (max-width: 720px) {
    .pa-sticky-header {
        margin: 0 -14px 6px;
        padding: 10px 14px 10px;
    }
}

.pa-contact-panel {
    background: var(--pa-bg-soft);
    border: 1px solid var(--pa-line);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pa-question-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 720px) {
    .pa-question-row {
        grid-template-columns: 1fr;
    }
}

.pa-question-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pa-question-title {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--pa-ink-soft);
    line-height: 1.35;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .pa-question-title i,
    .pa-question-title .pa-icon {
        font-size: 12px;
        width: 12px;
        height: 12px;
        flex-shrink: 0;
    }

.pa-question-help {
    font-size: 10px;
    color: var(--pa-ink-mute);
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    gap: 4px;
    padding: 4px 6px;
    background: var(--pa-bg-tint);
    border-radius: 6px;
}

    .pa-question-help i,
    .pa-question-help .pa-icon {
        color: var(--brand-cyan-deep);
        flex-shrink: 0;
        margin-top: 1px;
        font-size: 11px;
        width: 11px;
        height: 11px;
    }

/* ═══════════════════════════════════════════════════════════════════════════
   v6.3 — Hub heading overlap fix
   ═══════════════════════════════════════════════════════════════════════════ */

#privateAgentModule {
    position: relative;
    z-index: 1;
    isolation: isolate;
}

.pa-hub-header {
    position: relative;
    z-index: 2;
    background: transparent;
}

.pa-hub-title {
    position: relative;
    z-index: 3;
    padding-top: 4px;
}

body[data-pa-flow="agent"] #sjKineticTimeline {
    display: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
   v11 — LOCKED PANELS, TWIN CREDS, VERIFIED STATUS
   ----------------------------------------------------------------------------
   Adds three small but important UI states layered onto the existing v10
   panel + twin-card system:

     • `.pa-panel--locked` — agency / location / professional / additional
       panels are inert until PPRA verification succeeds. Visually muted,
       lock icon on status pill, no hover affordance, and refuses to open
       (handled in the cshtml inline accordion). Briefly shakes when the
       user clicks the head.
     • `.pa-twin-creds` — practitioner role + capacity row pulled from
       PPRA, sits between the agency line and the stats row inside the
       Verified Agent Card. Hidden until verification.
     • Verified status cell — when the right rail's "Status" reads
       Verified, the cell glows soft green so it visually agrees with
       the verified pill on the listing.
     • `.pa-core-postverify` — fade/slide reveal of the email + contact
       block once verification succeeds.
   ════════════════════════════════════════════════════════════════════════ */


/* ── 1. LOCKED PANELS ───────────────────────────────────────────────── */

.pa-panel.pa-panel--locked {
    /* Mute the panel — it's effectively read-only until unlocked. */
    background: linear-gradient(180deg, rgba(245, 248, 250, 0.6) 0%, rgba(238, 243, 247, 0.4) 100%);
    border-color: rgba(7, 52, 74, 0.08);
    opacity: 0.78;
    box-shadow: none;
    pointer-events: auto;
    cursor: not-allowed;
}

    .pa-panel.pa-panel--locked > .pa-panel-head {
        cursor: not-allowed;
        background: transparent;
    }

        .pa-panel.pa-panel--locked > .pa-panel-head:hover {
            background: rgba(7, 52, 74, 0.025);
        }

    /* Step number turns into a muted padlock chip. */
    .pa-panel.pa-panel--locked .pa-panel-step {
        background: rgba(7, 52, 74, 0.08);
        border-color: rgba(7, 52, 74, 0.12);
        color: rgba(91, 107, 115, 0.55);
    }

    /* Title block fades. */
    .pa-panel.pa-panel--locked .pa-panel-title {
        color: rgba(28, 39, 51, 0.55);
    }

    .pa-panel.pa-panel--locked .pa-panel-sub {
        color: rgba(91, 107, 115, 0.65);
    }

    /* "Locked" status pill — amber-grey, with a subtle lock icon. */
    .pa-panel.pa-panel--locked .pa-panel-status {
        color: rgba(91, 107, 115, 0.85);
        background: rgba(7, 52, 74, 0.05);
        border: 1px solid rgba(7, 52, 74, 0.10);
        padding: 2px 7px;
        border-radius: 999px;
    }

    .pa-panel.pa-panel--locked .pa-panel-toggle {
        opacity: 0.45;
        background: transparent;
        border-color: rgba(7, 52, 74, 0.10);
    }

    /* Hide the body even if some other rule tries to open it. */
    .pa-panel.pa-panel--locked .pa-panel-body {
        display: none !important;
    }

/* Subtle shake when the user tries to click into a locked head — wired
 * up in the cshtml inline accordion via `.pa-panel--shake`. */
.pa-panel--shake {
    animation: pa-panel-shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes pa-panel-shake {
    10%, 90% {
        transform: translateX(-1px);
    }

    20%, 80% {
        transform: translateX(2px);
    }

    30%, 50%, 70% {
        transform: translateX(-3px);
    }

    40%, 60% {
        transform: translateX(3px);
    }
}


/* ── 2. CORE-IDENTITY POST-VERIFY REVEAL ────────────────────────────── */

/* The email + contact-number block lives inside `#paCorePostVerify` and
 * is hidden via the `hidden` attribute until verification succeeds. When
 * unhidden, fade/slide it in so the reveal feels intentional. */
.pa-core-postverify {
    animation: pa-core-postverify-in 0.36s ease both;
}

    .pa-core-postverify[hidden] {
        display: none !important;
    }

@keyframes pa-core-postverify-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

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


/* ── 3. TWIN CARD: PRACTITIONER ROLE + CAPACITY ─────────────────────── */

.pa-twin-creds {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin-top: 8px;
    padding-top: 9px;
    border-top: 1px solid var(--pa-line);
    animation: pa-core-postverify-in 0.36s ease both;
}

    .pa-twin-creds[hidden] {
        display: none !important;
    }

.pa-twin-cred {
    display: grid;
    grid-template-columns: 22px 1fr;
    column-gap: 8px;
    align-items: center;
    padding: 5px 7px;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(86, 196, 248, 0.08) 0%, rgba(86, 196, 248, 0.03) 100%);
    border: 1px solid rgba(86, 196, 248, 0.20);
}

    .pa-twin-cred > .pa-icon {
        width: 14px;
        height: 14px;
        color: var(--brand-cyan-deep, #07344a);
        opacity: 0.85;
    }

.pa-twin-cred-body {
    display: flex;
    flex-direction: column;
    gap: 0;
    line-height: 1.1;
    min-width: 0;
}

.pa-twin-cred-label {
    font-size: 8.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--pa-ink-mute);
}

.pa-twin-cred-value {
    font-size: 11px;
    font-weight: 600;
    color: var(--pa-ink);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ── 4. TWIN CARD: VERIFIED STATUS GLOW ─────────────────────────────── */

.pa-twin-stat--status {
    border-radius: 8px;
    padding: 2px 4px;
    transition: background 0.25s ease, color 0.25s ease;
}

    .pa-twin-stat--status.is-verified {
        background: linear-gradient(180deg, rgba(17, 122, 58, 0.18) 0%, rgba(17, 122, 58, 0.08) 100%);
        box-shadow: 0 0 0 1px rgba(17, 122, 58, 0.3) inset;
    }

        .pa-twin-stat--status.is-verified .pa-twin-stat-label {
            color: rgba(17, 122, 58, 0.85);
        }

        .pa-twin-stat--status.is-verified .pa-twin-stat-value {
            color: #0e6731;
            font-weight: 800;
        }


/* ── 5. PPRA STATUS BADGE INSIDE THE TWIN PHOTO STACK ──────────────── */

/* Existing `.pa-twin-verify-badge` rules in v10 already paint the
 * orange hourglass / green check. We just slightly emphasise the
 * verified state so it reads more confidently. */
.pa-twin-verify-badge.is-verified {
    background: linear-gradient(180deg, #d3f0e0 0%, #9bd4b0 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 4px 10px -4px rgba(17, 122, 58, 0.45);
}

    .pa-twin-verify-badge.is-verified .pa-icon {
        color: #0e6731;
    }


/* ============================================================================
   v10 ADDITIONS — Google Places autocomplete + auto-pinned Province + multi
   select polish.  Appended at the end so they trump earlier rules.
   ============================================================================ */


/* ── PLACE SUGGESTIONS — two-line item with main + secondary text ──────── */

.pa-place-suggestion {
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 7px;
    padding: 8px 11px;
}

    .pa-place-suggestion .pa-place-main {
        font-weight: 600;
        color: var(--pa-ink);
        font-size: 12px;
        line-height: 1.25;
    }

    .pa-place-suggestion .pa-place-secondary {
        font-size: 10.5px;
        color: var(--pa-ink-mute, #7a7e8c);
        font-weight: 400;
        line-height: 1.3;
        flex-basis: 100%;
        margin-left: 19px; /* align under main, past the 12px icon + 7px gap */
    }

.pa-place-suggestion--empty {
    cursor: default;
    color: var(--pa-ink-mute, #7a7e8c);
    font-style: italic;
}

    .pa-place-suggestion--empty:hover {
        background: transparent;
    }


/* ── PROVINCE — pinned (auto-set by City) state ────────────────────────── */

/* ── Province locked at page load (before city is picked) ─────────────────
   Province starts read-only. paSetProvincePinned(false) in JS re-enables it
   when the agent manually clears the city field — but only after they've
   chosen a city suggestion is it auto-filled and kept locked.
   We match on the initial (no data-pa-province-pinned) state too so the
   control always looks non-interactive from the first render. */
#paProvince:not([data-pa-province-pinned="1"]).pa-province-initial,
#paProvince.pa-province-locked {
    pointer-events: none;
    cursor: default;
    opacity: 0.7;
}

.pa-input.pa-select[data-pa-province-pinned="1"] {
    /* The select is NOT disabled (so its value still submits with the
       form), but we lock it visually + interactively. */
    pointer-events: none;
    cursor: not-allowed;
    background: rgba(86, 196, 248, 0.08);
    border-color: rgba(86, 196, 248, 0.45);
    color: var(--pa-ink);
    opacity: 1;
    font-weight: 600;
}

/* Tiny "auto" badge to the right of the chevron when pinned. We can't
   inject pseudo-content into a <select>, so we hint via the wrapping
   .pa-input-wrap. The wrapper already houses the select; on pinned
   state we lay an absolutely-positioned label over the right edge.
   Two rules so we work in BOTH modern browsers (:has) and legacy ones
   (a JS-applied class on the field). */
.pa-field:has(.pa-input.pa-select[data-pa-province-pinned="1"]) .pa-input-wrap,
.pa-field--province-pinned .pa-input-wrap {
    position: relative;
}

    .pa-field:has(.pa-input.pa-select[data-pa-province-pinned="1"]) .pa-input-wrap::after,
    .pa-field--province-pinned .pa-input-wrap::after {
        content: "Auto";
        position: absolute;
        right: 30px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 8.5px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        padding: 1px 6px;
        border-radius: 999px;
        background: rgba(86, 196, 248, 0.18);
        border: 1px solid rgba(86, 196, 248, 0.4);
        color: var(--brand-cyan-deep, #2a7da8);
        pointer-events: none;
    }


/* ── MULTI-SELECT — make the option rows visibly clickable ─────────────── */

/* Force a pointer cursor on every option (label) so hover affordance is
   obvious, and remove any inherited user-select that prevents drag-toggle. */
.pa-ms-option {
    cursor: pointer;
    user-select: none;
}

    .pa-ms-option,
    .pa-ms-option * {
        /* Ensure ALL children also pass the pointer cursor through. */
        cursor: pointer;
    }

        /* Stronger active-state so it's obvious WHICH option you're hovering. */
        .pa-ms-option:hover {
            background: rgba(86, 196, 248, 0.10);
        }

        .pa-ms-option:active {
            background: rgba(86, 196, 248, 0.18);
        }

/* When the panel is OPEN, ensure it pops above everything below. */
.pa-multiselect-panel:not([hidden]) {
    z-index: 250;
}


/* ── AREA CHIPS — clearer multi-add affordance ─────────────────────────── */

.pa-area-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    min-height: 4px;
}

    .pa-area-chips:empty {
        display: none;
    }

.pa-area-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 10px;
    border-radius: 999px;
    background: rgba(86, 196, 248, 0.12);
    border: 1px solid rgba(86, 196, 248, 0.32);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--brand-cyan-deep, #2a7da8);
    line-height: 1.25;
    max-width: 220px;
}

    .pa-area-chip > span:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.pa-area-chip-remove {
    background: transparent;
    border: 0;
    padding: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--brand-cyan-deep, #2a7da8);
    opacity: 0.65;
    transition: opacity 0.12s ease, background 0.12s ease;
}

    .pa-area-chip-remove:hover {
        opacity: 1;
        background: rgba(86, 196, 248, 0.25);
    }

    .pa-area-chip-remove .pa-icon {
        width: 9px;
        height: 9px;
    }


/* ── Helper-muted variant + inline kbd hint ─────────────────────────────── */

.pa-helper.pa-helper--muted {
    margin-top: 5px;
    margin-bottom: 0;
    font-size: 10.5px;
    line-height: 1.4;
    color: var(--pa-ink-mute, #7a7e8c);
    display: flex;
    align-items: center;
    gap: 5px;
}

    .pa-helper.pa-helper--muted .pa-icon {
        flex-shrink: 0;
        width: 11px;
        height: 11px;
        opacity: 0.7;
    }

    .pa-helper.pa-helper--muted kbd {
        display: inline-block;
        padding: 1px 5px;
        font-size: 9.5px;
        font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
        font-weight: 600;
        background: var(--pa-bg-tint, rgba(86, 196, 248, 0.08));
        border: 1px solid var(--pa-line, rgba(14, 14, 17, 0.12));
        border-radius: 4px;
        color: var(--pa-ink, #0e0e11);
    }