/* ==========================================================
   MintPay
   PATCH-MINTPAY-003
   QR Scanner Mobile Visibility Hotfix

   Fixes:
   - Scanner modal content clipped
   - Bottom actions hidden
   - iPhone actions stacking vertically
   - Camera preview consuming excessive viewport height
   ========================================================== */


/* ==========================================================
   Scanner Modal Must Scroll
   ========================================================== */

#scannerModal {
    overflow:
        hidden;
}


#scannerModal .modal-card {
    /*
     * Aurora modal foundation uses overflow:hidden.
     * Scanner modal needs scrolling because camera + controls
     * can exceed the mobile viewport.
     */
    overflow-x:
        hidden !important;

    overflow-y:
        auto !important;

    overscroll-behavior:
        contain;

    -webkit-overflow-scrolling:
        touch;

    scrollbar-width:
        none;
}


#scannerModal .modal-card::-webkit-scrollbar {
    display:
        none;
}


/* ==========================================================
   Scanner Stage
   ========================================================== */

#scannerModal .scanner-stage {
    position:
        relative;

    width:
        100%;

    /*
     * Prevent camera preview from consuming the entire
     * iPhone viewport.
     */
    height:
        clamp(
            250px,
            43dvh,
            410px
        );

    min-height:
        250px;

    max-height:
        410px;

    overflow:
        hidden;

    flex:
        0 0 auto;

    border-radius:
        22px;
}


/* ==========================================================
   Camera Video
   ========================================================== */

#scannerModal .scanner-stage video,
#scannerModal #scannerVideo {
    width:
        100% !important;

    height:
        100% !important;

    min-height:
        0 !important;

    max-height:
        none !important;

    display:
        block;

    object-fit:
        cover;

    border-radius:
        inherit;
}


/* ==========================================================
   QR Frame
   ========================================================== */

#scannerModal .scanner-frame {
    width:
        min(
            68%,
            270px
        );

    max-height:
        calc(
            100%
            -
            34px
        );
}


/* ==========================================================
   Scanner Status
   ========================================================== */

#scannerModal .scanner-status {
    flex:
        0 0 auto;

    min-height:
        48px;

    margin:
        12px
        0
        0;

    padding:
        10px
        12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        15px;

    line-height:
        1.4;
}


/* ==========================================================
   IMPORTANT FIX
   Keep ALL 3 scanner actions on one row.
   Existing mobile CSS changed this to one column.
   ========================================================== */

#scannerModal .scanner-actions,
#scannerModal .qr-scanner-actions {
    width:
        100%;

    display:
        grid !important;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        ) !important;

    gap:
        8px !important;

    margin-top:
        12px;

    flex:
        0 0 auto;
}


/* ==========================================================
   Scanner Buttons
   ========================================================== */

#scannerModal .scanner-action,
#scannerModal .scanner-action-button,
#scannerModal .switch-camera-button,
#scannerModal .scan-image-button,
#scannerModal .camera-switch-button {
    width:
        100%;

    min-width:
        0;

    min-height:
        46px;

    padding:
        7px
        5px;

    border-radius:
        14px;

    overflow:
        hidden;

    font-size:
        11px;

    font-weight:
        800;

    line-height:
        1.2;

    text-align:
        center;

    white-space:
        normal;

    text-overflow:
        ellipsis;
}


/* ==========================================================
   Scanner Note
   ========================================================== */

#scannerModal .scanner-note {
    flex:
        0 0 auto;

    margin:
        12px
        0
        2px;

    padding-bottom:
        max(
            4px,
            env(safe-area-inset-bottom)
        );
}


/* ==========================================================
   iPhone / Mobile Bottom Sheet
   ========================================================== */

