/*==================================================
1. PAGE
==================================================*/

body{background:#F7F9FC;}

#main-content{
padding:0 0 60px;
}

.et_pb_section_0_tb_body{
padding:30px 0 20px!important;
}

.et_pb_row_0_tb_body,
.et_pb_row_1_tb_body{
width:92%!important;
max-width:1180px!important;
margin-left:auto!important;
margin-right:auto!important;
padding:0!important;
}

/* Remove Divi row spacing */

.et_pb_row_0_tb_body{
margin-top:0!important;
margin-bottom:10px!important;
padding-top:0!important;
padding-bottom:0!important;
}

.et_pb_row_1_tb_body{
margin-top:0!important;
padding-top:0!important;
}
/*==================================================
2. HEADER
==================================================*/
.vom-checkout-left{
max-width:720px;
margin:0 auto!important;
padding:0!important;
text-align:center;
}

.vom-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 18px;
background:#F5F8FC;
border:1px solid #DCE5EE;
border-radius:50px;
font-size:13px;
font-weight:600;
color:#0B2A4A;
margin-bottom:18px;
}

.vom-checkout-left h2{
font-size:48px;
font-weight:800;
line-height:1.1;
color:#0B2A4A;
margin:8px 0 10px;
}

.vom-checkout-left p{
font-size:18px;
line-height:1.6;
color:#667085;
max-width:650px;
margin:0 auto;
}


/*==================================================
3. CHECKOUT LAYOUT
==================================================*/

.masteriyo-checkout{
max-width:1180px;
margin:auto;
}

.masteriyo-checkout-wrapper{
display:grid;
grid-template-columns:68% 32%;
gap:35px;
align-items:start;
}

.masteriyo-checkout-summary{
display:flex !important;
flex-direction:column !important;
gap:8px !important;
}
/*==================================================
4. PAYMENT CARD
==================================================*/

.masteriyo-checkout-main{
background:#FFF;
padding:30px;
border:1px solid #E5EAF0;
border-radius:18px;
box-shadow:0 18px 45px rgba(15,42,68,.08);
}

.masteriyo-checkout--title{
font-size:30px;
font-weight:700;
color:#0B2A4A;
margin:0 0 20px;
}


/*==================================================
5. FORM GRID
==================================================*/

.masteriyo-checkout---fname-lname-wrapper{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin-bottom:18px;
}

.masteriyo-checkout---email-wrapper{
margin-bottom:18px;
}


/*==================================================
6. LABELS
==================================================*/

.masteriyo-label{
display:block;
margin-bottom:8px;
font-size:14px;
font-weight:600;
color:#344054;
}

.masteriyo-label span{
color:#D92D20;
}


/*==================================================
7. INPUTS
==================================================*/

.masteriyo-input{
width:100%;
height:56px;
padding:0 18px;
background:#FFF;
border:1px solid #D9E2EA;
border-radius:12px;
font-size:15px;
transition:.25s;
}

.masteriyo-input:hover{
border-color:#BFCBD8;
}

.masteriyo-input:focus{
outline:none;
border-color:#0B2A4A;
box-shadow:0 0 0 4px rgba(11,42,74,.08);
}


/*==================================================
8. CREATE USER
==================================================*/

.masteriyo-checkout----create-user{
display:flex;
align-items:center;
gap:10px;
margin-top:10px;
}

.masteriyo-checkout----create-user input{
width:18px;
height:18px;
accent-color:#0B2A4A;
}

.masteriyo-checkout----create-user label{
margin:0;
font-size:15px;
font-weight:500;
}
/*==================================================
9. ORDER SUMMARY
==================================================*/

.masteriyo-checkout-summary{
background:#FFF;
padding:22px;
border:1px solid #E5EAF0;
border-radius:18px;
box-shadow:0 18px 45px rgba(15,42,68,.08);
position:sticky;
top:25px;
}

.masteriyo-checkout-summary-your-order{
padding:0;
margin:0;
background:none;
border:none;
box-shadow:none;
}

.masteriyo-checkout-summary--title{
font-size:28px;
font-weight:700;
color:#0B2A4A;
margin:0 0 25px;
}

