:root {

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color:
        #f7f8fc;

    background:
        #08090e;
}


* {
    box-sizing:
        border-box;
}


body {

    margin:
        0;

    min-height:
        100vh;

    background:
        #08090e;

    overflow-x:
        hidden;
}


.bg {

    position:
        fixed;

    inset:
        0;

    pointer-events:
        none;

    background:

        radial-gradient(
            circle at 15% 0%,
            rgba(
                117,
                89,
                255,
                .25
            ),
            transparent 35%
        ),

        radial-gradient(
            circle at 90% 20%,
            rgba(
                0,
                220,
                180,
                .10
            ),
            transparent 30%
        );
}


.container {

    position:
        relative;

    width:
        min(
            680px,
            calc(100% - 32px)
        );

    margin:
        70px auto;
}


.narrow {

    width:
        min(
            530px,
            calc(100% - 32px)
        );
}


.hero {

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

    margin-bottom:
        20px;
}


.logo {

    width:
        62px;

    height:
        62px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        19px;

    background:
        linear-gradient(
            135deg,
            #9179ff,
            #523bd7
        );

    font-size:
        30px;

    font-weight:
        950;

    box-shadow:
        0 15px 45px
        rgba(
            93,
            68,
            235,
            .3
        );
}


.logo.small {

    width:
        55px;

    height:
        55px;

    margin:
        0 auto 14px;

    font-size:
        25px;
}


.eyebrow {

    color:
        #9d8eff;

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        .22em;

    margin-bottom:
        5px;
}


h1 {

    margin:
        0;

    font-size:
        clamp(
            30px,
            7vw,
            48px
        );

    line-height:
        1.05;
}


.hero p {

    color:
        #8f95a3;

    margin:
        8px 0 0;
}


.card {

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

    border-radius:
        25px;

    padding:
        28px;

    background:
        rgba(
            18,
            20,
            29,
            .88
        );

    box-shadow:
        0 30px 90px
        rgba(
            0,
            0,
            0,
            .4
        );

    backdrop-filter:
        blur(25px);
}


label {

    display:
        block;

    color:
        #c9ced9;

    font-weight:
        750;

    margin-bottom:
        9px;
}


.money {

    display:
        flex;

    align-items:
        center;

    padding:
        0 18px;

    border:
        1px solid #303542;

    border-radius:
        17px;

    background:
        #0d0f15;

    margin-bottom:
        15px;
}


.money input {

    width:
        100%;

    border:
        0;

    outline:
        0;

    color:
        white;

    background:
        transparent;

    padding:
        17px 0;

    font-size:
        25px;
}


.money span {

    color:
        #8e95a5;

    font-size:
        22px;
}


button,
.primary {

    width:
        100%;

    display:
        block;

    border:
        0;

    border-radius:
        17px;

    padding:
        17px 20px;

    text-align:
        center;

    text-decoration:
        none;

    cursor:
        pointer;

    color:
        white;

    font-size:
        16px;

    font-weight:
        850;

    background:
        linear-gradient(
            135deg,
            #8068ff,
            #5941dc
        );
}


.secondary {

    background:
        #282d39;

    margin-top:
        10px;
}


.pay-link {

    margin:
        20px 0 10px;
}


.error {

    margin-top:
        14px;

    padding:
        14px;

    border-radius:
        14px;

    color:
        #ffb7c7;

    background:
        rgba(
            220,
            50,
            80,
            .13
        );
}


.hidden {
    display:
        none;
}


.payment {

    text-align:
        center;
}


.payment h1 {

    margin-top:
        4px;

    font-size:
        48px;
}


.muted {

    color:
        #9299a8;

    line-height:
        1.6;
}


.loader {

    width:
        37px;

    height:
        37px;

    margin:
        20px auto;

    border:
        3px solid #292e3a;

    border-top-color:
        #8872ff;

    border-radius:
        50%;

    animation:
        spin .8s linear infinite;
}


@keyframes spin {

    to {
        transform:
            rotate(360deg);
    }

}


.qr-box {

    margin:
        20px 0;

    min-height:
        200px;

    padding:
        22px;

    display:
        grid;

    place-items:
        center;

    background:
        white;

    border-radius:
        20px;
}


.qr-data {

    color:
        #111;

    word-break:
        break-all;

    font-family:
        monospace;

    font-size:
        12px;

    line-height:
        1.5;
}


.success {

    padding:
        17px;

    margin-top:
        18px;

    border-radius:
        16px;

    background:
        rgba(
            30,
            200,
            140,
            .13
        );

    color:
        #62e5b4;

    font-weight:
        800;
}


.failure {

    padding:
        17px;

    margin-top:
        18px;

    border-radius:
        16px;

    background:
        rgba(
            220,
            50,
            80,
            .13
        );

    color:
        #ff9fb1;

    font-weight:
        800;
}


.info {

    margin-top:
        22px;

    text-align:
        left;

    border-top:
        1px solid #292e38;
}


.info div {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        14px 0;

    border-bottom:
        1px solid #292e38;
}


.info span {

    color:
        #858c9b;
}


.info b {

    max-width:
        65%;

    text-align:
        right;

    word-break:
        break-all;

    font-size:
        12px;
}


@media (
    max-width: 550px
) {

    .container {

        margin:
            25px auto;
    }

    .card {

        padding:
            20px;

        border-radius:
            20px;
    }

}


/* FemPay payment enhancements */

.payment {
    max-width: 460px;
    margin: 0 auto;
    text-align: center;
}

.qr-box {
    width: 320px;
    max-width: 90vw;
    margin: 24px auto;
    padding: 18px;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,.12);
}

.qr-box img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.pay-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
    font-weight: 700;
    border-radius: 16px;
    margin-top: 18px;
}

.timer {
    margin: 20px 0 8px;
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(0,0,0,.045);
    font-size: 14px;
}

.timer b {
    font-variant-numeric: tabular-nums;
}

.hidden {
    display: none !important;
}