@media (max-width: 767px) {

    #scannerModal {
        align-items:
            flex-end;

        padding:
            max(
                8px,
                env(safe-area-inset-top)
            )
            8px
            max(
                8px,
                env(safe-area-inset-bottom)
            );
    }


    #scannerModal .modal-card {
        width:
            100% !important;

        /*
         * Use dynamic viewport height so Safari address/tool
         * bars are accounted for.
         */
        max-height:
            calc(
                100dvh
                -
                max(
                    16px,
                    env(safe-area-inset-top)
                )
                -
                max(
                    16px,
                    env(safe-area-inset-bottom)
                )
            ) !important;

        margin:
            0 !important;

        padding:
            18px
            16px
            calc(
                18px
                +
                env(safe-area-inset-bottom)
            );

        border-radius:
            28px
            28px
            22px
            22px;
    }


    #scannerModal .modal-head {
        position:
            sticky;

        top:
            0;

        z-index:
            20;

        margin:
            -4px
            -2px
            14px;

        padding:
            4px
            2px
            8px;

        /*
         * Keeps heading/close button readable while the
         * scanner content scrolls.
         */
        background:
            linear-gradient(
                to bottom,
                var(--sp-surface-4) 72%,
                transparent
            );
    }


    #scannerModal .scanner-stage {
        height:
            clamp(
                245px,
                42dvh,
                390px
            );
    }


    /*
     * Explicitly override BOTH legacy and Aurora rules:
     *
     * @media(max-width:390px) .scanner-actions {1fr}
     * @media(max-width:430px) .scanner-actions {1fr}
     */
    #scannerModal .scanner-actions,
    #scannerModal .qr-scanner-actions {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            ) !important;
    }

}


/* ==========================================================
   Narrow iPhone
   ========================================================== */

@media (max-width: 390px) {

    #scannerModal .modal-card {
        padding-left:
            14px;

        padding-right:
            14px;
    }


    #scannerModal .scanner-stage {
        height:
            clamp(
                230px,
                39dvh,
                350px
            );

        min-height:
            230px;
    }


    #scannerModal .scanner-action {
        min-height:
            44px;

        padding:
            6px
            3px;

        font-size:
            10px;
    }

}


/* ==========================================================
   Very Short Viewports
   ========================================================== */

@media (max-height: 700px) {

    #scannerModal .scanner-stage {
        height:
            235px;

        min-height:
            235px;
    }


    #scannerModal .scanner-status {
        min-height:
            42px;

        padding:
            7px
            10px;
    }


    #scannerModal .scanner-actions {
        margin-top:
            8px;
    }

}


/* ==========================================================
   PWA Standalone
   ========================================================== */

@media (display-mode: standalone)
and (max-width: 767px) {

    #scannerModal .modal-card {
        padding-bottom:
            calc(
                18px
                +
                env(safe-area-inset-bottom)
            );
    }

}


/* ==========================================================
   Reduced Motion
   ========================================================== */

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

    #scannerModal .scanner-line {
        animation:
            none !important;
    }

}


/* ==========================================================
   END PATCH-MINTPAY-003
   ========================================================== */


/* ==========================================================
   PATCH-MINTPAY-003B
   QR CAMERA WINDOW CENTER + FIT

   Goal:
   - Camera viewport centered
   - QR frame exactly centered
   - No oversized/cropped scanner frame
   - Equal spacing around frame
   - Works on iPhone / Android
   ========================================================== */


/* ==========================================================
   Main Camera Window
   ========================================================== */

#scannerModal .scanner-stage,
#scannerModal .qr-scanner-container,
#scannerModal .scanner-container {

    position:
        relative !important;

    width:
        100% !important;

    /*
     * Keep camera window proportionate instead of
     * becoming excessively tall.
     */
    aspect-ratio:
        4 / 5 !important;

    height:
        auto !important;

    min-height:
        0 !important;

    max-height:
        min(
            54dvh,
            460px
        ) !important;

    margin:
        0 auto !important;

    overflow:
        hidden !important;

    border-radius:
        24px !important;

    background:
        #020617;

}


/* ==========================================================
   Camera Video Fit
   ========================================================== */

#scannerModal .scanner-stage video,
#scannerModal .qr-scanner-container video,
#scannerModal .scanner-container video,
#scannerModal #scannerVideo,
#scannerModal #qrVideo {

    position:
        absolute !important;

    inset:
        0 !important;

    width:
        100% !important;

    height:
        100% !important;

    max-width:
        none !important;

    max-height:
        none !important;

    margin:
        0 !important;

    object-fit:
        cover !important;

    object-position:
        center center !important;

    border-radius:
        inherit !important;

}


