/*==========================================
RK SPARE PARTS
ORDER SUCCESS
==========================================*/

.success-hero{

padding:70px 0 30px !important;

background:linear-gradient(135deg,#198754,#28a745) !important;

}

.success-card{

background:#fff !important;

border-radius:24px !important;

padding:50px !important;

text-align:center !important;

box-shadow:0 20px 50px rgba(0,0,0,.12)!important;

}

.success-icon{

width:120px !important;

height:120px !important;

margin:auto !important;

border-radius:50% !important;

background:#198754 !important;

display:flex !important;

align-items:center !important;

justify-content:center !important;

font-size:60px !important;

color:#fff !important;

animation:pop .6s ease !important;

}

@keyframes pop{

0%{

transform:scale(.2);

opacity:0;

}

100%{

transform:scale(1);

opacity:1;

}

}

.success-card h1{

font-size:42px !important;

font-weight:700 !important;

margin:30px 0 15px !important;

color:#222 !important;

}

.success-card p{

font-size:17px !important;

color:#666 !important;

line-height:30px !important;

}

.order-number-box{

margin-top:30px !important;

padding:25px !important;

border-radius:16px !important;

background:#eef8f1 !important;

border:2px dashed #198754 !important;

}

.order-number-box span{

display:block !important;

font-size:15px !important;

color:#666 !important;

margin-bottom:10px !important;

}

.order-number-box h2{

margin:0 !important;

font-size:34px !important;

font-weight:700 !important;

color:#198754 !important;

letter-spacing:2px !important;

}
/*==========================================
SUCCESS BODY
==========================================*/

.success-body{

background:#f6f7fb !important;

padding:60px 0 80px !important;

}



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

.success-box{

background:#fff !important;

border-radius:20px !important;

padding:35px !important;

box-shadow:0 12px 35px rgba(0,0,0,.06)!important;

}

.success-box h3{

font-size:28px !important;

font-weight:700 !important;

color:#222 !important;

margin-bottom:30px !important;

}



/*==========================================
TIMELINE
==========================================*/

.success-timeline{

position:relative !important;

padding-left:18px !important;

}

.timeline-item{

display:flex !important;

align-items:flex-start !important;

gap:20px !important;

padding-bottom:35px !important;

position:relative !important;

}

.timeline-item:last-child{

padding-bottom:0 !important;

}

.timeline-item::before{

content:'' !important;

position:absolute !important;

left:22px !important;

top:45px !important;

width:2px !important;

height:100% !important;

background:#e5e5e5 !important;

}

.timeline-item:last-child::before{

display:none !important;

}

.timeline-icon{

width:46px !important;

height:46px !important;

border-radius:50% !important;

background:#d9d9d9 !important;

display:flex !important;

align-items:center !important;

justify-content:center !important;

color:#fff !important;

font-size:18px !important;

flex-shrink:0 !important;

position:relative !important;

z-index:2 !important;

}

.timeline-item.active .timeline-icon{

background:#198754 !important;

}

.timeline-content h5{

font-size:18px !important;

font-weight:700 !important;

margin-bottom:6px !important;

color:#222 !important;

}

.timeline-content p{

margin:0 !important;

font-size:14px !important;

color:#777 !important;

line-height:24px !important;

}



/*==========================================
ORDER DETAILS
==========================================*/

.order-details-card{

margin-top:40px !important;

padding:30px !important;

border-radius:18px !important;

background:#fafafa !important;

border:1px solid #ececec !important;

}

.order-details-card h3{

font-size:24px !important;

font-weight:700 !important;

margin-bottom:25px !important;

color:#222 !important;

}

.detail-row{

display:flex !important;

justify-content:space-between !important;

align-items:center !important;

padding:14px 0 !important;

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

font-size:15px !important;

}

.detail-row:last-child{

border-bottom:none !important;

}

.detail-row span{

color:#666 !important;

}

.detail-row strong{

font-weight:700 !important;

color:#222 !important;

}



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

.success-buttons{

display:flex !important;

gap:15px !important;

margin-top:35px !important;

flex-wrap:wrap !important;

}

.continue-shopping{

flex:1 !important;

height:54px !important;

background:#198754 !important;

color:#fff !important;

border-radius:12px !important;

display:flex !important;

align-items:center !important;

justify-content:center !important;

text-decoration:none !important;

font-weight:700 !important;

transition:.35s !important;

}

.continue-shopping:hover{

background:#157347 !important;

color:#fff !important;

transform:translateY(-3px) !important;

}

.download-invoice{

flex:1 !important;

height:54px !important;

border:2px solid #198754 !important;

color:#198754 !important;

border-radius:12px !important;

display:flex !important;

align-items:center !important;

justify-content:center !important;

text-decoration:none !important;

font-weight:700 !important;

transition:.35s !important;

}

.download-invoice:hover{

background:#198754 !important;

color:#fff !important;

transform:translateY(-3px) !important;

}
/*==========================================
SUPPORT CARD
==========================================*/

.support-card{

background:#ffffff !important;

border-radius:20px !important;

padding:35px !important;

box-shadow:0 12px 35px rgba(0,0,0,.06)!important;

text-align:center !important;

margin-bottom:25px !important;

transition:.35s !important;

}

.support-card:hover{

transform:translateY(-5px)!important;

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

}

.support-icon{

width:90px !important;

height:90px !important;

margin:0 auto 20px !important;

border-radius:50% !important;

background:#198754 !important;

display:flex !important;

align-items:center !important;

justify-content:center !important;

font-size:36px !important;

color:#fff !important;

}

.support-card h3{

font-size:28px !important;

font-weight:700 !important;

margin-bottom:12px !important;

color:#222 !important;

}

.support-card p{

font-size:15px !important;

line-height:26px !important;

color:#666 !important;

margin-bottom:25px !important;

}

.support-call,

.support-whatsapp{

width:100% !important;

height:52px !important;

display:flex !important;

align-items:center !important;

justify-content:center !important;

border-radius:12px !important;

text-decoration:none !important;

font-weight:700 !important;

margin-bottom:12px !important;

transition:.35s !important;

}

.support-call{

background:#198754 !important;

color:#fff !important;

}

.support-call:hover{

background:#157347 !important;

color:#fff !important;

transform:translateY(-3px)!important;

}

.support-whatsapp{

border:2px solid #198754 !important;

color:#198754 !important;

background:#fff !important;

}

.support-whatsapp:hover{

background:#198754 !important;

color:#fff !important;

transform:translateY(-3px)!important;

}



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

.secure-card{

background:#ffffff !important;

border-radius:20px !important;

padding:30px !important;

box-shadow:0 12px 35px rgba(0,0,0,.06)!important;

}

.secure-card h4{

font-size:24px !important;

font-weight:700 !important;

margin-bottom:22px !important;

color:#222 !important;

}

.secure-item{

display:flex !important;

align-items:center !important;

gap:15px !important;

padding:14px 0 !important;

font-size:15px !important;

font-weight:600 !important;

color:#444 !important;

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

}

.secure-item:last-child{

border-bottom:none !important;

}

.secure-item i{

width:38px !important;

height:38px !important;

background:#198754 !important;

border-radius:50% !important;

display:flex !important;

align-items:center !important;

justify-content:center !important;

color:#fff !important;

font-size:15px !important;

flex-shrink:0 !important;

}



/*==========================================
HOVER
==========================================*/

.success-box,

.order-details-card,

.support-card,

.secure-card{

transition:.35s !important;

}

.success-box:hover,

.order-details-card:hover,

.secure-card:hover{

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

}



/*==========================================
RESPONSIVE
==========================================*/

@media(max-width:991px){

.success-card{

padding:35px !important;

}

.success-box{

margin-bottom:25px !important;

}

}



@media(max-width:767px){

.success-hero{

padding:40px 0 20px !important;

}

.success-card{

padding:25px !important;

border-radius:18px !important;

}

.success-card h1{

font-size:30px !important;

}

.success-card p{

font-size:15px !important;

line-height:26px !important;

}

.success-icon{

width:90px !important;

height:90px !important;

font-size:45px !important;

}

.order-number-box h2{

font-size:26px !important;

}

.success-box{

padding:22px !important;

}

.order-details-card{

padding:20px !important;

}

.success-buttons{

flex-direction:column !important;

}

.continue-shopping,

.download-invoice{

width:100% !important;

}

.timeline-content h5{

font-size:16px !important;

}

.timeline-content p{

font-size:13px !important;

}

.detail-row{

font-size:14px !important;

}

.support-card{

padding:25px !important;

}

.secure-card{

padding:25px !important;

}

}



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

@media(max-width:575px){

.success-card h1{

font-size:26px !important;

}

.order-number-box{

padding:18px !important;

}

.order-number-box h2{

font-size:22px !important;

word-break:break-word !important;

}

.success-box h3,

.order-details-card h3,

.support-card h3{

font-size:22px !important;

}

.timeline-item{

gap:14px !important;

}

.timeline-icon{

width:40px !important;

height:40px !important;

font-size:15px !important;

}

.support-icon{

width:70px !important;

height:70px !important;

font-size:28px !important;

}

.secure-card h4{

font-size:20px !important;

}

}



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