.search-container {
    margin-bottom: 20px; /* Adds space below the search input */
}

#search-input {
    width: 100%;
    padding: 12px; /* Increased padding for better usability */
    font-size: 1em; /* Font size for readability */
    border: 2px solid #ff4757; /* Highlighted border color */
    border-radius: 5px; /* Rounded corners */
    background-color: #333; /* Background color for contrast */
    color: #fff; /* Text color */
    transition: background-color 0.3s, border-color 0.3s; /* Smooth transition */
}

#search-input:focus {
    background-color: #444; /* Darker background on focus */
    outline: none; /* Remove outline */
    border-color: #ff4757; /* Change border color on focus */
}
/* Loading Overlay */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(18, 18, 18, 0.8); /* Semi-transparent background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Make sure it's on top */
}

/* Loading Bar */
.loading-bar {
    width: 100%;
    height: 5px;
    background-color: #e50914; /* Color of the loading bar */
    animation: loading 2s linear infinite; /* Animation effect */
}

/* Loading Animation Keyframes */
@keyframes loading {
    0% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(100%);
    }
}