/* ==========================================================
   QR Scan Frame
   Exact Center
   ========================================================== */

#scannerModal .scanner-frame,
#scannerModal .qr-scanner-frame {

    position:
        absolute !important;

    left:
        50% !important;

    top:
        50% !important;

    /*
     * Square scanner area.
     * Fit comfortably inside the camera viewport.
     */
    width:
        min(
            72%,
            280px
        ) !important;

    height:
        auto !important;

    aspect-ratio:
        1 / 1 !important;

    min-width:
        0 !important;

    min-height:
        0 !important;

    max-width:
        calc(
            100%
            -
            44px
        ) !important;

    max-height:
        calc(
            100%
            -
            44px
        ) !important;

    margin:
        0 !important;

    transform:
        translate(
            -50%,
            -50%
        ) !important;

    border-radius:
        24px !important;

    overflow:
        hidden;

    box-sizing:
        border-box;

}


/* ==========================================================
   Scanner Line Must Stay Inside Center Frame
   ========================================================== */

#scannerModal .scanner-frame .scanner-line,
#scannerModal .qr-scanner-frame .qr-scanner-line,
#scannerModal .scanner-line,
#scannerModal .qr-scanner-line {

    left:
        8% !important;

    right:
        8% !important;

    width:
        auto !important;

}


/* ==========================================================
   Center Frame Visual Overlay
   ========================================================== */

#scannerModal .scanner-frame::before,
#scannerModal .qr-scanner-frame::before {

    inset:
        0 !important;

    border-radius:
        inherit !important;

}


/* ==========================================================
   Mobile Portrait
   ========================================================== */

@media (max-width: 767px) {

    #scannerModal .scanner-stage,
    #scannerModal .qr-scanner-container,
    #scannerModal .scanner-container {

        /*
         * Slightly shorter than previous implementation,
         * giving controls enough room underneath.
         */
        width:
            100% !important;

        aspect-ratio:
            4 / 5 !important;

        max-height:
            50dvh !important;

    }


    #scannerModal .scanner-frame,
    #scannerModal .qr-scanner-frame {

        width:
            min(
                74%,
                275px
            ) !important;

        left:
            50% !important;

        top:
            50% !important;

        transform:
            translate(
                -50%,
                -50%
            ) !important;

    }

}


/* ==========================================================
   iPhone Narrow Screens
   ========================================================== */

@media (max-width: 430px) {

    #scannerModal .scanner-stage,
    #scannerModal .qr-scanner-container,
    #scannerModal .scanner-container {

        aspect-ratio:
            4 / 5 !important;

        max-height:
            48dvh !important;

        border-radius:
            22px !important;

    }


    #scannerModal .scanner-frame,
    #scannerModal .qr-scanner-frame {

        width:
            min(
                76%,
                255px
            ) !important;

        max-width:
            calc(
                100%
                -
                36px
            ) !important;

        max-height:
            calc(
                100%
                -
                36px
            ) !important;

        border-radius:
            22px !important;

    }

}


/* ==========================================================
   Very Narrow iPhone
   ========================================================== */

@media (max-width: 390px) {

    #scannerModal .scanner-frame,
    #scannerModal .qr-scanner-frame {

        width:
            min(
                75%,
                235px
            ) !important;

    }

}


/* ==========================================================
   Short Height Devices
   ========================================================== */

@media (max-height: 700px) {

    #scannerModal .scanner-stage,
    #scannerModal .qr-scanner-container,
    #scannerModal .scanner-container {

        max-height:
            42dvh !important;

    }


    #scannerModal .scanner-frame,
    #scannerModal .qr-scanner-frame {

        width:
            min(
                68%,
                220px
            ) !important;

    }

}


/* ==========================================================
   Landscape
   ========================================================== */

