/* ============================================================================
   private-seller-pay-compact.css   (Secure Payment scene — fit-one-viewport)
   ----------------------------------------------------------------------------
   LOAD ORDER: add the <link> AFTER private-seller-card-form.css AND
   ps-batch34-fixes.css in _Layout.cshtml so these rules win on source order.
   Every selector is scoped to #psScene10 so nothing here can touch other
   scenes' shared classes (.ps-question, .ps-subtitle, .ps-right, …).

   WHY THIS FILE EXISTS — the bleed root cause
   -------------------------------------------------------------------------
   card-form.css sized the embedded host from the FULL viewport:
        #psPayEmbedRoot { height: clamp(600px, calc(100dvh - 196px), 820px); }
   But the pane does NOT own the full viewport — the top app bar, the tabs row
   and the rounded card chrome eat ~150–200px above it. So the host was taller
   than the room the pane actually had; head + host + foot overran the card,
   which clips (.ps-scene { overflow:hidden }) → the foot/secured row "bled"
   below the wrapper. On localhost it looked worse only because the 400 meant
   Peach never painted, so the full-height skeleton stayed at max height with
   nothing to shrink it.

   THE FIX — size the host from its CONTAINER, not the viewport. The surface
   becomes a flex column that fills the pane; head/foot/hint are fixed; the
   host flexes to whatever space is left (still a DEFINITE pixel height, which
   is what Peach needs to paint). Result: the whole surface always fits the
   pane, the foot is always visible, and it's ~12% tighter than before.
   ============================================================================ */

/* ── Right pane: bounded, scrolls internally on short frames (never bleeds) ── */
#psScene10.ps-scene-pay-v2 .ps-right.ps-pay-v2-right--chooser.ps-pay-v2-right--embed {
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 16px 22px max(14px, env(safe-area-inset-bottom)) !important;
}

@media (min-width: 769px) {
    #psScene10.ps-scene-pay-v2 .ps-right.ps-pay-v2-right--chooser.ps-pay-v2-right--embed {
        padding: 18px 24px !important;
    }
}

/* Surface fills the pane as a flex column so the host can size to the room. */
#psScene10.ps-scene-pay-v2 .ps-paysurface {
    flex: 1 1 auto;
    min-height: 0;
    gap: 10px;            /* was 12 — small compaction */
}

#psScene10.ps-scene-pay-v2 .ps-paysurface-head,
#psScene10.ps-scene-pay-v2 .ps-paysurface-foot,
#psScene10.ps-scene-pay-v2 .ps-paysurface-hint {
    flex: 0 0 auto;
}

/* Relative wrap holds the host + the idle overlay. It takes the remaining
   vertical space; min-height keeps Peach's card form usable on short screens
   (the pane scrolls rather than crushing the form). */
#psScene10.ps-scene-pay-v2 .ps-paysurface-embed-wrap {
    position: relative;
    flex: 1 1 auto;
    min-height: 340px;
    border-radius: var(--sj-radius-md, 16px);
}

/* Host fills the wrap → a definite pixel height for Peach, derived from the
   container, NOT from 100dvh. Higher specificity (id+class+id) supersedes
   every card-form.css #psPayEmbedRoot rule, including its media queries. */
#psScene10.ps-scene-pay-v2 #psPayEmbedRoot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: auto;          /* resolved by inset:0 within the sized wrap */
    min-height: 0;
    border: 0;
    background: transparent;
    border-radius: var(--sj-radius-md, 16px);
    overflow: auto;        /* if Peach paints taller than the wrap, it scrolls inside */
}

#psScene10.ps-scene-pay-v2 .ps-pay-embed-loading {
    height: 100%;
    min-height: 0;
}

/* ── Header: amount + Refresh control ─────────────────────────────────────── */
#psScene10.ps-scene-pay-v2 .ps-paysurface-head-right {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

#psScene10.ps-scene-pay-v2 .ps-paysurface-refresh {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid var(--sj-border, rgba(0, 0, 0, 0.10));
    border-radius: 999px;
    background: #fff;
    color: var(--sj-dark, #1A1D20);
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease, transform .12s ease;
}

#psScene10.ps-scene-pay-v2 .ps-paysurface-refresh i {
    font-size: 0.92rem;
    color: var(--sj-orange, #F58220);
}

#psScene10.ps-scene-pay-v2 .ps-paysurface-refresh:hover {
    border-color: var(--sj-orange, #F58220);
    background: #FFF6EE;
}

#psScene10.ps-scene-pay-v2 .ps-paysurface-refresh:active {
    transform: translateY(1px);
}

#psScene10.ps-scene-pay-v2 .ps-paysurface-refresh.is-loading {
    opacity: .65;
    pointer-events: none;
}

#psScene10.ps-scene-pay-v2 .ps-paysurface-refresh.is-loading i {
    animation: psPaySpin .7s linear infinite;
}

