/* ==========================================================
   SimplPay Aurora Glass AI
   PATCH-SIMPLPAY-022G-03C
   Quick Actions + Premium Interaction Layer
   ========================================================== */


/* ==========================================================
   Shared Action Surface
   ========================================================== */

.scan-button,
.pay-button,
.deep-link-import-button,
.contact-picker-button,
.split-payment-button,
.add-favourite-button,
.contact-toolbar-button,
.quick-amount,
.split-add-person-button,
.clear-history-button {
    -webkit-tap-highlight-color:
        transparent;

    user-select:
        none;

    -webkit-user-select:
        none;
}


/* ==========================================================
   Main Pay Actions
   ========================================================== */

.scan-button,
.pay-button {
    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

    transform:
        translateZ(0);
}

.scan-button > *,
.pay-button > * {
    position:
        relative;

    z-index:
        2;
}

.scan-button::after,
.pay-button::after {
    content:
        "";

    position:
        absolute;

    z-index:
        1;

    top:
        -120%;

    left:
        -40%;

    width:
        34%;

    height:
        340%;

    pointer-events:
        none;

    transform:
        rotate(24deg);

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

    transition:
        left
        720ms
        var(--sp-ease-spring);
}

.scan-button:hover::after,
.pay-button:hover::after {
    left:
        135%;
}


/* ==========================================================
   Scan Button AI Glow
   ========================================================== */

.scan-button {
    box-shadow:
        0
        16px
        36px
        rgba(
            79,
            70,
            229,
            .26
        ),
        0
        0
        32px
        rgba(
            6,
            182,
            212,
            .10
        );
}

.scan-button:hover {
    box-shadow:
        0
        22px
        48px
        rgba(
            79,
            70,
            229,
            .34
        ),
        0
        0
        42px
        rgba(
            6,
            182,
            212,
            .15
        );
}


/* ==========================================================
   Pay Button Depth
   ========================================================== */

.pay-button {
    box-shadow:
        0
        17px
        38px
        rgba(
            17,
            24,
            39,
            .24
        ),
        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            .18
        );
}


/* ==========================================================
   Quick Amount Chips
   ========================================================== */