@media (orientation: landscape)
and (max-height: 600px) {

    #scannerModal .scanner-stage,
    #scannerModal .qr-scanner-container,
    #scannerModal .scanner-container {

        width:
            min(
                100%,
                540px
            ) !important;

        aspect-ratio:
            16 / 9 !important;

        max-height:
            56dvh !important;

    }


    #scannerModal .scanner-frame,
    #scannerModal .qr-scanner-frame {

        width:
            min(
                42%,
                220px
            ) !important;

    }

}


/* ==========================================================
   END PATCH-MINTPAY-003B
   ========================================================== */


/* ==========================================================
   PATCH-MINTPAY-004
   MORE MENU MOBILE OVERFLOW / SCROLL FIX

   Fixes:
   - More sheet extending behind Safari toolbar
   - Session Security content clipped
   - Bottom options inaccessible
   - Header scrolling away
   - iPhone safe-area overlap
   ========================================================== */


/* ==========================================================
   More Modal Overlay
   ========================================================== */

#moreMenuModal {
    overflow:
        hidden !important;

    overscroll-behavior:
        contain;
}


/* ==========================================================
   More Modal Card
   Must scroll internally.
   ========================================================== */

#moreMenuModal .modal-card {
    display:
        flex !important;

    flex-direction:
        column !important;

    overflow-x:
        hidden !important;

    overflow-y:
        auto !important;

    overscroll-behavior:
        contain;

    -webkit-overflow-scrolling:
        touch;

    scrollbar-width:
        none;

    /*
     * Prevent content from disappearing behind
     * Safari / iPhone bottom browser controls.
     */
    max-height:
        calc(
            100dvh
            -
            max(
                20px,
                env(safe-area-inset-top)
            )
            -
            max(
                20px,
                env(safe-area-inset-bottom)
            )
        ) !important;

    padding-bottom:
        calc(
            28px
            +
            env(safe-area-inset-bottom)
        ) !important;
}


#moreMenuModal .modal-card::-webkit-scrollbar {
    display:
        none;
}


/* ==========================================================
   More Header
   Keep More + Close button visible during scrolling.
   ========================================================== */

#moreMenuModal .modal-head {
    position:
        sticky !important;

    top:
        0 !important;

    z-index:
        30 !important;

    flex:
        0 0 auto;

    margin:
        -4px
        -2px
        18px !important;

    padding:
        5px
        2px
        12px !important;

    background:
        linear-gradient(
            to bottom,
            rgba(
                255,
                255,
                255,
                .94
            )
            68%,
            rgba(
                255,
                255,
                255,
                .74
            )
            84%,
            transparent
        );

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);
}


/* ==========================================================
   Grab Handle
   ========================================================== */

#moreMenuModal .sp-modal-grab {
    flex:
        0 0 auto;

    margin-bottom:
        12px;
}


/* ==========================================================
   More Menu Grid
   Never allow grid to collapse outside modal.
   ========================================================== */

#moreMenuModal .more-menu-grid {
    width:
        100%;

    flex:
        0 0 auto;

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        12px;

    overflow:
        visible;
}


/* ==========================================================
   More Menu Cards
   ========================================================== */

#moreMenuModal .more-menu-card {
    width:
        100%;

    min-width:
        0;

    min-height:
        128px;

    margin:
        0;

    flex:
        none;
}


/* ==========================================================
   Session Security Section
   ========================================================== */

#moreMenuModal .session-security,
#moreMenuModal .security-section,
#moreMenuModal .session-security-card,
#moreMenuModal [class*="session-security"] {
    width:
        100%;

    flex:
        0 0 auto;

    overflow:
        visible !important;

    margin-top:
        18px;

    margin-bottom:
        8px;
}


/* ==========================================================
   Security / Settings Cards
   Prevent nested content clipping.
   ========================================================== */

#moreMenuModal .security-card,
#moreMenuModal .settings-card,
#moreMenuModal .more-version-card,
#moreMenuModal [class*="security-card"],
#moreMenuModal [class*="settings-card"] {
    overflow:
        visible !important;

    flex:
        0 0 auto;
}


