/* General styling for the search container */
.search-container {
    text-align: center;
    margin-bottom: 20px;
    padding: 0 20px; /* Padding lebih luas untuk responsivitas yang lebih baik */
}

/* Styling for the search input */
.search-input {
    padding: 12px 20px; /* Padding yang lebih baik untuk ruang input */
    width: 100%; /* Set width to 100% for responsiveness */
    max-width: 600px; /* Lebih besar untuk tampilan di layar besar */
    font-size: 18px;
    border: 2px solid #ddd; /* Light border color */
    border-radius: 50px; /* Rounded corners lebih halus */
    outline: none;
    transition: all 0.3s ease;
    background-color: #f5f5f5; /* Background lebih soft */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Shadow lebih lembut */
}

/* Focus effect with glowing border */
.search-input:focus {
    border-color: #00796b; /* Warna border hijau yang elegan */
    box-shadow: 0 0 10px rgba(0, 128, 0, 0.2); /* Efek glow hijau lebih lembut */
}

/* Placeholder text styling */
.search-input::placeholder {
    color: #999; /* Placeholder warna abu-abu yang lebih soft */
    font-style: italic; /* Placeholder teks miring untuk kesan lebih elegan */
}

/* Media queries for responsiveness */
@media (max-width: 768px) {
    .search-input {
        width: 90%; /* Pada layar lebih kecil, lebar input lebih besar */
        font-size: 16px; /* Ukuran font sedikit lebih kecil untuk kenyamanan */
    }
}

@media (max-width: 480px) {
    .search-input {
        width: 95%; /* Lebar hampir penuh pada layar kecil */
        font-size: 14px; /* Ukuran font lebih kecil pada layar sangat kecil */
    }
}

/* Styling for no results message */
#noResultsMessage {
    text-align: center;
    display: none;
    color: #f44336; /* Warna merah yang lembut */
    font-size: 18px;
    font-weight: 600; /* Memberikan ketegasan pada teks */
    opacity: 0; /* Initially hidden */
    transform: translateY(-20px); /* Animasi muncul dari atas */
    animation: fadeInUp 0.5s forwards; /* Animasi fade in dan bergerak ke atas */
}

/* Animation for the fade-in and upward movement */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(-20px); /* Memulai dengan posisi sedikit lebih tinggi */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* Berhenti di posisi normal */
    }
}

/* Styling for the icon inside the no results message */
#noResultsMessage i {
    color: #f44336; /* Ikon berwarna merah yang lembut */
    font-size: 26px;  /* Ukuran ikon sedikit lebih besar */
    transition: transform 0.3s ease, color 0.3s ease; /* Transisi halus saat hover */
    animation: bounceIcon 0.6s infinite; /* Animasi ikon bergoyang */
}

/* Animation for bouncing the icon */
@keyframes bounceIcon {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px); /* Gerakan naik sedikit */
    }
    100% {
        transform: translateY(0); /* Kembali ke posisi semula */
    }
}

/* Hover effect for the icon */
#noResultsMessage i:hover {
    transform: scale(1.1);  /* Efek sedikit membesar saat hover */
    color: #d32f2f; /* Mengubah warna ikon saat hover */
}