/* =========================================================
   PROMO OFFER
========================================================= */

.promo-offer {
    padding:
        var(--section-spacing)
        0;

    background:
        #ffffff;
}


/* =========================================================
   HEADER
========================================================= */

.promo-offer__header {
    width: 100%;

    margin:
        0
        auto
        30px;

    text-align: center;
}


/* =========================================================
   TITLE
========================================================= */

.promo-offer__title {
    margin:
        0
        0
        14px;

    color:
        var(--color-text);

    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
}


/* =========================================================
   INTRO
========================================================= */

.promo-offer__intro {
    color:
        var(--color-text-secondary);

    font-size: 16px;
    line-height: 1.6;
}


.promo-offer__intro p {
    margin: 0;
}


.promo-offer__intro p + p {
    margin-top: 8px;
}


.promo-offer__intro strong {
    color:
        var(--color-text);
}


/* =========================================================
   PRICES
========================================================= */

.promo-offer__prices {
    width: 100%;

    margin:
        0
        auto
        34px;

    border-top:
        1px solid
        var(--color-border);
}


/* =========================================================
   PRICE ROW
========================================================= */

.promo-offer__price-row {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 28px;

    min-height: 64px;

    padding:
        13px
        18px;

    border-bottom:
        1px solid
        var(--color-border);
}


.promo-offer__price-row:nth-child(even) {
    background:
        #fafafa;
}


/* =========================================================
   PRICE TEXT
========================================================= */

.promo-offer__price-text {
    min-width: 0;

    color:
        #333333;

    font-size: 16px;
    line-height: 1.45;

    text-align: left;
}


/* =========================================================
   PRICE VALUES
========================================================= */

.promo-offer__price-values {
    display: flex;

    min-width: 210px;

    align-items: center;
    justify-content: flex-end;

    gap: 16px;

    white-space: nowrap;
}


/* =========================================================
   OLD PRICE
========================================================= */

.promo-offer__old-price {
    color:
        #999999;

    font-size: 16px;
    line-height: 1;

    text-decoration:
        line-through;
}


/* =========================================================
   NEW PRICE
========================================================= */

.promo-offer__new-price {
    color:
        #d82f2f;

    font-size: 21px;
    line-height: 1;
    font-weight: 700;
}


/* =========================================================
   CTA TITLE
========================================================= */

.promo-offer__cta-title {
    width: 100%;

    margin:
        0
        auto
        24px;

    color:
        #245f79;

    font-size: 24px;
    line-height: 1.3;
    font-weight: 700;

    text-align: center;
}


/* =========================================================
   CTA ROW
========================================================= */

.promo-offer__cta-row {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);

    width: 100%;

    align-items: center;

    margin-inline: auto;
}


/* =========================================================
   LEFT BADGE
========================================================= */

.promo-offer__badge--left {
    grid-column: 1;

    justify-self: end;

    margin-right: 100px;
}


/* =========================================================
   ACTION
========================================================= */

.promo-offer__action {
    grid-column: 2;

    display: flex;

    align-items: center;
    justify-content: center;
}


/* =========================================================
   BUTTON
========================================================= */

.promo-offer__button {
    min-width: 190px;
    min-height: 44px;

    padding-inline: 24px;

    font-size: 16px;
}


/* =========================================================
   RIGHT BADGE
========================================================= */

.promo-offer__badge--right {
    grid-column: 3;

    justify-self: start;

    margin-left: 100px;
}


/* =========================================================
   PROMO BADGE
========================================================= */

.promo-offer__badge {
    position: relative;

    display: flex;

    width: 150px;
    height: 150px;

    flex:
        0
        0
        118px;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 36% 28%,
            #ff5757 0%,
            #f22929 28%,
            #dc1717 58%,
            #b50909 100%
        );

    border:
        4px solid
        #ffffff;

    border-radius:
        50%;

    box-shadow:
        0 9px 22px
        rgba(172, 0, 0, 0.28),
        0 0 0 2px
        #d31616,
        inset 0 2px 3px
        rgba(255, 255, 255, 0.7),
        inset 0 -8px 14px
        rgba(114, 0, 0, 0.22);

    text-align: center;

    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base);
}


/* =========================================================
   BADGE HOVER
========================================================= */

.promo-offer__badge:hover {
    transform:
        scale(1.04);

    box-shadow:
        0 12px 28px
        rgba(172, 0, 0, 0.34),
        0 0 0 2px
        #d31616,
        inset 0 2px 3px
        rgba(255, 255, 255, 0.7),
        inset 0 -8px 14px
        rgba(114, 0, 0, 0.22);
}


/* =========================================================
   BADGE GLOSS
========================================================= */

.promo-offer__badge::before {
    content: "";

    position: absolute;

    top: 10px;
    left: 14px;

    width: 84px;
    height: 28px;

    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.85),
            rgba(255, 255, 255, 0.18)
        );

    border-radius: 50%;

    transform:
        rotate(-10deg);

    pointer-events: none;
}


/* =========================================================
   BADGE SHINE
========================================================= */

.promo-offer__badge-shine {
    position: absolute;

    top: 10px;
    right: 19px;
    left: 19px;

    height: 23px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.78),
            rgba(255, 255, 255, 0)
        );

    border-radius:
        50%;

    opacity: 0.75;

    transform:
        rotate(-8deg);

    pointer-events: none;
}


/* =========================================================
   BADGE CONTENT
========================================================= */

.promo-offer__badge-content {
    position: absolute;
    z-index: 2;

    inset: 0;

    display: flex;

    width: 100%;
    height: 100%;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding:
        8px
        10px
        4px;

    text-align: center;

    transform:
        rotate(14deg);

    transform-origin: center;
}