/* ==========================================================
   Select / Inputs
   ========================================================== */

#moreMenuModal select,
#moreMenuModal input,
#moreMenuModal button {
    max-width:
        100%;
}


/* ==========================================================
   Last Child
   Give enough bottom clearance.
   ========================================================== */

#moreMenuModal .modal-card > :last-child {
    margin-bottom:
        max(
            16px,
            env(safe-area-inset-bottom)
        );
}


/* ==========================================================
   iPhone / Mobile
   ========================================================== */

@media (max-width: 767px) {

    #moreMenuModal {
        align-items:
            flex-end !important;

        padding:
            max(
                8px,
                env(safe-area-inset-top)
            )
            8px
            max(
                8px,
                env(safe-area-inset-bottom)
            )
            !important;
    }


    #moreMenuModal .modal-card {
        width:
            100% !important;

        height:
            auto !important;

        max-height:
            calc(
                100dvh
                -
                max(
                    16px,
                    env(safe-area-inset-top)
                )
                -
                max(
                    16px,
                    env(safe-area-inset-bottom)
                )
            )
            !important;

        margin:
            0 !important;

        padding:
            18px
            16px
            calc(
                30px
                +
                env(safe-area-inset-bottom)
            )
            !important;

        border-radius:
            28px
            28px
            22px
            22px
            !important;
    }


    #moreMenuModal .more-menu-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            )
            !important;

        gap:
            12px !important;
    }

}


/* ==========================================================
   Small iPhone
   ========================================================== */

@media (max-width: 390px) {

    #moreMenuModal .modal-card {
        padding-left:
            14px !important;

        padding-right:
            14px !important;
    }


    #moreMenuModal .more-menu-grid {
        gap:
            10px !important;
    }


    #moreMenuModal .more-menu-card {
        min-height:
            116px;
    }

}


/* ==========================================================
   Short Mobile Screen
   ========================================================== */

@media (max-height: 700px) {

    #moreMenuModal .more-menu-card {
        min-height:
            104px;
    }


    #moreMenuModal .more-menu-icon {
        width:
            40px;

        height:
            40px;

        margin-bottom:
            4px;
    }


    #moreMenuModal .more-menu-grid {
        gap:
            9px !important;
    }

}


/* ==========================================================
   Dark Mode Sticky Header
   ========================================================== */

html[data-sp-theme="dark"]
#moreMenuModal .modal-head {
    background:
        linear-gradient(
            to bottom,
            rgba(
                15,
                23,
                42,
                .97
            )
            68%,
            rgba(
                15,
                23,
                42,
                .82
            )
            84%,
            transparent
        );
}


/* ==========================================================
   PWA Standalone
   ========================================================== */

@media (display-mode: standalone)
and (max-width: 767px) {

    #moreMenuModal .modal-card {
        max-height:
            calc(
                100dvh
                -
                env(safe-area-inset-top)
                -
                env(safe-area-inset-bottom)
                -
                16px
            )
            !important;

        padding-bottom:
            calc(
                30px
                +
                env(safe-area-inset-bottom)
            )
            !important;
    }

}


/* ==========================================================
   END PATCH-MINTPAY-004
   ========================================================== */


/* ==========================================================
   PATCH-MINTPAY-006
   Contact Search Manual Fallback
   ========================================================== */

#contactPickerModal
.contact-manual-result {
    width:
        100%;

    display:
        grid;

    grid-template-columns:
        48px
        minmax(
            0,
            1fr
        );

    align-items:
        center;

    gap:
        13px;

    padding:
        14px;

    margin-top:
        8px;

    text-align:
        left;

    border-radius:
        18px;

    cursor:
        pointer;

    color:
        var(--sp-text-primary);

    background:
        linear-gradient(
            145deg,
            rgba(
                255,
                255,
                255,
                .70
            ),
            rgba(
                255,
                255,
                255,
                .38
            )
        );

    border:
        1px solid
        var(--sp-border-primary);

    box-shadow:
        0
        12px
        28px
        rgba(
            79,
            70,
            229,
            .09
        );

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);

    transition:
        transform
        var(--sp-transition-spring),
        box-shadow
        var(--sp-transition-fast),
        border-color
        var(--sp-transition-fast);
}


