/* =========================== Глобальные цвета =========================== */
:root {
    --color-gold-light: #FFF5BC;      /* используется: текст кнопки, текст бонусов */
    --color-green-dark: #466300;      /* используется: обводка текста, старая цена */
    --color-strike-red: #FF3700;  /* зачеркивание */
    --color-sand-border: #E0AF7D;     /* рамка и тень */
    --color-sand-bg: #F8D49D;         /* фон бонусной карточки */
    --color-brown-stroke: #923B09;    /* обводка текста бонусов */
    --color-brown-text: #AA3800;    /* обводка текста */
    --color-brown-text2: #A3512A;    /* обводка текста */
    --color-brown-text3: #C07A54;    /* обводка текста */

    --cards-shadow: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.8)); /* Тень карточек */
}

/* ============= Обертка для символа рубля (красная и зеленая) ============= */
.rubSymbolRed, .rubSymbolGreen {
    -webkit-text-stroke: 1.1px var(--color-brown-text);
}

.rubSymbolGreen {
    -webkit-text-stroke: 1.1px var(--color-green-dark);
}

/* ===================== Зеленая кнопка с старой ценой ===================== */
.greenButton {
    background-image: url("./img/longGreen_buttonWhiteBorder.c3374546b783.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;

    width: 100%;
    height: 100%;

    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .greenButtonText {
        margin-top: -2px;
        position: relative;

        color: var(--color-gold-light);
        font-size: 26px;
        letter-spacing: -1px;
        line-height: 25.2px;

        -webkit-text-stroke: 1.19px var(--color-green-dark);
        font-family: 'Domovyata', 'Verdana', sans-serif;
        font-weight: 900;
    }

    .greenButtonOldPrice {
        width: 65px;
        color: var(--color-green-dark);
        font-size: 16px;
        line-height: 100%;
        font-weight: 900;
        position: relative;
        text-decoration: none;
        text-align: center;
        white-space: nowrap
    }

    .greenButtonOldPrice::before {
        content: '';
        width: 65px;
        position: absolute;
        height: 2px;
        background-color: var(--color-strike-red);
        top: 35%;
        left: 0;
        transform: rotate(-9deg);
        border-radius: 30px;
        z-index: 5;
    }
}

/* =========================== Кнопка закрытия =========================== */
.closeButton {
    width: 39px;
    height: 39px;
    cursor: pointer;
    border: 0;
    margin: 0;
    padding: 0;
    display: block;
    outline: none;
    -webkit-tap-highlight-color: transparent;

    background: transparent url("img/btn_close.865f4ddac015.png") no-repeat center center ;
    background-size: cover;

    position: absolute;
    top: 7px;
    right: 8px;

    img {
        width: 100%;
    }

    .closeButton:active {
        background-color: transparent;
    }
    .closeButton:focus  {
        background-color: transparent;
    }
}

/* ========================= Заголовок секции ========================= */
.sectionTitle {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;

    .sectionTitleText {
        padding: 0 50px;
        font-size: 64px;

        color: #FFF2A9;

        -webkit-text-stroke: 1.5px var(--color-brown-stroke);
    }
    @media (max-width: 821px) {
        .sectionTitleText {
            padding: 0 20px;
            font-size: 32px;
            line-height: 33.6px;

            -webkit-text-stroke: 1.5px var(--color-brown-stroke);
        }
    }

    .decoWrapper {
        max-width: 260px;
        margin: 0 auto;

        .deco {
            max-width: 100%;
            height: auto;
            display: block;
        }
        @media (max-width: 821px) {
            .deco {
                width: 100%;
                max-width: 145px;
            }
        }
    }
}

/*================== красный лэйбл скидка/выгоднее/лучшая цена =======================*/
.kitCardLabel {
    position: absolute;
    left: -1px;
    top: -3px;
    z-index:10;
}

.salesLabel {
    width: 77px;
    height: 75px;
    position: absolute;
    top: -14px;
    left: -14px;
    z-index: 1;

    background: url("./img/salesLabel.6d43a973cc8b.png") no-repeat;
    background-size: 100%;

    .whiteText, .whiteTextProfit, .whiteTextProfitLarge {
        font-weight: 900;
        font-size: 19px;
        letter-spacing: -1px;
        transform: rotate(-30deg);

        background: linear-gradient(180deg, #FFF5BC 0%, #FFF5BC 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        paint-order: stroke fill;
        -webkit-text-stroke: 0.7px #D30010;
        filter: drop-shadow(0 3px 0 #D30010);

        position: absolute;
        top: 14px;
        left: 1px;
    }
    .whiteTextProfit, .whiteTextProfitLarge {
        text-transform: uppercase;
        font-size: 12px;
        transform: rotate(-16deg);

        top: 38px;
        left: 8px;
        -webkit-text-stroke: 0.4px #D30010;
    }
    .yellowText, .yellowTextProfit {
        font-weight: 900;
        font-size: 27px;
        transform: rotate(-30deg);
        letter-spacing: -1px;

        background: linear-gradient(180deg, #FFEB18 0%, #FFEB18 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        paint-order: stroke fill;
        -webkit-text-stroke: 1px #D30010;
        filter: drop-shadow(0 3px 0 #D30010);

        position: absolute;
        top: 28px;
        left: 15px;
    }

    .yellowTextProfit {
        font-size: 20px;
        transform: rotate(-14deg);
        -webkit-text-stroke: 0.5px #D30010;

        top: 15px;
        left: 3px;
    }
    .whiteTextProfitLarge {
        font-size: 14px;
        top: 38px;
        left: 9px;
    }
}

/* ================================ Таймер ================================ */
.salesCardTimerContainer {
    width: 83px;
    height: 25px;
    display: flex;
    padding-right: 5px;
    align-items: center;
    padding-bottom: 2px;
    padding-left: 25px;

    background: url("./img/timer_panel.2aac1a833fb9.png") no-repeat center center;
    background-size: 100% 100%;

    position: absolute;
    top: -8px;
    right: 42px;

    font-size: 12.2px;
    font-weight: 900;
    color: #FFF5BC;
    -webkit-text-stroke: 0.6px #003D7A;
    font-variant-numeric: tabular-nums;
}

/* ================= Таймер ================= */
.boostersTimer {
    width: 50px;
    height: 20px;

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

    font-size: 17.41px;
    color: var(--color-gold-light);
    -webkit-text-stroke: 1.09px var(--color-brown-stroke);

    .boostersTimerImg {
        margin: 3px 5px 0 0;
        width: 17px;
        height: 17px;
    }
}

/* ============================== Карточка Бустеров ============================== */
.salesCardBusterWrapper {
    border: 2px solid var(--color-sand-border);
    background-color: var(--color-sand-bg);
    border-radius: 10px;
    width: 100%;
    height: 89px;
    margin-right: 3px;
    padding: 2px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    -webkit-box-shadow: 0px -2px 0px 0px var(--color-sand-border);
    -moz-box-shadow: 0px -2px 0px 0px var(--color-sand-border);
    box-shadow: 0px -2px 0px 0px var(--color-sand-border);

    /* Если внутри только один .salesCardBonusRow — добавляем padding-top */
    &:has(.salesCardBusterRow:only-child) {
        padding-top: 10px;

        .salesCardBonusTimerWrapper {
            margin-top: 13px;
        }
    }

    .salesCardBusterRow {
        width: 100%;
        height: 100%;

        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: row;

        /* Если есть salesCardBonusTimerWrapper — делаем колонку */
        &:has(.salesCardBonusTimerWrapper) {
            flex-direction: column;
            justify-content: space-between;
            margin-top: -15px;
        }

        /* Если есть два salesCardBonus — строка (переопределяем на случай, если оба условия) */
        &:has(.salesCardBuster):has(.salesCardBuster):not(:has(.salesCardBonusTimerWrapper)) {
            flex-direction: row;
            gap: 0;
        }

        .salesCardBuster {
            position: relative;
            width: 40px;

            img {
                width: 100%;
            }
        }
        .salesCardBusterCounts {
            font-size: 17.41px;
            height: 12px;
            color: var(--color-gold-light);
            -webkit-text-stroke: 1.09px var(--color-brown-stroke);

            position: absolute;
            bottom: 3px;
            left: 50%;
            transform: translateX(-50%);
        }

        .salesCardBonusTimerWrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;

            .salesCardBonusTimer {
                font-size: 17.41px;
                line-height: 16.8px;

                color: var(--color-gold-light);
                -webkit-text-stroke: 1.09px var(--color-brown-stroke);
            }
        }
    }
}

/* ================= Бустер (картинка бустера и текст снизу) ================= */
.booster {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    .boosterCounter {
        position: absolute;
        bottom: -3px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;

        font-size: 17.41px;
        color: var(--color-gold-light);
        -webkit-text-stroke: 1.09px var(--color-brown-stroke);

        .boosterCounterInfinity {
            width: 19px;
            height: 12px;
            margin-left: 20px;
        }
    }
}

/* ================= Сетка расположения бустеров внутри Контейнера ================= */
.boostersGrid {
    width: 100%;
    height: calc(100% - 30px); /* место под таймер */
    display: grid;
    place-items: center;

    /* ===== 1 Бустер ===== */
    &:has(.booster:nth-child(1):only-child) {
        width: 50px;
        height: 80%;
        display: flex;
        justify-content: center;
        align-items: center;

        & .booster {
            width: 50px;
            height: 50px;
        }
        .boosterImg {
            width: 60px;
        }
        .boosterCounter {
            font-size: 24px;
        }
    }

    /* ===== 2 Бустера ===== */
    &:has(.booster:nth-child(2):last-child) {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        place-items: center;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;

        & .booster {
            width: 40px;
            height: 40px;
        }
        .boosterImg {
            width: 45px;
        }
    }

    /* ===== 3 Бустера ===== */
    &:has(.booster:nth-child(3):last-child) {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr 25px;
        place-items: center;

        & .booster {
            width: 40px;
            height: 40px;
            margin-top: -5px;
        }
        .boosterImg {
            width: 45px;
        }
        /* Расположение третьего бустера по центру снизу */
        & .booster:nth-child(3) {
            grid-column: 1 / 3;
        }
    }

    /* ===== 4 Бустера ===== */
    &:has(.booster:nth-child(4):last-child) {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 40px);
        place-items: center;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;

        & .booster {
            width: 40px;
            height: 40px;
        }
        .boosterImg {
            width: 45px;
        }
    }
}