/* ============================================================================
   private-seller-mobile-fixes.css   (v3 — flex-column three-region layout)
   ----------------------------------------------------------------------------
   Surgical overrides for the seller carousel's UX. Loaded LAST so it takes
   precedence over private-seller.css and private-seller-scenes-extra.css
   without touching either file.

   WHY v1 DIDN'T WORK
     v1 relied on `position: sticky` for the .ps-nav buttons. Sticky elements
     stick to the nearest scrollable ancestor — and the seller carousel uses
     `overflow: hidden` on its track, which prevents any descendant from
     becoming a sticky context. The buttons just scrolled with content.

   v2 STRATEGY
     Make .ps-left a fixed-height flex column with three regions:
       1. HEAD (breadcrumb + progress + question + subtitle)  — flex: 0 0 auto
       2. BODY (the actual content — cards / dropdown / form) — flex: 1 1 auto, overflow: auto
       3. NAV  (back / continue buttons)                       — flex: 0 0 auto
     The body scrolls; the nav is always at the bottom of the visible pane.
     This works regardless of overflow rules on parent containers.
   ============================================================================ */

/* ============================================================================
   CORE LAYOUT — every seller scene uses .ps-left as its main pane
   ============================================================================ */

.ps-scene > .ps-left {
    /* The base private-seller.css already sets display:flex column + overflow-y:auto,
       but uses scroll on the .ps-left itself, which scrolls the nav out of view.
       We disable that scroll and instead make the content children handle scroll,
       so the .ps-nav can sit pinned at the bottom of .ps-left. */
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important; /* ← key change vs private-seller.css */
    min-height: 0;
}

    /* The .ps-nav is the LAST child of .ps-left in every scene.
       We do NOT use margin-top: auto here because that pushes the nav
       to the bottom by consuming space from nothing — it only works
       when the parent has leftover height, which is unreliable once we
       make specific scenes use flex: 1 1 auto on their scrollable body.
       Instead, every scene's scrollable body uses flex: 1 1 auto which
       is what actually pushes the nav to the bottom. */
    .ps-scene > .ps-left > .ps-nav {
        flex: 0 0 auto !important;
        margin-top: 0 !important;
        padding: 12px 0 max(4px, env(safe-area-inset-bottom)) !important;
        background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #ffffff 35%, #ffffff 100%) !important;
        position: relative !important;
        z-index: 5 !important;
    }

/* Make the typical scrollable bodies actually scroll. */
.ps-cat-grid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
}

    .ps-cat-grid::-webkit-scrollbar {
        display: none;
    }

.ps-cat-grid {
    scrollbar-width: none;
}

/* Scene 2 — select wrap: always shrink, never grow */
.ps-scene#psScene1 .ps-subtype-select-wrap {
    flex: 0 0 auto !important;
}

/* Scene 2 — banner flex handled per-breakpoint below */

/* ============================================================================
   SCENE 1 — CATEGORY CARDS  (single-column rows on phones AND small tablets)
   ----------------------------------------------------------------------------
   Why <=768px (was <=600px):
     At 662×741 (Edge DevTools' "Responsive" 662 preset and similar narrow
     tablet widths) the upstream rule in private-seller.css line 1623
     forced a 2-column grid. Inside the modal pane that left each card
     ~130-150px wide AND the available vertical space for the grid was
     only ~150-200px after the question, subtitle and nav — so the 9
     cards collapsed to flat icon-only rectangles with the name and meta
     squeezed out of view (see screenshot: 662×741 cards showed icons
     only, no labels).

     The right rail is already hidden at <=768px, so giving the left
     pane the full width AND switching to a single-column scrollable
     list of full-width row-cards (icon + name + meta) is the natural
     layout for the entire "mobile + small tablet" range. Each card
     becomes ~64px tall, fingers can tap them comfortably, and the
     labels finally render.

   The block must use !important on grid-template-columns because the
   upstream rule (.ps-cat-grid → repeat(2,1fr)) inside the @media
   (max-width:768px) block in private-seller.css line 1623 has the
   same specificity and would otherwise win by source order.
   ============================================================================ */