#contactPickerModal
.contact-manual-result:hover {
    transform:
        translateY(-2px);

    border-color:
        var(--sp-primary-400);

    box-shadow:
        var(--sp-shadow-md);
}


#contactPickerModal
.contact-manual-result
.contact-result-avatar {
    color:
        #ffffff;

    font-size:
        25px;

    font-weight:
        700;

    background:
        linear-gradient(
            135deg,
            #4f46e5,
            #8b5cf6,
            #06b6d4
        );
}


#contactPickerModal
.contact-manual-result
.contact-result-source {
    display:
        inline-flex;

    margin-top:
        5px;

    padding:
        3px
        7px;

    border-radius:
        999px;

    color:
        var(--sp-primary);

    background:
        var(--sp-gradient-primary-soft);

    border:
        1px solid
        var(--sp-border-primary);

    font-size:
        9px;

    font-weight:
        800;
}


/* ==========================================================
   Contact picker mobile scrolling
   ========================================================== */

#contactPickerModal .modal-card {
    overflow-x:
        hidden !important;

    overflow-y:
        auto !important;

    -webkit-overflow-scrolling:
        touch;

    overscroll-behavior:
        contain;
}


@media (max-width: 767px) {

    #contactPickerModal .modal-card {
        max-height:
            calc(
                100dvh
                -
                max(
                    16px,
                    env(
                        safe-area-inset-top
                    )
                )
                -
                max(
                    16px,
                    env(
                        safe-area-inset-bottom
                    )
                )
            )
            !important;

        padding-bottom:
            calc(
                24px
                +
                env(
                    safe-area-inset-bottom
                )
            )
            !important;
    }

}


/* ==========================================================
   END PATCH-MINTPAY-006
   ========================================================== */


/* ==========================================================
   PATCH-MINTPAY-010
   LARGE MODAL / BOTTOM SHEET OVERFLOW FIX

   Targets:
   - Split Payment
   - Receive / Collect Money
   - Generate & Share Payment Request

   Goals:
   - Modal stays inside usable mobile viewport
   - Content scrolls internally
   - Header remains visible
   - Buttons/fields at bottom remain reachable
   - Safari bottom toolbar does not hide content
   ========================================================== */


/* ==========================================================
   Common large-sheet overlay behaviour
   ========================================================== */

#splitPaymentModal,
#collectMoneyModal,
#paymentRequestModal,
#generatePaymentRequestModal,
#sharePaymentRequestModal {

    overflow:
        hidden !important;

    overscroll-behavior:
        contain;
}


/* ==========================================================
   Common large-sheet card behaviour
   ========================================================== */

#splitPaymentModal .modal-card,
#collectMoneyModal .modal-card,
#paymentRequestModal .modal-card,
#generatePaymentRequestModal .modal-card,
#sharePaymentRequestModal .modal-card {

    display:
        flex !important;

    flex-direction:
        column !important;

    overflow-x:
        hidden !important;

    overflow-y:
        auto !important;

    overscroll-behavior:
        contain;

    -webkit-overflow-scrolling:
        touch;

    scrollbar-width:
        none;

    max-height:
        calc(
            100dvh
            -
            max(
                16px,
                env(safe-area-inset-top)
            )
            -
            max(
                16px,
                env(safe-area-inset-bottom)
            )
        )
        !important;

    padding-bottom:
        calc(
            28px
            +
            env(safe-area-inset-bottom)
        )
        !important;
}


#splitPaymentModal .modal-card::-webkit-scrollbar,
#collectMoneyModal .modal-card::-webkit-scrollbar,
#paymentRequestModal .modal-card::-webkit-scrollbar,
#generatePaymentRequestModal .modal-card::-webkit-scrollbar,
#sharePaymentRequestModal .modal-card::-webkit-scrollbar {

    display:
        none;
}


/* ==========================================================
   Sticky headers
   ========================================================== */

