/* ============================================================================
   ikhayalami-frontend-fixes.css
   ----------------------------------------------------------------------------
   Targeted surgical fixes — load LAST so these overrides win.

   FIX 1 — Theatre cards: NO truncation. All paragraphs visible regardless of
           viewport. Drops the icon column tighter on small screens to give
           the text column more breathing room, but never clamps lines.

   FIX 2 — Scene 2: dropdown on mobile, pills on desktop (unchanged).

   FIX 3 — Scene 2 banner: remove the placeholder visual entirely. Until an
           image loads, the slot is just clean white space — no icon, no copy.
           When an image probe succeeds, the image fades in. On bigger screens
           it works the same way (no awkward "Pick a property type" overlay).

   FIX 4 — Scene 9 (Core Identity) dial-code <select>: ensure the native
           dropdown menu paints ABOVE the page (no clipping by ancestor
           overflow:hidden / transforms).
   ============================================================================ */

/* ============================================================================
   FIX 1 — THEATRE CARDS: NO LINE CLAMP. Show all three paragraphs in full.
   ----------------------------------------------------------------------------
   Why this is needed: earlier versions of this file clamped the desc to 3
   lines on ≤420px and 4 lines on ≤600px, which truncated the marketing
   copy. The user wants the full story visible. We:
     • Remove `-webkit-line-clamp` everywhere it was set on .sj-tc-desc.
     • Switch the desc back to a normal block (no -webkit-box) so nothing
       clips even when other stylesheets try to.
     • Keep a max-height ceiling unset and let the card grow vertically.
     • Keep tighter inner padding on small screens for readability.
   ============================================================================ */

