/* =====================================================
   NAVIGASI STEP 1 medik
===================================================== */

.step-navigation {
    width: 100%;
    gap: 15px;
}

.step-navigation-left,
.step-navigation-right {
    display: flex;
    align-items: center;
}


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

@media (max-width: 576px) {

    .step-navigation {
        width: 100%;
        display: flex;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 8px;
    }

    .step-navigation-left {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
    }

    .step-navigation-right {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }

    /* Semua tombol lebih kecil di HP */
    .step-navigation .btn {
        font-size: 12px;
        padding: 9px 12px;
        white-space: nowrap;
    }

    /* Hilangkan margin Bootstrap ml-2 */
    .step-navigation-left .ml-2 {
        margin-left: 0 !important;
    }

    /* Jarak antar tombol kiri */
    .step-navigation-left {
        gap: 6px;
    }

    /* Icon */
    .step-navigation .btn i {
        margin-right: 4px !important;
        margin-left: 4px !important;
    }

    /* Tombol utama */
    .step-navigation-right .btn {
        padding-left: 12px;
        padding-right: 12px;
    }

    @media (max-width: 380px) {

    .step-navigation .btn {
        font-size: 11px;
        padding: 8px 9px;
    }

    .step-navigation-left {
        gap: 4px;
    }

    .step-navigation .btn i {
        margin-right: 2px !important;
        margin-left: 2px !important;
    }

}

}