/* ===========================================================================
   private-seller-scenes-extra.css
   ---------------------------------------------------------------------------
   Styles for the three new scenes injected by private-seller-scenes-extra.js:
     • Scene 9  → Core Identity (.ps-scene-identity)
     • Scene 10 → Login or Register (.ps-scene-auth-v2)
     • Scene 11 → Secure Payment (.ps-scene-pay-v2)

   Visual language mirrors the agent's _AgentProfile partial:
     - Light theme white-on-light chrome
     - Cyan accent (--brand-cyan, defined in private-flow-shared.css)
     - Compact spacing so the whole form fits in the seller carousel viewport
       WITHOUT the Continue / Pay buttons being clipped on scroll
   =========================================================================== */

/* =============================================================
   SCENE 9 — CORE IDENTITY
   ============================================================= */

.ps-scene-identity .ps-left {
    /* Tighter left pane so all fields fit. The default ps-scene
       padding is too generous for a dense form like this. */
    padding: 22px 28px 18px !important;
    overflow-y: auto;
}

.ps-scene-identity .ps-question {
    margin-bottom: 4px !important;
}

.ps-scene-identity .ps-subtitle {
    margin-bottom: 14px !important;
    font-size: 13.5px;
    line-height: 1.5;
}

.ps-id-form {
    margin: 0 0 12px;
    flex: 1;
}

.ps-id-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 22px;
    align-items: start;
}

