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

/*Оверлей для попапов с акциями*/
.salesCardsPopupWrapper {
    width: 100%;
    height: 100vh;
    background: rgba(43, 16, 1, 0.9);

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;

    display: flex;
    justify-content: center;
}

/*Попап с общинными акциями*/
.salesCardsPopupTeamWrapper {
    height: 100%;
    width: 100%;
    padding: 65px 0 20px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;

    display: flex;
    flex-direction: column;
    align-items: center;

    position: relative;

    .salesCardsPopupHeader {
        width: 410px;
        margin: 0 auto 29px;
        position: relative;
    }
    .salesCardsPopupCloseButton {
        width: 56px;
        height: 56px;
        top: -30px;
        right: -50px;
    }
    @media(max-width: 500px) {
        .salesCardsPopupHeader {
            position: static;
        }
        .salesCardsPopupCloseButton {
            top: 5px;
            right: 5px;
        }
    }
    .salesCardsPopupTitle {
        font-size: 42px;
        letter-spacing: -1px;
        color: #FFB710;
        text-align: center;
        -webkit-text-stroke: 1.5px #891906;
    }
    .salesCardsPopupContentWrapper {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 15px;
    }
}

/*Попап с общинными акциями*/
.salesCardsPopupSamobrankaWrapper {
    width: 100%;
    padding: 65px 0 20px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    margin: 0 5px;

    position: relative;

    .salesCardsPopupHeader {
        max-width: 410px;
        width: 100%;
        margin: 0 auto 29px;
        position: relative;
        text-align: center;
    }
    .salesCardsPopupCloseButton {
        width: 56px;
        height: 56px;
        top: -30px;
        right: -55px;
    }
    @media(max-width: 500px) {
        .salesCardsPopupHeader {
            position: static;
        }
        .salesCardsPopupCloseButton {
            top: 5px;
            right: 0;
        }
    }
    .salesCardsPopupTitle {
        font-size: 40px;
        letter-spacing: -1px;
        color: #FFB710;
        text-align: center;
        -webkit-text-stroke: 1.5px #891906;
        margin-bottom: 5px;
    }
    .salesCardsPopupSubTitle {
        font-size: 17px;
        letter-spacing: -1px;
        color: #FFF4B8;
        text-align: center;
        -webkit-text-stroke: 0.64px #57010B;
        margin-bottom: 10px;
    }
    .salesCardsPopupDescriptionWrapper {
        height: 50px;
        background-color: #4D1C00;
        border-radius: 10px;

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

        .salesCardsPopupDescriptionText {
            font-size: 17px;
            color: #FEF5C1;
        }
    }

    .SamobrankaContentWrapper {
        height: 600px;
        max-width: 400px;
        width: 100%;
        margin: 0 auto;
        padding-top: 70px;

        background: url("./img/popup_samobranka_BG.92d8b83ef397.png") no-repeat center center;
        background-size: 100% 100%;

        .SamobrankaContentRow {
            height: 161px;
            margin: 17px 0;

            display: flex;
            justify-content: space-between;
        }
        .SamobrankaContentColl {
            height: 155px;
            width: 180px;
            margin: 0 5px;
            border-radius: 20px;
            position: relative;
        }
        .SamobrankaBoosters {
            width: 167px;
            height: 90px;
            margin: 0 auto 4px;
        }
        .SamobrankaButton {
            width: 140px;
            height: 39px;
            margin: 0 auto;
            border-radius: 10px;

            font-size: 19px;
            letter-spacing: -1px;
            color: #FFF5BC;
            text-align: center;
            -webkit-text-stroke: 1.02px #466300;

            display: flex;
            align-items: center;
            justify-content: center;
            gap: 2px;
            position: relative;
        }
        .lockIcon {
            width: 25px;
            height: 28px;
            position: absolute;
            right: 10px;
            bottom: 4px;

            img {
                width: 100%;
            }
        }
    }
}

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

    margin-bottom: 15px;
    border-radius: 25px;
    background-color: #BD4D01;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.8);

    .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;
}

/*таймер*/
.salesCardTimerContainer {
    width: 82px;
    height: 25px;
    display: flex;
    justify-content: right;
    padding: 5px 5px 0 0;

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

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

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

/*шапка с названием карточки */
.salesCardTitleContainer {
    width: 234px;
    height: 41px;
    background: url("./img/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;
}

/*----------------------------- красный лэйбл скидка/выгоднее ---------------------------------------*/
.salesLabel {
    width: 77px;
    height: 75px;
    position: absolute;
    top: -14px;
    left: -14px;

    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;
    }
}

/*----------------------------- Злато кощея ---------------------------------------*/
.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: 120px;
        font-size: 26px;
        font-weight: 900;
        z-index: 2;
        color: #FFF5BC;
        text-align: center;
        -webkit-text-stroke: 1.1px #A83800;

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

    .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/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/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: #FFF5BC;
        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 {
    margin-bottom: 15px;

    .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: #FFF5BC;
        font-size: 26px;
        letter-spacing: 0;
        display: flex;
        justify-content: center;
        padding-top: 10px;

        -webkit-text-stroke: 1.08px #891906;
        position: relative;
        z-index: 1;
    }
    .salesCardMiniPrice {
        width: 100%;
        height: 53px;
    }

    /*-------Злато кощея мини-------*/
    .salesCardMiniZlato {
        .salesCardMiniTitle {
            color: #FE8817;
            text-align: center;
        }
    }
    /*-------Самобранка мини-------*/
    .salesCardMiniSamobranka {
        .salesCardMiniTitle {
            color: #FFB60E;
            font-size: 27px;
            letter-spacing: -1px;
            text-align: center;
        }
        .greenButtonText {
            padding-left: 0;
        }
    }
    /*-------Ярморка мини-------*/
    .salesCardMiniYarmorka {
        .salesCardMiniTitle {
            color: #A4CD37;
            -webkit-text-stroke-color: #466300;
        }
    }
    /*-------И себе и людям мини-------*/
    .salesCardMiniForSelfAndFriends {
        .salesCardMiniTitle {
            text-align: center;
            line-height: 23px;
            color: #67E294;
            -webkit-text-stroke-color: #068941;
        }
        .greenButtonText {
            font-size: 21px;
        }
    }

    /*-------И себе и людям мини-------*/
    .salesCardMiniStarterPack {
        .salesCardMiniTitle {
            text-align: center;
            color: #A4CD37;
            -webkit-text-stroke-color: #466300;
        }
    }
@media(max-width: 375px) {
    .salesCardMiniWrapper {
        width: 47%;
        height: 205px;
    }
}
}