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

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

    margin-bottom: 15px;
    border-radius: 25px;
    filter: var(--cards-shadow);

    .salesCardBg {
        width: 100%;
        height: 100%;
        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;
}

/* ======================== шапка с названием карточки  ======================== */
.salesCardTitleContainer {
    width: 234px;
    height: 41px;
    background: url("img/cards/salesCardCopperTitle.0a209e01eeeb.png") no-repeat center center;
    background-size: 100%;

    position: absolute;
    left: -4px;
    top: -10px;
}

/*зеленая кнопка стоимость */
.salesCardPrice {
    width: 140px;
    height: 47px;
    border-radius: 15px;
    cursor: pointer;
    letter-spacing: -1px;

    position: absolute;
    z-index: 2;

    color: #FFF5BC;
    font-size: 26px;
    line-height: 25.2px;

    -webkit-text-stroke: 1.19px #466300;
    font-family: 'Domovyata', 'Verdana', sans-serif;
    font-weight: 900;

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

/* ======================== заголовок карточки ======================== */
.saleCardTitle {
    color: #FFF5BC;
    font-size: 22px;
    letter-spacing: 0;
    display: flex;
    justify-content: center;
    padding-top: 3px;

    -webkit-text-stroke: 1.08px #AA3800;
}
/* ===================== подзаголовок карточки ===================== */
.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;
}

/*======================= Количество бонусов =========================== */
.kitCoins1, .kitCoins2, .kitCoins3, .kitCoins4, .kitCoins5 {
    font-size: 17px;
    color: #FFF5BC;
    text-align: center;
    letter-spacing: -1px;
    -webkit-text-stroke: 1px #AA3800;

    position: absolute;
    bottom: 30px;
}

/*======================= Злато кощея ================================= */
.salesCardZlatoKocheya {
    .salesCardTitle {
        padding-top: 8px;
        padding-left: 65px;
        margin-right: auto;
        color: #FFF5BC;
        font-size: 22px;
        letter-spacing: -1px;

        -webkit-text-stroke: 1.13px #AA1B07;
    }
    .salesCardText {
        margin-right: 15px;
        width: 154px;
        font-size: 13px;
        font-weight: 900;
        text-align: center;
        z-index: 2;
        color: #FFF5BC;
        -webkit-text-stroke: 0.6px #600595;
    }

    .salesCardCoins {
        width: 90px;
        margin: 15px 40px 0 0;
        font-size: 26px;
        font-weight: 900;
        z-index: 2;
        color: #FFF5BC;
        text-align: center;
        -webkit-text-stroke: 1.1px #A83800;
    }

    .salesCardPrice {
        font-size: 19px;
        -webkit-text-stroke-width: 1px;
        bottom: 32px;
        right: 15px;
    }
}

/*=============================== Самобранка =============================== */
.salesCardSamobranka {
    .salesCardTitle {
        width: 200px;
        height: 35px;
        margin-right: auto;
        color: #FFF5BC;
        font-size: 22px;
        letter-spacing: -1px;
        -webkit-text-stroke: 1.13px #AA1B07;

        display: flex;
        justify-content: center;
        align-items: center;
    }
    .salesCardText {
        margin-right: 15px;
        width: 154px;
        font-size: 17px;
        font-weight: 900;
        text-align: center;
        z-index: 2;
        color: #FFF5BC;
        -webkit-text-stroke: 0.6px #466307;
    }
    .salesCardPrice {
        font-size: 26px;
        -webkit-text-stroke-width: 1px;
        bottom: 33px;
        right: 15px;
    }
}

/*============================== Карточка "Надо брать"==============================*/

.salesCardStarterPack {

    .starterPackTitle {
        max-width: 200px;
        width: 100%;
        height: 50px;

        color: #FFF5BC;
        font-size: 30px;
        letter-spacing: -1px;
        position: absolute;
        top: 120px;
        left: 7px;

        -webkit-text-stroke: 1.5px #C71400;

        display: flex;
        align-items: center;
        justify-content: center;
    }
    .starterPackCoins {
        width: 125px;
        padding-left: 33px;
        font-size: 26px;
        font-weight: 900;
        z-index: 2;
        color: #FFF5BC;
        text-align: center;
        -webkit-text-stroke: 1.1px #A83800;

        position: absolute;
        top: 23px;
        right: 23px;

        .coin {
            height: 30px;
            width: 30px;
            position: absolute;
            left: 3px;
            top: -1px;
        }
    }

    .salesCardPrice {
        right: 15px;
        bottom: 23px;
    }
}

/*=================================== Медная акция ===================================*/
.salesCardCopper {
    .saleCardTitle {
        -webkit-text-stroke: 1.08px #AA3800;
    }
    .salesCardPrice {
        border-radius: 10px;
        right: 15px;
        bottom: 30px;
    }
    .starterPackTeamCoins, .starterPackCoins {
        width: 70px;

        font-size: 17px;
        color: #FFF5BC;
        text-align: center;
        -webkit-text-stroke: 1px #AA3800;

        position: absolute;
        bottom: 81px;
        right: 50px;
    }

    .starterPackCoins {
        letter-spacing: -1px;
        font-size: 18px;
        left: 25px;
        top: 90px;
    }

    .kitCoins1 {
        left: 42px;
    }
    .kitCoins2 {
        left: 85px;
    }
    .kitCoins3 {
        left: 126px;
    }
    .kitCoins4 {
        left: 167px;
    }
    .kitCoins5 {
        font-size: 15px;
        top: 93px;
        left: 152px;
    }
}

