.quick-search-box {
    border-radius: 1rem;
    background: linear-gradient(90deg, #433623 0%, #282015 100%);
    padding: 1rem 1.4rem;
    position: relative;
    margin-top: -40px;
    box-shadow: 0 4px 30px rgba(120, 97, 63, 0.1);

    @include m {
        margin-top: 40px;
    }

    .form-label {
        color: #fff;
        font-size: 0.8rem;
        font-weight: 500;
    }
}

.form-dark {
    .uk-select,
    .uk-input {
        background-color: #443623;
        border-color: #54432c;
        color: #c8c4bd;

        &:focus {
            color: #c8c4bd;
        }

        &:hover,
        &:focus {
            border-color: var(--primary-color);
            background-color: #392c19;
        }
    }

    /* Chrome, Edge, Safari */
    input[type="text"]::placeholder,
    input[type="number"]::placeholder {
        color: #c8c4bd;
    }

    /* Firefox */
    input[type="text"]::-moz-placeholder,
    input[type="number"]::-moz-placeholder {
        color: #c8c4bd;
    }

    /* Internet Explorer 10-11 */
    input[type="text"]:-ms-input-placeholder,
    input[type="number"]:-ms-input-placeholder {
        color: #c8c4bd;
    }

    /* Microsoft Edge (older) */
    input[type="text"]::-ms-input-placeholder,
    input[type="number"]::-ms-input-placeholder {
        color: #c8c4bd;
    }

    /* Style the options */
    .uk-select option {
        color: #fff !important;
    }
    .uk-select option:checked,
    .uk-select option:hover {
        color: #4a3b26 !important;
    }
}

.uk-navbar-dropdown {
    box-shadow: none;
    border: 2px solid var(--border-color);

    .quick-search-box {
        border-radius: 0;
        background: transparent;
        padding: 0;
        position: relative;
        margin-top: 0;
        box-shadow: none;
    }

    .uk-select,
    .uk-input {
        background-color: #fff;
        border: 1px solid var(--border-color);
        border-radius: var(--br-8);
        color: var(--color-text);
        font-weight: normal;
    }

    .uk-textarea {
        border: 1px solid var(--border-color);
        border-radius: var(--br-8);
        color: var(--color-text);
    }

    .uk-input:hover,
    .uk-select:hover,
    .uk-textarea:hover,
    .uk-input:focus,
    .uk-select:focus,
    .uk-textarea:focus {
        color: var(--secondary-color);
        border-color: var(--primary-color);
        background-color: transparent !important;
    }

    .form-label {
        color: var(--secondary-color);
    }

    input[type="text"]::placeholder,
    input[type="number"]::placeholder {
        color: var(--color-text);
        font-weight: normal;
    }

    /* Firefox */
    input[type="text"]::-moz-placeholder,
    input[type="number"]::-moz-placeholder {
        color: var(--color-text);
        font-weight: normal;
        opacity: 1; /* Remove #999999uced opacity in Firefox */
    }

    /* Internet Explorer 10-11 */
    input[type="text"]:-ms-input-placeholder,
    input[type="number"]:-ms-input-placeholder {
        color: var(--color-text);
        font-weight: normal;
    }

    /* Microsoft Edge (older) */
    input[type="text"]::-ms-input-placeholder,
    input[type="number"]::-ms-input-placeholder {
        color: var(--color-text);
        font-weight: normal;
    }

    /* Style the options */
    .uk-select option {
        color: var(--secondary-color) !important;
    }
    .uk-select option:checked,
    .uk-select option:hover {
           color: var(--secondary-color) !important;
    }
}
