/*==================================================
VETANIQUE PAYMENT
Premium Payment UI v2
==================================================*/

:root{

--vt-border:#ead8b0;
--vt-bg:#ffffff;
--vt-text:#1f1b16;
--vt-muted:#786956;

--vt-shadow:0 10px 30px rgba(0,0,0,.06);

--bkash:#E2136E;
--nagad:#F15A24;
--rocket:#7A1FA2;

}

/*=========================================
MAIN CARD
=========================================*/

.vt-payment-card{

background:#fff;

border:1px solid var(--vt-border);

border-radius:28px;

padding:42px;

margin:35px 0;

box-shadow:var(--vt-shadow);

overflow:hidden;

}

/*=========================================
HEADER
=========================================*/

.vt-payment-title{

display:flex;

align-items:center;

gap:18px;

margin-bottom:30px;

}

.vt-payment-icon{

width:64px;

height:64px;

display:flex;

justify-content:center;

align-items:center;

background:#F8F4EC;

border-radius:20px;

font-size:30px;

flex-shrink:0;

}

.vt-payment-title h2{

margin:0;

font-size:34px;

font-weight:700;

color:var(--vt-text);

line-height:1.2;

}

.vt-payment-title p{

margin:8px 0 0;

font-size:16px;

color:var(--vt-muted);

}

/*=========================================
PAYMENT BUTTONS
=========================================*/

.vt-payment-switch{

display:grid;

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

gap:18px;

margin-top:25px;

margin-bottom:35px;

}

.vt-payment-method{

height:64px;

border:none;

border-radius:18px;

font-size:22px;

font-weight:700;

color:#fff;

cursor:pointer;

transition:.25s;

box-shadow:0 10px 20px rgba(0,0,0,.08);

}

.vt-payment-method:hover{

transform:translateY(-4px);

}

.vt-payment-method.active{

transform:translateY(-3px);

box-shadow:0 14px 30px rgba(0,0,0,.15);

}

.vt-payment-method[data-method="bkash"]{

background:linear-gradient(135deg,#ff2d7d,#d10f64);

}

.vt-payment-method[data-method="nagad"]{

background:linear-gradient(135deg,#ff742f,#f04a11);

}

.vt-payment-method[data-method="rocket"]{

background:linear-gradient(135deg,#8f2ec7,#6d1ca0);

}




/*=========================================
PAYMENT ACCOUNT CARD
=========================================*/

/*================================================*/
.vt-payment-account{

display:grid;

grid-template-columns:420px 1fr;

gap:50px;

align-items:center;

padding:45px;

border:1px solid #ead8b0;

border-radius:22px;

background:#fff;

margin-top:30px;

}

/*================ LEFT ================*/

.vt-payment-left{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-align:center;

}

.vt-payment-logo-wrap{

width:150px;

height:150px;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:20px;

}

.vt-payment-logo-wrap img{

width:130px;

height:130px;

object-fit:contain;

}

#vt-payment-name{

margin:0 0 20px;

font-size:54px;

font-weight:700;

color:#6d2498;

}

#vt-payment-number{

width:100%;

padding:18px;

font-size:52px;

font-weight:700;

border:3px solid #d8b35d;

border-radius:18px;

margin-bottom:18px;

text-align:center;

}

#vt-payment-type{

padding:12px 28px;

border-radius:999px;

background:#efd5ff;

color:#7A1FA2;

font-weight:700;

}

/*================ RIGHT ================*/

.vt-payment-right{

border-left:1px solid #ececec;

padding-left:45px;

}

.vt-copy-title{

font-size:24px;

font-weight:700;

text-align:center;

margin-bottom:18px;

}

.vt-copy-box{

display:flex;

align-items:center;

justify-content:space-between;

border:2px dashed #d8b6ff;

border-radius:18px;

padding:10px;

margin-bottom:20px;

}

#vt-copy-number{

font-size:42px;

font-weight:700;

color:#6d2498;

padding-left:15px;

}

.vt-copy-icon{

width:70px;

height:70px;

border:none;

border-radius:16px;

background:#6d2498;

color:#fff;

font-size:26px;

cursor:pointer;

}

.vt-copy-note{

text-align:center;

font-size:17px;

line-height:1.8;

color:#666;

}

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