/* Prevent the text column from overflowing its grid cell on any screen */
.sj-theater-cards .sj-theater-card .sj-tc-label,
.sj-theater-cards .sj-theater-card .sj-tc-title,
.sj-theater-cards .sj-theater-card .sj-tc-desc,
.sj-theater-cards .sj-theater-card .sj-tc-cta,
.sj-premium-cards .sj-theater-card .sj-tc-label,
.sj-premium-cards .sj-theater-card .sj-tc-title,
.sj-premium-cards .sj-theater-card .sj-tc-desc,
.sj-premium-cards .sj-theater-card .sj-tc-cta {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

/* GLOBAL — kill the line clamp on the desc, every screen size, every variant.
   We win by matching the deepest selector chain other rules use AND adding
   !important. The `display:block` is what fully neutralises any ancestor's
   `-webkit-box` + `-webkit-line-clamp` combination. */
.sj-theater-cards .sj-theater-card .sj-tc-desc,
.sj-premium-cards .sj-theater-card .sj-tc-desc,
.sj-theater-cards .sj-theater-card:nth-child(even) .sj-tc-desc,
.sj-premium-cards .sj-theater-card:nth-child(even) .sj-tc-desc {
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    line-clamp: unset !important;
    max-height: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
}

/* ── ≤600px: tighter icon column so text side is wider ── */
@media (max-width: 600px) {
    .sj-theater-cards .sj-theater-card .sj-tc-inner,
    .sj-premium-cards .sj-theater-card .sj-tc-inner {
        grid-template-columns: 108px 1fr !important;
        min-height: 148px !important;
        align-items: stretch !important;
    }

    .sj-theater-cards .sj-theater-card:nth-child(even) .sj-tc-inner,
    .sj-premium-cards .sj-theater-card:nth-child(even) .sj-tc-inner {
        grid-template-columns: 1fr 108px !important;
    }

    .sj-theater-cards .sj-theater-card .sj-tc-icon-wrap svg,
    .sj-premium-cards .sj-theater-card .sj-tc-icon-wrap svg {
        width: 54px !important;
        height: 54px !important;
    }

    .sj-theater-cards .sj-theater-card .sj-tc-icon-wrap,
    .sj-premium-cards .sj-theater-card .sj-tc-icon-wrap {
        padding: 14px 10px !important;
        min-height: 148px !important;
    }

    .sj-theater-cards .sj-theater-card .sj-tc-label,
    .sj-premium-cards .sj-theater-card .sj-tc-label {
        margin: 14px 14px 0 14px !important;
        font-size: 0.56rem !important;
    }

    .sj-theater-cards .sj-theater-card .sj-tc-title,
    .sj-premium-cards .sj-theater-card .sj-tc-title {
        margin: 3px 14px 0 14px !important;
        font-size: clamp(0.88rem, 3.5vw, 1.05rem) !important;
        line-height: 1.2 !important;
    }

    /* DESC — full text, no clamp, comfortable line-height */
    .sj-theater-cards .sj-theater-card .sj-tc-desc,
    .sj-premium-cards .sj-theater-card .sj-tc-desc {
        margin: 5px 14px 0 14px !important;
        font-size: 0.74rem !important;
        line-height: 1.5 !important;
        display: block !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: unset !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .sj-theater-cards .sj-theater-card .sj-tc-cta,
    .sj-premium-cards .sj-theater-card .sj-tc-cta {
        margin: 10px 14px 14px 14px !important;
        padding: 8px 13px !important;
        font-size: 0.77rem !important;
    }
}

/* ── ≤420px: even tighter for small phones (iPhone SE, Galaxy A series) ── */
@media (max-width: 420px) {
    .sj-theater-cards .sj-theater-card .sj-tc-inner,
    .sj-premium-cards .sj-theater-card .sj-tc-inner {
        grid-template-columns: 90px 1fr !important;
        min-height: 140px !important;
        align-items: stretch !important;
    }

    .sj-theater-cards .sj-theater-card:nth-child(even) .sj-tc-inner,
    .sj-premium-cards .sj-theater-card:nth-child(even) .sj-tc-inner {
        grid-template-columns: 1fr 90px !important;
    }

    .sj-theater-cards .sj-theater-card .sj-tc-icon-wrap svg,
    .sj-premium-cards .sj-theater-card .sj-tc-icon-wrap svg {
        width: 44px !important;
        height: 44px !important;
    }

    .sj-theater-cards .sj-theater-card .sj-tc-icon-wrap,
    .sj-premium-cards .sj-theater-card .sj-tc-icon-wrap {
        padding: 12px 8px !important;
        min-height: 140px !important;
    }

    .sj-theater-cards .sj-theater-card .sj-tc-label,
    .sj-premium-cards .sj-theater-card .sj-tc-label {
        margin: 12px 12px 0 12px !important;
        font-size: 0.53rem !important;
        letter-spacing: 0.12em !important;
    }

    .sj-theater-cards .sj-theater-card .sj-tc-title,
    .sj-premium-cards .sj-theater-card .sj-tc-title {
        margin: 3px 12px 0 12px !important;
        font-size: clamp(0.82rem, 3.8vw, 0.96rem) !important;
    }

    /* DESC — full text on this size too. NO -webkit-line-clamp. */
    .sj-theater-cards .sj-theater-card .sj-tc-desc,
    .sj-premium-cards .sj-theater-card .sj-tc-desc {
        margin: 4px 12px 0 12px !important;
        font-size: 0.72rem !important;
        line-height: 1.5 !important;
        display: block !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: unset !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .sj-theater-cards .sj-theater-card .sj-tc-cta,
    .sj-premium-cards .sj-theater-card .sj-tc-cta {
        margin: 10px 12px 13px 12px !important;
        padding: 7px 12px !important;
        font-size: 0.74rem !important;
        gap: 5px !important;
    }
}

/* ============================================================================
   FIX 2 — SCENE 2 (PROPERTY TYPE): chips on desktop, dropdown on mobile.
   Unchanged behaviour from the previous version of this file.
   ============================================================================ */
@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;
    }
}

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

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

/* ============================================================================
   FIX 3 — SCENE 2 BANNER: NO PLACEHOLDER VISUAL. Just clean white space
           that the image fades into when it's ready.
   ----------------------------------------------------------------------------
   We hide the placeholder block in CSS regardless of whether JS has set its
   inline style. The banner wrapper itself stays white (matches the page
   background) so users see no awkward "Pick a property type" copy and no
   ghost icon — just a blank slot until the image arrives.
   ============================================================================ */

/* Banner wrapper — clean white, no dashed border, sits ready to receive the image */
.ps-scene#psScene1 .ps-subtype-banner {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    border-style: solid !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

    /* The :has() rule in private-seller.css that turned the border dashed when
   the placeholder was visible — neutralise it. */
    .ps-scene#psScene1 .ps-subtype-banner:has(.ps-subtype-banner-placeholder) {
        border-style: solid !important;
        border-color: rgba(0, 0, 0, 0.04) !important;
    }

/* Hide the placeholder on every screen, every state. We never want the
   "Pick a property type" / type-name / image icon overlay to appear. */