/*================================= Изумрудная карточка =================================*/
.salesCardEmerald {
    .salesCardTitleContainer{
        background: url("img/cards/salesCardEmeraldTitle.d60d8e14689d.png") no-repeat center center;
        background-size: 100%;
    }
    .saleCardTitle {
        padding-right: 20px;
        -webkit-text-stroke-color: #005C00;
    }
    .saleCardSubTitle {
        -webkit-text-stroke-color: #005C00;
    }
    .starterPackTeamCoins, .starterPackCoins {
        font-size: 24px;
        text-align: right;
        -webkit-text-stroke-color: #005C00;

        position: absolute;
        bottom: 88px;
        right: 59px;
    }

    .starterPackCoins {
        font-size: 18px;
        letter-spacing: -1px;
        text-align: center;
    }

    .kitCoins1, .kitCoins2, .kitCoins3, .kitCoins4, .kitCoins5 {
        -webkit-text-stroke-color: #005C00;
    }
    .kitCoins5 {
        font-size: 15px;
        top: 93px;
        left: 150px;
    }
}

/*================================== Золотая акция ==================================*/
.salesCardGold {
    .salesCardTitleContainer{
        background: url("img/cards/salesCardGoldTitle.26a3c18ebd43.png") no-repeat center center;
        background-size: 100%;
    }
    .saleCardTitle {
        padding-right: 20px;
        -webkit-text-stroke-color: #AA3800;
    }
    .saleCardSubTitle {
        -webkit-text-stroke-color: #AA3800;
    }
    .starterPackTeamCoins, .starterPackCoins {
        font-size: 30px;
        text-align: right;
        letter-spacing: -1px;
        -webkit-text-stroke-color: #005C00;

        position: absolute;
        bottom: 100px;
        right: 75px;
    }

    .starterPackCoins {
        font-size: 18px;
        text-align: center;
        -webkit-text-stroke-color: #AA3800;
    }

    .kitCoins1, .kitCoins2, .kitCoins3, .kitCoins4, .kitCoin5 {
        -webkit-text-stroke-color: #AA3800;
    }
    .kitCoins5 {
        font-size: 15px;
        top: 93px;
        left: 149px;
    }
}

/*====================================== Подмогу новичку ======================================*/
.salesCardStarterPackHelp {
    .starterPackTitle {
        max-width: 200px;
        width: 100%;
        height: 50px;

        color: #FFF5BC;
        font-size: 26px;
        letter-spacing: -1px;
        position: absolute;
        top: 120px;
        left: 7px;

        -webkit-text-stroke: 1.1px #C71400;

        display: flex;
        align-items: center;
    }
    .starterPackCoins {
        width: 100px;
        font-size: 26px;
        font-weight: 900;
        z-index: 2;
        color: #FFF5BC;
        text-align: center;
        -webkit-text-stroke: 1.1px #A83800;

        position: absolute;
        top: 80px;
        left: 10px;
    }

    .salesCardPrice {
        width: 145px;
        right: 15px;
        bottom: 23px;
    }
    .kitCoins1 {
        bottom: 130px;
        left: 145px;
    }
    .kitCoins2 {
        bottom: 130px;
        left: 195px;
    }
    .kitCoins3 {
        bottom: 87px;
        left: 145px;
    }
    .kitCoins4 {
        bottom: 87px;
        left: 195px;
    }
    .kitCoins5 {
        font-size: 19px;
        top: 87px;
        right: 58px;
    }
}

/*================================= Карточка И себе и людям =================================*/
.salesCardForSelfAndFriends {
    .saleCardTitle {
        justify-content: left;
        padding-left: 20px;
    }
    .saleCardSubTitle {
        font-size: 16px;
        top: 20px;
        right: 25px;
    }
    .saleCardSubTitle2 {
        font-size: 16px;
        top: 55px;
        right: 12px;
    }
    .salesCardPrice {
        font-size: 26px;
        bottom: 30px;
        right: 15px;
    }
}
/*================================== Карточка ярмарка ==================================*/
.salesCardYarmorka {
    .YarmorkaTitle {
        color: var(--color-gold-light);
        font-size: 22.68px;
        -webkit-text-stroke: 1.13px #BD4D01;

        position: absolute;
        left: 45px;
        top: 7px;
    }

    .YarmorkaOldPrice {
        width: 65px;
        margin-bottom: 10px;
        font-size: 16px;
        line-height: 100%;
        font-weight: 900;
        text-decoration: none;
        text-align: center;

        background: linear-gradient(145deg, rgba(253, 250, 231, 1), rgba(255, 242, 169, 1)); /* Градиент для текста */
        -webkit-background-clip: text; /* Применяем градиент к тексту */
        -webkit-text-fill-color: transparent; /* Делаем текст прозрачным, чтобы виден был градиент */
        background-clip: text; /* Для совместимости с другими браузерами */

        position: absolute;
        bottom: 75px;
        right: 58px;
    }

    .YarmorkaOldPrice::before {
        content: '';
        width: 65px;
        position: absolute;
        height: 2px;
        background-color: rgba(137, 178, 255, 1);
        top: 35%;
        left: 0;
        transform: rotate(-9deg);
        border-radius: 30px;
        z-index: 5;
    }

    .salesCardPrice {
        right: 18px;
        bottom: 31px;
    }
}