@media (max-width: 900px) {
    .ps-id-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ── Photo column ────────────────────────────────────────────── */
.ps-id-photo-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.ps-id-photo-zone {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 2px dashed rgba(86,196,248,0.45);
    background: linear-gradient(135deg, #f3f8fc, #ffffff);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .2s ease, background .2s ease, transform .15s ease;
}

    .ps-id-photo-zone:hover {
        border-color: var(--brand-cyan, #56c4f8);
        background: #ebf6fc;
        transform: scale(1.02);
    }

    .ps-id-photo-zone.has-image {
        border-style: solid;
        background: #ffffff;
    }

    .ps-id-photo-zone img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: none;
    }

    .ps-id-photo-zone.has-image img {
        display: block;
    }

.ps-id-photo-empty {
    text-align: center;
    color: #4a4d57;
    padding: 14px;
}

.ps-id-photo-zone.has-image .ps-id-photo-empty {
    display: none;
}

.ps-id-photo-cam {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--brand-cyan, #56c4f8);
    color: #0e0e11;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 6px;
    font-size: 18px;
}

.ps-id-photo-title {
    display: block;
    font-weight: 600;
    color: #0e0e11;
    font-size: 13.5px;
    margin-bottom: 2px;
}

.ps-id-photo-sub {
    display: block;
    font-size: 11.5px;
    color: #7a7e8c;
    line-height: 1.4;
}

.ps-id-photo-overlay {
    position: absolute;
    inset: 0;
    background: rgba(14,14,17,0.55);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    opacity: 0;
    transition: opacity .15s ease;
}

.ps-id-photo-zone.has-image:hover .ps-id-photo-overlay {
    opacity: 1;
}

.ps-id-photo-overlay i {
    font-size: 20px;
}

.ps-id-photo-actions {
    display: flex;
    gap: 6px;
}

.ps-id-photo-action-btn {
    appearance: none;
    border: 1px solid rgba(14,14,17,0.16);
    background: #fff;
    color: #0e0e11;
    padding: 5px 10px;
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background .15s ease, border-color .15s ease;
}

    .ps-id-photo-action-btn:hover {
        background: #fafbfc;
        border-color: rgba(14,14,17,0.24);
    }

.ps-id-photo-action-btn--danger {
    color: #991b1b;
    border-color: rgba(239,68,68,0.3);
}

    .ps-id-photo-action-btn--danger:hover {
        background: #fef2f2;
        border-color: rgba(239,68,68,0.5);
    }

/* ── Fields column ───────────────────────────────────────────── */
.ps-id-fields-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

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

.ps-id-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ps-id-label {
    font-size: 12px;
    color: #4a4d57;
    font-weight: 500;
}

.ps-id-req {
    color: #ef4444;
}

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

.ps-id-input-icon {
    position: absolute;
    left: 11px;
    color: #7a7e8c;
    font-size: 14px;
    pointer-events: none;
}

.ps-id-input {
    appearance: none;
    width: 100%;
    border: 1px solid rgba(14,14,17,0.14);
    border-radius: 9px;
    background: #ffffff;
    padding: 9px 12px 9px 34px;
    font-family: inherit;
    font-size: 13.5px;
    color: #0e0e11;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .ps-id-input:focus {
        outline: 0;
        border-color: var(--brand-cyan, #56c4f8);
        box-shadow: 0 0 0 3px rgba(86,196,248,0.18);
    }

/* ── Question rows (real/virtual + WhatsApp same?) ──────────── */
.ps-id-question-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 2px;
    padding: 10px;
    border: 1px solid rgba(14,14,17,0.08);
    border-radius: 10px;
    background: #fafbfc;
}

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

/* Contact + WhatsApp share one panel: top-align the two columns so the
   "Contact Number" and "Same number for WhatsApp?" titles line up, and
   let the dial-code + number input stretch to fill the left column. */
.ps-id-question-row--contact {
    align-items: start;
}

.ps-id-question-block--contact {
    gap: 6px;
}

    .ps-id-question-block--contact .ps-id-dial-wrap {
        width: 100%;
    }

    .ps-id-question-block--contact .ps-id-input-wrap {
        flex: 1 1 auto;
        min-width: 0;
    }

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

.ps-id-question-title {
    font-size: 12px;
    color: #4a4d57;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ps-id-num-pref {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ps-id-radio-pill {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

    .ps-id-radio-pill input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .ps-id-radio-pill span {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 6px 11px;
        border-radius: 7px;
        border: 1px solid rgba(14,14,17,0.14);
        background: #ffffff;
        color: #4a4d57;
        font-size: 11.5px;
        font-weight: 500;
        transition: background .15s ease, border-color .15s ease, color .15s ease;
    }

    .ps-id-radio-pill input:checked + span {
        background: var(--brand-cyan, #56c4f8);
        border-color: var(--brand-cyan, #56c4f8);
        color: #0e0e11;
        font-weight: 600;
    }

.ps-id-question-help {
    font-size: 11px;
    color: #4a4d57;
    background: #f3f8fc;
    padding: 5px 9px;
    border-radius: 6px;
    display: flex;
    align-items: flex-start;
    gap: 5px;
}

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

/* ── Error strip ─────────────────────────────────────────────── */
.ps-id-error {
    background: #fef2f2;
    border: 1px solid rgba(239,68,68,0.2);
    color: #991b1b;
    border-radius: 9px;
    padding: 8px 12px;
    font-size: 12.5px;
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
}

    .ps-id-error[hidden] {
        display: none;
    }

/* ── Right pane: Twin card ───────────────────────────────────── */
.ps-id-twin {
    background: #ffffff;
    border: 1px solid rgba(14,14,17,0.08);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 4px 12px -4px rgba(14,14,17,0.06);
    margin-bottom: 12px;
}

.ps-id-twin-head {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4a4d57;
    font-size: 11.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}

.ps-id-twin-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 0 rgba(16,185,129,0.5);
    animation: psIdPulse 1.6s infinite;
}

@keyframes psIdPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16,185,129,0.5);
    }

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

.ps-id-twin-stage {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.ps-id-twin-photo {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f3f8fc, #d8edfa);
    color: var(--brand-cyan-deep, #3fa9d9);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 30px;
    border: 2px solid rgba(86,196,248,0.4);
}

    .ps-id-twin-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.ps-id-twin-name-block {
    text-align: center;
    margin-bottom: 12px;
}

.ps-id-twin-name {
    display: block;
    font-weight: 600;
    color: #0e0e11;
    font-size: 14px;
}

.ps-id-twin-meta {
    display: block;
    color: #7a7e8c;
    font-size: 11.5px;
    margin-top: 2px;
}

.ps-id-twin-rows {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 12px;
}

.ps-id-twin-row-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #4a4d57;
    padding: 6px 9px;
    background: #fafbfc;
    border-radius: 7px;
}

    .ps-id-twin-row-line i {
        color: var(--brand-cyan-deep, #3fa9d9);
        font-size: 12px;
    }

.ps-id-twin-virt {
    background: rgba(86,196,248,0.18);
    color: #1c5d80;
    padding: 1px 6px;
    border-radius: 9px;
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ps-id-strength {
    border-top: 1px solid rgba(14,14,17,0.08);
    padding-top: 10px;
}

.ps-id-strength-head {
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
    color: #4a4d57;
    font-weight: 500;
    margin-bottom: 4px;
}

.ps-id-strength-bar {
    width: 100%;
    height: 5px;
    background: rgba(14,14,17,0.06);
    border-radius: 3px;
    overflow: hidden;
}

.ps-id-strength-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--brand-cyan, #56c4f8), #10b981);
    transition: width .3s ease;
}

.ps-id-strength-hint {
    margin: 6px 0 0;
    font-size: 11px;
    color: #7a7e8c;
}

.ps-id-tip {
    margin-top: 8px;
}

.ps-id-tip-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .ps-id-tip-list li {
        display: flex;
        gap: 8px;
        align-items: flex-start;
        font-size: 12px;
        color: #4a4d57;
        line-height: 1.45;
    }

    .ps-id-tip-list i {
        color: var(--brand-cyan-deep, #3fa9d9);
        margin-top: 2px;
    }

/* =============================================================
   SCENE 10 — LOGIN OR REGISTER (V2)
   ============================================================= */

.ps-scene-auth-v2 .ps-left {
    padding: 22px 28px 18px !important;
}

.ps-auth-v2-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 460px;
}

.ps-auth-v2-google {
    appearance: none;
    border: 1px solid rgba(14,14,17,0.16);
    background: #ffffff;
    color: #0e0e11;
    padding: 11px 14px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    font-size: 14px;
    transition: background .15s ease, border-color .15s ease, transform .1s ease;
}

    .ps-auth-v2-google:hover {
        background: #fafbfc;
        border-color: rgba(14,14,17,0.24);
    }

    .ps-auth-v2-google:active {
        transform: translateY(1px);
    }

.ps-auth-v2-google-mark {
    flex: 0 0 auto;
    display: inline-flex;
}

.ps-auth-v2-google-label {
    flex: 1;
    text-align: left;
}

.ps-auth-v2-google i {
    color: #7a7e8c;
    transition: transform .15s ease;
}

.ps-auth-v2-google:hover i {
    transform: translateX(2px);
}

.ps-auth-v2-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #7a7e8c;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

    .ps-auth-v2-divider::before,
    .ps-auth-v2-divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: rgba(14,14,17,0.08);
    }

.ps-auth-v2-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: #f3f8fc;
    border-radius: 11px;
    border: 1px solid rgba(86,196,248,0.18);
}

.ps-auth-v2-tab {
    flex: 1;
    appearance: none;
    border: 0;
    background: transparent;
    padding: 8px 12px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #4a4d57;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

    .ps-auth-v2-tab.is-active {
        background: #ffffff;
        color: #0e0e11;
        font-weight: 600;
        box-shadow: 0 2px 6px rgba(14,14,17,0.06);
    }

.ps-auth-v2-error {
    background: #fef2f2;
    border: 1px solid rgba(239,68,68,0.2);
    color: #991b1b;
    border-radius: 9px;
    padding: 8px 12px;
    font-size: 12.5px;
    display: flex;
    gap: 8px;
    align-items: center;
}

    .ps-auth-v2-error[hidden] {
        display: none;
    }

.ps-auth-v2-form {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

    .ps-auth-v2-form[hidden] {
        display: none;
    }

.ps-auth-v2-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ps-auth-v2-label {
    font-size: 12px;
    color: #4a4d57;
    font-weight: 500;
}

.ps-auth-v2-field input {
    appearance: none;
    width: 100%;
    border: 1px solid rgba(14,14,17,0.14);
    border-radius: 9px;
    background: #ffffff;
    padding: 9px 12px;
    font-family: inherit;
    font-size: 13.5px;
    color: #0e0e11;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .ps-auth-v2-field input:focus {
        outline: 0;
        border-color: var(--brand-cyan, #56c4f8);
        box-shadow: 0 0 0 3px rgba(86,196,248,0.18);
    }

.ps-auth-v2-hint {
    font-size: 11px;
    color: #7a7e8c;
}

.ps-auth-v2-submit {
    appearance: none;
    border: 0;
    background: #0e0e11;
    color: #ffffff;
    padding: 11px 14px;
    border-radius: 11px;
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background .15s ease, transform .1s ease;
}

    .ps-auth-v2-submit:hover {
        background: #1a1a1f;
    }

    .ps-auth-v2-submit:active {
        transform: translateY(1px);
    }

    .ps-auth-v2-submit:disabled {
        opacity: .65;
        cursor: not-allowed;
    }

.ps-auth-v2-spin {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    display: none;
    animation: psAuthV2Spin .8s linear infinite;
}

.ps-auth-v2-submit.is-loading .ps-auth-v2-submit-label {
    opacity: 0.6;
}

.ps-auth-v2-submit.is-loading .ps-auth-v2-spin {
    display: inline-block;
}

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

/* =============================================================
   SCENE 11 — SECURE PAYMENT (V2)
   ============================================================= */

.ps-scene-pay-v2 .ps-left {
    padding: 22px 28px 18px !important;
}

.ps-pay-v2-summary {
    border: 1px solid rgba(14,14,17,0.08);
    background: #fafbfc;
    border-radius: 12px;
    padding: 14px 16px;
    margin: 6px 0 14px;
}

.ps-pay-v2-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13.5px;
    color: #4a4d57;
}

.ps-pay-v2-summary-total {
    border-top: 1px solid rgba(14,14,17,0.08);
    margin-top: 4px;
    padding-top: 10px;
    color: #0e0e11;
    font-size: 14.5px;
}

    .ps-pay-v2-summary-total strong {
        font-size: 18px;
    }

.ps-pay-v2-error {
    background: #fef2f2;
    border: 1px solid rgba(239,68,68,0.2);
    color: #991b1b;
    border-radius: 9px;
    padding: 8px 12px;
    font-size: 12.5px;
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
}

    .ps-pay-v2-error[hidden] {
        display: none;
    }

.ps-pay-v2-cta {
    appearance: none;
    border: 0;
    width: 100%;
    background: linear-gradient(135deg, var(--brand-cyan, #56c4f8), var(--brand-cyan-deep, #3fa9d9));
    color: #0e0e11;
    padding: 14px 18px;
    border-radius: 12px;
    font-family: inherit;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 8px 20px -8px rgba(86,196,248,0.45);
    transition: transform .12s ease, box-shadow .15s ease;
}

    .ps-pay-v2-cta:hover {
        transform: translateY(-1px);
        box-shadow: 0 12px 28px -10px rgba(86,196,248,0.55);
    }

    .ps-pay-v2-cta:active {
        transform: translateY(0);
    }

    .ps-pay-v2-cta:disabled {
        opacity: .7;
        cursor: not-allowed;
    }

.ps-pay-v2-cta-spin {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(14,14,17,0.4);
    border-top-color: #0e0e11;
    border-radius: 50%;
    display: none;
    animation: psAuthV2Spin .8s linear infinite;
}

.ps-pay-v2-cta.is-loading .ps-pay-v2-cta-spin {
    display: inline-block;
}

.ps-pay-v2-cta.is-loading .ps-pay-v2-cta-label {
    opacity: 0.6;
}

.ps-pay-v2-trust {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.ps-pay-v2-trust-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: #f3f8fc;
    border: 1px solid rgba(86,196,248,0.18);
    border-radius: 7px;
    font-size: 11.5px;
    color: #4a4d57;
}

    .ps-pay-v2-trust-chip i {
        color: var(--brand-cyan-deep, #3fa9d9);
    }

/* ════════════════════════════════════════════════════════════════════════
   PS_BUILD 2026-06-14 · Scene 9 — Contact + WhatsApp on ONE clean row (#6)
   ------------------------------------------------------------------------
   The Contact Number block and the "Same number for WhatsApp?" block share
   a single row. The contact side carries a dial-code <select> PLUS the
   national-number input, so it needs more horizontal room than the WhatsApp
   Yes/No side — an even 1fr/1fr split squeezed the number field down to a
   few characters (the original reason the now-removed JS workaround existed).
   We give the contact column the larger share and keep the dial picker
   compact so the number is always fully readable. Collapses to a single
   column on narrow viewports — the number input is never squeezed.

   All selectors are scoped to `.ps-id-question-row--contact` so no other
   question row or form layout is affected.
   ════════════════════════════════════════════════════════════════════════ */
.ps-scene-identity .ps-id-question-row--contact {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

    /* Contact column — compact dial picker, flexing number input. */
    .ps-scene-identity .ps-id-question-row--contact .ps-id-question-block--contact .ps-id-dial-wrap {
        gap: 6px;
    }

    .ps-scene-identity .ps-id-question-row--contact .ps-id-dial-select {
        width: 84px !important;
        min-width: 84px !important;
        padding-left: 9px !important;
        padding-right: 20px !important;
        background-position: right 6px center !important;
    }

    .ps-scene-identity .ps-id-question-row--contact .ps-id-question-block--contact .ps-id-input-wrap {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* WhatsApp column — tidy Yes/No pills; optional WA number fills the column. */
    .ps-scene-identity .ps-id-question-row--contact .ps-id-num-pref {
        gap: 6px;
    }

    .ps-scene-identity .ps-id-question-row--contact .ps-id-wa-input-wrap {
        width: 100%;
    }

    /* ── Field-height + baseline alignment (user: "bottom height of the WhatsApp
   inputs must be the same as the cellphone — straight and aligned") ──
   1. Force the dial picker AND both number inputs to one identical height.
      (Cascade conflict: ikhayalami-frontend-fixes pins the dial select to
      min-height:48px while batch34 sets inputs to 46px — a 2px mismatch that
      made the row look uneven. A more-specific !important reconciles them.)
   2. Bottom-align the two number fields: stretch the columns to equal height
      and push each number field to the foot of its column, so the Contact
      number and the WhatsApp number sit on exactly the same line even though
      the WhatsApp side carries the Yes/No pills above it. */
    .ps-scene-identity .ps-id-question-row--contact .ps-id-dial-select,
    .ps-scene-identity .ps-id-question-row--contact .ps-id-input {
        height: 46px !important;
        min-height: 46px !important;
        box-sizing: border-box;
    }

.ps-scene-identity .ps-id-question-row--contact {
    align-items: stretch;
}

    .ps-scene-identity .ps-id-question-row--contact .ps-id-question-block--contact,
    .ps-scene-identity .ps-id-question-row--contact > .ps-id-question-block {
        display: flex;
        flex-direction: column;
    }

        .ps-scene-identity .ps-id-question-row--contact .ps-id-question-block--contact .ps-id-dial-wrap {
            margin-top: auto;
        }

    .ps-scene-identity .ps-id-question-row--contact .ps-id-wa-input-wrap {
        margin-top: auto;
        margin-bottom: 0;
    }

/* Narrow viewports — stack to a single column so the number is full-width. */
@media (max-width: 760px) {
    .ps-scene-identity .ps-id-question-row--contact {
        grid-template-columns: 1fr;
        gap: 12px;
    }

        .ps-scene-identity .ps-id-question-row--contact .ps-id-dial-select {
            width: 96px !important;
            min-width: 96px !important;
        }
}

/* ══════════════════════════════════════════════════════════════════════════
   PS_BUILD 2026-06-14 · SCENE 10 (Auth) — layout now owned by auth-center-fix.css
   The previous one-viewport block here scrolled the auth stack internally,
   which produced the stray scrollbar. The full premium left-aligned, no-scroll
   redesign lives in auth-center-fix.css (already linked, loads after this file).
═════════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   PS_BUILD 2026-06-14 · SCENE 12 (Secure Payment) — COMPACT + PREMIUM MODAL
   ──────────────────────────────────────────────────────────────────────────
   Issue #12: the old design hid the per-method form inline BELOW the sticky
   nav, so on a one-viewport layout the card form was cut off with no scroll.
   Redesign: the left column is now a compact chooser (no boxy wrapper), and
   choosing a method opens a premium modal sheet — centered on desktop, a
   native-feeling bottom-sheet on mobile — whose body scrolls so nothing is
   ever clipped. The modal is mounted on <body> (outside #psTrack's transform)
   so position:fixed maps to the real viewport.
═════════════════════════════════════════════════════════════════════════════ */

/* ── Compact chooser (left column) ─────────────────────────────────────── */
#psScene10.ps-scene-pay-v2 .ps-pay-method-title {
    font-weight: 800;
    font-size: 0.92rem;
    color: #1A1D20;
    margin: 4px 0 10px;
}

.ps-pay-method-card .ps-pay-method-go {
    margin-left: 8px;
    flex: 0 0 auto;
    color: #94A3B8;
    font-size: 1rem;
    transition: transform .15s ease, color .15s ease;
}

.ps-pay-method-card:hover .ps-pay-method-go {
    color: #F58220;
    transform: translateX(2px);
}
/* Keep brands + chevron pinned right; text takes the slack. */
.ps-pay-method-card .ps-pay-method-txt {
    margin-right: auto;
}

/* Compact reassurance strip shown under the chooser. */
.ps-pay-v2-trust--chooser {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Slim "Secure checkout" hint replacing the old big CTA in the left nav. */
.ps-pay-nav-secure {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #16A34A;
}

    .ps-pay-nav-secure i {
        font-size: 0.85rem;
    }

/* ── Modal shell ───────────────────────────────────────────────────────── */
body.ps-pay-modal-open {
    overflow: hidden;
}

.ps-pay-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}

    .ps-pay-modal.is-open {
        opacity: 1;
        visibility: visible;
    }

.ps-pay-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15,18,20,0.55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.ps-pay-modal-sheet {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(460px, 92vw);
    max-height: 88vh;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 28px 80px rgba(10,12,14,0.35);
    overflow: hidden;
    transform: translateY(14px) scale(0.97);
    opacity: 0;
    transition: transform .24s cubic-bezier(.2,.85,.25,1), opacity .2s ease;
}

.ps-pay-modal.is-open .ps-pay-modal-sheet {
    transform: none;
    opacity: 1;
}

/* Head */
.ps-pay-modal-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid rgba(26,29,32,0.08);
}

.ps-pay-modal-ic {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245,130,32,0.12);
    color: #F58220;
    font-size: 1.15rem;
}

.ps-pay-modal-ic--capitec {
    background: rgba(0,160,227,0.12);
    color: #00A0E3;
}

.ps-pay-modal-title {
    font-weight: 800;
    font-size: 1rem;
    color: #1A1D20;
    flex: 1 1 auto;
    min-width: 0;
}

.ps-pay-modal-close {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 0;
    background: rgba(26,29,32,0.05);
    color: #475569;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, color .15s ease;
}

    .ps-pay-modal-close:hover {
        background: rgba(26,29,32,0.1);
        color: #1A1D20;
    }

/* Error */
.ps-pay-modal-error {
    flex: 0 0 auto;
    margin: 12px 18px 0;
    padding: 9px 12px;
    border-radius: 10px;
    background: rgba(220,38,38,0.08);
    color: #B91C1C;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 7px;
}

/* Body — the scrollable region (never clipped). */
.ps-pay-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 18px 8px;
    scrollbar-width: thin;
}

/* Foot — always visible; holds the pay CTA + change link. */
.ps-pay-modal-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px 16px;
    border-top: 1px solid rgba(26,29,32,0.08);
    background: #fff;
}

    .ps-pay-modal-foot .ps-pay-change {
        margin-bottom: 0;
        flex: 0 0 auto;
    }

    .ps-pay-modal-foot .ps-pay-v2-cta {
        flex: 1 1 auto;
        margin: 0;
    }

/* Mobile — native bottom-sheet. */
@media (max-width: 560px) {
    .ps-pay-modal {
        align-items: flex-end;
    }

    .ps-pay-modal-sheet {
        width: 100%;
        max-width: 100%;
        max-height: 92vh;
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
    }

    .ps-pay-modal.is-open .ps-pay-modal-sheet {
        transform: none;
    }
    /* Grab handle */
    .ps-pay-modal-head::before {
        content: '';
        position: absolute;
        top: 7px;
        left: 50%;
        transform: translateX(-50%);
        width: 38px;
        height: 4px;
        border-radius: 999px;
        background: rgba(26,29,32,0.18);
    }

    .ps-pay-modal-head {
        padding-top: 20px;
    }

    .ps-pay-modal-foot {
        flex-wrap: wrap;
    }

        .ps-pay-modal-foot .ps-pay-change {
            order: 2;
        }

        .ps-pay-modal-foot .ps-pay-v2-cta {
            order: 1;
            width: 100%;
        }
}

/* Honour reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
    .ps-pay-modal,
    .ps-pay-modal-sheet {
        transition: none;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   PS_BUILD 2026-06-14 · SCENE 7 (AI Narrative Composer) — RIGHT-PANE 3 CARDS
   ──────────────────────────────────────────────────────────────────────────
   The right rail (#psRight6) holds THREE cards: the Preview (#psAiPreviewCard
   with the Listing Title + Lifestyle Story sections), Smart Suggestions
   (.ps-s7-suggestions-card) and Narrative Intelligence (.ps-intel-card).

   Issues fixed:
     • Text bled out of the Preview card and the Listing Title + Lifestyle
       Story sections sat squashed on top of one another.
     • ~20% of the rail height went unused (a 130px chatbot reserve + a card
       that grew to content instead of filling the rail).

   Approach — let flexbox BE the "maths": the two secondary cards take their
   natural height (flex:0 0 auto) and the Preview card takes ALL the space
   that remains after them (flex:1 1 auto), scrolling INSIDE itself so text
   can never spill past its border. This adapts to every viewport — on shorter
   / smaller device frames the Preview simply receives whatever room is left,
   so it always uses the available space.

   Injected after private-seller.css, so these win the cascade.
═════════════════════════════════════════════════════════════════════════════ */
#psScene6 #psRight6 {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    overflow: hidden; /* the rail itself no longer scrolls … */
    padding-bottom: 18px !important; /* reclaim most of the 130px chatbot reserve as preview space */
}

    /* Secondary cards: 20% of the available height each, scroll internally if a
   card runs long so its height is never compromised. */
    #psScene6 #psRight6 > .ps-s7-suggestions-card,
    #psScene6 #psRight6 > .ps-intel-card {
        flex: 2 1 0;
        min-height: 0;
        overflow-y: auto;
        scrollbar-width: thin;
    }

    /* Preview card: 60% of the available height (3× the 20% cards). It scrolls
   inside itself when the story grows, so it never pushes the other two cards
   off or compromises their height. */
    #psScene6 #psRight6 > .ps-ai-preview {
        flex: 6 1 0;
        min-height: 0;
        max-height: none !important;
        height: auto !important;
        overflow: hidden !important; /* … the card clips, its story section scrolls */
        display: flex;
        flex-direction: column;
    }

        #psScene6 #psRight6 > .ps-ai-preview > .ps-intel-header {
            flex: 0 0 auto;
        }

        /* Listing Title section: fixed. Lifestyle Story section (the long one): grows
   and scrolls, so the two never overlap and the title is never squashed. */
        #psScene6 #psRight6 > .ps-ai-preview > .ps-ai-preview-section {
            flex: 0 0 auto;
            position: static; /* defensive: normal block flow, no stacking */
            margin-bottom: 8px;
        }

            #psScene6 #psRight6 > .ps-ai-preview > .ps-ai-preview-section:last-of-type {
                flex: 1 1 auto;
                min-height: 0;
                overflow-y: auto;
                scrollbar-width: thin;
                margin-bottom: 0;
                display: flex;
                flex-direction: column;
            }

    /* Anti-bleed: long unbroken words/URLs wrap instead of overflowing the card. */
    #psScene6 #psRight6 .ps-ai-preview-text,
    #psScene6 #psRight6 .ps-ai-preview-mirror-text {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* The paginator stays pinned to the foot of the story section, always tappable. */
    #psScene6 #psRight6 .ps-ai-preview-pager {
        flex: 0 0 auto;
        margin-top: 8px;
    }

