.site-footer {
    padding:    56px 0 32px;
    color:      var(--footer-color);
    background: var(--footer-bg);
}

.site-footer a {
    color:           inherit;
    text-decoration: none;
    transition:      color var(--transition);
}

.site-footer__columns {
    display:               grid;
    grid-template-columns: 280px 230px 300px 380px;
    justify-content:       space-between;
    gap:                   40px 24px;
}

.site-footer__brand {
    display:        flex;
    flex-direction: column;
    gap:            9px;
    font-size:      13px;
    color:          rgba(255, 255, 255, .6);
}

.site-footer__logo {
    display:       block;
    margin-bottom: 15px;
}

.site-footer__logo img {
    display: block;
    width:   179px;
    height:  auto;
}

.site-footer__description {
    max-width:   260px;
    line-height: 1.4;
}

.site-footer__payments {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    align-items:    flex-start;
    margin-top:     auto;
    padding-top:    24px;
}

.site-footer__payments-label {
    font-size: 12px;
    color:     rgba(255, 255, 255, .5);
}

.site-footer__payments-badge {
    padding:       6px 10px;
    border-radius: var(--radius-xs);
    font-size:     11px;
    font-weight:   500;
    color:         rgba(255, 255, 255, .8);
    background:    rgba(255, 255, 255, .08);
}

.site-footer__col {
    display:        flex;
    flex-direction: column;
    gap:            12px;
}

.site-footer__title {
    font-size:   15px;
    line-height: normal;
    font-weight: 600;
    color:       var(--text-inverse);
}

.site-footer__menu {
    display:        flex;
    flex-direction: column;
    gap:            12px;
    font-size:      13px;
    color:          rgba(255, 255, 255, .68);
}

.site-footer__menu a:hover,
.site-footer__legal-list a:hover {
    color: var(--text-inverse);
}

.site-footer__contacts {
    grid-column: 4;
    gap:         14px;
}

.site-footer__main-phone {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    align-items:    flex-start;
}

.site-footer__phone {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-size:   16px;
    font-weight: 600;
    color:       var(--text-inverse);
}

.site-footer__callback {
    font-size:   13px;
    font-weight: 500;
    color:       var(--icon-brand);
    cursor:      pointer;
}

.site-footer__callback:hover {
    color: var(--sky-300);
}

.site-footer__messenger-row {
    display:     flex;
    align-items: center;
    gap:         10px;
}

.site-footer__messenger-phone {
    width:       118px;
    font-size:   14px;
    font-weight: 600;
    color:       rgba(255, 255, 255, .9);
}

.site-footer__badge {
    display: inline-flex;
}

.site-footer__badge + .site-footer__badge {
    margin-left: -4px;
}

.site-footer__email {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-size:   14px;
    font-weight: 500;
    color:       rgba(255, 255, 255, .9);
}

.site-footer__address {
    display:     flex;
    align-items: flex-start;
    gap:         8px;
    font-size:   13px;
    font-style:  normal;
    color:       rgba(255, 255, 255, .75);
}

.site-footer__address .icon {
    flex-shrink: 0;
    color:       var(--text-inverse);
}

.site-footer__address-text {
    display:        flex;
    flex-direction: column;
    gap:            4px;
    max-width:      300px;
}

.site-footer__address-text a {
    font-weight: 500;
    color:       var(--icon-brand);
}

.site-footer__phone .icon,
.site-footer__email .icon {
    color: var(--text-inverse);
}

.site-footer__bottom {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             24px;
    margin-top:      40px;
    padding-top:     24px;
    border-top:      1px solid rgba(255, 255, 255, .1);
    font-size:       13px;
}

.site-footer__copyright {
    color: rgba(255, 255, 255, .5);
}

.site-footer__legal-list {
    display:   flex;
    flex-wrap: wrap;
    gap:       8px 24px;
    color:     rgba(255, 255, 255, .68);
}

@media (max-width: 1279px) {
    .site-footer__columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content:       stretch;
    }

    .site-footer__contacts {
        grid-column: auto;
    }
}

@media (max-width: 767px) {
    .site-footer {
        padding: 40px 0 24px;
    }

    .site-footer__columns {
        grid-template-columns: 1fr;
        gap:                   32px;
    }

    .site-footer__payments {
        margin-top: 0;
    }

    .site-footer__bottom {
        flex-direction: column;
        align-items:    flex-start;
        margin-top:     32px;
    }
}