:root {
    // Colors
    --main-color: #1a7a7a;
    --main-light-color: #DDFF5E;
    --main-dark-color: #1a7a7a;
    --main-white: #edffff;
    --countdown-gradient: linear-gradient(254.81deg, #9EAF22 -22.66%, #42490E 51.41%, #9EAF22 125.48%);
    --button-gradient: linear-gradient(92deg, #CE9B0F 0%, #FFD814 100%);

    // Sizes
    --title-size: 1.625rem;
    --border-radius: 0.375rem;
}

.popup {
    position: fixed;
    z-index: 999909;
    display: none;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    background-color: #00000069;
    top: 0;
    left: 0;
    font-family: 'Roboto Condensed', sans-serif;

    * {
        box-sizing: border-box;
    }

    &__container {
        position: relative;
        width: 95%;
        max-width: 26.875rem;
        border-radius: 0.625rem;
    }

    &__close {
        cursor: pointer;
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0.375rem 0.5rem;

        svg {
            width: 1.125rem;
            height: 1.125rem;
            color: #FFF;
        }
    }

    &__content {
        padding: 1.5rem 1.25rem;
        text-align: center;
    }

    &__logo {
        width: 7.5rem;
        margin: 0 auto 1.25rem;
    }

    &__title {
        font-weight: 700;
        font-size: 1.875rem;
        text-align: center;
        line-height: 1.2;
        margin-bottom: 0.9375rem;
    }

    &__subtitle {
        font-weight: 400;
        font-size: 1.125rem;
        line-height: 1.4;
        text-align: center;

        b {
            font-weight: bold;
        }
    }

    &__product {
        max-width: 100%;
        max-height: 10.625rem;
        margin: 0 auto 0.625rem;
    }

    &__button {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 12px 20px;
        width: 100%;
        max-width: 18.75rem;
        background-color: #ffc107;
        color: #333;
        border-radius: 0.625rem;
        cursor: pointer;
        font-weight: 800;
        font-size: 20px;
        line-height: 1.2;
        text-align: center;
        margin: 0 auto 1.25rem;
        text-decoration: none;
    }

    &__badges {
        width: 100%;
        max-width: 22.5rem;
        margin: 0 auto 0.9375rem;
    }

    &__rating {
        width: 60%;
        margin: 0 auto;
        max-width: 14.0625rem;
    }

    // Modificadores
    &--exit {
        .popup__container {
            background: url(../img/popup-bg.png) no-repeat center bottom #FFF;
            background-size: 100% 100%;
            border: 0.25rem solid #C32D2D;
        }

        .popup__close {
            background-color: #C32D2D;
            color: var(--main-white);
        }

        .popup__title {
            color: #C32D2D;
        }

        .popup__subtitle {
            margin-bottom: .625rem;
            color: #0D294F;            
        }

    }

    &--discount {
        .popup__container {
            background: linear-gradient(226deg, #FF000B -0.17%, #910006 64.29%, #790005 100.21%);
            border: 4px solid #FFF943;
            color: #FFF;
        }

        .popup__close {
            background-color: #FFF943;
            color: #000;

            svg {
                color: #000;
            }
        }

        .popup__subtitle {
            margin-bottom: 0.625rem;
            color: #000;
        }

        .popup__button {
            color: #13090C;
        }
    }
}



@media (min-width: 992px) {
    .popup {
        &__container {
            width: 100%;
            max-width: 30rem;
        }

        &__logo {
            width: 14rem;
        }

        &__title {
            font-size: 2.375rem;
        }

        &__subtitle {
            font-size: 1.375rem;
        }

        &__product {
            max-height: 200px;
        }

        &__button {
            font-size: 1.5rem;
            max-width: 22.5rem;
        }
    }
}