/* =========================================================
   BADGE VALUE
========================================================= */

.promo-offer__badge-value {
    display: block;

    width: 100%;

    margin: 0;

    color:
        #ffffff;

    font-size: 34px;
    line-height: 1;
    font-weight: 800;

    letter-spacing: -1px;

    text-align: center;

    text-shadow:
        0 2px 3px
        rgba(91, 0, 0, 0.42);
}


/* =========================================================
   BADGE TEXT
========================================================= */

.promo-offer__badge-text {
    display: block;

    width: 100%;
    max-width: 82px;

    margin:
        7px
        auto
        0;

    color:
        #ffffff;

    font-size: 10px;
    line-height: 1.15;
    font-weight: 700;

    text-align: center;

    text-transform: uppercase;

    text-shadow:
        0 1px 2px
        rgba(91, 0, 0, 0.45);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .promo-offer__title {
        font-size: 28px;
    }


    .promo-offer__price-row {
        gap: 20px;
    }


    .promo-offer__badge--left {
        margin-right: 26px;
    }


    .promo-offer__badge--right {
        margin-left: 26px;
    }


    .promo-offer__badge {
        width: 108px;
        height: 108px;

        flex-basis: 108px;
    }


    .promo-offer__badge-value {
        font-size: 31px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .promo-offer {
        overflow-x: clip;
    }


    /* =====================================================
       HEADER
    ===================================================== */

    .promo-offer__header {
        margin-bottom: 22px;

        text-align: center;
    }


    .promo-offer__title {
        margin-bottom: 10px;

        font-size: 24px;
        line-height: 1.22;
    }


    .promo-offer__intro {
        font-size: 15px;
        line-height: 1.5;
    }


    /* =====================================================
       PRICES
    ===================================================== */

    .promo-offer__prices {
        margin-bottom: 26px;
    }


    .promo-offer__price-row {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            auto;

        align-items: center;

        gap: 12px;

        min-height: 0;

        padding:
            12px
            6px;

        border-bottom:
            1px solid
            var(--color-border);
    }


    .promo-offer__price-text {
        min-width: 0;

        font-size: 15px;
        line-height: 1.4;

        text-align: left;
    }


    .promo-offer__price-values {
        display: flex;

        min-width: 118px;

        flex-direction: column;

        align-items: flex-end;
        justify-content: center;

        gap: 3px;

        text-align: right;

        white-space: nowrap;
    }


    .promo-offer__old-price {
        font-size: 13px;
        line-height: 1.2;
    }


    .promo-offer__new-price {
        font-size: 18px;
        line-height: 1.2;

        white-space: nowrap;
    }


    /* =====================================================
       CTA TITLE
    ===================================================== */

    .promo-offer__cta-title {
        margin-bottom: 18px;

        font-size: 20px;
        line-height: 1.3;
    }


    /* =====================================================
       CTA
    ===================================================== */

    .promo-offer__cta-row {
        display: grid;

        grid-template-columns:
            72px
            minmax(0, 1fr)
            72px;

        align-items: center;

        width: 100%;
        max-width: 100%;

        column-gap: 8px;

        margin-inline: auto;
    }


    .promo-offer__badge--left {
        grid-column: 1;

        justify-self: end;

        margin: 0;
    }


    .promo-offer__action {
        grid-column: 2;

        width: 100%;
        max-width: none;

        min-width: 0;
    }


    .promo-offer__button {
        width: 100%;

        min-width: 0;
        min-height: 46px;

        padding:
            0
            10px;

        font-size: 14px;

        white-space: nowrap;
    }


    .promo-offer__badge--right {
        grid-column: 3;

        justify-self: start;

        margin: 0;
    }


    /* =====================================================
       BADGES
    ===================================================== */

    .promo-offer__badge {
        width: 72px;
        height: 72px;

        flex:
            0
            0
            72px;

        border-width: 3px;
    }


    .promo-offer__badge::before {
        top: 6px;
        left: 9px;

        width: 50px;
        height: 17px;
    }


    .promo-offer__badge-shine {
        top: 6px;
        right: 11px;
        left: 11px;

        height: 14px;
    }


    .promo-offer__badge-content {
        padding:
            5px
            6px
            3px;
    }


    .promo-offer__badge-value {
        font-size: 22px;
    }


    .promo-offer__badge-text {
        max-width: 50px;

        margin-top: 3px;

        font-size: 7px;
        line-height: 1.1;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .promo-offer__title {
        font-size: 22px;
    }


    .promo-offer__intro {
        font-size: 14px;
    }


    .promo-offer__price-row {
        gap: 8px;

        padding:
            11px
            4px;
    }


    .promo-offer__price-text {
        font-size: 14px;
        line-height: 1.38;
    }


    .promo-offer__price-values {
        min-width: 108px;
    }


    .promo-offer__old-price {
        font-size: 12px;
    }


    .promo-offer__new-price {
        font-size: 17px;
    }


    .promo-offer__cta-title {
        margin-bottom: 16px;

        font-size: 19px;
    }


    .promo-offer__cta-row {
        grid-template-columns:
            64px
            minmax(0, 1fr)
            64px;

        column-gap: 6px;
    }


    .promo-offer__badge {
        width: 64px;
        height: 64px;

        flex:
            0
            0
            64px;
    }


    .promo-offer__badge-value {
        font-size: 20px;
    }


    .promo-offer__badge-text {
        max-width: 44px;

        font-size: 6px;
    }

}