/* On short viewports keep the split honest — let the rail scroll only as a
   last resort so the secondary cards are never clipped on tiny frames. */
@media (max-height: 620px) {
    #psScene6 #psRight6 {
        overflow-y: auto;
        padding-bottom: 60px !important;
    }

        #psScene6 #psRight6 > .ps-ai-preview {
            min-height: 160px;
        }
}

/* ══════════════════════════════════════════════════════════════════════════
   PS_BUILD 2026-06-14 · SCENE 12 (Secure Payment) — TWO-PANE DESKTOP LAYOUT
   ──────────────────────────────────────────────────────────────────────────
   LEFT  pane  = order summary (tier · property · fee · VAT · total) + what's
                 included + a compact 2-chip trust line (the "14-day refund"
                 chip is removed) + Back.
   RIGHT pane  = "How would you like to pay?" — the method chooser. Tapping a
                 card opens the premium modal (mounted on <body>).
   On mobile the two panes stack (order on top, chooser below) and the chooser
   pane is force-shown (the base hides .ps-right ≤768px).
═════════════════════════════════════════════════════════════════════════════ */

/* Balanced split — give the chooser a little more room than the default 42%. */
@media (min-width: 769px) {
    #psScene10.ps-scene-pay-v2 .ps-left {
        flex: 1 1 46% !important;
    }

    #psScene10.ps-scene-pay-v2 .ps-right.ps-pay-v2-right--chooser {
        flex: 1 1 54% !important;
        max-width: none !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        padding: 24px 26px !important;
    }
}

