:root{

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

    --primary:#007bc4;
    --primary-dark:#000c8c;

    --text:#1a1a1a;
    --muted:#888888;

    --background:#ffffff;
    --section:#f2f8fc;

    --border:#dddddd;

    --radius:0.375rem; /* 6px */

    --shadow:0 0.5rem 1.5rem rgba(0,0,0,.08); /* 8px 24px */

    --transition:.25s ease;

    --container:47.5rem; /* 760px */

}

html{
    font-size:16px; /* 1rem = 16px */
}

@media (max-width:768px){
    html{
        font-size:15px;
    }
}

@media (max-width:480px){
    html{
        font-size:13px;
    }
}

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:var(--font-main);

    background:var(--primary);

    color:var(--text);

    font-size:0.9375rem; /* 15px */

    line-height:1.5;

    -webkit-font-smoothing:antialiased;

}

img{
    max-width:100%;
    display:block;
}

a{

    color:var(--primary);

    text-decoration:none;

    transition:var(--transition);

}

a:hover{

    color:var(--primary-dark);

}

button,
input,
select{

    font-family:inherit;

    font-size:0.9375rem; /* 15px */

    outline:none;

}

.site-header{

    width:100%;

    background:#fff;

    position:sticky;

    top:0;

    z-index:100;

}

.container{

    width:100%;

    max-width:68.75rem; /* 1100px */

    margin:auto;

    padding:1.125rem 1.5rem; /* 18px 24px */

}

.logo{

    font-size:1.875rem; /* 30px */

    font-weight:700;

    color:var(--section);

    background:var(--primary-dark);

    text-align:center;

    letter-spacing:0.03125rem; /* 0.5px */

    padding-top:1rem; /* 16px */

} 

.logo svg{

    width:6rem; /* 96px */

    height:auto;

}

.logo svg path{
    fill:var(--section) !important;
}


.checkout-wrapper{

    padding:2.125rem 1.25rem; /* 50px 20px */

}

.checkout-container{

    max-width:var(--container);

    margin:auto;

    background:#fff;

    border:0.0625rem solid var(--border); /* 1px */

    border-radius:0.625rem; /* 10px */

    box-shadow:var(--shadow);

    overflow:hidden;

}

#checkoutForm{

    padding:2.625rem; /* 42px */

}

.form-section{

    margin-bottom:2.125rem; /* 34px */

}

.form-section:last-child{

    margin-bottom:0;

}

.form-section h2{

    font-size:1rem; /* 16px */

    font-weight:600;

    margin-bottom:1.125rem; /* 18px */

    color:var(--text);

}

.section-description{

    color:var(--muted);

    margin-bottom:1.375rem; /* 22px */

    font-size:0.875rem; /* 14px */

}


.grid-2{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:1rem; /* 16px */

    margin-bottom:1rem; /* 16px */

}

.input-group{

    margin-bottom:1rem; /* 16px */

}



.phone-row{

    display:flex;

    gap:0.75rem; /* 12px */

}

.phone-code{

    width:8.125rem; /* 130px */

    flex-shrink:0;

}


input,
select{

    width:100%;

    height:3rem; /* 48px */

    padding:0 0.9375rem; /* 15px */

    border:0.0625rem solid var(--border); /* 1px */

    border-radius:var(--radius);

    background:#fff;

    color:var(--text);

    transition:var(--transition);

}

input::placeholder{

    color:#9b9b9b;

}

select{

    cursor:pointer;

    appearance:none;

    -webkit-appearance:none;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%23777' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:right 0.875rem center; /* 14px */

    background-size:1.125rem; /* 18px */

    padding-right:2.5rem; /* 40px */

}

input:focus,
select:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 0.25rem rgba(0,123,196,.12); /* 4px */

}



.password-wrapper{

    position:relative;

}

.password-wrapper input{

    padding-right:3.125rem; /* 50px */

}

.password-toggle{
    position:absolute;
    top:50%;
    right:0.5rem;
    transform:translateY(-50%);

    display:flex;
    align-items:center;
    justify-content:center;

    width:2rem;
    height:2rem;

    border:none;
    background:none;
    cursor:pointer;
    padding:0;
}

.password-toggle svg{
    width:1.25rem;
    height:auto;
    fill:#b5b5b5;
    transition:fill .25s ease;
}

.password-toggle.active svg{
    fill:var(--primary);
}



.payment-box{

    border:0.0625rem solid var(--border); /* 1px */

    border-radius:0.5rem; /* 8px */

    overflow:hidden;

    background:#fff;

}

.payment-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:1rem 1.25rem; /* 16px 20px */

    background:var(--section);

    border-bottom:0.0625rem solid var(--border); /* 1px */

}

.radio-label{

    display:flex;

    align-items:center;

    gap:0.625rem; /* 10px */

    font-weight:500;

}

.radio-label input{

    width:1.125rem; /* 18px */

    height:1.125rem; /* 18px */

    accent-color:var(--primary);

}