.ps-scene#psScene1 .ps-subtype-banner-placeholder,
.ps-scene#psScene1 #psSubtypeBannerPlaceholder {
    display: none !important;
}

/* Mobile tweaks for the banner: ensure it has a sensible height
   so the image has somewhere to render. */
@media (max-width: 768px) {
    .ps-scene#psScene1 .ps-subtype-banner {
        display: block !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        min-height: clamp(140px, 26vw, 200px) !important;
        max-height: 220px !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        margin-bottom: 10px !important;
        position: relative !important;
    }

    .ps-scene#psScene1 .ps-subtype-banner-img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    .ps-scene#psScene1 .ps-left {
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    .ps-scene#psScene1 .ps-subtype-select-wrap,
    .ps-scene#psScene1 .ps-subtype-banner {
        flex-shrink: 0 !important;
    }
}

/* Desktop: chip selection style */
@media (min-width: 769px) {
    .ps-scene#psScene1 .ps-chip.selected {
        background: var(--sj-dark, #1A1D20) !important;
        border-color: var(--sj-dark, #1A1D20) !important;
        color: #ffffff !important;
    }
}

/* ============================================================================
   FIX 4 — SCENE 9 (CORE IDENTITY) DIAL-CODE DROPDOWN
   ----------------------------------------------------------------------------
   Native <select> elements paint their dropdown menu in a separate OS layer
   — they CAN'T be hidden by sibling z-index. If the menu was "not showing"
   it was almost certainly:
     (a) The <select> itself was not visible (clipped by an ancestor's
         overflow:hidden / max-height:0 / display:none), or
     (b) The wrap turned the select into a 0-height target on some Android
         browsers because flex:0 0 auto on a fixed-width child sometimes
         renders 0px tall when the parent's align-items is stretch but the
         parent has 0 height in the layout pass.

   Force a real height + visible overflow on the wrap, and z-index the
   select above its siblings so the OS picker anchors above the inputs.
   This also covers any "looks like the same width, but the click target is
   smashed" cases on older Android Chrome.
   ============================================================================ */
.ps-scene-identity .ps-id-dial-wrap,
#psScene8 .ps-id-dial-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 5 !important;
}

.ps-scene-identity .ps-id-dial-select,
#psScene8 .ps-id-dial-select {
    flex: 0 0 auto !important;
    min-height: 48px !important;
    height: auto !important;
    line-height: 1.2 !important;
    position: relative !important;
    z-index: 6 !important;
    /* Make sure the user can ALWAYS see and tap it */
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* The .ps-id-input-wrap that the contact number lives in must NOT
   z-index above the select. Earlier rules occasionally bumped its z-index. */
.ps-scene-identity .ps-id-dial-wrap .ps-id-input-wrap,
#psScene8 .ps-id-dial-wrap .ps-id-input-wrap {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Belt-and-braces: the form ancestor of the dial wrap must not clip its
   children with overflow:hidden — otherwise the OS dropdown anchored at
   the bottom of the select can render with 0px height visible to JS and
   feel "broken" even though the OS menu opens. */
.ps-scene-identity .ps-id-form,
#psScene8 .ps-id-form {
    overflow: visible !important;
}

/* Mobile: a slightly slimmer flag-code button + still-tappable height */
@media (max-width: 480px) {
    .ps-scene-identity .ps-id-dial-select,
    #psScene8 .ps-id-dial-select {
        width: 96px !important;
        min-width: 96px !important;
        font-size: 0.86rem !important;
        padding: 0 28px 0 10px !important;
    }
}

/* ============================================================================
   FIX 5 — SCENE 9 PROFILE PHOTO: visual confirmation it was committed.
   ----------------------------------------------------------------------------
   The photo IS picked up by the JS (we set twin.profilePhotoFile) but the
   user-side feedback is subtle and mobile users sometimes don't realise the
   image is in. We add a small green confirmation chip below the photo
   actions when the file is captured. The JS in private-seller-fixes-patch.js
   toggles the .has-photo class on the column.
   ============================================================================ */
.ps-id-photo-col .ps-id-photo-saved {
    display: none;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.12);
    color: #166534;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid rgba(34, 197, 94, 0.30);
}

.ps-id-photo-col.has-photo .ps-id-photo-saved {
    display: inline-flex;
}

.ps-id-photo-col .ps-id-photo-saved i {
    font-size: 0.95rem;
}