.bconnect-marketing-popup {
    box-sizing: border-box;
    position: relative;
    width: 536px;
    min-height: 250px;
    padding: 42px 36px 30px 36px;
    background: #fff;
    font-family: 'Open Sans', Arial, sans-serif;

    &__loader {
        position: absolute;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, .7);
        z-index: 2;
    }

    &__spinner {
        width: 34px;
        height: 34px;
        border: 3px solid rgba(67, 198, 161, .2);
        border-top-color: #43c6a1;
        border-radius: 50%;
        animation: bconnect-marketing-popup-spin .7s linear infinite;
    }

    &__content {
        width: 100%;
    }

    &__title {
        max-width: 430px;
        margin: 0 0 12px;
        color: #2d2a2b;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.28;
    }

    &__error {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin: 0 0 18px;
        color: #e84b78;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.2;

        &:before {
            content: '!';
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: #e84b78;
            color: #fff;
            font-size: 10px;
            font-weight: 700;
        }
    }

    &__choices {
        margin: 0 0 21px;
    }

    &__choice {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 0 14px;
        cursor: pointer;
        color: #272425;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.2;

        &:last-child {
            margin-bottom: 0;
        }

        input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        input:checked + .bconnect-marketing-popup__radio {
            border-color: #43c6a1;
            background: #43c6a1;

            &:after {
                opacity: 1;
            }
        }
    }

    &__radio {
        position: relative;
        flex: 0 0 20px;
        width: 20px;
        height: 20px;
        border: 1px solid #d8d3d5;
        border-radius: 4px;
        background: #fff;
        box-sizing: border-box;
        transition: border-color .2s ease;

        &:after {
            content: '';
            position: absolute;
            top: 3px;
            left: 6px;
            width: 5px;
            height: 10px;
            border-right: 2px solid #fff;
            border-bottom: 2px solid #fff;
            transform: rotate(45deg);
            opacity: 0;
            transition: opacity .2s ease;
        }
    }

    &__label {
        display: inline-block;
        padding-top: 1px;
    }

    &__note {
        margin: 0;
        color: #242122;
        font-size: 14px;
        font-style: italic;
        line-height: 1.36;
    }

    &--loading {
        pointer-events: none;

        .bconnect-marketing-popup__loader {
            display: flex;
        }
    }

    &--invalid {
        .bconnect-marketing-popup__radio {
            border-color: #e84b78;
        }
    }
}

.bconnect-container {
    box-sizing: border-box;
    width: 100%;
    max-width: 634px;
    padding: 0 80px 35px;
    background: #fff;
}

.login-container .bconnect-container,
.register-container .bconnect-container {
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.register-container {
    display: flex;
    flex-direction: column;
}

.bconnect-authentication {
    margin: 0 auto;
    width: 306px;
    max-width: 100%;
    color: #171717;
    font-size: 10px;
    line-height: 14px;
    text-align: center;

    &__separator {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 20px 0 18px;
        color: #555;

        &::before,
        &::after {
            content: '';
            flex: 1;
            height: 1px;
            background: #ededed;
        }
    }

    &__panel {
        padding: 12px 12px 10px;
        border: 1px solid #ff3b68;
        border-radius: 10px;
        background: #fff8fa;
    }

    &__title {
        margin: 0 0 10px;
        font-size: 10px;
        line-height: 14px;
        font-weight: 500;
    }

    &__button {
        position: relative;
        display: flex;
        min-height: 40px;
        align-items: center;
        justify-content: center;
    }

    &__image-button {
        display: block;
        width: auto;
        height: 40px;
        padding: 0;
        border: 0;
        background: transparent;
        cursor: pointer;

        img {
            display: block;
            width: auto;
            height: 40px;
        }
    }

    &__sdk-button {
        position: absolute;
        z-index: 2;
        inset: 0;
        opacity: 0;

        > div,
        button,
        iframe {
            width: 100% !important;
            height: 40px !important;
        }
    }

    &__note {
        max-width: 280px;
        margin: 8px auto 0;
        color: #666;
        font-size: 7px;
        line-height: 9px;

        a {
            color: #00a99d;
            text-decoration: underline;
        }
    }
}

@media (max-width: 767px) {
    .bconnect-container {
        padding: 0 20px 25px;
    }

    .bconnect-authentication {
        max-width: 100%;
    }
}

.bconnect-marketing-popup-modal {
    &.modal-popup {
        .modal-inner-wrap {
            width: 536px;
            max-width: 536px;
            min-height: 250px;
            margin: 8rem auto 0;
            border-radius: 0;
            box-shadow: none;
            background: transparent;
        }

        .modal-content {
            padding: 0;
            background: transparent;
            box-shadow: none;
        }
    }

    .action-close,
    .modal-header,
    .modal-footer {
        display: none !important;
    }
}

@keyframes bconnect-marketing-popup-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}