:root, [data-bs-theme="light"] {
    /* Warna utama biru dari gambar */
    --bs-primary: #0F509E ; 
    
    /* Warna hover (sedikit lebih gelap untuk interaksi klik/hover) */
    --bs-primary-active: #0D407A; 
    --bs-text-primary: #0D407A; 
    --bs-menu-link-color-active: #0D407A;
    --bs-menu-link-color-hover: #0D407A;
    --bs-component-hover-color: #0D407A;
    --bs-component-active-bg: #0D407A;
    --bs-primary-light: #b9e2ff;
    
    /* Warna background tipis (untuk badge/alert, senada dengan background paling terang di gambar) */
    --bs-primary-light: #b9e2ff; 
    
    /* Warna RGB (Metronic & Bootstrap 5 butuh ini untuk efek transparansi) */
    --bs-primary-rgb: 15, 80, 158; 
}

/* Jika Metronic kamu mendukung Dark Mode */
[data-bs-theme="dark"] {
    --bs-primary: #0F509E ;
    --bs-primary-active: #0D407A;
    --bs-primary-light: rgba(15, 80, 158, 0.1); /* Pakai rgba untuk dark mode agar membaur */
    --bs-primary-rgb: 15, 80, 158;
}

/* Paksa lebar card pendaftaran merchant langsung dari lebar layar (vw), bukan dari parent,
   supaya tidak pernah overflow di mobile terlepas dari apa pun yang terjadi di ancestor-nya. */
@media (max-width: 991.98px) {
    .merchant-main-card {
        width: calc(100vw - 32px);
        max-width: calc(100vw - 32px);
        margin-left: auto;
        margin-right: auto;
    }
}

/* Samakan lebar form pendaftaran merchant dengan lebar kolom kiri (50% layar) hanya di layar >= lg,
   supaya tidak berubah-ubah antar step. Di bawah lg, panel ilustrasi kanan disembunyikan
   sehingga form memakai lebar penuh. */
@media (min-width: 992px) {
    .merchant-registration-container {
        width: calc(50vw - 80px);
        max-width: calc(50vw - 80px);
    }

    /* Kunci kolom form (kiri) dan spacer panel ilustrasi (kanan) tepat 50/50,
       supaya lebar tidak melebar/menyusut mengikuti konten tiap step. */
    .merchant-aside-col,
    .merchant-spacer-col {
        flex-grow: 0;
        flex-shrink: 0;
        max-width: 50%;
    }
}