/* ── LEFT: order pane ──────────────────────────────────────────────────── */
#psScene10.ps-scene-pay-v2 .ps-pay-incl {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

    #psScene10.ps-scene-pay-v2 .ps-pay-incl li {
        display: flex;
        align-items: center;
        gap: 9px;
        font-size: 0.8rem;
        color: #475569;
    }

        #psScene10.ps-scene-pay-v2 .ps-pay-incl li i {
            color: #16A34A;
            font-size: 0.9rem;
            flex: 0 0 auto;
        }

#psScene10.ps-scene-pay-v2 .ps-pay-v2-trust--compact {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 14px 0 0;
}

/* ── RIGHT: chooser pane ───────────────────────────────────────────────── */
.ps-pay-chooser {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

.ps-pay-chooser-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.ps-pay-chooser-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #1A1D20;
    letter-spacing: -0.01em;
}

.ps-pay-chooser-secure {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.74rem;
    font-weight: 700;
    color: #16A34A;
    flex: 0 0 auto;
}

    .ps-pay-chooser-secure i {
        font-size: 0.82rem;
    }

/* Method cards stack vertically and fill the pane. */
.ps-pay-v2-right--chooser .ps-pay-method-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ps-pay-v2-right--chooser .ps-pay-method-card {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1.5px solid rgba(26,29,32,0.12);
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

    .ps-pay-v2-right--chooser .ps-pay-method-card:hover {
        border-color: #F58220;
        box-shadow: 0 6px 18px rgba(245,130,32,0.12);
    }

    .ps-pay-v2-right--chooser .ps-pay-method-card:active {
        transform: scale(0.995);
    }

.ps-pay-v2-right--chooser .ps-pay-method-ic {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245,130,32,0.1);
    color: #F58220;
    font-size: 1.15rem;
}

