@import "inputs.css";
@import "checkbox.css";

:root {
    --custom-blue: #025BFF;
    --custom-blue-hover: #0250e0;
    --custom-gray: #F2F4F7;
    --custom-gray2: #98A2B3;

    --btn-black-bg: transparent;
    --btn-black-hover-bg: #000;
    --btn-black-text: #000;
    --btn-black-hover-text: #fff;
    --btn-black-border: #000;

    --btn-outline-primary-background: transparent;
    --btn-outline-primary-background-hover: var(--custom-blue);
    --btn-outline-primary-text-color: var(--custom-blue);
    --btn-outline-primary-text-color-hover: #fff;
    --btn-outline-primary-border-color: var(--custom-blue);
    --btn-outline-primary-border-color-hover: var(--custom-blue);


    --btn-radio-secondary-background: #F2F4F7;
    --btn-radio-secondary-text-color: #98A2B3;
    --btn-radio-secondary-border-color: none;
    --btn-radio-secondary-blog-background: #F2F4F7;
    --btn-radio-secondary-blog-text-color: #98A2B3;
    --btn-radio-secondary-blog-border-color: none;

    --btn-up-background: #2079FF;
    --btn-up-background-hover: #025BFF;


    --btn-paginate-text-color: #242424;
}

:root.dark {
    --custom-gray: #4D4D4D;

    --btn-black-bg: transparent;
    --btn-black-hover-bg: #fff;
    --btn-black-text: #fff;
    --btn-black-hover-text: #000;
    --btn-black-border: #fff;

    --btn-outline-primary-background: transparent;
    --btn-outline-primary-background-hover: #fff;
    --btn-outline-primary-text-color: #fff;
    --btn-outline-primary-text-color-hover: #000;
    --btn-outline-primary-border-color: #fff;
    --btn-outline-primary-border-color-hover: #fff;

    --btn-radio-secondary-background: transparent;
    --btn-radio-secondary-text-color: #fff;
    --btn-radio-secondary-border-color: 0 0 0 1px #fff;
    --btn-radio-secondary-blog-background: #242424;
    --btn-radio-secondary-blog-text-color: #98A2B3;
    --btn-radio-secondary-blog-border-color: none;

    --btn-up-background: #2079FF;
    --btn-up-background-hover: #5CB5FF;


    --btn-paginate-text-color: #fff;
}

