/*==========================================
RK SPARE PARTS
PREMIUM CHECKOUT
PART 1
==========================================*/

.checkout-breadcrumb{

background:#f8f9fa !important;

padding:16px 0 !important;

border-bottom:1px solid #ececec !important;

}

.checkout-breadcrumb nav{

display:flex !important;

align-items:center !important;

gap:10px !important;

font-size:15px !important;

}

.checkout-breadcrumb a{

text-decoration:none !important;

color:#666 !important;

}

.checkout-breadcrumb a:hover{

color:#198754 !important;

}

.checkout-breadcrumb strong{

color:#222 !important;

font-weight:600 !important;

}



/*===========================*/

.checkout-header{

background:#f5f6f8 !important;

padding:45px 0 30px !important;

}

.checkout-heading{

text-align:center !important;

}

.checkout-heading h1{

font-size:42px !important;

font-weight:700 !important;

margin-bottom:10px !important;

color:#222 !important;

}

.checkout-heading p{

font-size:16px !important;

color:#777 !important;

}



/*===========================*/

.checkout-page{

background:#f5f6f8 !important;

padding:20px 0 70px !important;

}



/*===========================*/

.checkout-card{

background:#fff !important;

border-radius:18px !important;

padding:35px !important;

box-shadow:0 10px 30px rgba(0,0,0,.06)!important;

}



.card-title{

margin-bottom:30px !important;

padding-bottom:20px !important;

border-bottom:1px solid #ececec !important;

}



.card-title h3{

font-size:30px !important;

font-weight:700 !important;

margin-bottom:8px !important;

color:#222 !important;

}



.card-title h3 i{

color:#198754 !important;

margin-right:10px !important;

}



.card-title p{

margin:0 !important;

color:#777 !important;

font-size:15px !important;

}



/*===========================*/

.checkout-card label{

font-size:14px !important;

font-weight:600 !important;

margin-bottom:8px !important;

color:#333 !important;

display:block !important;

}



.checkout-card .form-control{

height:54px !important;

border-radius:12px !important;

border:1px solid #ddd !important;

padding:12px 18px !important;

font-size:15px !important;

box-shadow:none !important;

transition:.30s !important;

}



.checkout-card textarea.form-control{

height:120px !important;

resize:none !important;

padding-top:15px !important;

}



.checkout-card .form-control:focus{

border-color:#198754 !important;

box-shadow:0 0 0 4px rgba(25,135,84,.10)!important;

}
/*==========================================
PAYMENT METHOD
==========================================*/

.payment-title{

font-size:18px !important;

font-weight:700 !important;

margin-bottom:18px !important;

color:#222 !important;

}

.payment-methods{

display:flex !important;

flex-direction:column !important;

gap:18px !important;

margin-bottom:25px !important;

}

.payment-card{

position:relative !important;

}

.payment-card input{

display:none !important;

}

.payment-card label{

display:flex !important;

align-items:center !important;

justify-content:space-between !important;

padding:22px !important;

background:#fff !important;

border:2px solid #ececec !important;

border-radius:16px !important;

cursor:pointer !important;

transition:.35s !important;

margin:0 !important;

}

.payment-card:hover label{

border-color:#198754 !important;

transform:translateY(-3px) !important;

box-shadow:0 15px 35px rgba(25,135,84,.10) !important;

}

.payment-card input:checked + label{

border-color:#198754 !important;

background:#eef8f1 !important;

box-shadow:0 15px 35px rgba(25,135,84,.15) !important;

}

.payment-icon{

width:58px !important;

height:58px !important;

border-radius:50% !important;

display:flex !important;

align-items:center !important;

justify-content:center !important;

font-size:24px !important;

color:#fff !important;

margin-right:18px !important;

flex-shrink:0 !important;

}

.cod-icon{

background:#ff9800 !important;

}

.online-icon{

background:#198754 !important;

}

.payment-content{

flex:1 !important;

}

.payment-content h5{

font-size:18px !important;

font-weight:700 !important;

margin-bottom:5px !important;

color:#222 !important;

}

.payment-content p{

margin:0 !important;

font-size:14px !important;

color:#777 !important;

}

.payment-check{

font-size:28px !important;

color:#198754 !important;

opacity:0 !important;

transition:.3s !important;

}

.payment-card input:checked + label .payment-check{

opacity:1 !important;

}



/*==========================================
TRUST
==========================================*/

.checkout-trust{

display:grid !important;

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

gap:15px !important;

margin:30px 0 !important;

}

.trust-item{

background:#f8f9fa !important;

border:1px solid #ececec !important;

border-radius:14px !important;

padding:18px 12px !important;

text-align:center !important;

transition:.3s !important;

}