.ps-pay-v2-right--chooser .ps-pay-method-ic--capitec {
    background: rgba(0,160,227,0.1);
    color: #00A0E3;
}

.ps-pay-v2-right--chooser .ps-pay-method-txt {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-right: auto;
    min-width: 0;
}

.ps-pay-v2-right--chooser .ps-pay-method-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1A1D20;
}

.ps-pay-v2-right--chooser .ps-pay-method-sub {
    font-size: 0.74rem;
    color: #64748B;
}

.ps-pay-v2-right--chooser .ps-pay-method-brands {
    display: flex;
    gap: 4px;
    flex: 0 0 auto;
}

.ps-pay-v2-right--chooser .ps-pay-brand {
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    padding: 3px 5px;
    border-radius: 4px;
    background: rgba(26,29,32,0.06);
    color: #475569;
}

.ps-pay-v2-right--chooser .ps-pay-method-go {
    color: #94A3B8;
    font-size: 1rem;
    flex: 0 0 auto;
    transition: transform .15s ease, color .15s ease;
}

.ps-pay-v2-right--chooser .ps-pay-method-card:hover .ps-pay-method-go {
    color: #F58220;
    transform: translateX(2px);
}

.ps-pay-chooser-note {
    font-size: 0.68rem;
    color: #94A3B8;
    line-height: 1.4;
    margin: 2px 0 0;
}