.btn {
    font-family: Montserrat, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 24px;
    padding: 8px 32px;
    border-radius: var(--mobile-border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background-color: transparent;
    width: max-content;
    border: none;
}

.btn-primary {
    color: #fff;
    background-color: var(--custom-blue);
    /*box-shadow: 0 0 0 2px var(--custom-blue);*/
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:focus-visible
{
    background-color: var(--custom-blue-hover);
    /*box-shadow: 0 0 0 2px var(--custom-blue-hover);*/
}

.btn-primary:disabled {
    background-color: var(--custom-blue);
    border-color: var(--custom-blue);
    color: #fff;
}

.btn-secondary {
    color: var(--custom-gray2);
    background-color: var(--custom-gray);
    border: none;
    outline: none;
    box-shadow: none;

    --bs-btn-hover-border-color: none;
    --bs-btn-focus-box-shadow: none;
}

.btn-outline-white {
    background-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 0 0 2px #fff inset !important;
}

.btn-outline-white:hover,
.btn-outline-white:focus,
.btn-outline-white:focus-visible,
.btn-outline-white:active {
    background-color: #fff !important;
    color: #000 !important;
}

.btn-white {
    color: #141414;
    background-color: #fff;
    border: none;
    outline: none;
    box-shadow: none;
}

.btn-white:hover,
.btn-white:focus,
.btn-white:focus-visible,
.btn-white:active {
    background-color: #141414 !important;
    color: #fff !important;
}

.btn-black {
    background-color: var(--btn-black-bg) !important;
    color: var(--btn-black-text) !important;
    box-shadow: 0 0 0 2px var(--btn-black-border) inset !important;
}

.btn-black:hover,
.btn-black:active,
.btn-black:focus,
.btn-black:focus-visible
{
    background-color: var(--btn-black-hover-bg) !important;
    color: var(--btn-black-hover-text) !important;
    box-shadow: 0 0 0 2px var(--btn-black-border) inset !important;
}

.btn-outline-primary,
.btn-check.universal + .btn {
    color: var(--btn-outline-primary-text-color);
    background-color: var(--btn-outline-primary-background);
    box-shadow: 0 0 0 2px var(--btn-outline-primary-border-color) inset;
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary:focus,
.btn-outline-primary:focus-visible,
.btn-check.universal:checked + .btn,
.btn-check.universal:hover + .btn,
.btn-check.universal:focus + .btn,
.btn-check.universal:focus-visible + .btn {
    --bs-btn-active-color: var(--btn-outline-primary-text-color-hover);
    --bs-btn-active-bg: var(--btn-outline-primary-background-hover);
    --bs-btn-active-border-color: none;
    --bs-btn-focus-box-shadow: 0 0 0 2px var(--btn-outline-primary-border-color-hover) inset;
    color: var(--btn-outline-primary-text-color-hover);
    background-color: var(--btn-outline-primary-background-hover);
    box-shadow: 0 0 0 2px var(--btn-outline-primary-border-color-hover) inset;
}

.btn-outline-primary:disabled {
    color: var(--custom-blue);
    background-color: transparent;
    box-shadow: 0 0 0 2px var(--custom-blue) inset;
}

.btn .icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

.btn-primary .icon {
    background-color: #fff;
}

.btn-outline-primary .icon {
    background-color: var(--btn-outline-primary-text-color);
}

.btn-outline-primary:hover .icon,
.btn-outline-primary:active .icon,
.btn-outline-primary:focus .icon,
.btn-outline-primary:focus-visible .icon
{
    background-color: var(--btn-outline-primary-text-color-hover);
}

.btn .icon-house_crack {
    mask-image: url(../img/buttons/house_crack.svg);
    -webkit-mask-image: url(../img/buttons/house_crack.svg);
}

.btn .icon-car {
    mask-image: url(../img/buttons/car.svg);
    -webkit-mask-image: url(../img/buttons/car.svg);
}

.btn .icon-arrow-right {
    width: 24px;
    height: 24px;
    mask-image: url(../img/buttons/arrow-small-right.svg);
    -webkit-mask-image: url(../img/buttons/arrow-small-right.svg);
}

.btn-only-icon {
    padding: 12px !important;
}

.btn-auth {
    padding: 12px 24px !important;
}


.btn-radio.articles {
    padding: 5px 12px 7px 12px;
    border-radius: 12px;
    background: var(--btn-radio-secondary-background);
    color: var(--btn-radio-secondary-text-color);
    box-shadow: var(--btn-radio-secondary-border-color) inset !important;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
    width: max-content;
    outline: none !important;
}

.btn-radio.blog {
    background: var(--btn-radio-secondary-blog-background);
    color: var(--btn-radio-secondary-blog-text-color);
    box-shadow: var(--btn-radio-secondary-blog-border-color) inset !important;
    /*padding: 2px 12px !important;*/
    padding: 4px 12px !important;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px; /* 157.143% */
}

.btn-check.articles:checked + .btn,
.btn-check.articles:hover + .btn,
.btn-check.articles:focus + .btn,
.btn-check.articles:focus-visible + .btn,
.btn-check.blog:checked + .btn,
.btn-check.blog:hover + .btn,
.btn-check.blog:focus + .btn,
.btn-check.blog:focus-visible + .btn {
    color: #fff;
    background-color: #2079FF;
}


.btn-up {
    width: 100px;
    height: 100px;
    background: var(--btn-up-background);
    border-radius: 50%;
    border: none;
    outline: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    position: absolute;
    position: fixed;
    bottom: 50px;
    right: calc((100vw - 1700px) / 2 + 20px);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.btn-up:hover {
    background: var(--btn-up-background-hover);
}

.btn-up.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto
}

.btn-up::after {
    display: flex;
    content: '';
    position: absolute;
    width: 32px;
    height: 32px;
    background-color: #fff;
    -webkit-mask-image: url(../img/icons/arrow-small-up.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url(../img/icons/arrow-small-up.svg);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    background-image: none !important;
    /*transition: .2s all;*/
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}


.btn-paginate {
    padding: 12px 21px;
    background: transparent;
    border-radius: 50%;
    color: var(--btn-paginate-text-color);
    width: 60px;
    height: 60px;
}

.btn-paginate.active,
.btn-paginate:active,
.btn-paginate:hover,
.btn-paginate:focus,
.btn-paginate:focus-visible
{
    color: #fff !important;
    background: #242424 !important;
}

@media (max-width: 1440px) {
    .btn-up {
        right: 112px;
    }
}

@media (max-width: 1024px) {
    .btn-up {
        right: 20px;
    }
}

@media (max-width: 768px) {
    .btn-up {
        display: none;
    }

    .btn-paginate {
        width: 48px;
        height: 48px;
    }
}