/* ==========================================================
   SimplPay Aurora Glass AI
   PATCH-SIMPLPAY-022G-03F
   Payment Form + Review Experience
   ========================================================== */


/* ==========================================================
   Payment Form
   ========================================================== */

.field {
    position: relative;
}

.field label {
    color:
        var(--sp-text-secondary);

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

    letter-spacing:
        -.01em;
}


/* ==========================================================
   Input Surface
   ========================================================== */

.input-wrap {
    position:
        relative;

    isolation:
        isolate;
}

.input-wrap input {
    position:
        relative;

    z-index:
        2;

    min-height:
        58px;

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.68),
            rgba(255,255,255,.40)
        );

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.42),
        0 8px 22px rgba(15,23,42,.05);

    backdrop-filter:
        blur(18px)
        saturate(135%);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(135%);

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


.input-wrap input:hover {
    border-color:
        var(--sp-border-strong);
}


.input-wrap input:focus {
    border-color:
        var(--sp-primary-400);

    box-shadow:
        var(--sp-focus-ring),
        0 12px 30px rgba(79,70,229,.08);

    background:
        var(--sp-glass-bg-strong);
}


/* ==========================================================
   Input Icon
   ========================================================== */

.input-icon {
    z-index:
        3;

    display:
        grid;

    place-items:
        center;

    color:
        var(--sp-primary);

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

    border-radius:
        9px;

    pointer-events:
        none;

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


.input-wrap:focus-within
.input-icon {
    transform:
        translateY(-50%)
        scale(1.06);

    color:
        var(--sp-primary-600);
}


/* ==========================================================
   Amount Input
   ========================================================== */

.amount-input input {
    min-height:
        68px;

    font-size:
        clamp(
            26px,
            7vw,
            34px
        );

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

    letter-spacing:
        -.035em;

    font-variant-numeric:
        tabular-nums;
}


.amount-input .input-icon {
    font-size:
        22px;
}


/* ==========================================================
   Quick Amounts
   ========================================================== */

.quick-amounts {
    position:
        relative;
}

.quick-amount {
    isolation:
        isolate;

    overflow:
        hidden;

    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(16px);

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


.quick-amount::before {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    opacity:
        0;

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

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


.quick-amount:hover,
.quick-amount.sp-amount-selected {
    color:
        #ffffff;

    border-color:
        transparent;

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


.quick-amount:hover::before,
.quick-amount.sp-amount-selected::before {
    opacity:
        1;
}


/* ==========================================================
   Recipient Validation State
   ========================================================== */

.input-wrap.sp-valid input {
    border-color:
        rgba(16,185,129,.48);

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


.input-wrap.sp-invalid input {
    border-color:
        rgba(239,68,68,.50);

    box-shadow:
        0 0 0 4px rgba(239,68,68,.09);
}


/* ==========================================================
   Payment Review
   ========================================================== */

.payment-review-card,
.review-card {
    position:
        relative;

    overflow:
        hidden;

    padding:
        var(--sp-space-5);

    border-radius:
        22px;

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

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

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

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

    backdrop-filter:
        blur(26px)
        saturate(145%);

    -webkit-backdrop-filter:
        blur(26px)
        saturate(145%);
}


.payment-review-card::before,
.review-card::before {
    content:
        "";

    position:
        absolute;

    top:
        -90px;

    right:
        -70px;

    width:
        190px;

    height:
        190px;

    border-radius:
        50%;

    pointer-events:
        none;

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

    filter:
        blur(18px);
}


/* ==========================================================
   Review Rows
   ========================================================== */

.review-row,
.payment-review-row {
    position:
        relative;

    z-index:
        1;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

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

    padding:
        13px
        0;

    border-bottom:
        1px solid
        var(--sp-border-subtle);
}


.review-row:last-child,
.payment-review-row:last-child {
    border-bottom:
        0;
}


.review-label,
.payment-review-label {
    color:
        var(--sp-text-tertiary);

    font-size:
        var(--sp-font-size-xs);

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


.review-value,
.payment-review-value {
    min-width:
        0;

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

    font-size:
        var(--sp-font-size-sm);

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

    text-align:
        right;

    overflow-wrap:
        anywhere;
}


/* ==========================================================
   Review Amount
   ========================================================== */

.review-amount,
.payment-review-amount {
    color:
        var(--sp-primary);

    font-size:
        clamp(
            30px,
            8vw,
            44px
        );

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

    letter-spacing:
        -.04em;

    font-variant-numeric:
        tabular-nums;
}


/* ==========================================================
   Review Recipient
   ========================================================== */

.review-recipient,
.payment-review-recipient {
    display:
        flex;

    align-items:
        center;

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


.review-avatar,
.payment-review-avatar {
    width:
        48px;

    height:
        48px;

    flex:
        0 0 auto;

    border-radius:
        16px;

    display:
        grid;

    place-items:
        center;

    color:
        #ffffff;

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

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

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

    text-transform:
        uppercase;
}


/* ==========================================================
   Review Warning / Notice
   ========================================================== */

.payment-review-warning,
.review-warning {
    padding:
        12px
        14px;

    margin-top:
        var(--sp-space-4);

    border:
        1px solid
        rgba(245,158,11,.24);

    border-radius:
        15px;

    color:
        var(--sp-warning-strong);

    background:
        rgba(245,158,11,.09);

    font-size:
        11px;

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

    line-height:
        1.55;
}


/* ==========================================================
   UPI App Grid
   ========================================================== */

.upi-app-grid {
    gap:
        11px;
}


.upi-app-button,
.upi-app-option {
    position:
        relative;

    overflow:
        hidden;

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

    border-radius:
        18px;

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

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

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

    backdrop-filter:
        blur(18px);

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

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


.upi-app-button:hover,
.upi-app-option:hover {
    transform:
        translateY(-2px);

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

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


/* ==========================================================
   Payment App Selected
   ========================================================== */

.upi-app-button.sp-selected,
.upi-app-option.sp-selected {
    border-color:
        var(--sp-primary-400);

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

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


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

.pay-button {
    position:
        relative;

    overflow:
        hidden;

    isolation:
        isolate;

    min-height:
        60px;

    font-size:
        16px;

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

    letter-spacing:
        -.015em;
}


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

    position:
        absolute;

    z-index:
        -1;

    inset:
        0;

    background:
        radial-gradient(
            circle at 50% 120%,
            rgba(99,102,241,.42),
            transparent 58%
        );

    opacity:
        .65;
}


/* ==========================================================
   Loading Pay State
   ========================================================== */

.pay-button.sp-payment-loading {
    cursor:
        wait;

    pointer-events:
        none;

    opacity:
        .88;
}


.pay-button.sp-payment-loading::before {
    content:
        "";

    width:
        18px;

    height:
        18px;

    margin-right:
        9px;

    border-radius:
        50%;

    border:
        2px solid
        rgba(255,255,255,.32);

    border-top-color:
        #ffffff;

    animation:
        sp-payment-spin
        .75s
        linear
        infinite;
}


@keyframes sp-payment-spin {
    to {
        transform:
            rotate(360deg);
    }
}


/* ==========================================================
   Success State
   ========================================================== */

.sp-payment-success {
    border-color:
        rgba(16,185,129,.40)
        !important;

    box-shadow:
        0 20px 60px rgba(16,185,129,.15)
        !important;
}


.sp-payment-success-icon {
    width:
        64px;

    height:
        64px;

    margin:
        0 auto
        var(--sp-space-4);

    border-radius:
        50%;

    display:
        grid;

    place-items:
        center;

    color:
        #ffffff;

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

    box-shadow:
        0 18px 42px rgba(16,185,129,.26);

    font-size:
        28px;

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

    animation:
        sp-success-pop
        540ms
        var(--sp-ease-spring)
        both;
}


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

html[data-sp-theme="dark"]
.input-wrap input {
    background:
        linear-gradient(
            145deg,
            rgba(15,23,42,.78),
            rgba(15,23,42,.52)
        );
}


html[data-sp-theme="dark"]
.payment-review-card,
html[data-sp-theme="dark"]
.review-card {
    background:
        linear-gradient(
            145deg,
            rgba(15,23,42,.86),
            rgba(15,23,42,.58)
        );
}


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

@media (max-width: 430px) {

    .amount-input input {
        min-height:
            64px;

        font-size:
            27px;
    }

    .review-row,
    .payment-review-row {
        gap:
            10px;
    }

    .review-amount,
    .payment-review-amount {
        font-size:
            34px;
    }

}


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

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

    .input-wrap input,
    .input-icon,
    .quick-amount,
    .upi-app-button,
    .upi-app-option {
        transition:
            none !important;
    }

    .pay-button.sp-payment-loading::before {
        animation:
            none !important;
    }

}