/* --- Gaya Desktop Search Bar --- */
/* Mengatur form search desktop */
.search-form-box {
    /* Pastikan form ini tidak memiliki padding atau margin yang aneh */
    padding: 0;
    margin: 0;
}

/* Mengatur input group desktop */
.search-form-box .form-group.search-input {
    display: flex; /* Menggunakan flexbox untuk alignment */
    align-items: center; /* Pusatkan secara vertikal */
    border: 1px solid #e0e0e0; /* Border tipis */
    border-radius: 0.25rem; /* Sudut sedikit melengkung */
    overflow: hidden; /* Penting untuk border-radius */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Shadow seperti desktop */
    background-color: #f8f8f8; /* Background sedikit abu-abu */
    height: 40px; /* Tinggi search bar desktop */
}

/* Mengatur input field desktop */
.search-form-box .form-control.search-input,
.search-form-box .custom-input-control { /* Menarget custom-input-control juga jika digunakan */
    flex-grow: 1; /* Mengisi ruang yang tersedia */
    height: 100% !important; /* Mengisi tinggi container */
    border: none !important; /* Hapus border bawaan */
    background-color: transparent !important; /* Hapus background input */
    box-shadow: none !important; /* Hapus shadow bawaan */
    color: #333 !important; /* Warna teks gelap */
    padding: 0.375rem 1rem !important; /* Padding horizontal */
    font-size: 1rem !important;
    line-height: 40px !important; /* Pusatkan teks vertikal */
    box-sizing: border-box !important;
    border-radius: 0.25rem 0 0 0.25rem !important; /* Radius kiri saja */
}

/* Mengatur tombol search desktop */
.search-form-box .search-submit { /* Menarget search-submit */
    flex-shrink: 0; /* Jangan biarkan tombol mengecil */
    height: 100% !important; /* Mengisi tinggi container */
    background-color: #00bcd5 !important; /* Warna hijau solid */
    border: none !important; /* Hapus border bawaan */
    border-radius: 0 0.25rem 0.25rem 0 !important; /* Radius kanan saja */
    color: #fff !important; /* Warna ikon putih */
    padding: 0.375rem 1rem !important; /* Padding horizontal */
    font-size: 1rem !important;
    display: flex !important;
    align-items: center !important; /* Pusatkan ikon secara vertikal */
    justify-content: center !important;
    transition: background-color 0.3s ease !important;
    cursor: pointer;
    width: auto !important; /* Biarkan lebar otomatis */
}

/* --- Gaya Mobile Search Bar (Hanya berlaku di layar kecil) --- */
@media (max-width: 991.98px) { /* Menggunakan breakpoint Bootstrap default */
    /* Mengatur tampilan keseluruhan dropdown search mobile */
     .mobile-search-dropdown {
        position: 20% absolute; /* Pastikan posisinya relatif terhadap tombol */
        top: 100%; /* Agar dropdown muncul di bawah tombol trigger */
        right: 0; /* Rata kanan dengan tombol */
        left: auto; /* Pastikan tidak ada konflik dengan 'left' */
        transform: none;
        inset: auto; /* Menimpa properti inset lama */

        /* --- Fokus pada padding-top dan lebar yang tidak terlalu panjang --- */
        margin-top: 20px; /* Ini yang akan memberikan jarak (padding top) dari ikon search */

        /* Mengurangi lebar agar tidak terlalu panjang, tapi tetap responsif */
        /* Kita bisa menggunakan max-width dan sedikit margin agar terlihat di tengah */
        max-width: 40%; /* Batasi lebar maksimum, sesuaikan angka ini sesuai keinginan */
        width: calc(100% - 30px); /* Akan mengambil 100% lebar layar, dikurangi 30px (15px padding kiri + 15px padding kanan) */
        margin-left: 15px; /* Memberi jarak 15px dari kiri */
        margin-right: 15px; /* Memberi jarak 15px dari kanan */

        min-width: 280px; /* Pertahankan lebar minimum agar tetap terbaca */
        padding: 15px; /* Padding di dalam dropdown */
        border-radius: 8px; /* Sudut kotak dropdown */
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        background-color: #fff;
        border: none;
        z-index: 999;
    }

    /* Container utama untuk input dan tombol search mobile */
    .mobile-search-input-group {
        display: flex;
        align-items: center;
        width: 100%; /* Gunakan lebar penuh dari dropdown */
        height: 40px;
        border-radius: 0.25rem;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        border: 1px solid #e0e0e0;
        background-color: #f8f8f8;
    }

    /* Mengatur input field mobile */
    .mobile-search-input {
        flex-grow: 1;
        height: 100%;
        border: none;
        border-radius: 0.25rem 0 0 0.25rem;
        padding: 0.375rem 1rem;
        font-size: 1rem;
        background-color: transparent;
        box-shadow: none;
        color: #333;
        line-height: normal; /* Biarkan line-height default atau sesuaikan jika perlu */
        box-sizing: border-box;
    }

    /* Mengatur tombol search mobile */
    .mobile-search-button {
        flex-shrink: 0;
        height: 100%;
        background-color: #00bcd5;
        border: none;
        border-radius: 0 0.25rem 0.25rem 0;
        color: #fff;
        padding: 0.375rem 1rem;
        font-size: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.3s ease;
        cursor: pointer;
        width: auto;
    }

    .mobile-search-button:hover {
        background-color: #14a06a;
        border-color: #14a06a;
    }

    .mobile-search-button .fas.fa-search {
        margin: 0;
        line-height: 1;
    }

    /* Pastikan dropdown menu Bootstrap bekerja dengan baik */
    .dropdown-menu.mobile-search-dropdown.show {
        display: block; /* Bootstrap JS akan menambahkan kelas ini saat dropdown dibuka */
    }
}