#splitPaymentModal .modal-head,
#collectMoneyModal .modal-head,
#paymentRequestModal .modal-head,
#generatePaymentRequestModal .modal-head,
#sharePaymentRequestModal .modal-head {

    position:
        sticky !important;

    top:
        0 !important;

    z-index:
        30 !important;

    flex:
        0 0 auto;

    margin:
        -4px
        -2px
        16px
        !important;

    padding:
        5px
        2px
        10px
        !important;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,.96)
            68%,
            rgba(255,255,255,.78)
            84%,
            transparent
        );

    backdrop-filter:
        blur(22px);

    -webkit-backdrop-filter:
        blur(22px);
}


/* ==========================================================
   Grab handles
   ========================================================== */

#splitPaymentModal .sp-modal-grab,
#collectMoneyModal .sp-modal-grab,
#paymentRequestModal .sp-modal-grab,
#generatePaymentRequestModal .sp-modal-grab,
#sharePaymentRequestModal .sp-modal-grab {

    flex:
        0 0 auto;

    margin-bottom:
        10px;
}


/* ==========================================================
   Split Payment
   ========================================================== */

#splitPaymentModal .split-summary-card,
#splitPaymentModal .split-mode-toggle,
#splitPaymentModal .split-participants,
#splitPaymentModal .split-result-card,
#splitPaymentModal .split-balance-message,
#splitPaymentModal .split-actions {

    flex:
        0 0 auto;
}


#splitPaymentModal .split-participants {

    overflow:
        visible !important;
}


#splitPaymentModal .split-participant-row {

    overflow:
        visible !important;

    flex:
        0 0 auto;
}


#splitPaymentModal .split-summary-card {

    margin-bottom:
        14px;
}


#splitPaymentModal .split-mode-toggle {

    margin-bottom:
        16px;
}


#splitPaymentModal .split-participant-row:last-child {

    margin-bottom:
        8px;
}


/* ==========================================================
   Collect Money
   ========================================================== */

#collectMoneyModal .collect-money-card,
#collectMoneyModal .collect-money-form,
#collectMoneyModal .collect-money-preview,
#collectMoneyModal .collect-money-actions,
#collectMoneyModal .qr-request-card,
#collectMoneyModal .request-qr-container {

    overflow:
        visible !important;

    flex:
        0 0 auto;
}


#collectMoneyModal .request-qr-container,
#collectMoneyModal .collect-money-preview {

    max-width:
        100%;
}


#collectMoneyModal img,
#collectMoneyModal canvas,
#collectMoneyModal svg {

    max-width:
        100%;

    height:
        auto;
}


/* ==========================================================
   Payment Request / Generate & Share
   ========================================================== */

#paymentRequestModal .payment-request-card,
#paymentRequestModal .payment-request-form,
#paymentRequestModal .payment-request-preview,
#paymentRequestModal .payment-request-actions,
#generatePaymentRequestModal .payment-request-card,
#generatePaymentRequestModal .payment-request-form,
#generatePaymentRequestModal .payment-request-preview,
#generatePaymentRequestModal .payment-request-actions,
#sharePaymentRequestModal .payment-request-card,
#sharePaymentRequestModal .payment-request-form,
#sharePaymentRequestModal .payment-request-preview,
#sharePaymentRequestModal .payment-request-actions {

    overflow:
        visible !important;

    flex:
        0 0 auto;
}


#paymentRequestModal img,
#paymentRequestModal canvas,
#paymentRequestModal svg,
#generatePaymentRequestModal img,
#generatePaymentRequestModal canvas,
#generatePaymentRequestModal svg,
#sharePaymentRequestModal img,
#sharePaymentRequestModal canvas,
#sharePaymentRequestModal svg {

    max-width:
        100%;

    height:
        auto;
}


/* ==========================================================
   Form controls
   ========================================================== */

