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

.panel {
    background: #FFF;
    margin-bottom: calc-rem(30px);

    @include media-breakpoint-up(lg) {
        padding: calc-rem(40px);
        overflow: hidden;
        border-radius: calc-rem(25px);
        border: 1px solid rgba(var(--color-border), 1);
    }

    &__title {
        font-size: clamp-font(16px, 18px);
        text-transform: uppercase;
    }

    hr {
        margin: calc-rem(20px 0);
        background: rgba(var(--color-border), 1);
        height: 1px;
    }

    &__description {
        margin-top: calc-rem(10px);

        p {
            color: rgba(var(--color-body) .7);
            font-weight: 500;
            font-size: clamp-font(12px, 14px);
        }
    }

    &__content {
        a:not(.button) {
            text-decoration: underline;
        }
    }

    address {
        font-style: normal;
        margin: calc-rem(10px 0 20px 0);

        p {
            margin-bottom: 0;
        }
    }

    &__register {
        position: relative;
        border-top: 1px solid rgba(var(--color-border), 1);
        background: #FFF url('../images/register-background.svg') no-repeat;
        background-size: cover;
        margin: calc-rem(25px -10px -60px -10px);
        padding: calc-rem(30px 25px);

        @include media-breakpoint-up(lg) {
            margin: calc-rem(40px -40px -40px -40px);
            padding: calc-rem(30px 40px);
        }

        h3 {
            font-size: clamp-font(16px, 18px);
            text-transform: uppercase;
        }

        &--small {
            .panel__register-contact {
                width: 130px;
            }
        }
    }

    &__register-methods {
        margin-top: calc-rem(25px);
    }

    &__register-method {
        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);
                text-decoration: none !important;
            }
        }
    }

    &__register-contact {
        position: absolute;
        right: calc-rem(30px);
        bottom: 0;
        width: calc-rem(147px);

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

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

    &__navigation {
        list-style: none;
        margin: 0;

        li {
            a {
                display: inline-block;
                padding: calc-rem(8px 0);
                color: rgba(var(--color-secondary), .8);
                font-size: calc-rem(14px);
                text-decoration: none !important;

                &:hover {
                    color: rgba(var(--color-secondary), .8);
                    text-decoration: underline !important;
                    text-decoration-color: rgba(var(--color-primary), 1);
                    text-underline-offset: calc-rem(5px);
                }
            }

            &.is-active a {
                text-decoration: underline !important;
                text-decoration-color: rgba(var(--color-primary), 1) !important;
                text-underline-offset: calc-rem(5px);
            }
        }
    }


}
