.custom-advertising-modal {
    .swal2-popup {
        background-color: transparent !important;

        .swal2-html-container {
            overflow: visible !important;
        }

        .basic-modal-body {
            background-color: var(--white);
            border-radius: 24px;
        }
    }
}

.advertising-modal {
    position: relative;

    &__image {
        width: 100%;
        height: 220px;
        border-radius: 24px 24px 0 0;

        img {
            border-radius: 24px 24px 0 0;
        }
    }

    &__icon {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 76px;
        min-width: 76px;
        height: 76px;
        z-index: 4;
    }

    &__autoclose {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        z-index: 2;

        .autoclose-progress-bar {
            width: 0;
            height: 2px;
            background-color: var(--primary);
            transition: all 0.5s ease;
        }
    }

    &__countdown {

        &-card {
            width: 234px;
            height: 84px;
            z-index: 4;
        }

        .mask {
            position: absolute;
            inset: 8px;
            bottom: -8px;
            border-radius: 16px;
            background: var(--white);
            border: 1px solid var(--gray-200);
            z-index: 1;
        }

        &:after {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            transform: translateY(-50%);
            height: 1px;
            background-color: var(--gray-200);
            z-index: 1;
        }
    }

    &__button {
        position: absolute;
        right: 16px;
        left: 16px;
        bottom: -47px;
        z-index: 245;
    }
}