:root {
    --btn-scroll-up-size: clamp(40px, 4.6875vw, 60px);
    --footer-top-padding: clamp(40px, 3.125vw, 60px);
    --footer-left-padding: var(--footer-top-padding);
    --footer-list-gap: 20px;
}

.page__footer {
    --footer-logo-size: 80px;
    --footer-widget-size: 56px;
    --footer-cell-width: clamp(225px, 16.666667vw, 320px);

    padding: var(--footer-top-padding) var(--footer-left-padding);
    font-size: 16px;
    text-transform: uppercase;
}

.footer-box {
    display: grid;
}

@media screen and (min-width: 1360px) {
    .footer-box {
        gap: min(2.5vw, 48px) calc(2 * var(--footer-list-gap));
        /*
        grid-template-areas:
            "logo nav-list pastime-list contacts contacts widget"
         "sign-in nav-list pastime-list contacts contacts widget"
            "legal-info copyright policy requisites dev dev";
        */
        grid-template-areas:
            "logo nav-list pastime-list contacts contacts widget"
            "sign-in nav-list pastime-list contacts contacts widget"
            "legal-info copyright requisites dev  . .";
        grid-template-columns: repeat(4, minmax(auto, var(--footer-cell-width))) auto var(--footer-widget-size);
        grid-template-rows: repeat(3, auto);
    }
}


.footer-box .footer-box__logo {
    grid-area: logo;
}

.footer-box .footer-box__nav-list {
    grid-area: nav-list;
}

.footer-box .footer-box__pastime-list {
    grid-area: pastime-list;
}

.footer-box .footer-box__contacts {
    grid-area: contacts;
}

.footer-box .footer-box__widget {
    grid-area: widget;
    height: calc(var(--footer-widget-size) * 2);
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
}

.footer-box .footer-box__sign-in {
    grid-area: sign-in;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
}

.footer-box .footer-box__legal-info {
    grid-area: legal-info;
    max-width: 320px;
    margin-top: var(--footer-list-gap);
    display: flex;
    align-items: flex-end;
}

.footer-box .footer-box__copyright {
    grid-area: copyright;
}

.footer-box .footer-box__policy {
    grid-area: policy;
}

.footer-box .footer-box__requisites {
    grid-area: requisites;
}

.footer-box .footer-box__dev {
    grid-area: dev;
}

.footer-box .footer-box__list {
    display: flex;
    flex-direction: column;
    row-gap: var(--footer-list-gap);
}

.footer-box__legal-info > .footer-box__list > .footer-box__txt {
    line-height: 1.125;
}

.footer-box .footer-box__item {
    display: block;
    font-size: 1em;
    margin-bottom: -.3125em;
    margin-top: -.125em;
    line-height: 1;
}

.footer-box .footer-box__title,
.footer-box .footer-box__txt {
    display: block;
    margin-top: -2px;
    font-size: .75em;
    color: var(--color-secondary);
}

.footer-box .footer-box__txt {
    margin-bottom: -2px;
}

.footer-box .footer-box__title {
    margin-bottom: -.2em;
}

.footer-box .footer-box__title {
    padding-bottom: var(--footer-list-gap);
}

.footer-box__txt .txt__title {
    margin-top: 1px;
    margin-bottom: 1px;
}

