:root {
    --pay-primary: #5b5ce2;
    --pay-primary-dark: #4748c7;
    --pay-bg: #f5f7fb;
    --pay-text: #182230;
    --pay-muted: #667085;
    --pay-border: #e4e7ec;
}

/* Mobile-first base styles */
body {
    min-height: 100vh;
    color: var(--pay-text);
    background: var(--pay-bg);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.payment-wrapper { width: 100%; max-width: 460px; padding: 16px; }
.payment-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--pay-border);
    border-radius: 18px;
    box-shadow: 0 14px 40px rgba(16, 24, 40, .08);
}
.brand-icon {
    display: inline-grid;
    width: 44px;
    height: 44px;
    color: #fff;
    background: var(--pay-primary);
    border-radius: 13px;
    place-items: center;
}
.payment-row { padding: 15px 0; border-bottom: 1px solid var(--pay-border); }
.payment-row:last-child { border-bottom: 0; }
.payment-label { color: var(--pay-muted); font-size: .875rem; }
.btn-payment {
    min-height: 52px;
    color: #fff;
    background: var(--pay-primary);
    border: 0;
    border-radius: 12px;
    font-weight: 600;
}
.btn-payment:hover, .btn-payment:focus { color: #fff; background: var(--pay-primary-dark); }
.btn-payment:disabled { color: #fff; background: #8e8fea; }
.security-text { color: var(--pay-muted); font-size: .78rem; }

@media (min-width: 576px) {
    .payment-wrapper { padding: 24px; }
    .payment-card { border-radius: 22px; }
}


.currency-inr{
    &::before{
        content: "\20B9";
    }
}

.currency-usd{
    &::before{
        content: "\24";
    }
}

.currency-eur{
    &::before{
        content: "\20AC";
    }
}

.currency-gbp{
    &::before{
        content: "\A3";
    }
}

.currency-bdt{
    &::before{
        content: "\09F3";
    }
}

.currency-php{
    &::before{
        content: "\20B1";
    }
}

.currency-thb{
    &::before{
        content: "\0E3F";
    }
}

.currency-aed{
    &::before{
        content: "AED";
    }
}

.currency-aud{
    &::before{
        content: "AUD";
    }
}

.currency-bhd{
    &::before{
        content: "BHD";
    }
}

.currency-btn{
    &::before{
        content: "BTN";
    }
}

.currency-brl{
    &::before{
        content: "BRL";
    }
}

.currency-cad{
    &::before{
        content: "CAD";
    }
}

.currency-fjd{
    &::before{
        content: "FJD";
    }
}

.currency-khr{
    &::before{
        content: "KHR";
    }
}

.currency-zar{
    &::before{
        content: "ZAR";
    }
}

.currency-kwd{
    &::before{
        content: "KWD";
    }
}

.currency-lkr{
    &::before{
        content: "LKR";
    }
}

.currency-ngn{
    &::before{
        content: "NGN";
    }
}

.currency-npr{
    &::before{
        content: "NPR";
    }
}

.currency-nzd{
    &::before{
        content: "NZD";
    }
}

.currency-omr{
    &::before{
        content: "OMR";
    }
}

.currency-qar{
    &::before{
        content: "QAR";
    }
}

.currency-sar{
    &::before{
        content: "SAR";
    }
}

.currency-sgd{
    &::before{
        content: "SGD";
    }
}

.currency-myr{
    &::before{
        content: "MYR";
    }
}

.currency-kes{
    &::before{
        content: "KES";
    }
}

.currency-jod{
    &::before{
        content: "JOD";
    }
}

.currency-vnd{
    &::before{
        content: "VND";
    }
}