.search-container {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 30px 0;
    flex-wrap: wrap;
    position: relative;
    z-index: 10;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input {
    padding: 12px 20px;
    padding-right: 40px;
    /* Space for clear button */
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.3);
    color: var(--text-color);
    font-family: inherit;
    font-size: 1rem;
    width: 300px;
    max-width: 100%;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.search-input:focus {
    outline: none;
    border-color: var(--main-color);
    box-shadow: 0 0 15px var(--hover-glow);
    background: rgba(0, 0, 0, 0.5);
}

.search-clear {
    position: absolute;
    right: 10px;
    background: transparent;
    border: none;
    color: var(--text-color);
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    padding: 0;
    line-height: 1;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-clear:hover {
    background: rgba(255, 255, 255, 0.1);
}

.search-input:not(:placeholder-shown)+.search-clear {
    opacity: 0.7;
    visibility: visible;
}

.search-button {
    padding: 12px 24px;
    border-radius: 16px;
    border: none;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    background: linear-gradient(135deg, var(--main-color), var(--main-color-dark));
    color: #fff;
    /* Changed to white for better contrast usually, though buttons.css used black. Stick to design. Wait, buttons.css had Overlay. Here it is simple gradient. Let's keep consistency but maybe text color was intentional Black on bright blue. Let's keep it mostly as is but add the modifier. */
    color: #000;
    transition: all 0.3s ease;
    box-shadow: 0 0 8px var(--glow);
}

.search-button:hover {
    transform: scale(1.05);
    filter: brightness(1.2);
    box-shadow: 0 0 15px var(--glow);
}

/* Secondary / Reset Button Style */
.search-button.search-button--secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--text-color);
    box-shadow: none;
}

.search-button.search-button--secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--text-color);
    color: white;
    filter: brightness(1);
    /* Reset standard filter */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

@media (max-width: 480px) {
    .search-input-wrapper {
        width: 100%;
    }

    .search-input {
        width: 100%;
    }

    .search-button {
        width: 100%;
    }
}