.footer-box .footer-box_bottom {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.footer-box .jalousie--bl::after {
    border-radius: 0;
}


.footer-box__logo .img.img_logo {
    display: block;
    width: var(--footer-logo-size);
    height: auto;
}

.footer-box__logo .img.img_logo img {
    width: 100%;
    height: auto;
    object-fit: contain;
}


.footer-box__contacts .contacts__box + .contacts__box {
    margin-top: calc(2 * var(--footer-list-gap));
}


.contacts__box:has(+ .contacts__box.menu__sm) .footer-box__item {
    margin-bottom: -.1875em;
}

.footer-box__contacts .menu__sm {
    column-gap: var(--footer-list-gap);

}

.footer-box__contacts .menu__sm .menu__sm-link {

}

.footer-box__widget .widget__iframe {
    position: absolute;
    top: 25%;
    left: 0;
    height: var(--footer-widget-size);
    opacity: 0;
    transform: scaleY(2.5);
}

.footer-box__payment {
    display: flex;
    column-gap: .5em;
}

.footer-box__payment img {
    display: block;
    width: 2em;
    height: auto;
    object-fit: contain;

}


@media screen and (min-width: 1200px) and (max-width: 1359px) {
    .page__footer {
        --footer-cell-width: clamp(210px, 21.875vw, 280px);
    }

    .footer-box {
        gap: var(--footer-list-gap);
        /*
        grid-template-areas:
            "logo nav-list contacts widget"
         "sign-in pastime-list contacts ."
            "legal-info copyright requisites ."
            "legal-info policy dev .";
        */
        grid-template-areas:
            "logo nav-list contacts widget"
            "sign-in pastime-list contacts ."
            "legal-info copyright requisites ."
            "legal-info  dev . .";
        grid-template-columns: repeat(3, minmax(auto, var(--footer-cell-width))) auto;
        grid-template-rows: repeat(2, auto) 1fr .5em;
        min-height: min(640px, calc(50vw - 2 * var(--footer-top-padding)));
    }

    .footer-box .footer-box__pastime-list {
        margin-top: var(--footer-list-gap);
    }
}

@media screen and (max-width: 1199px) {
    :root {
        --footer-left-padding: var(--footer-list-gap);
    }

    .page__footer {
        --footer-column-gap: calc(2 * var(--footer-list-gap));
    }

    .footer-box {
        gap: var(--footer-list-gap) var(--footer-column-gap);
    }

    .footer-box .footer-box__nav-list,
    .footer-box .footer-box__pastime-list {
        display: none;
    }
}

@media screen and (min-width: 440px) and (max-width: 1199px) {
    .footer-box {
        grid-template-rows: repeat(2, auto) 1fr repeat(2, .5em);
    }
}

@media screen and (min-width: 800px) and (max-width: 1199px) {
    .page__footer {
        --footer-cell-width: calc(50% - var(--footer-column-gap));
    }

    .footer-box {
        /*
        grid-template-areas:
            "logo contacts widget"
            "sign-in contacts ."
            "legal-info copyright ."
            "legal-info requisites ."
            "legal-info policy ."
            "legal-info dev .";
        */
        grid-template-areas:
            "logo contacts widget"
            "sign-in contacts ."
            "legal-info copyright ."
            "legal-info requisites ."
            "legal-info dev .";
        grid-template-columns: minmax(auto, var(--footer-cell-width)) auto auto;
    }
}

@media screen and (min-width: 600px) and (max-width: 1199px) {
    .footer-box  {
        min-height: min(500px, 78.125vw);
    }
}

@media screen and (min-width: 440px) and (max-width: 959px) {
    .page__footer {
        --footer-logo-size: clamp(50px, calc(10vw - 10px), 80px);
    }
}

@media screen and (min-width: 440px) and (max-width: 799px) {
    .footer-box {
        gap: var(--footer-list-gap) calc(2 * var(--footer-list-gap));
        /*
        grid-template-areas:
            "logo widget contacts"
            "sign-in sign-in contacts"
            "legal-info legal-info copyright"
            "legal-info legal-info requisites"
            "legal-info legal-info policy"
            "legal-info legal-info dev";
        */
        grid-template-areas:
            "logo widget contacts"
            "sign-in sign-in contacts"
            "legal-info legal-info copyright"
            "legal-info legal-info requisites"
            "legal-info legal-info dev";

        grid-template-columns: var(--footer-logo-size) auto 50%;
    }

    .footer-box .footer-box__widget {
        justify-content: flex-start;
    }
}

@media screen  and (max-width: 799px) {
    .page__footer {
        --footer-widget-size: clamp(46px, 8.75vw, 56px);
    }
}

@media screen  and (max-width: 599px) {
    .page__footer {
        --footer-logo-size: clamp(44px, calc(12.5vw - 25px), 50px);
        --sm-icon-size: 30px;
        font-size: 14px;
    }

    .footer-box .footer-box__title,
    .footer-box .footer-box__txt {
        font-size: 10px;
        margin-top: -.0875em;
        margin-bottom: -.1em;
    }

    .footer-box__contacts .contacts__box + .contacts__box {
        margin-top: calc(1.5 * var(--footer-list-gap));
    }

    .footer-box .footer-box__contacts .footer-box__list {
        row-gap: 11px;
    }

    .footer-box .footer-box__contacts .footer-box__title {
        padding-bottom: 11px;
    }
}

@media screen and (min-width: 440px) and (max-width: 599px) {
    .footer-box {
        column-gap: calc(1.5 * var(--footer-list-gap));
    }

    .footer-box .footer-box_bottom {
        margin-right: calc(var(--btn-scroll-up-size) + var(--footer-list-gap));
    }
}

@media screen and (max-width: 439px) {
    :root {
        --footer-top-padding: clamp(30px, calc(12.5vw - 10px), 40px);
    }

    .footer-box {
        gap: calc(1.5 * var(--footer-list-gap)) var(--footer-list-gap);
        /*
        grid-template-areas:
            "logo widget"
            "sign-in sign-in"
            "contacts ."
            "legal-info ."
            "copyright ."
            "requisites ."
            "policy ."
            "dev .";
        */
        grid-template-areas:
            "logo widget"
            "sign-in sign-in"
            "contacts ."
            "legal-info ."
            "copyright ."
            "requisites ."
            "dev .";

        grid-template-rows: repeat(5, auto) repeat(2, .5em);
        grid-template-columns: auto var(--footer-widget-size);
    }

    .footer-box .footer-box__widget {
        justify-content: flex-end;
    }

    .footer-box .footer-box__sign-in {
        margin-top: var(--footer-list-gap);
        margin-bottom: var(--footer-list-gap);
    }

    .footer-box .footer-box__sign-in .sign-in__btn {
        flex: 0 0 100%;
    }
}


.scroll-up {
    bottom: var(--footer-top-padding);
    right: var(--footer-left-padding);
    --button-size: var(--btn-scroll-up-size);
}

.scroll-up .scroll-up__button {
    margin: 0;
    border-radius: 50%;
    background-color: var(--dark);
    border: 1px solid #172a42;
}

.scroll-up .scroll-up__button .scroll-up__arrow {
    width: 2px;
    height: 16px;
}