.unicargo-wrapper{
    width:100% !important;
    font-family:'Poppins',sans-serif !important;
}

/* =====================================================
   TAB LAYANAN
===================================================== */

.unicargo-services{

    display:flex !important;

    flex-wrap:nowrap !important;

    gap:15px !important;

    margin-bottom:20px !important;

    padding-bottom:5px !important;

    overflow:hidden !important;

}


/* ===============================
   ITEM LAYANAN DESKTOP
=============================== */

.unicargo-service{

    flex:1 1 0 !important;

    min-width:0 !important;

    height:66px !important;

    border:1px solid #346CA9 !important;
    border-radius:14px !important;

    background:#fff !important;

    cursor:pointer !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    gap:15px !important;

    transition:.3s !important;

    padding:0 18px !important;

}


.unicargo-service.active{

    background:#346CA9 !important;

    color:#fff !important;

}


.unicargo-service img{

    width:50px !important;

    height:50px !important;

    object-fit:contain !important;

    flex-shrink:0 !important;

}


.unicargo-service-name{

    font-size:16px !important;

    line-height:1 !important;

    font-weight:600 !important;

    white-space:nowrap !important;

}


/* =====================================================
   MOBILE
   Swipe Horizontal + Icon Di Atas
===================================================== */

@media(max-width:576px){


    .unicargo-services{

        overflow-x:auto !important;

        overflow-y:hidden !important;

        -webkit-overflow-scrolling:touch !important;

        scrollbar-width:none !important;

        gap:10px !important;

    }


    .unicargo-services::-webkit-scrollbar{

        display:none;

    }


    .unicargo-service{

        flex:0 0 auto !important;

        min-width:90px !important;

        height:80px !important;

        flex-direction:column !important;

        align-items:center !important;

        justify-content:center !important;

        gap:5px !important;

    }


    .unicargo-service img{

        width:34px !important;

        height:34px !important;

    }


    .unicargo-service-name{

        font-size:14px !important;

        text-align:center !important;

        white-space:normal !important;

        line-height:1 !important;

        max-width:95px !important;

    }

}

/* =====================================================
   BOX FORM
===================================================== */

.unicargo-box{
    border:1px solid #c9c9c9 !important;
    border-radius:22px !important;
    background:#f7f7f7 !important;
    padding:25px !important;
}

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

.unicargo-row{
    display:grid !important;
    grid-template-columns:1fr 80px 1fr !important;
    gap:20px !important;
    align-items:center !important;
}

.unicargo-col label{
    display:block !important;
    font-size:16px !important;
    font-weight:700 !important;
    margin-bottom:10px !important;
    color:#000 !important;
}

.unicargo-col{
    position:relative !important;
}

/* =====================================================
   INPUT
===================================================== */

.unicargo-input,
.unicargo-select{
    width:100% !important;
    height:50px !important;
    border:1px solid #d6d6d6 !important;
    border-radius:10px !important;
    background:#fff !important;
    padding:0 18px !important;
    font-size:16px !important;
    outline:none !important;
}

.unicargo-input:focus,
.unicargo-select:focus{
    border-color:#346CA9 !important;
}

input:focus,
textarea:focus,
select:focus{
    border-color:#346CA9 !important;
    outline:none !important;
    box-shadow:0 0 0 1px #346CA9 !important;
}

/* =====================================================
   ARROW
===================================================== */

.unicargo-arrow{
    text-align:center !important;
    font-size:40px !important;
    font-weight:bold !important;
    color:#346CA9 !important;
}

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

.unicargo-btn{
    width:100% !important;
    margin-top:30px !important;

    border:none !important;
    border-radius:10px !important;

    background:#346CA9 !important;
    color:#fff !important;

    font-size:16px !important;
    font-weight:500 !important;

    cursor:pointer !important;
    transition:.3s !important;
}

.unicargo-btn:hover{
    opacity:.9 !important;
}

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

@media(max-width:768px){

    .unicargo-row{
        grid-template-columns:1fr !important;
    }

    .unicargo-arrow{
        display:none !important;
    }
}

/* =====================================================
   RESULT
===================================================== */

#tujuan-result{
    background:#fff !important;
    border:1px solid #ddd !important;
    border-top:none !important;
    border-radius:0 0 10px 10px !important;
    max-height:250px !important;
    overflow:auto !important;

    display:none;

    position:absolute !important;
    top:100% !important;
    left:0 !important;
    width:100% !important;

    z-index:9999 !important;
}

