@use "../common/utils" as *;
@use "../common/mixins" as *;

.footer {
    background: rgba(var(--color-secondary), 1);
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    padding: calc-rem(40px 0 25px 0);
    color: #FFF;
    position: relative;
    z-index: 10;
    margin-top: calc-rem(-25px);

    @include media-breakpoint-up(md) {
        padding: calc-rem(80px 0 50px 0);
    }

    h3 {
        font-size: calc-rem(14px);
        color: #FFF;
        text-transform: uppercase;
    }

    &__info {
        align-items: center;
        justify-content: space-between;

        @include media-breakpoint-up(md) {
            margin-bottom: 30px;
        }

        @include media-breakpoint-up(lg) {
            margin-bottom: 0;
        }
    }

    &__methods {
        margin-top: calc-rem(25px);
        margin-bottom: calc-rem(30px);

        @include media-breakpoint-up(md) {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
        }

        @include media-breakpoint-up(lg) {
            margin-bottom: calc-rem(50px);
            margin-top: 0;
            display: block;
        }
    }

    &__logo {
        display: inline-block;

        @include media-breakpoint-up(lg) {
            margin-bottom: calc-rem(50px);
        }

        img {
            width: calc-rem(142px);
            height: auto;
            object-fit: contain;

            @include media-breakpoint-up(lg) {
                width: calc-rem(206px);
            }
        }
    }

    &__contact {
        display: flex;
        align-items: center;
        margin-bottom: calc-rem(20px);

        @include media-breakpoint-between(md, lg) {
            margin-bottom: 0;
        }

        img {
            margin-right: calc-rem(15px);
        }

        small {
            display: block;
            opacity: .6;
            font-size: calc-rem(12px);
            margin-bottom: calc-rem(5px);
        }

        p {
            line-height: 1;
            margin-bottom: 0;

            a {
                font-size: calc-rem(14px);
            }
        }
    }

    &__socials {
        display: block;
        border-bottom: 1px solid rgba(255, 255, 255, .3);
        padding-bottom: calc-rem(40px);

        @include media-breakpoint-between(sm, lg) {
            display: none;
        }

        @include media-breakpoint-up(md) {
            border-bottom: 0;
        }

        p {
            margin-bottom: calc-rem(15px);
        }

        ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center;
            gap: calc-rem(15px);
        }
    }

    &__navigation {
        border-bottom: 1px solid rgba(255, 255, 255, .3);

        @include media-breakpoint-up(md) {
            border-bottom: 0;
        }

        h3 {
            position: relative;
            margin-bottom: 0;
            padding: calc-rem(15px 0);
            font-weight: var(--font-weight-bold);
            letter-spacing: .5px;
            font-family: var(--font-family-heading);

            @include media-breakpoint-up(md) {
                padding: 0;
                margin-bottom: calc-rem(20px);
            }

            &::after {
                transition: transform 0.2s ease;
                content: '';
                position: absolute;
                right: 0;
                top: calc-rem(26px);
                width: calc-rem(8px);
                height: calc-rem(4px);
                background: url('../images/icons/icon-dropdown-white.svg') no-repeat;
                background-size: contain;

                @include media-breakpoint-up(md) {
                    display: none;
                }
            }
        }

        ul {
            list-style: none;
            margin: 0;
            padding: calc-rem(0 0 15px 0);
            display: none;

            @include media-breakpoint-up(md) {
                display: block;
            }

            li {
                a {
                    display: inline-block;
                    padding: calc-rem(8px 0);
                    color: rgba(255, 255, 255, .8);
                    font-size: calc-rem(14px);

                    &:hover {
                        color: rgba(255, 255, 255, 1);
                        text-decoration: underline;
                        text-decoration-color: rgba(var(--color-primary), 1);
                        text-underline-offset: calc-rem(5px);
                    }
                }
            }
        }

        &.is-active {
            h3::after {
                transform: rotate(180deg);
                transition: transform 0.2s ease;
            }

            ul {
                display: block;
            }
        }
    }

    &__payment {
        margin-bottom: calc-rem(40px);
        display: none;

        @include media-breakpoint-up(md) {
            display: block;
        }

        ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center;
            gap: calc-rem(10px);
        }
    }

    &__rating {
        margin-top: calc-rem(30px);

        @include media-breakpoint-up(md) {
            margin-top: 0;
        }
    }

    &__reviews {
        display: flex;
        align-items: center;
        gap: calc-rem(5px);

        @include media-breakpoint-between(sm, xl) {
            display: block;
        }

        a {
            color: #FFF;
            text-decoration: underline;
        }
    }

    &__stars {
        margin-right: calc-rem(5px);
        margin-bottom: calc-rem(5px);

        @include media-breakpoint-up(xxl) {
            margin-bottom: 0;
        }
    }

    &__copyright {
        align-items: center;
        justify-content: space-between;
        padding-top: calc-rem(30px);

        @include media-breakpoint-up(xl) {
            display: flex;
        }

        p {
            margin-bottom: 0;
            color: rgba(255, 255, 255, .6);
        }

        ul {
            list-style: none;
            margin: calc-rem(15px 0 0 0);
            padding: 0;
            gap:20px;

            @include media-breakpoint-up(lg) {
                display: flex;
            }

            @include media-breakpoint-up(xl) {
                margin-top: 0;
            }

            li {
                margin-bottom: calc-rem(10px);

                @include media-breakpoint-up(lg) {
                    margin-bottom: 0;
                }
            }

            a {
                color: rgba(255, 255, 255, .6);

                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }
}