#splitPaymentModal input,
#splitPaymentModal select,
#splitPaymentModal textarea,
#collectMoneyModal input,
#collectMoneyModal select,
#collectMoneyModal textarea,
#paymentRequestModal input,
#paymentRequestModal select,
#paymentRequestModal textarea,
#generatePaymentRequestModal input,
#generatePaymentRequestModal select,
#generatePaymentRequestModal textarea,
#sharePaymentRequestModal input,
#sharePaymentRequestModal select,
#sharePaymentRequestModal textarea {

    max-width:
        100%;

    box-sizing:
        border-box;
}


/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width: 767px) {

    #splitPaymentModal,
    #collectMoneyModal,
    #paymentRequestModal,
    #generatePaymentRequestModal,
    #sharePaymentRequestModal {

        align-items:
            flex-end !important;

        padding:
            max(
                8px,
                env(safe-area-inset-top)
            )
            8px
            max(
                8px,
                env(safe-area-inset-bottom)
            )
            !important;
    }


    #splitPaymentModal .modal-card,
    #collectMoneyModal .modal-card,
    #paymentRequestModal .modal-card,
    #generatePaymentRequestModal .modal-card,
    #sharePaymentRequestModal .modal-card {

        width:
            100% !important;

        height:
            auto !important;

        margin:
            0 !important;

        max-height:
            calc(
                100dvh
                -
                max(
                    16px,
                    env(safe-area-inset-top)
                )
                -
                max(
                    16px,
                    env(safe-area-inset-bottom)
                )
            )
            !important;

        padding:
            18px
            16px
            calc(
                30px
                +
                env(safe-area-inset-bottom)
            )
            !important;

        border-radius:
            28px
            28px
            22px
            22px
            !important;
    }

}


/* ==========================================================
   Narrow iPhone
   ========================================================== */

@media (max-width: 430px) {

    #splitPaymentModal .modal-card,
    #collectMoneyModal .modal-card,
    #paymentRequestModal .modal-card,
    #generatePaymentRequestModal .modal-card,
    #sharePaymentRequestModal .modal-card {

        padding-left:
            14px !important;

        padding-right:
            14px !important;
    }


    #splitPaymentModal .split-summary-card {

        gap:
            10px !important;
    }


    #splitPaymentModal .split-mode-toggle {

        grid-template-columns:
            1fr
            1fr !important;
    }


    #splitPaymentModal .split-participant-row {

        padding:
            12px !important;
    }

}


/* ==========================================================
   Short-height devices
   ========================================================== */

@media (max-height: 700px) {

    #splitPaymentModal .modal-card,
    #collectMoneyModal .modal-card,
    #paymentRequestModal .modal-card,
    #generatePaymentRequestModal .modal-card,
    #sharePaymentRequestModal .modal-card {

        max-height:
            94dvh
            !important;
    }


    #splitPaymentModal .split-summary-card {

        margin-bottom:
            10px;
    }

}


/* ==========================================================
   Dark mode sticky headers
   ========================================================== */

html[data-sp-theme="dark"]
#splitPaymentModal .modal-head,
html[data-sp-theme="dark"]
#collectMoneyModal .modal-head,
html[data-sp-theme="dark"]
#paymentRequestModal .modal-head,
html[data-sp-theme="dark"]
#generatePaymentRequestModal .modal-head,
html[data-sp-theme="dark"]
#sharePaymentRequestModal .modal-head {

    background:
        linear-gradient(
            to bottom,
            rgba(15,23,42,.97)
            68%,
            rgba(15,23,42,.84)
            84%,
            transparent
        );
}


/* ==========================================================
   Standalone PWA
   ========================================================== */

@media (display-mode: standalone)
and (max-width: 767px) {

    #splitPaymentModal .modal-card,
    #collectMoneyModal .modal-card,
    #paymentRequestModal .modal-card,
    #generatePaymentRequestModal .modal-card,
    #sharePaymentRequestModal .modal-card {

        max-height:
            calc(
                100dvh
                -
                env(safe-area-inset-top)
                -
                env(safe-area-inset-bottom)
                -
                12px
            )
            !important;

        padding-bottom:
            calc(
                30px
                +
                env(safe-area-inset-bottom)
            )
            !important;
    }

}


/* ==========================================================
   END PATCH-MINTPAY-010
   ========================================================== */