/* ==========================================================
   SimplPay Aurora Glass AI
   PATCH-SIMPLPAY-022G-03E
   Modal + Sheet System
   ========================================================== */


/* ==========================================================
   Overlay
   ========================================================== */

.modal {
    background:
        rgba(
            8,
            15,
            30,
            .30
        );

    backdrop-filter:
        blur(12px)
        saturate(125%);

    -webkit-backdrop-filter:
        blur(12px)
        saturate(125%);
}


/* ==========================================================
   Modal Card
   ========================================================== */

.modal-card {
    position:
        relative;

    overflow:
        hidden;

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.86),
            rgba(255,255,255,.48)
        );

    box-shadow:
        0 34px 110px rgba(15,23,42,.30),
        inset 0 1px 0 rgba(255,255,255,.62);

    backdrop-filter:
        blur(34px)
        saturate(150%);

    -webkit-backdrop-filter:
        blur(34px)
        saturate(150%);
}


.modal-card::before {
    content: "";

    position: absolute;

    top: -100px;
    right: -80px;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(99,102,241,.18),
            transparent 70%
        );

    filter:
        blur(16px);
}


.modal-card::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 0;

    height: 1px;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.86),
            transparent
        );
}


/* ==========================================================
   Modal Header
   ========================================================== */

.modal-head {
    position: relative;

    z-index: 2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        var(--sp-space-3);

    margin-bottom:
        var(--sp-space-4);
}


.modal-head h2,
.modal-head h3,
.modal-head h4 {
    margin:
        0;

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

    font-weight:
        var(--sp-weight-black);

    letter-spacing:
        -.03em;
}


/* ==========================================================
   Modal Close Buttons
   ========================================================== */

.modal-close,
.close-button,
.close-modal-button {
    width:
        42px;

    height:
        42px;

    border-radius:
        14px;

    display:
        grid;

    place-items:
        center;

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

    background:
        var(--sp-glass-bg-soft);

    border:
        1px solid
        var(--sp-glass-border-soft);

    box-shadow:
        var(--sp-shadow-xs);

    transition:
        transform
        var(--sp-transition-spring),
        color
        var(--sp-transition-fast),
        background
        var(--sp-transition-fast);
}


.modal-close:hover,
.close-button:hover,
.close-modal-button:hover {
    color:
        var(--sp-primary);

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

    transform:
        translateY(-1px);
}


/* ==========================================================
   Modal Body
   ========================================================== */

.modal-body {
    position:
        relative;

    z-index:
        2;

    color:
        var(--sp-text-secondary);
}


/* ==========================================================
   Modal Footer
   ========================================================== */

.modal-footer,
.modal-actions {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        var(--sp-space-3);

    margin-top:
        var(--sp-space-5);
}


/* ==========================================================
   Modal Primary Buttons
   ========================================================== */

.modal-card
button.primary,
.modal-card
.primary-button,
.modal-card
.confirm-button,
.modal-card
.save-button {
    color:
        var(--sp-white);

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

    border:
        1px solid
        rgba(255,255,255,.18);

    box-shadow:
        var(--sp-shadow-glow-primary);

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


.modal-card
button.primary:hover,
.modal-card
.primary-button:hover,
.modal-card
.confirm-button:hover,
.modal-card
.save-button:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 20px 44px rgba(79,70,229,.30);
}


/* ==========================================================
   Form Controls inside Modal
   ========================================================== */

.modal-card input,
.modal-card textarea,
.modal-card select {
    color:
        var(--sp-text-primary);

    background:
        var(--sp-input-bg);

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

    border-radius:
        15px;

    backdrop-filter:
        blur(var(--sp-glass-blur-sm));

    -webkit-backdrop-filter:
        blur(var(--sp-glass-blur-sm));

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


.modal-card input:focus,
.modal-card textarea:focus,
.modal-card select:focus {
    border-color:
        var(--sp-primary-400);

    box-shadow:
        var(--sp-focus-ring);
}


/* ==========================================================
   Modal Section Cards
   ========================================================== */

.modal-card .section,
.modal-card .panel,
.modal-card .preview-card,
.modal-card .summary-card {
    background:
        var(--sp-glass-bg-soft);

    border:
        1px solid
        var(--sp-glass-border-soft);

    border-radius:
        18px;

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


/* ==========================================================
   Mobile Bottom Sheet Behavior
   ========================================================== */

@media (max-width: 767px) {

    .modal {
        align-items:
            flex-end;
    }

    .modal-card {
        width:
            calc(
                100%
                -
                16px
            );

        max-height:
            min(
                88dvh,
                820px
            );

        margin:
            0 auto
            max(
                8px,
                env(safe-area-inset-bottom)
            );

        border-radius:
            28px
            28px
            24px
            24px;

        animation:
            sp-sheet-enter
            360ms
            var(--sp-ease-spring)
            both;
    }

    .modal-card::before {
        top:
            -120px;

        right:
            -70px;
    }

}


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

@media (max-width: 767px) {

    .modal-card::marker {
        display:
            none;
    }

    .modal-card
    .sp-modal-grab {
        width:
            42px;

        height:
            5px;

        margin:
            0 auto
            14px;

        border-radius:
            999px;

        background:
            var(--sp-border-strong);
    }

}


/* ==========================================================
   Dark Theme
   ========================================================== */

html[data-sp-theme="dark"]
.modal {
    background:
        rgba(0,0,0,.46);
}


html[data-sp-theme="dark"]
.modal-card {
    background:
        linear-gradient(
            145deg,
            rgba(15,23,42,.94),
            rgba(15,23,42,.70)
        );

    border-color:
        rgba(255,255,255,.10);

    box-shadow:
        0 36px 120px rgba(0,0,0,.52),
        inset 0 1px 0 rgba(255,255,255,.05);
}


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

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

    .modal-card,
    .modal-close,
    .close-button,
    .close-modal-button {
        animation:
            none !important;

        transition:
            none !important;
    }

}