/* On narrow panes the label collapses to a clean icon button. */
@media (max-width: 520px) {
    #psScene10.ps-scene-pay-v2 .ps-paysurface-refresh-txt {
        display: none;
    }

    #psScene10.ps-scene-pay-v2 .ps-paysurface-refresh {
        padding: 6px 8px;
    }
}

/* ── Foot hint (browser-refresh guidance) ─────────────────────────────────── */
#psScene10.ps-scene-pay-v2 .ps-paysurface-hint {
    margin: 2px 0 0;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--sj-muted, #6B7280);
    text-align: center;
}

/* ── Idle / expired overlay over the host ─────────────────────────────────── */
#psScene10.ps-scene-pay-v2 .ps-pay-idle {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    border-radius: var(--sj-radius-md, 16px);
    background: rgba(250, 251, 252, 0.86);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

#psScene10.ps-scene-pay-v2 .ps-pay-idle[hidden] {
    display: none;
}

#psScene10.ps-scene-pay-v2 .ps-pay-idle-card {
    max-width: 320px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--sj-border, rgba(0, 0, 0, 0.08));
    border-radius: 18px;
    padding: 22px 20px;
    box-shadow: 0 18px 44px rgba(26, 29, 32, 0.12);
}

#psScene10.ps-scene-pay-v2 .ps-pay-idle-card > i {
    font-size: 1.6rem;
    color: var(--sj-orange, #F58220);
}

#psScene10.ps-scene-pay-v2 .ps-pay-idle-card h3 {
    margin: 8px 0 4px;
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--sj-dark, #1A1D20);
}

#psScene10.ps-scene-pay-v2 .ps-pay-idle-card p {
    margin: 0 0 14px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--sj-muted, #6B7280);
}

#psScene10.ps-scene-pay-v2 .ps-pay-idle-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    border: 0;
    border-radius: 999px;
    background: var(--sj-orange, #F58220);
    color: #fff;
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s ease, transform .12s ease;
}

#psScene10.ps-scene-pay-v2 .ps-pay-idle-btn:hover {
    filter: brightness(1.04);
}

#psScene10.ps-scene-pay-v2 .ps-pay-idle-btn:active {
    transform: translateY(1px);
}

/* ── "Securely provided by Peach Payments" link (under the trust chips) ───── */
#psScene10.ps-scene-pay-v2 .ps-pay-provider {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 7px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--sj-muted, #6B7280);
    text-decoration: none;
    width: fit-content;
    transition: color .15s ease;
}

#psScene10.ps-scene-pay-v2 .ps-pay-provider strong {
    color: var(--sj-dark, #1A1D20);
    font-weight: 700;
}

#psScene10.ps-scene-pay-v2 .ps-pay-provider > i:first-child {
    color: #16A34A;
    font-size: 0.95rem;
}

#psScene10.ps-scene-pay-v2 .ps-pay-provider-ext {
    font-size: 0.72rem;
    opacity: .6;
}

#psScene10.ps-scene-pay-v2 .ps-pay-provider:hover {
    color: var(--sj-orange, #F58220);
}

#psScene10.ps-scene-pay-v2 .ps-pay-provider:hover strong {
    color: var(--sj-orange, #F58220);
}

#psScene10.ps-scene-pay-v2 .ps-pay-provider:focus-visible {
    outline: 2px solid var(--sj-orange, #F58220);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ── LEFT pane compaction (~12% tighter vertical rhythm) ──────────────────── */
#psScene10.ps-scene-pay-v2 .ps-left {
    padding: 14px 24px 12px;
    gap: 0;
}

#psScene10.ps-scene-pay-v2 .ps-question {
    margin: 4px 0 4px;
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
}

#psScene10.ps-scene-pay-v2 .ps-subtitle {
    margin: 0 0 10px;
    line-height: 1.45;
}

#psScene10.ps-scene-pay-v2 .ps-pay-v2-summary {
    margin-bottom: 10px;
}

#psScene10.ps-scene-pay-v2 .ps-pay-v2-summary-row {
    padding-top: 7px;
    padding-bottom: 7px;
}

#psScene10.ps-scene-pay-v2 .ps-nav {
    margin-top: 12px;
}

/* ── Short-frame guard (landscape phones, split-screen): let the pane scroll
      rather than crush Peach's form. The flex host shrinks to its min, then the
      pane scrolls — still no page-level bleed. ──────────────────────────────── */
@media (max-height: 680px) {
    #psScene10.ps-scene-pay-v2 .ps-paysurface-embed-wrap {
        min-height: 420px;
    }
}

@media (prefers-reduced-motion: reduce) {

    #psScene10.ps-scene-pay-v2 .ps-paysurface-refresh.is-loading i,
    #psScene10.ps-scene-pay-v2 .ps-pay-embed-spin {
        animation: none;
    }
}