/*================================== Мини карточки акций ==================================*/
.salesCardsMiniSection {
    width: 100%;
    margin-bottom: 15px;
    display: flex;
}
.salesCardMiniWrapper {
    max-width: 180px;
    width: 100%;
    height: 240px;
    padding: 0 7px 8px 7px;
    border-radius: 25px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.salesCardMiniBG {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
}
.salesCardMiniTitle {
    color: #A3512A;
    font-size: 26px;
    letter-spacing: 0;
    display: flex;
    justify-content: center;
    padding-top: 10px;
    text-align: center;

    position: relative;
    z-index: 1;
}
@media (max-width: 350px) {
    .salesCardMiniTitle {
        font-size: 22px;
    }
}
.salesCardMiniPrice {
    width: 100%;
    height: 53px;
}

/*-------Самобранка мини-------*/
.salesCardMiniSamobranka {
    .greenButtonText {
        padding-left: 0;
    }
}
/*-------И себе и людям мини-------*/
.salesCardMiniForSelfAndFriends {
    .salesCardMiniTitle {
        line-height: 23px;
    }
    .greenButtonText {
        font-size: 21px;
    }
}

@media(max-width: 375px) {
    .salesCardMiniWrapper {
        width: 47%;
        height: 205px;
    }
}


/*==================================== Карточки Наборов ==================================== */

.kitCardWrapper {
    position: relative;
    background-image: url("./img/cards/kitCardMainPage.4f8b50964bef.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;

    max-width: 378px;
    height: 191px;

    .kitCardTopSection {
        display: flex;
        padding: 15px 15px 10px 13px;
    }
    .kitCardLabelWrapper {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;

        width: 100px;
        height: 90px;
        margin-right: 5px;
    }
    .kitCardCoinImgWrapper {
        margin: 0 0 -12px 12px;
        width: 77px;
        text-align: center;
        height: 100%;
    }

    .kitCardCoinImage {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }
    .kitCardCoinWrapper {
        font-size: 22px;

        color: var(--color-gold-light);
        text-align: center;
        position: relative;
        left: 5px;

        -webkit-text-stroke: 1.5px rgba(142, 22, 4, 1);
    }
}

.kitCardBottomSection {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 20px 5px 20px;

    .kitCardText {
        width: 205px;
        color: var(--color-gold-light);
        font-size: 26px;
        line-height: 24.15px;
        align-self: center;

        -webkit-text-stroke: 1.1px #AA1B07;
    }
    .kitCardButtonWrapper {
        width: 140px;
        height: 50px;
    }
    .greenButton {
        background-image: url("./img/longGreen_buttonBrownBorder.3f1f4c135074.png");
    }
}

/* ================= Фон блока с бустерами для карточки ================= */
.boosterBG  {
    overflow: hidden;
    border: 2px solid var(--color-sand-border);
    background-color: var(--color-sand-bg);
    border-radius: 10px;
    -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);
}

/* ================= BOOSTERS CONTAINER ================= */


.boostersContainer {
    width: 260px;
    height: 93px;
    display: flex;
    gap: 2px;

    /* ========= Контейнер для бустеров (1, 2 или 3 блока с бустерами) ========= */
    .boostersItem {
        position: relative;
        height: 100%;
        flex: 1;
        padding: 3px;

        display: flex;
        justify-content: center;
    }

    /* 1 БЛОК = 50/50 */
    &:has(.boostersItem:nth-child(1):last-child) .boostersItem {
        width: 100%;
    }

    /* 2 БЛОКА = 50/50 */
    &:has(.boostersItem:nth-child(2):last-child) .boostersItem {
        flex: 1;
    }

    /* 3 БЛОКА = первые 2 блока 50% ширины */
    &:has(.boostersItem:nth-child(3):last-child) .boostersItem:nth-child(1),
    &:has(.boostersItem:nth-child(3):last-child) .boostersItem:nth-child(2) {
        width: 50%;
    }
    /* 3 БЛОКА = третий блок фиксированного размера */
    &:has(.boostersItem:nth-child(3):last-child) .boostersItem:nth-child(3) {
        max-width: 63px; /* Размер блока с сердечком */
    }

    /* ================= Таймер в бустерах (ВСЕГДА ВНИЗУ) ================= */
    .boostersTimer {
        position: absolute;
        bottom: 2px;
        left: 50%;
        transform: translateX(-50%);
    }
}