/* ── MOBILE (≤768px) — stack the panes; force-show the chooser pane ─────── */
@media (max-width: 768px) {
    #psScene10.ps-scene-pay-v2 .ps-right.ps-pay-v2-right--chooser {
        display: flex !important; /* base hides .ps-right — re-show it */
        flex-direction: column;
        padding: 4px 18px 22px !important;
        background: transparent !important;
        border-left: 0 !important;
    }

    .ps-pay-chooser-head {
        margin-top: 4px;
    }

    .ps-pay-v2-right--chooser .ps-pay-method-brands {
        display: none;
    }
    /* keep cards tidy on phones */
    #psScene10.ps-scene-pay-v2 .ps-left {
        flex: 0 0 auto !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   PS_BUILD 2026-06-16 · STICKY NAV (THREE-REGION) + SCENE 7 MOBILE + SCENE 8
   ──────────────────────────────────────────────────────────────────────────
   private-seller-mobile-fixes.css forces `.ps-scene > .ps-left{overflow:hidden}`
   and pins `.ps-nav{flex:0 0 auto}` at all widths, so the ONLY thing missing for
   Back/Continue to stay put is a designated scrolling BODY per scene (the same
   pattern scenes 0-2 use via `.ps-cat-grid{flex:1 1 auto;overflow-y:auto}`).
   Without it, growing content (crypto chips, a long story) overflows the clipped
   pane and shoves the nav out of reach. We designate each scene's body here.