@media(max-width:768px){

.vt-payment-account{

grid-template-columns:1fr;

padding:25px;

gap:35px;

}

.vt-payment-right{

border-left:none;

border-top:1px solid #eee;

padding-left:0;

padding-top:30px;

}

#vt-payment-number{

font-size:28px;

}

#vt-copy-number{

font-size:28px;

}

.vt-copy-box{

flex-wrap:nowrap;

}

}


/*==================================================
PAYMENT STEPS
==================================================*/

.vt-payment-steps{

    max-width:1200px;
    margin:55px auto 0;

}

.vt-payment-steps h3{

    display:flex;
    align-items:center;
    gap:12px;

    margin-bottom:24px;

    font-size:28px;
    font-weight:700;
    color:#1f1b16;

}

/*=========================
GRID
=========================*/

.vt-step-grid{

    display:grid;

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

    gap:18px;

}

/*=========================
CARD
=========================*/

.vt-step-card{

    display:flex;

    align-items:flex-start;

    gap:16px;

    padding:20px;

    background:#fff;

    border:1px solid var(--vt-border);

    border-radius:16px;

    box-shadow:0 6px 18px rgba(0,0,0,.05);

    transition:.25s;

}

.vt-step-card:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 28px rgba(0,0,0,.08);

}

/*=========================
NUMBER
=========================*/

.vt-step-number{

    width:34px;

    height:34px;

    border-radius:50%;

    background:#f3dcff;

    color:#7A1FA2;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:15px;

    font-weight:700;

    flex-shrink:0;

}

/*=========================
ICON
=========================*/

.vt-step-icon{

    width:52px;

    height:52px;

    border-radius:50%;

    background:#faf4ff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    flex-shrink:0;

}

/*=========================
CONTENT
=========================*/

.vt-step-content{

    flex:1;

}

.vt-step-content h4{

    margin:0 0 6px;

    font-size:19px;

    font-weight:700;

    line-height:1.4;

    color:#222;

}

.vt-step-content p{

    margin:0;

    color:#777;

    font-size:15px;

    line-height:1.7;

}

/*=========================
LAST CARD
=========================*/

.vt-step-last{

    grid-column:1/-1;

}

/*=========================
NOTE
=========================*/

.vt-payment-note{

    margin-top:24px;

    padding:18px 22px;

    border-radius:14px;

    background:#faf4ff;

    border:1px solid var(--vt-border);

    color:#7A1FA2;

    font-size:15px;

    font-weight:600;

}

/*=========================
TABLET
=========================*/

@media(max-width:991px){

    .vt-step-grid{

        grid-template-columns:1fr;

    }

    .vt-step-last{

        grid-column:auto;

    }

}

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

@media(max-width:768px){

    .vt-payment-steps{

        margin-top:40px;

    }

    .vt-payment-steps h3{

        font-size:24px;

    }

    .vt-step-card{

        padding:18px;

        gap:14px;

    }

    .vt-step-number{

        width:30px;

        height:30px;

        font-size:14px;

    }

    .vt-step-icon{

        width:44px;

        height:44px;

        font-size:20px;

    }

    .vt-step-content h4{

        font-size:17px;

    }

    .vt-step-content p{

        font-size:14px;

    }

}






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

.vt-payment-title{

display:flex;

align-items:center;

gap:16px;

margin-bottom:25px;

}

.vt-payment-icon{

width:56px;

height:56px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

font-size:26px;

background:#F7F2E8;

}

.vt-payment-title h2{

margin:0;

font-size:28px;

font-weight:700;

color:#1f1b16;

}

.vt-payment-title p{

margin:6px 0 0;

color:#7a6a55;

font-size:15px;

}

.vt-payment-switch{

display:grid;

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

gap:16px;

margin:28px 0;

}

.vt-payment-method{

height:58px;

border:none;

border-radius:16px;

font-size:18px;

font-weight:700;

cursor:pointer;

transition:.25s;

color:#fff;

}

.vt-payment-method:nth-child(1){

background:#E2136E;

}

.vt-payment-method:nth-child(2){

background:#F15A24;

}

.vt-payment-method:nth-child(3){

background:#7A1FA2;

}

.vt-payment-method.active{

transform:translateY(-2px);

box-shadow:0 12px 24px rgba(0,0,0,.18);

}

@media(max-width:768px){

.vt-payment-switch{

grid-template-columns:1fr;

}

.vt-payment-title h2{

font-size:22px;

}

}