.masteriyo-checkout-summary-order-details{
list-style:none;
margin:0;
padding:0;
}

.masteriyo-checkout-summary-order-details li{
display:flex;
justify-content:space-between;
align-items:flex-start;
padding:12px 0;
border-bottom:1px solid #EEF2F6;
font-size:15px;
color:#344054;
}

.masteriyo-checkout-summary-order-details li:first-child{
font-weight:700;
color:#0B2A4A;
}

.masteriyo-total-row{
padding-top:24px!important;
border-bottom:none!important;
font-size:18px;
font-weight:700;
color:#0B2A4A;
}

.masteriyo-price-amount{
font-weight:700;
color:#0B2A4A;
}

.tax_inclusive{
display:block;
font-size:12px;
color:#667085;
margin-top:2px;
}


/*==================================================
10. COUPON
==================================================*/

.masteriyo-checkout-summary-apply-coupon{
display:grid;
grid-template-columns:1fr auto;
gap:10px;
margin-top:12px;
padding-top:12px;
border-top:1px solid #EEF2F6;
}

.masteriyo-checkout-summary-apply-coupon .masteriyo-label{
grid-column:1/-1;
margin-bottom:0;
}

.masteriyo-checkout-summary-apply-coupon .masteriyo-input{
height:50px;
}

.masteriyo-apply-coupon-btn{
height:50px;
padding:0 22px;
background:#FFF;
border:1px solid #D9E2EA;
border-radius:10px;
font-size:14px;
font-weight:600;
color:#0B2A4A;
cursor:pointer;
transition:.25s;
}

.masteriyo-apply-coupon-btn:hover{
background:#F6F8FB;
border-color:#0B2A4A;
}


/*==================================================
11. PAYMENT METHOD
==================================================*/

.masteriyo-checkout-summary-payment-method{
margin-top:15px;
padding:18px;
border:1px solid #E5EAF0;
border-radius:12px;
background:#F8FAFD;
}

.masteriyo-payment-methods{
list-style:none;
margin:0;
padding:0;
}

.payment-method{
margin:0;
padding:0;
border:none;
}

.payment-method__detail>.masteriyo-label{
font-size:15px;
font-weight:700;
color:#0B2A4A;
margin-bottom:8px;
}

.payment-box{
background:none;
border:none;
padding:0;
margin:0;
font-size:14px;
color:#667085;
box-shadow:none;
}


/*==================================================
12. BUTTON
==================================================*/

#masteriyo-place-order{
width:100%;
height:60px;
margin-top:15px;
background:#0B2A4A;
color:#FFF;
border:none;
border-radius:12px;
font-size:17px;
font-weight:700;
cursor:pointer;
box-shadow:0 15px 35px rgba(11,42,74,.20);
transition:.25s;
}

#masteriyo-place-order:hover{
background:#17406D;
transform:translateY(-2px);
}


/*==================================================
13. TABLET
==================================================*/

@media(max-width:980px){

.masteriyo-checkout-wrapper{
grid-template-columns:1fr;
}

.masteriyo-checkout-summary{
position:static;
margin-top:30px;
}

.vom-checkout-left h2{
font-size:38px;
}

}


/*==================================================
14. MOBILE
==================================================*/

@media(max-width:767px){

.vom-checkout-left{
margin-bottom:30px;
}

.vom-checkout-left h2{
font-size:32px;
}

.vom-checkout-left p{
font-size:16px;
}

.masteriyo-checkout-main,
.masteriyo-checkout-summary{
padding:25px;
}

.masteriyo-checkout---fname-lname-wrapper{
grid-template-columns:1fr;
gap:20px;
}

.masteriyo-checkout--title,
.masteriyo-checkout-summary--title{
font-size:24px;
}

.masteriyo-checkout-summary-apply-coupon{
grid-template-columns:1fr;
}

.masteriyo-apply-coupon-btn{
width:100%;
}

#masteriyo-place-order{
height:56px;
font-size:16px;
}

}


/*==================================================
15. ANIMATION
==================================================*/

.masteriyo-checkout-main,
.masteriyo-checkout-summary,
.masteriyo-input,
.masteriyo-apply-coupon-btn,
#masteriyo-place-order{
transition:all .25s ease;
}