═════════════════════════════════════════════════════════════════════════════ */

/* ── Scene 6 (crypto / Pricing Engine = #psScene5) ──────────────────────────
   #psPricingSection is the body. Pressing "Yes" for crypto adds chips here; this
   makes the section scroll inside the pane instead of pushing the nav down. */
#psScene5 > .ps-left > #psPricingSection {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

    #psScene5 > .ps-left > #psPricingSection::-webkit-scrollbar {
        display: none;
    }

/* ── Scene 7 (AI Composer = #psScene6) ──────────────────────────────────────
   The editor wrap is the scroll/grow body; the rich surface absorbs the height
   and scrolls internally, so the compose button, refine row and nav stay pinned
   and visible. */
#psScene6 > .ps-left > .psne-wrap {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

    #psScene6 > .ps-left > .psne-wrap > .psne-rich {
        flex: 1 1 auto !important;
        min-height: 90px !important;
        max-height: none !important;
        overflow-y: auto !important;
    }

#psScene6 > .ps-left > #psNarrativeCount,
#psScene6 > .ps-left > #psNarrativeMinHint,
#psScene6 > .ps-left > #psS7ToneBadge,
#psScene6 > .ps-left > #psAiComposeBtn,
#psScene6 > .ps-left > #psS7RefineRow {
    flex: 0 0 auto !important;
}