.lock{

    font-size:1.25rem; /* 20px */

    opacity:.75;

}

.payment-box .input-group{

    padding:1.125rem 1.25rem 0; /* 18px 20px 0 */

    margin-bottom:1.125rem; /* 18px */

}

.payment-box .input-group:last-child{

    padding-top:0;

}

.payment-box .grid-2{

    padding:0 1.25rem; /* 0 20px */

}

.payment-box label.checkbox{

    display:flex;

    align-items:center;

    gap:0.625rem; /* 10px */

    padding:1.125rem 1.25rem 1.25rem; /* 18px 20px 20px */

    font-size:0.875rem; /* 14px */

    color:#555;

}

.payment-box label.checkbox input{

    width:1.125rem; /* 18px */

    height:1.125rem; /* 18px */

    accent-color:var(--primary);

}


.cta-section{

    margin-top:2.1875rem; /* 35px */

}

.pay-button{

    width:100%;

    height:3.5rem; /* 56px */

    border:none;

    border-radius:var(--radius);

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    color:#fff;

    font-size:1rem; /* 16px */

    font-weight:600;

    letter-spacing:0.03125rem; /* 0.5px */

    cursor:pointer;

    transition:var(--transition);

}

.pay-button:hover{

    transform:translateY(-0.125rem); /* -2px */

    box-shadow:0 0.75rem 1.75rem rgba(0,123,196,.28); /* 12px 28px */

}

.pay-button:active{

    transform:scale(.98);

}


.terms-section{

    margin-top:1.5rem; /* 24px */

    text-align:center;

    font-size:0.8125rem; /* 13px */

    color:#666;

    line-height:1.7;

}

.terms-section a{

    font-weight:500;

}



.checkout-footer{

    margin-top:1.875rem; /* 30px */

    padding-top:1.5625rem; /* 25px */

    border-top:0.0625rem solid #ededed; /* 1px */

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:1.125rem; /* 18px */

}

.checkout-footer a{

    font-size:0.8125rem; /* 13px */

    color:#666;

}

.checkout-footer a:hover{

    color:var(--primary);

}


input,
select,
button,
a{

    transition:all .25s ease;

}

button:focus,
input:focus,
select:focus{

    outline:none;

}


input:hover,
select:hover{

    border-color:#bcbcbc;

}


button:disabled{

    opacity:.65;

    cursor:not-allowed;

}


@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(1rem); /* 16px */

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

.checkout-container{

    animation:fadeUp .45s ease;

}



::-webkit-scrollbar{

    width:0.625rem; /* 10px */

}

::-webkit-scrollbar-track{

    background:#f4f4f4;

}

::-webkit-scrollbar-thumb{

    background:#b8b8b8;

    border-radius:1.25rem; /* 20px */

}

::-webkit-scrollbar-thumb:hover{

    background:#999;

}


@media (max-width:768px){

.site-header .container{

    padding:1.125rem; /* 18px */

}

.logo{

    font-size:1.625rem; /* 26px */

}

.trust-bar{

    gap:0.625rem; /* 10px */

    font-size:0.8125rem; /* 13px */

}

.checkout-wrapper{

    padding:1.25rem 0.75rem; /* 20px 12px */

}

#checkoutForm{

    padding:1.5rem; /* 24px */

}

.grid-2{

    grid-template-columns:1fr;

    gap:0.875rem; /* 14px */

}

.phone-row{

    flex-direction:column;

}

.phone-code{

    width:100%;

}

.payment-header{

    gap:0.625rem; /* 10px */

}

.checkout-footer{

    flex-direction:column;

    align-items:center;

    gap:0.75rem; /* 12px */

}

}



@media (max-width:480px){

body{

    font-size:0.875rem; /* 14px */

}

.form-section h2{

    font-size:1.25rem; /* 20px */

}

.pay-button{

    height:3.25rem; /* 52px */

    font-size:0.9375rem; /* 15px */

}

.logo{

    font-size:1.375rem; /* 22px */

}

.trust-bar{

    flex-direction:column;

    gap:0.5rem; /* 8px */

}

.payment-box .input-group{

    padding:1rem 1rem 0; /* 16px 16px 0 */

}

.payment-box .grid-2{

    padding:0 1rem; /* 0 16px */

}

.payment-box label.checkbox{

    padding:1.125rem 1rem; /* 18px 16px */

}

}



@media (min-width:1200px){

.checkout-container{

    max-width:51.25rem; /* 820px */

}

}



.text-center{

    text-align:center;

}

.mt-10{

    margin-top:0.625rem; /* 10px */

}

.mt-20{

    margin-top:1.25rem; /* 20px */

}

.mt-30{

    margin-top:1.875rem; /* 30px */

}

.mb-10{

    margin-bottom:0.625rem; /* 10px */

}

.mb-20{

    margin-bottom:1.25rem; /* 20px */

}

.hidden{

    display:none !important;

}

.w-100{

    width:100%;

}