/* SHOP-CARD */



@font-face {
    font-family: 'Minecraft';
    src: url("../fonts/minecraft-873f916d7dfc95537f80c4c2622b06fa.ttf");
}

:root {
    --shop-card-border-color: #e2e2e2 ;
}

.actionValue {
    color: #dedadab1;
    text-align: center;
    background: var(--JSI-background);
    width: var(--JSI-height);
    border-style: solid;
    border-color: #c0c0c04a;
    font-size: var(--JSI-font-size);
    /* height: 100%; */
    height: 40px;
    width: 40px;
    border-radius: 5px;
    border-width: var(--JSI-border-width);
}

.shopCard {
    /* border: 1px solid var(--shop-card-border-color); */
    min-width: 210px;
    height: auto;
    background: var(--color-background-shop-card);
    border-radius: 7px;
    box-shadow: 0px 4px 19px 2px rgba(34, 60, 80, 0.2) inset;
    padding: 10px;
    display: flex
;
    flex-direction: column;
    position: relative;
}

.shopCardName {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.imgContShopCard {
    display: flex;
    height: 70px;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 10px 0;
    position: relative;
}

.imgShopCard {
    height: 100%;
    object-fit: cover;
}

.nameSC {
    margin: 0;
    text-align: center;
    color: #f1e7e2;
    font-family: 'Idealist';
    font-weight: 500;
}


.buttonBuyCont {
    padding: 3px 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

.buyButtonShop {
    padding: 8px 20px;
    font-size: 14px;
    border: none;
    border-radius: 20px;
    background-color: #6b6a6a;
    /* border-color: var(--shop-card-border-color); */
    cursor: pointer;
    transition: border-color 0.3s;
    color: var(--color-text-2);
    font-family: Minecraft;
    width: 100%;
    justify-content: center;
}

.buyButtonShop:hover {
    background: var(--color-background-form);
}

.countItemShopCard {
    height: 17%;
    padding: 3px 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

.priceItemShopCard {
    height: 17%;
    padding: 3px 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    /*align-items: center;*/
}

.priceShopCardText {
    font-size: 17px;
    font-weight: 500;
    margin: 0;
    color: #f4c3f4;
    font-family: 'Minecraft';
}

.JSI-shopCard {
    --JSI-border-width: 1px;
    --JSI-border-color: #c0c0c0;;
    --JSI-font-size: 12px;
    --JSI-background: transparent;
    --JSI-color: black;
    --JSI-height: 20px;
}

/* .shopCard_customCountInput {
    .inputCountStreamCard {
        width: 40px;
        height: var(--JSI-height);
        padding: 0;
        background: var(--JSI-background);
        border-width: var(--JSI-border-width) 0 var(--JSI-border-width) 0;
        border-color: var(--JSI-border-color);
        border-style: solid;
        font-size: var(--JSI-font-size);
        font-family: Minecraft;
        color: #dedada;
        border-radius: 0;
    }

    .actionValue {
        color: #dedada;
        text-align: center;
        background: var(--JSI-background);
        width: var(--JSI-height);
        border-style: solid;
        border-color: var(--JSI-border-color);
        font-size: var(--JSI-font-size);
        height: 100%;
    }

    .actionValue:hover {
        cursor: pointer;
    }

    .actionDownValue:hover {
        background: linear-gradient(90deg, rgb(190 190 190), transparent);
    }
    
    .actionUpValue:hover {
        background: linear-gradient(90deg, transparent, rgb(190 190 190));
    }

    .actionDownValue {
        border-radius: 5px 0 0 5px;
        border-width: var(--JSI-border-width) 0 var(--JSI-border-width) 0;
    }

    .actionUpValue {
        border-radius: 0 5px 5px 0;
        border-width: var(--JSI-border-width) 0 var(--JSI-border-width) 0;
    }
} */

/* .JSI-shopCard {

    .js-input {
        width: 40px;
        text-align: center;
        height: var(--JSI-height);
        padding: 0;
        background: var(--JSI-background);
        border-width: var(--JSI-border-width) 0 var(--JSI-border-width) 0;
        border-color: var(--JSI-border-color);
        border-style: solid;
        font-size: var(--JSI-font-size);
        font-family: Minecraft;
        color: #dedada;
    }

    .actionValue {
        color: var(--JSI-color);
        text-align: center;
        background: var(--JSI-background);
        height: var(--JSI-height);
        width: var(--JSI-height);
        border-style: solid;
        border-color: var(--JSI-border-color);
        font-size: var(--JSI-font-size);
    }

    .downValue {
        border-radius: 5px 0 0 5px;
        border-width: var(--JSI-border-width) 0 var(--JSI-border-width) var(--JSI-border-width);
    }

    .upValue {
        border-radius: 0 5px 5px 0;
        border-width: var(--JSI-border-width) var(--JSI-border-width) var(--JSI-border-width) 0;
    }
} */

.dopCount {
    position: absolute;
    bottom: -13px;
    right: 51px;
}

.dopCountText {
    font-family: 'Minecraft';
    color: white;
    font-weight: 100;
    transform: rotate(-15deg);
}


.test12 {
    background: transparent;
    width: 100%;
    height: 100%;
    border: none;
    color: #dedada;
}

.test12:hover {
    cursor: pointer;
}












.card-shop{
    width: 250px;
    height: 130px;
    background: var(--color-background-shop-card);
    border-radius: 17px;
    box-shadow: 0px 4px 19px 2px rgba(34, 60, 80, 0.2) inset;
    padding: 0;
    display: flex;
    border: 1px solid var(--color-pink);
}

.half-card{
    margin: 0;
    height: 100%;
    display: inline-block;
}

.half-card-1 {
    width: 40%;
    height: 100%;
    /* position: relative;              /* 1 */
    display:flex; /* обязательные три для центровки img внутри дива */
    justify-content: center; /* центрируем элемент по горизонтали */
    align-items: center; /* и вертикали */
    /* overflow: hidden; /* если элемент больше блока-родителя – обрезаем лишнее */
}


.half-card-2 {
    width: 60%;
    position: relative;
    float: right;
}

.shop-item-name{
    font-size: 18px;
    font-weight: 600;
    /*
    margin: 5px 0 0 0;
    */
}


.img-shop-item{
    width: 80%;
    display: block;
}

.input-count-item-shop {
    width: 40px;
    border-radius: 5px;
    text-align: center;
    margin: 0 0 0 5px;
    background: #d8dcf2;
    border: 1px solid;
}

.img-shop-gem {
    height: 20px;
    margin-left: 3px;
}

.nav-link{
    display: inline-block;
    color: var(--color-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    margin: 0 10px 0 10px;
    text-align: center;
    font-family: 'Idealist';
}

.description {
    font-size: 14px;
    font-weight: 500;
    margin: 0;
}

.button-buy-shop{
    width: 112px;
    height: 32px;
    background: #419A26;
    border: 0px;
    border-radius: 7px;
    color: #fff;
    box-shadow: 0px 3px 8px 0px rgba(34, 60, 80, 0.2);
    font-weight: 600;
    font-size: 16px;

    /*
    margin: 0 0 8px 0;
    bottom: 0;
    position: absolute;
    */
}

.count-item-shop {
    display: flex;
    align-items: center;
}

.shop-cards {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 20px 15px;
}

.price-item-shop {
    display: flex;
    align-items: center;
}

.info-description {
    width: 20px;
    height: 20px;
    background: rgb(211, 211, 216, 0.5);
    position: absolute;
    border-radius: 3px;
    box-shadow: 0px 24px 2px 2px rgba(34, 60, 80, 0.2) inset;
    text-align: center;
    cursor: pointer;
}

.info-description:hover {
    background: rgb(236, 236, 180, 1);
    border: 1px solid;
    border-color: #d0f85a;
}

.info-description-question {
    color: rgb(230, 232, 233);
    vertical-align: middle;
}


/* всплывающие description */

/* .info-description:before {
    z-index: 100;
    display: block;
    content: attr(data-title);
    position: absolute;
    background: #eceefd;
    margin-left: -21px;
    margin-top: -21px;
    width: 230px;
    height: auto;
    border-radius: 16px;
    padding: 5px;
    box-sizing: border-box;
    font-weight: 400;

    visibility: hidden;
    opacity: 0;
} */

/* .info-description:hover:before {
    visibility: visible;
    opacity: 1;
    transition: all .2s ease-out;
} */

/* ночные колупания карт шопа */
.shop-item-name-shell {
    height: 35%;
    display: flex;
    align-items: center;

    padding-right: 20px;
}


.count-item-shop {
    height: 17%;
    padding: 3px 0;
    box-sizing: border-box;
}

.price-item-shop {
    height: 17%;
    padding: 3px 0;
    box-sizing: border-box;
}

.button-buy-shop-container {
    height: 31%;
    padding: 3px 0;
    box-sizing: border-box;
}

.half-card-2 {
    padding: 4px 0;
    box-sizing: border-box;
}


/* Ввод количества js */


.input-count-item-shop {
    width: 40px;
    border-radius: 5px;
    text-align: center;
    background: #d8dcf2;
    border: 1px solid;
}

/* .actionValue {
    text-align: center;
    background: transparent;
    height: 22px;
    width: 20px;
    border-style: solid;
    border-color: gray;
    color: black;
    font-size: 12px;
} */

.downValue{
    border-radius: 5px 0 0 5px;
    border-width: 1px 0 1px 1px;

}

.upValue{
    border-radius: 0 5px 5px 0;
    border-width: 1px 1px 1px 0;

}

.input_num_js{
    display: flex;
    align-items: center;
    margin: 0 0 0 5px;
}

.js-input{
    color: black;
    width: 40px;
    text-align: center;
    height: 20px;
    padding: 0;

    background: transparent;
    border-width: 1px 0 1px 0;
    border-color: gray;
    border-style: solid;
    font-size: 12px;
}

.js-input:focus{
    outline: none !important;
}



.img-ShopCard {
    height: 100%;
    object-fit: fill;
    width: 100%;
}

@media (max-width: 576px) {
    .shopCard {
        min-width: auto;
    }
}