/* Scene 7 right pane is DESKTOP-ONLY. An unscoped `#psRight6{display:flex}`
   (ps-batch34-fixes.css) out-specifies the base `.ps-right{display:none}` mobile
   rule and leaked the AI panels onto phones — re-hide ≤768px. */
@media (max-width: 768px) {
    #psScene6 > #psRight6.ps-right,
    #psScene6 #psRight6 {
        display: none !important;
    }
}

/* ── Scene 8 (Listing Package = #psScene7) ──────────────────────────────────
   1. Launch button was flex:1 1 auto → a full-bleed bar. On desktop, cap it so
      it reads like every other Continue (a touch wider for the price), pushed to
      the right of the nav.
   2. The Going-Live card is a flex item in the rail; default flex-shrink let the
      rail clip the maximize + "See full listing preview" CTA. Stop it shrinking
      and let the rail scroll so both are always reachable. */
@media (min-width: 769px) {
    .ps-scene#psScene7 > .ps-left > .ps-nav .ps-btn-launch {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        max-width: 320px !important;
        margin-left: auto !important;
    }
}

.ps-scene#psScene7 > #psRight7.ps-right {
    overflow-y: auto !important;
    min-height: 0 !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(245, 130, 32, 0.55) transparent !important;
}

    .ps-scene#psScene7 > #psRight7.ps-right::-webkit-scrollbar {
        width: 9px !important;
    }

    .ps-scene#psScene7 > #psRight7.ps-right::-webkit-scrollbar-thumb {
        background: rgba(245, 130, 32, 0.55) !important;
        border-radius: 8px !important;
    }

.ps-scene#psScene7 #psGoLiveCard {
    flex: 0 0 auto !important;
}

    .ps-scene#psScene7 #psGoLiveCard .psgl-cta {
        display: flex !important;
    }

/* ══════════════════════════════════════════════════════════════════════════
   PS_BUILD 2026-06-16b · BREADCRUMB WRAP + DESKTOP NAV LAYER
   ──────────────────────────────────────────────────────────────────────────
   (issue 7) The mobile breadcrumb pill truncated the selected path with an
   ellipsis ("Farm & Agricultu > Crop / Produce Fa — AI Comp…"). Let it grow to
   a second line so the full trail is readable.
   (issue 6) On desktop the Back/Continue occasionally sat behind a decorative
   layer. The nav already carries z-index:80; lift it + its buttons decisively
   so they always paint on top.
═════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .ps-breadcrumb {
        border-radius: 14px !important; /* not a hard pill, so 2 lines read well */
        align-items: flex-start !important;
        overflow: visible !important;
        max-width: 100% !important;
    }

    .ps-breadcrumb-text {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        line-height: 1.3 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}

@media (min-width: 769px) {
    .ps-scene > .ps-left > .ps-nav,
    .ps-scene > .ps-left > .ps-nav-dna,
    .ps-scene .ps-nav {
        position: relative !important;
        z-index: 90 !important;
    }

        .ps-scene .ps-nav .ps-btn-back,
        .ps-scene .ps-nav .ps-btn-next,
        .ps-scene .ps-nav .ps-btn-launch {
            position: relative !important;
            z-index: 2 !important;
        }
}