.button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--orange);
    border-radius: 10px;
    text-decoration: none;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    background-color: var(--orange);
    color: var(--white);
    cursor: pointer;
    transition: border-color 0.3s, background-color 0.3s;
}

.button:hover {
    background-color: var(--light-orange);
    border-color: var(--light-orange);
}

.button:disabled {
    cursor: not-allowed;
}

.button--secondary {
    background-color: var(--white);
    color: var(--black);
}

.button--secondary:hover {
    background-color: var(--white);
    border-color: var(--black);
}

.input {
    outline-color: var(--light-orange);
    width: 100%;
    padding: 1em 1.16em;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background-color: var(--white);
    font-size: 18px;
    transition: outline 0.4s ease;
}

.input:focus {
    outline: 1px solid var(--light-orange);
}

.input:disabled {
    cursor: not-allowed;
}
.input:disabled {
    opacity: 0.65;
}

.select {
    width: 100%;
    padding: 1em 1.16em;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background-color: var(--white);
    font-size: 18px;
    background: url(/mfo/assets/icons/select-arrow.svg) no-repeat var(--white);
    background-position: right 20px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.range {
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.range {
    height: 4px;
    border-radius: 4px;
    background-color: var(--orange);
}

.range::-webkit-slider-thumb {
    width: 15px;
    height: 15px;
    border: none;
    border-radius: 50%;
    background-color: var(--orange);
    box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--orange);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.range {
    height: 4px;
    border-radius: 4px;
    background-color: var(--orange);
}

.range::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border: none;
    border-radius: 50%;
    background-color: var(--orange);
    box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--orange);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.search {
    display: block;
    margin: 0 auto;
    max-width: 465px;
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    border-radius: 15px;
    padding: 15px 20px;
    font-size: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    transition: border 0.25s ease;
    background: url(/mfo/assets/icons/search.svg) no-repeat var(--white);
    background-position: right 20px center;
}

.search:hover,
.search:focus {
    border: 1px solid #FFA800;
}

/*CHECKBOX-BTN*/
.checkbox-btn {
    display: inline-block;
    position: relative;
    margin-right: 14px;
    margin-top: 14px;
}
.checkbox-btn input[type=checkbox] {
    z-index: -1;
    opacity: 0;
    display: block;
    width: 0;
    height: 0;
}
.checkbox-btn span {
    display: flex;
    cursor: pointer;
    padding: 10px 10px;
    border: 1px solid var(--black-opacity-0-01);
    border-radius: 5px;
    transition: background 0.2s ease;
}
.checkbox-btn input[type=checkbox]:checked + span {
    background: var(--orange);
    color: var(--white)
}

.checkbox-btn span:hover {
    color: var(--light-orange);
    border-radius: 5px;
}
.checkbox-btn input[type=checkbox]:active:not(:disabled) + span {
    color: var(--light-orange);
}
.checkbox-btn input[type=checkbox]:disabled + span {
    background: var(--white);
    color: var(--black);
    opacity: 0.5;
    cursor: not-allowed;
    border-radius: 5px;
}
.checkbox-btn input[type=checkbox]:checked:disabled + span {
    background: var(--orange);
    color: var(--white);
    opacity: 0.5;
    border-radius: 5px;
}

.filter-form__link{
    margin-right: 14px;
    margin-top: 14px;
    padding: 10px;
    border: 1px solid var(--black-opacity-0-01);
    border-radius: 5px;
    text-decoration: none;
    color: var(--black);
    transition: color .3s;
    outline: none;
    background: inherit;
}
.filter-form__link:hover {
    color: var(--light-orange);
}
.radiobutton__label {
    width: 100%;
    display: flex;
    padding-left: 30px;
    font-size: 16px;
}
.filter-form__link--sitemap {
    cursor: pointer;
    font-size: 16px;
}

.radiobutton__label:before {
    position: absolute;
    top: -1px;
    left: 0;
    content: "";
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, .35);
    background: transparent;
    border-radius: 3px;
    cursor: pointer;
}
input:checked ~ .radiobutton__label:before {
    background:
        linear-gradient(180deg, #fafafa 20%, transparent 20%, transparent 80%, #fafafa 80%, #fafafa 100%),
        linear-gradient(45deg, #fafafa 23%, transparent 20%, transparent 80%, #fafafa 80%, #fafafa 100%),
        linear-gradient(135deg, #fafafa 23%, transparent 20%, transparent 80%, #fafafa 80%, #fafafa 100%),
        linear-gradient(225deg, #fafafa 23%, transparent 20%, transparent 80%, #fafafa 80%, #fafafa 100%),
        linear-gradient(315deg, #fafafa 23%, transparent 20%, transparent 80%, #fafafa 80%, #fafafa 100%),
        linear-gradient(90deg, transparent 20%, #FFA800 20%, #FFA800 80%, transparent 80%, transparent 100%)
}

.control__wrapper {
    position: relative;
}

input[type='radio'] {
    position: absolute;
    opacity: 0;
    z-index: -1;
}


.sidebar-drop__checkbox {
    position: absolute;
    opacity: 0;
    z-index: -1;
}
.sidebar-drop__checkbox--show-pickup {
    position: relative;
}

.textarea {
    width: 100%;
    padding: 1em 1.16em;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background-color: var(--white);
    font-size: 18px;
    transition: outline 0.4s ease;
}

.textarea {
    display: block;
    font-weight: 500;
    margin-top: 20px;
    resize: none;
    background: var(--white);
    width: 100%;
    padding: 1em 1.16em;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background-color: var(--white);
    font-size: 18px;
    transition: outline 0.4s ease;
}

.textarea:focus {
    outline: 1px solid var(--light-orange);
}

.textarea::placeholder {
    opacity: 0.5;
}

.button--show-pickup {
    position: absolute;
    bottom: -16px;
    right: -195px;
    z-index: 15;
    animation: show-effect 3.5s linear 1;
}
.button--show-pickup::before {
    content: '';
    width: 10px;
    height: 10px;
    position: absolute;
    bottom: 50%;
    left: -2px;
    transform: rotate(45deg) translateY(50%);
    background: var(--orange);
    transition: border-color 0.3s, background-color 0.3s;
}
.button--show-pickup:hover:before {
    background-color: var(--light-orange);
    transition: background-color 0.3s;
}

@media (max-width: 1024px) {
    .button--show-pickup {
        display: none;
    }
}

@keyframes show-effect {
    0% { right: -100px; opacity: 0.55; }
    10% { right: -195px; opacity: 1; }
    90% {right: -195px; opacity: 1;}
    100% { right: -100px; opacity: 0}
}