.tujuan-item{
    padding:12px 15px !important;
    cursor:pointer !important;
    border-bottom:1px solid #eee !important;
}

.tujuan-item:hover{
    background:#f3f8ff !important;
}

.tujuan-not-found{
    padding:12px 15px !important;
    color:#888 !important;
    font-size:14px !important;
    font-style:italic !important;
    background:#fff !important;
}

/* =====================================================
   HASIL TARIF
===================================================== */

.tarif-card{
    margin-top:25px !important;
    background:#fff !important;
    border:1px solid #ddd !important;
    border-radius:15px !important;
    padding:25px !important;
}

.tarif-grid{
    display:grid !important;
    grid-template-columns:repeat(4,1fr) !important;
    gap:20px !important;
}

.tarif-item{
    text-align:center !important;
}

.tarif-label{
    font-size:14px !important;
    color:#666 !important;
}

.tarif-value{
    font-size:24px !important;
    font-weight:700 !important;
    color:#346CA9 !important;
}

.tarif-keterangan{
    margin-top:25px !important;
    padding:20px !important;
    background:#FFF4E5 !important;
    border:1px dashed #FF8A00 !important;
    border-radius:12px !important;
    text-align:center !important;
}

.tarif-keterangan b{
    display:block !important;
    margin-bottom:10px !important;
    color:#FF8A00 !important;
    font-size:14px !important;
}

@media(max-width:768px){

    .tarif-grid{
        grid-template-columns:1fr 1fr !important;
    }
    
    .tarif-value{
        font-size:18px !important;
    }

}



/*======== WIDTH 500px =========*/
@media(max-width:500px){
    .unicargo-box {
        padding: 15px !important;
    }
    
    .tarif-card {
        padding: 15px !important;
    }
    
    .unicargo-input, .unicargo-select{
        font-size:14px !important;
    }
    
    .unicargo-col label{
        font-size:14px !important;
    }
    
    .tarif-label {
        font-size: 12px !important;
    }
    
    .tarif-keterangan .tarif-keterangan-text {
        font-size: 12px !important;
    }
    
    .berat-input {
        font-size: 14px !important;
    }
    
    label.berat-label {
        font-size: 14px !important;
    }
    
    .unicargo-wrapper div.hasil-row,
    .unicargo-wrapper div.hasil-row.hasil-chargeable{
        font-size:14px !important;
    }

}


/*======= SwetAlert Fire Button & swal2-styled ======*/
button.swal2-confirm.swal2-styled {
    background: #346CA9 !important;
    color: #fff;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px 18px !important;
}

.swal2-show {
    border-radius: 20px !important;
}

.swal2-container.swal2-center.swal2-backdrop-show {
    z-index: 999999;
}


/*======= TAMPILKAN TARIF ======*/
.tarif-keterangan-text{
    font-weight:500 !important;
    font-size: 14px !important;
}

.berat-section{
    margin-top:25px !important;
}

.berat-label{
    display:block !important;
    font-weight:700 !important;
    margin-bottom:10px !important;
    font-size:15px !important;
}

.berat-input{
    width:100% !important;
    height:55px !important;
    border:1px solid #ddd !important;
    border-radius:10px !important;
    padding:0 15px !important;
    box-sizing:border-box !important;
}

.hasil-perhitungan{
    margin-top:20px !important;
}

.btn-wa-admin{
    display:block !important;
    width:100% !important;
    text-align:center !important;
    background:#25D366 !important;
    color:#fff !important;
    text-decoration:none !important;
    padding:15px !important;
    border-radius:10px !important;
    font-weight:600 !important;
    box-sizing:border-box !important;
    margin-top:20px !important;
}

/*========== TAMPILKAN HASIL =====*/
.hasil-box{
    background:#f5f8ff !important;
    border:1px solid #d6e3ff !important;
    border-radius:12px !important;
    padding:20px !important;
}

.hasil-row{
    font-size:15px !important;
}

.hasil-chargeable{
    margin-top:10px !important;
}

.hasil-total{
    font-size:32px !important;
    font-weight:700 !important;
    color:#346CA9 !important;
    margin-top:20px !important;
}

@media(max-width:576px){

    .hasil-total{
        font-size:26px !important;
        text-align: center !important;
    }

}