.search-input-container {
    width: 60%;
    margin: 0 auto;
    text-align: center;

    .search-input {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        background-color: white;
        border-radius: 4rem;
        height: 5.5rem;
        border: 1px solid var(--border-grey);
        width: 80%;
        margin: 4rem auto 3rem;
        overflow: hidden;
    
        input {
            border: none;
            background-color: transparent;
            padding: 0 3rem;
            font-size: 1.5rem;
            color: var(--dark-grey);        
            letter-spacing: 0.5px;
            flex-grow: 1;
    
            &::placeholder {
                font-weight: 300;
            }
        }
    
        button {
            height: 100%;
            border: none;
            background-color: var(--highlight);
            padding: 0 4rem;
            color: white;
            font-size: 1.6rem;
            letter-spacing: 0.5px;
            border-radius: 4rem;
            transition: opacity 0.3s;

            &:disabled {
                opacity: 0.5;
            }
        }
    }

    .form-message {
        margin: 6rem auto 2rem;
        line-height: 1.6;

        &.error {
            h5 {
                color: var(--error);
            }
        }

        &.warning {
            h5 {
                color: var(--warning);
            }
        }

        h5 {
            font-size: 2rem;
            color: var(--success);
            filter: brightness(80%);
            font-weight: 500;
            margin-bottom: 1rem;
        }

        p {
            font-size: 1.4rem;
            font-weight: 400;
            color: var(--dark-grey);
        }
    }
}