.trust-item:hover{

transform:translateY(-5px) !important;

border-color:#198754 !important;

}

.trust-item i{

font-size:28px !important;

color:#198754 !important;

margin-bottom:10px !important;

display:block !important;

}

.trust-item span{

font-size:14px !important;

font-weight:600 !important;

color:#333 !important;

}



/*==========================================
TERMS
==========================================*/

.checkout-terms{

margin:20px 0 25px !important;

font-size:15px !important;

}

.checkout-terms label{

display:flex !important;

align-items:flex-start !important;

gap:12px !important;

cursor:pointer !important;

line-height:26px !important;

margin:0 !important;

}

.checkout-terms input{

width:20px !important;

height:20px !important;

margin-top:2px !important;

accent-color:#198754 !important;

}

.checkout-terms a{

color:#198754 !important;

text-decoration:none !important;

font-weight:600 !important;

}

.checkout-terms a:hover{

text-decoration:underline !important;

}



/*==========================================
CHECKOUT BUTTON
==========================================*/

.checkout-btn{

width:100% !important;

height:58px !important;

background:#198754 !important;

border:none !important;

border-radius:14px !important;

color:#fff !important;

font-size:18px !important;

font-weight:700 !important;

transition:.35s !important;

display:flex !important;

align-items:center !important;

justify-content:center !important;

gap:10px !important;

}

.checkout-btn:hover{

background:#157347 !important;

transform:translateY(-3px) !important;

box-shadow:0 18px 35px rgba(25,135,84,.25) !important;

}

.checkout-btn i{

font-size:18px !important;

}
/*==========================================
ORDER SUMMARY
==========================================*/

.checkout-summary{

background:#ffffff !important;

border-radius:18px !important;

padding:30px !important;

box-shadow:0 10px 30px rgba(0,0,0,.06)!important;

/*position:sticky !important;*/

/*top:100px !important;*/

}

.checkout-summary h3{

font-size:28px !important;

font-weight:700 !important;

color:#222 !important;

margin-bottom:25px !important;

padding-bottom:18px !important;

border-bottom:1px solid #ececec !important;

}



/*==========================================
PRODUCT LIST
==========================================*/

.summary-products{

max-height:420px !important;

overflow-y:auto !important;

padding-right:8px !important;

margin-bottom:20px !important;

}

.summary-products::-webkit-scrollbar{

width:6px !important;

}

.summary-products::-webkit-scrollbar-thumb{

background:#198754 !important;

border-radius:20px !important;

}

.summary-item{

display:flex !important;

align-items:center !important;

gap:15px !important;

padding:15px 0 !important;

border-bottom:1px solid #f2f2f2 !important;

}

.summary-item:last-child{

border-bottom:none !important;

}

.summary-image{

width:75px !important;

height:75px !important;

background:#fff !important;

border:1px solid #ececec !important;

border-radius:12px !important;

display:flex !important;

align-items:center !important;

justify-content:center !important;

overflow:hidden !important;

flex-shrink:0 !important;

}

.summary-image img{

max-width:65px !important;

max-height:65px !important;

transition:.3s !important;

}

.summary-item:hover .summary-image img{

transform:scale(1.08)!important;

}

.summary-details{

flex:1 !important;

}

.summary-details h6{

font-size:15px !important;

font-weight:600 !important;

line-height:24px !important;

margin-bottom:6px !important;

color:#222 !important;

}

.summary-details p{

margin:0 !important;

font-size:13px !important;

color:#777 !important;

}

.summary-amount{

font-size:18px !important;

font-weight:700 !important;

color:#198754 !important;

}



/*==========================================
SUMMARY ROW
==========================================*/

.summary-row{

display:flex !important;

justify-content:space-between !important;

align-items:center !important;

padding:14px 0 !important;

font-size:15px !important;

border-bottom:1px solid #f2f2f2 !important;

}

.summary-row:last-child{

border-bottom:none !important;

}

.summary-row strong{

font-size:16px !important;

font-weight:700 !important;

color:#222 !important;

}



/*==========================================
GRAND TOTAL
==========================================*/

.summary-total{

display:flex !important;

justify-content:space-between !important;

align-items:center !important;

padding:20px 0 !important;

margin-top:10px !important;

}

.summary-total span{

font-size:18px !important;

font-weight:700 !important;

color:#222 !important;

}

.summary-total strong{

font-size:32px !important;

font-weight:700 !important;

color:#198754 !important;

}



/*==========================================
SECURE BOX
==========================================*/

.secure-box{

margin-top:25px !important;

padding-top:20px !important;

border-top:1px solid #ececec !important;

}

.secure-item{

display:flex !important;

align-items:flex-start !important;

gap:15px !important;

padding:14px 0 !important;

}