.quick-amount {
    position:
        relative;

    overflow:
        hidden;

    min-height:
        40px;

    padding:
        8px
        6px;

    border-radius:
        13px;

    color:
        var(--sp-primary);

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

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

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

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

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

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

.quick-amount:hover {
    color:
        var(--sp-white);

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

    border-color:
        transparent;

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

    transform:
        translateY(-2px);
}

.quick-amount.sp-amount-selected {
    color:
        var(--sp-white);

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

    border-color:
        transparent;

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

    transform:
        translateY(-1px)
        scale(1.02);
}


/* ==========================================================
   Secondary Action Buttons
   ========================================================== */

.deep-link-import-button,
.contact-picker-button,
.split-payment-button {
    position:
        relative;

    overflow:
        hidden;

    min-height:
        54px;

    border-radius:
        17px;

    font-weight:
        var(--sp-weight-extrabold);
}

.deep-link-import-button::before,
.contact-picker-button::before,
.split-payment-button::before {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    opacity:
        0;

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

    transition:
        opacity
        var(--sp-transition-fast);
}

.deep-link-import-button:hover::before,
.contact-picker-button:hover::before,
.split-payment-button:hover::before {
    opacity:
        1;
}


/* ==========================================================
   Split Payment Specific Accent
   ========================================================== */

.split-payment-button {
    color:
        var(--sp-success-strong);

    border-color:
        var(--sp-border-success);

    background:
        linear-gradient(
            145deg,
            rgba(
                236,
                253,
                245,
                .58
            ),
            rgba(
                240,
                253,
                250,
                .38
            )
        );
}

html[data-sp-theme="dark"]
.split-payment-button {
    background:
        linear-gradient(
            145deg,
            rgba(
                5,
                150,
                105,
                .14
            ),
            rgba(
                8,
                145,
                178,
                .08
            )
        );
}


/* ==========================================================
   Floating Input Icon Treatment
   ========================================================== */

.input-icon,
.contact-search-icon {
    width:
        28px;

    height:
        28px;

    border-radius:
        9px;

    display:
        grid;

    place-items:
        center;

    color:
        var(--sp-primary);

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


/* ==========================================================
   Input Focus AI Halo
   ========================================================== */

.input-wrap {
    position:
        relative;
}

.input-wrap::after {
    content:
        "";

    position:
        absolute;

    pointer-events:
        none;

    inset:
        -3px;

    border-radius:
        20px;

    opacity:
        0;

    background:
        linear-gradient(
            135deg,
            rgba(
                79,
                70,
                229,
                .16
            ),
            rgba(
                139,
                92,
                246,
                .10
            ),
            rgba(
                6,
                182,
                212,
                .14
            )
        );

    filter:
        blur(12px);

    z-index:
        -1;

    transition:
        opacity
        var(--sp-transition-fast);
}

.input-wrap:focus-within::after {
    opacity:
        1;
}


/* ==========================================================
   Favourite Cards Premium State
   ========================================================== */

.favourite-card {
    isolation:
        isolate;
}

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

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    border-radius:
        inherit;

    opacity:
        0;

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

    transition:
        opacity
        var(--sp-transition-fast);
}

.favourite-card:hover::after {
    opacity:
        1;
}

.favourite-card.sp-recipient-selected {
    border-color:
        var(--sp-primary-400);

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


/* ==========================================================
   Recent Payment Action
   ========================================================== */

.recent-payment-item {
    position:
        relative;

    overflow:
        hidden;
}

.recent-payment-item::after {
    content:
        "";

    position:
        absolute;

    right:
        -60px;

    top:
        50%;

    width:
        110px;

    height:
        110px;

    border-radius:
        50%;

    transform:
        translateY(-50%);

    pointer-events:
        none;

    background:
        radial-gradient(
            circle,
            rgba(
                99,
                102,
                241,
                .10
            ),
            transparent 68%
        );
}

.recent-payment-item:hover::after {
    background:
        radial-gradient(
            circle,
            rgba(
                99,
                102,
                241,
                .16
            ),
            transparent 68%
        );
}


/* ==========================================================
   More Menu Icons
   ========================================================== */

.more-menu-icon {
    position:
        relative;

    overflow:
        hidden;

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

.more-menu-card:hover
.more-menu-icon {
    transform:
        translateY(-2px)
        scale(1.05);

    box-shadow:
        0
        16px
        34px
        rgba(
            79,
            70,
            229,
            .26
        );
}


/* ==========================================================
   Bottom Navigation Premium Active Indicator
   ========================================================== */

.mobile-nav-button {
    position:
        relative;
}

.mobile-nav-button::after {
    content:
        "";

    position:
        absolute;

    left:
        50%;

    bottom:
        4px;

    width:
        0;

    height:
        3px;

    border-radius:
        var(--sp-radius-pill);

    transform:
        translateX(-50%);

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

    transition:
        width
        var(--sp-transition-spring);
}

.mobile-nav-button.active::after {
    width:
        24px;

    background:
        rgba(
            255,
            255,
            255,
            .74
        );
}


/* ==========================================================
   AI Activity Dot
   ========================================================== */

.sp-ai-status-dot {
    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    display:
        inline-block;

    background:
        var(--sp-success);

    box-shadow:
        0
        0
        0
        4px
        rgba(
            16,
            185,
            129,
            .12
        );

    animation:
        sp-ai-status-pulse
        2.3s
        ease-in-out
        infinite;
}

@keyframes sp-ai-status-pulse {
    0%,
    100% {
        box-shadow:
            0
            0
            0
            4px
            rgba(
                16,
                185,
                129,
                .10
            );
    }

    50% {
        box-shadow:
            0
            0
            0
            8px
            rgba(
                16,
                185,
                129,
                0
            );
    }
}


/* ==========================================================
   Touch State
   ========================================================== */

.sp-action-pressed {
    transform:
        scale(.965)
        !important;
}


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

@media (
    max-width:
    430px
) {

    .quick-amounts {
        gap:
            7px;
    }

    .quick-amount {
        min-height:
            38px;

        font-size:
            12px;
    }

    .deep-link-import-button,
    .contact-picker-button,
    .split-payment-button {
        min-height:
            52px;
    }

}


/* ==========================================================
   Touch Device
   ========================================================== */

@media (
    hover:
    none
)
and (
    pointer:
    coarse
) {

    .quick-amount:hover,
    .favourite-card:hover,
    .recent-payment-item:hover,
    .more-menu-card:hover {
        transform:
            none;
    }

}


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

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

    .scan-button::after,
    .pay-button::after,
    .more-menu-icon,
    .mobile-nav-button::after {
        transition:
            none !important;
    }

    .sp-ai-status-dot {
        animation:
            none !important;
    }

}