@media (max-width: 768px) {
    .ps-cat-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding-bottom: 12px !important;
    }

    .ps-cat-card {
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        text-align: left !important;
        padding: 14px !important;
        min-height: 64px !important;
    }

        .ps-cat-card .ps-cat-icon {
            flex-shrink: 0;
            width: 40px !important;
            height: 40px !important;
            font-size: 1.15rem !important;
        }

        .ps-cat-card .ps-cat-name {
            font-size: 0.92rem !important;
            font-weight: 700;
            flex: 1 1 auto;
            /* Wider tablet widths (600-768) have more room — let long
               labels like "Student Accommodation" wrap cleanly to a
               second line instead of ellipsis-cutting. */
            white-space: normal !important;
            line-height: 1.25 !important;
        }

        .ps-cat-card .ps-cat-meta {
            font-size: 0.7rem !important;
            color: var(--sj-muted);
            flex-shrink: 0;
            margin-left: 8px;
            white-space: nowrap;
        }

        .ps-cat-card::before {
            z-index: 0 !important;
        }

        .ps-cat-card .ps-cat-icon,
        .ps-cat-card .ps-cat-name,
        .ps-cat-card .ps-cat-meta {
            position: relative;
            z-index: 1;
        }
}

/* Very narrow phones (≤400px) — meta becomes redundant alongside the name
   on a single row, hide it to give the name full width. */
@media (max-width: 400px) {
    .ps-cat-card .ps-cat-meta {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .ps-scene#psScene0 .ps-right,
    .ps-scene#psScene1 .ps-right {
        display: none !important;
    }

    .ps-scene#psScene0,
    .ps-scene#psScene1 {
        flex-direction: column !important;
    }

        .ps-scene#psScene0 .ps-left,
        .ps-scene#psScene1 .ps-left {
            flex: 1 1 100% !important;
            max-width: 100% !important;
        }
}

/* ============================================================================
   SCENE 2 — DROPDOWN + BANNER
   ============================================================================ */
.ps-subtype-select-wrap {
    position: relative;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.ps-subtype-select {
    width: 100%;
    padding: 14px 44px 14px 18px;
    border: 1.5px solid rgba(0, 0, 0, 0.10);
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--sj-dark);
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23F58220' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
}

    .ps-subtype-select:focus {
        outline: none;
        border-color: var(--sj-orange);
        box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.12);
    }

    .ps-subtype-select:hover {
        border-color: rgba(245, 130, 32, 0.40);
    }

/* ── Chip-grid: hidden on mobile (dropdown takes over), shown on desktop ── */
/* Desktop override is in the @media (min-width: 769px) block below. */
.ps-scene#psScene1 .ps-chip-grid {
    display: none !important;
}

/* ── Banner: base (desktop) styles ── */
.ps-scene#psScene1 .ps-subtype-banner {
    display: block !important;
    flex: 1 1 auto;
    min-height: 200px;
    height: auto;
    max-height: 380px;
    margin: 0 0 8px;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(135deg, #fff8f1 0%, #ffe7d2 100%);
    border: 1.5px solid rgba(245, 130, 32, 0.20);
    position: relative;
}

/* ── Banner image: JS sets display:block on probe.onload ── */
.ps-scene#psScene1 .ps-subtype-banner-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: none; /* JS overrides this inline on successful load */
}

/* ── Placeholder: absolutely positioned so it never prevents img from showing ── */
.ps-scene#psScene1 .ps-subtype-banner-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--sj-dark);
    gap: 14px;
    padding: 28px 20px;
    text-align: center;
    pointer-events: none; /* never blocks clicks on the img */
}

    .ps-scene#psScene1 .ps-subtype-banner-placeholder i {
        font-size: 3.4rem;
        color: var(--sj-orange);
        opacity: 0.55;
    }

    .ps-scene#psScene1 .ps-subtype-banner-placeholder span {
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--sj-dark);
        line-height: 1.35;
        max-width: 280px;
    }

/* ── DESKTOP (≥769px): show chip pills, hide dropdown ── */
@media (min-width: 769px) {
    .ps-scene#psScene1 .ps-chip-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    .ps-scene#psScene1 .ps-subtype-select-wrap {
        display: none !important;
    }
}

