/* =====================================================
   SUCCESS PAGE
===================================================== */

.success-page{
    background:#f6f8fc;
    min-height:100vh;
    padding:50px 0 80px;
}

.success-container{
    max-width:1100px;
}


/* =====================================================
   STEP
===================================================== */

.success-steps{

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

    margin-bottom:60px;

}

.success-step{

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;

}

.success-circle{

    width:52px;
    height:52px;

    border-radius:50%;

    background:#fff;

    border:2px solid #dbe4ef;

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

    font-size:18px;
    font-weight:700;

    color:#a1a9b8;

}

.success-line{

    width:140px;
    height:3px;

    background:#dbe4ef;

    margin:0 18px;

    border-radius:50px;

}

.success-line.active{

    background:#0d4f8b;

}

.success-step span{

    font-size:15px;

    color:#6b7280;

}

.success-step.done .success-circle{

    background:#0d4f8b;

    color:#fff;

    border-color:#0d4f8b;

}

.success-step.done span{

    color:#1f2937;

    font-weight:600;

}

.success-step.active .success-circle{

    background:#0d4f8b;

    border-color:#0d4f8b;

    color:#fff;

}

.success-step.active span{

    color:#0d4f8b;

    font-weight:700;

}


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

.success-icon-wrapper{

    display:flex;

    justify-content:center;

    margin-bottom:35px;

}

.success-icon-bg{

    width:120px;
    height:120px;

    border-radius:50%;

    background:#dbeafe;

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

}

.success-icon{

    width:62px;
    height:62px;

    border-radius:50%;

    background:#0d4f8b;

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

    color:#fff;

    font-size:34px;

}


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

.success-header{

    text-align:center;

    margin-bottom:50px;

}

.success-header h1{

    font-size:42px;

    font-weight:800;

    color:#0d4f8b;

    margin-bottom:18px;

}

.success-header p{

    max-width:720px;

    margin:auto;

    font-size:20px;

    color:#616b78;

    line-height:1.7;

}


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

.success-card{

    background:#fff;

    border-radius:20px;

    padding:24px;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    margin-bottom:45px;

}

.success-car-image{

    text-align:center;

}

.success-car-image img{

    width:100%;

    max-width:460px;

    object-fit:contain;

}


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

.success-booking-id{

    display:inline-block;

    background:#dbeafe;

    color:#0d4f8b;

    font-size:13px;

    font-weight:700;

    padding:7px 14px;

    border-radius:8px;

    letter-spacing:1px;

}

.success-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:18px;

}

.success-verified{

    color:#8a6400;

    font-weight:700;

}

.success-verified i{

    margin-right:6px;

}

.success-content h2{

    font-size:42px;

    font-weight:800;

    color:#132238;

    margin-bottom:30px;

}

.success-information{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.success-info{

    display:flex;

    gap:18px;

    align-items:flex-start;

}

.success-info i{

    color:#0d4f8b;

    font-size:24px;

    margin-top:3px;

}

.success-info small{

    display:block;

    color:#7b8794;

    margin-bottom:4px;

}

.success-info strong{

    display:block;

    font-size:19px;

    color:#1f2937;

}

.success-divider{

    margin:30px 0;

    border-top:1px solid #e5e7eb;

}

/* =====================================================
   TOTAL PEMBAYARAN
===================================================== */

.success-footer{

    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;

}

.success-total small{

    display:block;

    color:#7b8794;

    font-size:16px;

    margin-bottom:6px;

}

.success-total h3{

    margin:0;

    font-size:44px;

    font-weight:800;

    color:#0d4f8b;

}

.success-status{

    display:inline-flex;

    align-items:center;

    gap:8px;

    background:#edf6ff;

    color:#0d4f8b;

    padding:10px 18px;

    border-radius:999px;

    font-size:15px;

    font-weight:700;

}

.success-status i{

    font-size:18px;

}


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

.success-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

    margin-top:40px;

}

.success-btn-primary{

    width:220px;

    height:50px;

    border-radius:12px;

    background:#0d4f8b;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    text-decoration:none;

    font-size:16px;

    font-weight:600;

    transition:.3s;

    box-shadow:0 6px 16px rgba(13,79,139,.18);

}

.success-btn-primary:hover{

    background:#0b4478;

    color:#fff;

    transform:translateY(-2px);

    text-decoration:none;

}

.success-btn-outline{

    width:220px;

    height:50px;

    border:2px solid #0d4f8b;

    border-radius:12px;

    color:#0d4f8b;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    text-decoration:none;

    font-size:16px;

    font-weight:600;

    transition:.3s;

}

.success-btn-outline:hover{

    background:#0d4f8b;

    color:#fff;

    text-decoration:none;

    transform:translateY(-2px);

}


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

@media(max-width:991px){

    .success-header h1{

        font-size:42px;

    }

    .success-header p{

        font-size:18px;

    }

    .success-content{

        margin-top:35px;

    }

    .success-content h2{

        font-size:32px;

    }

    .success-total h3{

        font-size:34px;

    }

}


@media(max-width:768px){

    .success-page{

        padding:35px 0 60px;

    }

    .success-line{

        width:55px;

    }

    .success-circle{

        width:44px;

        height:44px;

        font-size:16px;

    }

    .success-header h1{

        font-size:34px;

    }

    .success-header p{

        font-size:16px;

        padding:0 15px;

    }

    .success-card{

        padding:22px;

    }

    .success-content h2{

        font-size:26px;

    }

    .success-info strong{

        font-size:16px;

    }

    .success-total h3{

        font-size:30px;

    }

    .success-footer{

        flex-direction:column;

        align-items:flex-start;

    }

    .success-buttons{

        flex-direction:column;

    }

    .success-btn-primary,

    .success-btn-outline{

        width:100%;

    }

}


@media(max-width:480px){

    .success-icon-bg{

        width:95px;

        height:95px;

    }

    .success-icon{

        width:54px;

        height:54px;

        font-size:26px;

    }

    .success-header h1{

        font-size:28px;

    }

    .success-header p{

        font-size:15px;

        line-height:1.6;

    }

    .success-booking-id{

        font-size:11px;

    }

    .success-verified{

        font-size:13px;

    }

}