/* ===================================================
   PAYMENT DEMO V2
   style.css
=================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:'Poppins',sans-serif;

    background:linear-gradient(135deg,#0d6efd,#00b4ff);

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px 20px;

}

.page{

    width:100%;
    max-width:520px;

}

.payment-card{

    background:#ffffff;

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 25px 70px rgba(0,0,0,.18);

    animation:fadeIn .6s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;
        transform:translateY(25px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

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

.header{

    padding:25px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.header h2{

    color:#222;

    font-size:26px;

    font-weight:700;

}

.header p{

    color:#777;

    font-size:14px;

    margin-top:4px;

}

.header-icons{

    display:flex;

    gap:10px;

}

.brand{

    padding:8px 14px;

    border-radius:8px;

    border:1px solid #ddd;

    font-size:12px;

    font-weight:600;

    transition:.3s;

    background:#fff;

}

.brand.active{

    background:#0d6efd;

    color:#fff;

    border-color:#0d6efd;

}

/* ==========================================
   Credit Card Preview
========================================== */

.credit-card{

    margin:0 25px 25px;

    height:220px;

    border-radius:20px;

    padding:24px;

    color:#fff;

    background:linear-gradient(135deg,#005bea,#00c6fb);

    box-shadow:0 18px 40px rgba(0,123,255,.35);

    position:relative;

    overflow:hidden;

}

.credit-card::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    background:rgba(255,255,255,.08);

    border-radius:50%;

    right:-70px;

    top:-70px;

}

.credit-card::after{

    content:"";

    position:absolute;

    width:170px;

    height:170px;

    background:rgba(255,255,255,.06);

    border-radius:50%;

    left:-60px;

    bottom:-70px;

}

.card-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    position:relative;

    z-index:2;

}

.chip{

    width:60px;

    height:42px;

    border-radius:8px;

    background:linear-gradient(#ffd55b,#e5b939);

}

.wifi{

    font-size:24px;

    transform:rotate(90deg);

}

.card-number-preview{

    margin-top:40px;

    font-size:28px;

    letter-spacing:3px;

    font-weight:500;

    position:relative;

    z-index:2;

}

.card-bottom{

    margin-top:35px;

    display:flex;

    justify-content:space-between;

    position:relative;

    z-index:2;

}

.small{

    font-size:11px;

    opacity:.8;

    margin-bottom:4px;

    text-transform:uppercase;

}

#previewName,
#previewExpiry{

    font-size:16px;

    font-weight:600;

}/* ==========================================
   FORM
========================================== */

form{

    padding:0 25px 30px;

}

label{

    display:block;

    margin-bottom:18px;

    font-size:14px;

    color:#555;

    font-weight:500;

}

.input-icon{

    position:relative;

    margin-top:8px;

}

.input-icon i{

    position:absolute;

    left:16px;

    top:50%;

    transform:translateY(-50%);

    color:#0d6efd;

    font-size:16px;

}

.input-icon input{

    width:100%;

    height:56px;

    border:2px solid #e5e5e5;

    border-radius:14px;

    padding-left:50px;

    padding-right:18px;

    font-size:16px;

    font-family:'Poppins',sans-serif;

    transition:.25s;

    outline:none;

    background:#fff;

}

.input-icon input:hover{

    border-color:#b5d4ff;

}

.input-icon input:focus{

    border-color:#0d6efd;

    box-shadow:0 0 0 4px rgba(13,110,253,.12);

}

/* ==========================================
   TWO COLUMN ROW
========================================== */

.row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

}

/* ==========================================
   PAYMENT SUMMARY
========================================== */

.summary{

    margin-top:12px;

    margin-bottom:22px;

    padding:18px;

    border-radius:14px;

    background:#f8fbff;

    border:1px solid #d7e8ff;

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:17px;

    font-weight:600;

}

.summary div:first-child{

    color:#666;

}

#amountPreview{

    color:#0d6efd;

    font-size:24px;

    font-weight:700;

}

/* ==========================================
   ERROR MESSAGE
========================================== */

#message{

    min-height:26px;

    margin-bottom:16px;

    color:#d93025;

    font-size:14px;

    font-weight:500;

}

/* ==========================================
   PAY BUTTON
========================================== */

button{

    width:100%;

    height:58px;

    border:none;

    border-radius:14px;

    background:linear-gradient(90deg,#0d6efd,#0099ff);

    color:#fff;

    font-size:18px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

    box-shadow:0 12px 25px rgba(13,110,253,.28);

}

button:hover{

    transform:translateY(-2px);

    box-shadow:0 18px 35px rgba(13,110,253,.35);

}

button:active{

    transform:scale(.98);

}

button:disabled{

    opacity:.7;

    cursor:not-allowed;

}

button i{

    margin-right:10px;

}

/* ==========================================
   FOOTER
========================================== */

.footer{

    margin-top:22px;

    text-align:center;

    font-size:13px;

    color:#666;

}

.footer i{

    color:#25b04a;

    margin-right:6px;

}

/* ==========================================
   LOADING
========================================== */

.loading{

    pointer-events:none;

    opacity:.75;

}

/* ==========================================
   INPUT PLACEHOLDER
========================================== */

input::placeholder{

    color:#b4b4b4;

}

/* ==========================================
   MOBILE
========================================== */

@media(max-width:600px){

body{

    padding:15px;

}

.payment-card{

    border-radius:18px;

}

.header{

    flex-direction:column;

    text-align:center;

    gap:18px;

}

.credit-card{

    margin:20px;

    height:205px;

}

.card-number-preview{

    font-size:23px;

    letter-spacing:2px;

}

.card-bottom{

    margin-top:28px;

}

.row{

    grid-template-columns:1fr;

    gap:12px;

}

form{

    padding:20px;

}

button{

    height:56px;

}

}

/* ==========================================
   SMOOTH ANIMATIONS
========================================== */

.brand,
button,
input,
.summary{

    transition:all .25s ease;

}