/* ── MOBILE (≤768px): dropdown + banner ── */
@media (max-width: 768px) {
    /* Scene 1 stacks to single column */
    .ps-scene#psScene1 {
        flex-direction: column !important;
    }

        .ps-scene#psScene1 .ps-right {
            display: none !important;
        }

        /* ── SCENE 1 LEFT PANE — three-region flex column ────────────────
       REGION 1 (head):  breadcrumb + progress + label + question + subtitle
                         flex: 0 0 auto — never scrolls, never shrinks
       REGION 2 (body):  select-wrap + banner — scrollable, fills space
       REGION 3 (foot):  .ps-nav — always pinned at the very bottom

       Critical rules:
         • .ps-left must be flex-column with overflow:hidden (not auto)
           so the pane itself doesn't scroll — only REGION 2 does.
         • The scrollable body must have flex: 1 1 auto + overflow-y: auto
           so it grows to fill all space between head and foot.
         • .ps-nav must be flex: 0 0 auto so it never scrolls away.
    ──────────────────────────────────────────────────────────────── */
        .ps-scene#psScene1 .ps-left {
            flex: 1 1 100% !important;
            max-width: 100% !important;
            display: flex !important;
            flex-direction: column !important;
            overflow: hidden !important; /* pane itself does NOT scroll */
            height: 100% !important;
            min-height: 0 !important;
        }

            /* REGION 1: head elements — each is already flex: 0 0 auto via the
       V9 base rule in private-seller.css@13955. We re-declare here to
       win over any older override in private-seller-mobile-fixes.css. */
            .ps-scene#psScene1 .ps-left .ps-breadcrumb,
            .ps-scene#psScene1 .ps-left .ps-progress,
            .ps-scene#psScene1 .ps-left .ps-scene-label,
            .ps-scene#psScene1 .ps-left .ps-question,
            .ps-scene#psScene1 .ps-left .ps-subtitle {
                flex: 0 0 auto !important;
            }

            /* REGION 2: scrollable body — grows to fill space, scrolls internally.
       The select-wrap is a non-scrolling header inside this region, the
       banner image is what scrolls/expands to consume leftover height. */
            .ps-scene#psScene1 .ps-left .ps-subtype-select-wrap {
                flex: 0 0 auto !important; /* select never scrolls */
                display: block !important;
                /* Raise z-index so the anchored dropdown panel can overlap the
           nav without being clipped. When the panel is open the
           .ps-subtype-select-wrap:has(.is-open) rule (private-seller.css
           line 13938) gives z-index:60. We ensure the closed state is
           already above the nav (z-index: 80) by raising this to 90 when
           open — see the .is-open rule below. */
                position: relative !important;
                z-index: 5 !important;
            }

        /* When the dropdown panel is open, punch the entire wrap above the
       nav so the panel list is never clipped or occluded by it.
       z-index: 100 beats the nav's 80 and the ps-module-shell. */
        .ps-scene#psScene1 .ps-subtype-select-wrap:has(.ps-subtype-anchored-panel.is-open) {
            z-index: 100 !important;
        }

        /* Banner: grows to fill whatever vertical space remains after the
       select-wrap and before the nav. flex: 1 1 auto makes it the
       "flex-fill" element in the column — exactly what makes the nav
       get pushed to the bottom. */
        .ps-scene#psScene1 .ps-left .ps-subtype-banner {
            flex: 1 1 auto !important;
            min-height: clamp(120px, 22vw, 180px) !important;
            max-height: none !important; /* let it grow, don't cap */
            height: auto !important;
            margin-top: 12px !important;
            overflow: hidden !important;
        }

        .ps-scene#psScene1 .ps-subtype-banner-placeholder i {
            font-size: 2.6rem;
        }

        /* REGION 3: nav — always at the bottom, never scrolls away.
       Override any margin-top:auto or sticky positioning from earlier
       files so this is a clean fixed-height footer. */
        .ps-scene#psScene1 .ps-left .ps-nav {
            flex: 0 0 auto !important;
            position: relative !important; /* NOT sticky — sticky needs a
                                           scrollable ancestor, which the
                                           pane intentionally isn't */
            margin-top: 0 !important;
            bottom: auto !important;
            padding: 10px 0 max(10px, env(safe-area-inset-bottom)) !important;
            background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 28%) !important;
            z-index: 5 !important;
        }

        /* ── ANCHORED DROPDOWN PANEL z-index correction ─────────────────
       The panel is position:absolute inside .ps-subtype-select-wrap.
       Because the wrap now has z-index:100 when open (rule above),
       the panel inherits that stacking context and naturally floats
       above the nav (z-index: 80). No further z-index needed on the
       panel itself — keeping the existing z-index:60 value is fine
       because it's relative to the wrap's new stacking context.

       We DO need to ensure the panel is never visually clipped by
       the parent chain. The .ps-left has overflow:hidden, so we
       must allow the panel to visually escape it. We do this by
       making the panel position relative to the VIEWPORT via a
       fixed-like trick — but the simpler fix is just to ensure
       max-height is enough to show all options above the fold.
    ──────────────────────────────────────────────────────────────── */

        /* ── PANEL OVERFLOW ESCAPE — position:fixed when open ──────────────
       .ps-left has overflow:hidden (required to keep the nav pinned).
       An absolutely-positioned panel that opens downward would be
       clipped at the .ps-left bottom edge, cutting off list items below
       the visible area.

       Fix: switch the OPEN panel to position:fixed so it escapes every
       overflow-hidden ancestor and paints at viewport level. We then
       use left/width via JS or CSS custom properties to re-align it
       under its trigger. On mobile the .ps-left is full-width so
       left:0/right:0 with the same side-padding as the scene works.

       NOTE: position:fixed breaks the panel's relationship to the
       trigger's position, so we pin it absolutely at a predictable
       vertical offset from the top of the viewport. We use
       --ps-panel-top (set inline by JS — see buildScene2 in
       private-seller.js) with a safe fallback of 180px from the top.
       If JS hasn't set it yet (initial paint), the 180px fallback
       keeps it readable.
    ──────────────────────────────────────────────────────────────── */
        /* SUPERSEDED: the subtype panel is now a document.body portal
           positioned with position:fixed against the trigger's screen rect by
           buildScene2() in private-seller.js. This scene-scoped rule pinned the
           panel to a FIXED 220px from the top (the --ps-panel-top fallback was
           never set), which detached it from the trigger. The portal no longer
           lives inside .ps-scene#psScene1, so this selector no longer matches;
           it is kept here, neutralised, only as a breadcrumb. */
        .ps-scene#psScene1 .ps-subtype-anchored-panel.is-open.ps-DISABLED-fixed220 {
            position: fixed !important;
            top: var(--ps-panel-top, 220px) !important;
            left: clamp(14px, 4vw, 18px) !important;
            right: clamp(14px, 4vw, 18px) !important;
            width: auto !important;
            /* High enough to beat nav (80) and the module shell */
            z-index: 200 !important;
            max-height: min(340px, 48vh) !important;
        }

    /* Ensure child pointer-events are disabled so the trigger <button>
       catches all taps — prevents the caret from becoming a dead zone. */
    .ps-subtype-trigger-caret,
    .ps-subtype-trigger-label {
        pointer-events: none !important;
    }

    /* The trigger itself must be 100% tappable — no sub-zone restrictions */
    .ps-subtype-trigger {
        /* touch-action:manipulation prevents the 300ms tap delay on iOS */
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(245,130,32,0.08) !important;
        cursor: pointer !important;
        /* Ensure the full button surface (including chevron area) is a
           single hit-test zone by overriding any inherited pointer-events */
        pointer-events: auto !important;
        position: relative !important;
        z-index: 2 !important;
    }
}

