/*----------------------------- Общие стили карточек акций ---------------------------------------*/

/* ========================= обертка карточки акции ========================= */
.salesCardWrapper {
    width: 374px;
    height: 191px;
    position: relative;

    margin-bottom: 15px;
    border-radius: 25px;
    filter: var(--cards-shadow);
    -webkit-filter: var(--cards-shadow);
    transform: translate3d(0, 0, 0);
}

.salesCardWrapper .salesCardBg {
    width: 374px;
    height: 191px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

@media(max-width: 390px) {
    .salesCardWrapper {
        transform: scale(0.95);
    }
}

@media(max-width: 380px) {
    .salesCardWrapper {
        transform: scale(0.9);
        margin: -2px 0;
    }
}

@media(max-width: 350px) {
    .salesCardWrapper {
        transform: scale(0.85);
        margin: -6px 0;
    }
}

@media(max-width: 330px) {
    .salesCardWrapper {
        transform: scale(0.8);
        margin: -12px 0;
    }
}


/* ====================== обертка контента карточки акции ====================== */
.salesCardContentContainer {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: end;
}

/*=============== зеленая кнопка стоимость =============== */
.salesCardButtonWrapper {
    width: 158px;
    height: 55px;
    border-radius: 15px;

    position: absolute;
    z-index: 2;

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

/* ======================== заголовок карточки ======================== */
.salesCardTitle {
    padding-top: 14px;
    padding-left: 65px;
    margin-right: auto;
    color: #FFF5BC;
    font-size: 21px;
    letter-spacing: -1px;

    -webkit-text-stroke: 1.13px var(--color-red-1);
}

/* ======================== заголовок карточки ======================== */
.salesCardText {
    margin-top: -5px;
    margin-right: 15px;
    width: 154px;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
    z-index: 2;
    color: #FFF5BC;
    -webkit-text-stroke: 0.6px #600595;
}

/* ===================== подзаголовок карточки ===================== */
.saleCardSubTitle, .saleCardSubTitle2 {
    font-size: 15px;
    letter-spacing: -1px;
    color: #FFF5BC;
    text-align: center;
    -webkit-text-stroke: 0.87px #A83800;

    position: absolute;
    top: 25px;
    right: 25px;
}

/* ===================== Бустер карточки ===================== */
.salesCardBoosters {
    width: 180px;
    height: 60px;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.salesCardBoosters .salesCardBooster {
    width: 70px;
    height: 70px;

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

.salesCardBoosters .salesCardBooster:after {
    content: "";
    z-index: 0;
    width: 70px;
    height: 70px;
    background: url("./img/booster_light.e933b092e3ab.png") no-repeat center center;
    background-size: 160% 160%;
    position: absolute;
    top: 0;
    left: 0;
}

.salesCardStart .salesCardBooster:after {
    top: 0;
    left: -12px !important;
}

.salesCardBoosters .boosterCounterBlue {
    margin-top: -12px;
    font-size: 17px;
    letter-spacing: -1px;
    color: #FFFFFF;
    -webkit-text-stroke-width: 1px;
    position: relative;
    z-index: 1;
}
.salesCardBoosters img {
    position: relative;
    z-index: 1;
}

.salesCardBoosters .boosterCounterRed {
    margin-top: -12px;
    position: relative;
    z-index: 1;
    -webkit-text-stroke-color: var(--color-red-1);
}
.salesCardBoosters .boosterCounterBlue {
    -webkit-text-stroke-color: var(--color-blue-1);
}

/*======================= Яга ================================= */
.salesCardYaga .salesCardTitle {
    padding-top: 10px;
}

.salesCardYaga .salesCardButtonWrapper {
    bottom: 22px;
    right: 15px;
}

.salesCardYaga .salesCardTimerContainer {
    top: 130px;
    right: 42px;
}

/*=============================== Легкий старт =============================== */
.salesCardStart .salesCardTitle {
    padding-top: 10px;
    padding-left: 80px;
}

.salesCardStart .salesCardButtonWrapper {
    width: 160px;
    bottom: 22px;
    right: 15px;
}

.salesCardStart .salesCardTimerContainer {
    top: -6px;
    right: 42px;
}

.salesCardStart .salesCardBoosters {
    height: 100px;
    width: 150px;
    margin-right: 15px;
    margin-top: -10px;
    gap: 0;
    align-items: end;
}

.salesCardStart .topBooster {
    align-self: start;
}

/*======================= Морское сокровище ================================= */
.salesCardSeaKit .salesCardTitle {
    padding-top: 10px;
    padding-left: 10px;
}

.salesCardSeaKit .salesCardText {
    margin-top: 8px;
    font-size: 16px;
}

.salesCardSeaKit .salesCardButtonWrapper {
    bottom: 22px;
    right: 15px;
}

.salesCardSeaKit .salesCardTimerContainer {
    top: -6px;
    right: 42px;
}

/*======================= Скатерть самобранка ================================= */
.salesCardSamobranka .salesCardTitle {
    padding-top: 12px;
    padding-left: 10px;
}

.salesCardSamobranka .salesCardButtonWrapper {
    bottom: 22px;
    right: 15px;
}

.salesCardSamobranka .salesCardTimerContainer {
    top: -6px;
    right: 42px;
}

/*======================= Бизнес-план ================================= */
.salesCardBusinessPlan .salesCardTitle {
    padding-top: 10px;
    padding-left: 80px;
}

.salesCardBusinessPlan .salesCardText {
    margin-top: 2px;
    font-size: 20px;
    color: var(--color-white-1);
    -webkit-text-stroke-color: var(--color-red-1);
}

.salesCardBusinessPlan .salesCardButtonWrapper {
    bottom: 22px;
    right: 15px;
}

.salesCardBusinessPlan .salesCardTimerContainer {
    top: -6px;
    right: 42px;
}

/*======================= Гламурное вложение ================================= */
.salesCardPussy .salesCardTitle {
    padding-top: 10px;
    padding-left: 10px;
}

.salesCardPussy .salesCardText {
    margin-top: 12px;
    font-size: 20px;
}

.salesCardPussy .salesCardButtonWrapper {
    bottom: 22px;
    right: 15px;
}

.salesCardPussy .salesCardTimerContainer {
    top: -6px;
    right: 42px;
}