.secure-item i{

width:42px !important;

height:42px !important;

background:#198754 !important;

color:#fff !important;

border-radius:50% !important;

display:flex !important;

align-items:center !important;

justify-content:center !important;

font-size:16px !important;

flex-shrink:0 !important;

}

.secure-item h6{

margin:0 0 4px !important;

font-size:15px !important;

font-weight:700 !important;

color:#222 !important;

}

.secure-item p{

margin:0 !important;

font-size:13px !important;

color:#777 !important;

line-height:22px !important;

}
/*==========================================
HOVER EFFECTS
==========================================*/

.checkout-card,
.checkout-summary{

transition:.35s !important;

}

.checkout-card:hover,
.checkout-summary:hover{

box-shadow:0 20px 45px rgba(0,0,0,.10)!important;

}

.summary-item{

transition:.30s !important;

}

.summary-item:hover{

background:#fafafa !important;

border-radius:12px !important;

padding-left:10px !important;

padding-right:10px !important;

}

.summary-item:hover .summary-image{

border-color:#198754 !important;

}



/*==========================================
FORM PLACEHOLDER
==========================================*/

.checkout-card .form-control::placeholder{

color:#b3b3b3 !important;

font-size:14px !important;

}



/*==========================================
BUTTON ACTIVE
==========================================*/

.checkout-btn:active{

transform:scale(.98)!important;

}



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

.checkout-btn.loading{

pointer-events:none !important;

opacity:.85 !important;

}

.checkout-btn.loading::after{

content:"";

width:18px;

height:18px;

margin-left:12px;

border:3px solid rgba(255,255,255,.35);

border-top:3px solid #fff;

border-radius:50%;

animation:checkoutspin .8s linear infinite;

display:inline-block;

}

@keyframes checkoutspin{

100%{

transform:rotate(360deg);

}

}



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

@media(max-width:991px){

.checkout-summary{

position:relative !important;

top:0 !important;

margin-top:30px !important;

}

}



@media(max-width:767px){

.checkout-header{

padding:30px 0 !important;

}

.checkout-heading h1{

font-size:30px !important;

}

.checkout-card{

padding:22px !important;

}

.checkout-summary{

padding:22px !important;

}

.card-title h3{

font-size:24px !important;

}

.checkout-summary h3{

font-size:24px !important;

}

.payment-card label{

padding:18px !important;

}

.payment-icon{

width:48px !important;

height:48px !important;

font-size:20px !important;

}

.payment-content h5{

font-size:16px !important;

}

.payment-content p{

font-size:13px !important;

}

.checkout-trust{

grid-template-columns:1fr !important;

gap:12px !important;

}

.summary-image{

width:60px !important;

height:60px !important;

}

.summary-image img{

max-width:50px !important;

max-height:50px !important;

}

.summary-details h6{

font-size:14px !important;

line-height:21px !important;

}

.summary-total strong{

font-size:28px !important;

}

.checkout-btn{

height:54px !important;

font-size:16px !important;

}

}



@media(max-width:575px){

.checkout-breadcrumb{

display:none !important;

}

.checkout-page{

padding:15px 0 35px !important;

}

.checkout-heading h1{

font-size:26px !important;

}

.checkout-heading p{

font-size:14px !important;

}

.checkout-card{

padding:18px !important;

border-radius:14px !important;

}

.checkout-summary{

padding:18px !important;

border-radius:14px !important;

}

.card-title{

margin-bottom:20px !important;

}

.card-title h3{

font-size:22px !important;

}

.checkout-summary h3{

font-size:22px !important;

}

.checkout-card .form-control{

height:48px !important;

font-size:14px !important;

}

.checkout-card textarea.form-control{

height:100px !important;

}

.payment-card label{

padding:15px !important;

}

.payment-icon{

width:42px !important;

height:42px !important;

font-size:18px !important;

margin-right:12px !important;

}

.payment-content h5{

font-size:15px !important;

}

.payment-content p{

font-size:12px !important;

}

.summary-row{

font-size:14px !important;

}

.summary-total{

padding:16px 0 !important;

}

.summary-total strong{

font-size:24px !important;

}

.secure-item{

gap:12px !important;

}

.secure-item i{

width:36px !important;

height:36px !important;

font-size:14px !important;

}

.secure-item h6{

font-size:14px !important;

}

.secure-item p{

font-size:12px !important;

}

}



/*==========================================
SCROLLBAR
==========================================*/

.summary-products::-webkit-scrollbar{

width:6px;

}

.summary-products::-webkit-scrollbar-thumb{

background:#198754;

border-radius:30px;

}

.summary-products::-webkit-scrollbar-track{

background:#f3f3f3;

}



/*==========================================
END
==========================================*/