/* ============================================================================
   BREADCRUMB — let the pill grow with the property type name
   Fixes "Apartment / F" truncation seen in image 3 (Scene 3 desktop).
   ============================================================================ */
.ps-breadcrumb-text {
    flex: 0 1 auto !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    max-width: none !important;
}

.ps-breadcrumb {
    flex-wrap: wrap !important;
    gap: 4px;
}

@media (max-width: 600px) {
    .ps-breadcrumb-text {
        max-width: 60vw !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

/* ============================================================================
   SCENE 9 (CORE IDENTITY) — recolor cyan → sunset orange
   The seller scene was inheriting the agent palette via --brand-cyan.
   We override per-scene so the agent flow stays cyan and the seller flow
   gets its sunset-orange theme. Variable scoping does the work — we
   redefine --brand-cyan only inside .ps-scene-identity.
   ============================================================================ */
.ps-scene-identity {
    --brand-cyan: #F58220;
    --brand-cyan-deep: #E07210;
    --brand-cyan-soft: #ffe2c2;
}

    .ps-scene-identity .ps-id-photo-cam {
        background: var(--sj-orange, #F58220) !important;
        color: #ffffff !important;
    }

    .ps-scene-identity .ps-id-photo-zone {
        border-color: rgba(245, 130, 32, 0.45) !important;
        background: linear-gradient(135deg, #fff8f1, #ffffff) !important;
    }

        .ps-scene-identity .ps-id-photo-zone:hover {
            border-color: var(--sj-orange, #F58220) !important;
            background: #fff1e0 !important;
        }

        /* Loading state — instant feedback on click while OS file picker opens */
        .ps-scene-identity .ps-id-photo-zone.is-loading {
            pointer-events: none;
        }

            .ps-scene-identity .ps-id-photo-zone.is-loading .ps-id-photo-cam i {
                display: none;
            }

            .ps-scene-identity .ps-id-photo-zone.is-loading .ps-id-photo-cam::after {
                content: '';
                width: 18px;
                height: 18px;
                border: 2px solid rgba(255, 255, 255, 0.4);
                border-top-color: #ffffff;
                border-radius: 50%;
                animation: psIdSpin 0.7s linear infinite;
            }

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

/* Belt-and-braces: empty <img> can intercept clicks if it's display:block */
.ps-scene-identity .ps-id-photo-zone img:not([src]),
.ps-scene-identity .ps-id-photo-zone img[src=""] {
    display: none !important;
    pointer-events: none !important;
}

.ps-scene-identity .ps-id-twin-photo {
    background: var(--sj-orange-light, #fff1e0) !important;
}

    .ps-scene-identity .ps-id-twin-photo i {
        color: var(--sj-orange, #F58220) !important;
    }

/* The .ps-id-twin-virt class used to badge "virtual" on the seller's
   contact number in the twin preview. Virtual numbers were removed
   from the flow (see private-seller-scenes-extra.js line ~280) so the
   class is no longer emitted — only .ps-id-strength-fill keeps the rule. */
.ps-scene-identity .ps-id-strength-fill {
    background: var(--sj-orange, #F58220) !important;
}

/* WhatsApp same/different pills — active state in brand orange.
   (The Real/Virtual pills that used to share this rule have been
   removed from the markup.) */
.ps-scene-identity .ps-id-radio-pill input:checked ~ span,
.ps-scene-identity .ps-id-radio-pill:has(input:checked) {
    background: var(--sj-orange, #F58220) !important;
    color: #ffffff !important;
    border-color: var(--sj-orange, #F58220) !important;
}

/* Inline error states */
.ps-scene-identity .ps-id-input-wrap.has-error {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.10) !important;
}

.ps-scene-identity .ps-id-field-error {
    display: block;
    color: #dc2626;
    font-size: 0.78rem;
    font-weight: 500;
    margin-top: 4px;
}

/* ── International dial-code picker (added by JS) ──────────────────── */
.ps-id-dial-wrap {
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
}

.ps-id-dial-select {
    flex: 0 0 auto;
    width: 110px;
    padding: 0 10px;
    border: 1.5px solid rgba(0, 0, 0, 0.10);
    border-radius: 10px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--sj-dark);
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23F58220' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    font-family: inherit;
}

    .ps-id-dial-select:focus {
        outline: none;
        border-color: var(--sj-orange);
        box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.12);
    }

.ps-id-dial-wrap .ps-id-input-wrap {
    flex: 1 1 auto;
}

@media (max-width: 480px) {
    .ps-id-dial-select {
        width: 92px;
        font-size: 0.86rem;
    }
}

/* ============================================================================
   SCENE 9 LAYOUT — keep nav at the bottom on mobile too
   ============================================================================ */
.ps-scene-identity .ps-id-form {
    flex: 1 1 auto !important;
    min-height: 0;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-right: 4px;
    margin-bottom: 0 !important;
}

.ps-scene-identity .ps-id-error {
    flex: 0 0 auto;
    margin-top: 8px;
}

@media (max-width: 768px) {
    .ps-scene-identity {
        flex-direction: column !important;
    }

        .ps-scene-identity > .ps-right {
            display: none !important;
        }

        .ps-scene-identity > .ps-left {
            flex: 1 1 100% !important;
            max-width: 100% !important;
        }

        .ps-scene-identity .ps-id-row {
            grid-template-columns: 1fr !important;
            gap: 14px !important;
        }

        .ps-scene-identity .ps-id-photo-col {
            align-items: center;
        }

        .ps-scene-identity .ps-id-photo-zone {
            width: 140px !important;
            height: 140px !important;
        }
}