body {
    overflow: hidden;
}

* {
    margin: 0vh;
    user-select: none;
    padding: 0vh;
    line-height: normal;
    -webkit-user-drag: none;
}

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    gap: 1.48vh;
}

.shop {
    position: relative;
}

.shop-content {
    display: flex;
    padding-top: 3.24vh;
    padding-left: 4.91vh;
    padding-right: 4.91vh;
    padding-bottom: 4.91vh;
    flex-direction: column;
    gap: 0.93vh;
    border-radius: 2.41vh;
    background: var(--colorBg);
    align-items: center;
}

.close-btn {
    top: 2.04vh;
    right: 1.39vh;
    width: 3.24vh;
    height: 3.24vh;
    position: absolute;
    display: flex;
    align-items: center;
    transform: scale(.8);
    justify-content: center;
    border-radius: 0.37vh;
    transition: .3s ease;
    background: radial-gradient(115.72% 115.72% at 51.43% 51.43%,var(--color-closeBtn) 0%, var(--color-closeBtnSec) 100%);
}

.close-btn:hover {
    box-shadow: 0vh 0vh 0.28vh 0vh var(--color-closeBtnHover) inset, 0vh 1.2vh 1.48vh 0vh var(--color-closeBtnShadow);
}

.close-btn svg {
    transition: .3s ease;
}

.close-btn:hover svg {
    transform: rotate(-90deg);
}

.close-btn:active {
    opacity: .8;
}

.basket {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.02vh;
    width: 36.94vh;
    height: 71.77vh;
    border-radius: 2.41vh;
    background: var(--color-bgBasket);
}

.header {
    position: relative;
    display: inline-flex;
    justify-content: space-between;
    min-width: 68.7vh;
    min-height: 8.06vh;
    gap: 3.06vh;
}

.header-desc {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.server-names{
    display: flex;
    align-items: center;
    gap: 0.74vh;
}

.server-Name {
    font-family: "Gilroy-ExtraBold";
    font-size: 4.12vh;
    background: radial-gradient(70.24% 70.24% at 50% 50%, #FFF 0%, #696969 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.server-secName {
    font-family: "BrothershipRegular";
    line-height: 5vh; 
    margin-top: 2vh;
    font-size: 3.89vh;
    background: radial-gradient(70.24% 70.24% at 50% 50%, var(--color-prim) 0%, var(--color-nameSec) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.header-secDesc {
    margin-top: -0.7vh;
    color: rgba(255, 255, 255, 0.25);
    font-family: "Gilroy-Regular";
    font-size: 1.3vh;
}

.categorys {
    right: 0vh;
    display: flex;
    align-items: flex-start;
    margin-top: 0.74vh;
    gap: 1.02vh;
}

.category {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.83vh;
    transition: .3s ease;
}

.category:active {
    opacity: .7;
}

.category-name {
    color: rgba(255, 255, 255, 0.55);
    font-family: "Gilroy-SemiBold";
    font-size: 1.11vh;
    transition: .3s ease;
}

.icon-svg {
    position: absolute;
    max-height: 1.39vh;
    width: auto;
    opacity: .5;
    filter: grayscale(1) brightness(100);
}

.category-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 6.02vh;
    height: 4.72vh;
}

.category-box img {
    margin-top: 0.19vh;
}

.category:hover .icon-svg {
    filter: none;
}

.svgImage {
    transition: .3s ease;
    filter: grayscale(1) brightness(500%);
}

.category:hover .svgImage {
    transition: .3s ease;
    filter: none;
}

.category:hover .category-name {
    color: #FFF;
}

.category:hover .icon-svg {
    filter: none;
    opacity: 1;
}

.selectedCategory .svgImage {
    filter: none;
}

.selectedCategory .category-name {
    color: #FFF;
}

.selectedCategory .icon-svg {
    filter: none;
    opacity: 1;
}

.items {
    display: flex;
    width: 69.17vh;
    min-height: 54.63vh;
    max-height: 54.63vh;
    overflow: scroll;
    align-items: flex-start;
    align-content: flex-start;
    gap: 1.94vh;
    flex-wrap: wrap;
}

.items::-webkit-scrollbar {
    display: none;
}

.item {
    position: relative;
    display: flex;
    padding: 0.93vh;
    flex-direction: row;
    align-items: center;
    align-content: flex-end;
    gap: 0.74vh 4.72vh;
    transition: .3s;
    border-radius: 0.56vh;
    max-height: 26.2vh;
    max-width: 21.76vh;
    flex-wrap: wrap;
    background: radial-gradient(81.11% 81.11% at 50% 38.29%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.00) 100%);
    box-sizing: border-box;
}

.item:hover {
    border-radius: 0.56vh;
    box-sizing: border-box;
    border: 0.09vh solid var(--color-itemBorder);
    background: radial-gradient(138.29% 141.46% at 57.3% 0%, var(--color-itemBg) 0%, rgba(26, 150, 207, 0.00) 100%);
    box-shadow: 0vh 0vh 1.2vh 0vh var(--color-shadowItem) inset, 0vh 0vh 3.33vh 0vh var(--color-shadowItem);
}


.item-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 19.91vh;
    height: 16.02vh;
    border-radius: 0.19vh;
    background: radial-gradient(84.18% 84.18% at 50% 50%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.00) 100%);
}

.item-img img {
    object-fit: contain;
    width: auto;
    height: 8.33vh;
}

.item-desc {
    display: flex;
    width: 19.54vh;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.item-descTxt {
    color: rgba(255, 255, 255, 0.25);
    font-family: "Gilroy-Regular";
    font-size: 1.3vh;
    font-weight: 400;
}

.item-iBox {
    display: flex;
    width: 19.54vh;
    justify-content: space-between;
    align-items: center;
    gap: 0.74vh;
}

.item-name {
    color: #FFF;
    font-family: "Gilroy-Regular";
    font-size: 1.3vh;
}

.item-price {
    color: #FFF;
    padding: 0.19vh 0.46vh;
    font-family: "Gilroy-Regular";
    font-size: 1.2vh;
    background: radial-gradient(393.74% 190.13% at 50% 50%, var(--color-itemPrice) 0%, rgba(114, 230, 126, 0.00) 100%);
    box-shadow: 0vh 0vh 2.41vh 0vh var(--color-itemPriceShadow);
}

.basket-btn {
    display: flex;
    width: 19.91vh;
    height: 3.52vh;
    justify-content: center;
    align-items: center;
    gap: 0.93vh;
    opacity: .7;
    color: #FFF;
    font-family: "Gilroy-Regular";
    font-size: 1.3vh;
    border-radius: 0.56vh;
    background: radial-gradient(84.18% 84.18% at 50% 50%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.00) 100%);
    transition: .3s ease;
}

.basket-btn:hover {
    opacity: 1;
}

.basket-btn:active {
    opacity: .7;
}

.line-bottom {
    position: absolute;
    bottom: -0.19vh;
    left: 0.74vh;
    width: 3.89vh;
    height: 0.37vh;
    background: #FFF;
    box-shadow: 0vh -0.19vh 3.06vh 0vh #FFF;
}

.top-content {
    margin-top: 2.45vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.76vh;
}

.basket-header {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-self: center;
}

.basket-title {
    font-family: "Gilroy-ExtraBold";
    font-size: 4.12vh;
    background: radial-gradient(70.24% 70.24% at 50% 50%, #FFF 0%, #696969 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.basket-desc{
    width: 19.44vh;
    color: rgba(255, 255, 255, 0.25);
    text-align: center;
    font-family: "Gilroy-Regular";
    font-size: 1.3vh;
}

.basket-items {
    width: 32.5vh;
    height: 45.09vh;
    overflow: scroll;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.74vh;
}

.basket-items::-webkit-scrollbar {
    display: none;
}

.basket-item {
    position: relative;
    align-items: center;
    display: flex;
    width: 32.5vh;
    opacity: .8;
    padding: 0.93vh 0vh;
    border-radius: 0.56vh;
    background: radial-gradient(81.11% 81.11% at 50% 38.29%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.00) 100%);
    transition: .3s ease;
}

.basket-item:hover {
    opacity: 1;
}

.bItem-info{
    display: flex;
    margin-left: 0.93vh;
    gap: 2.69vh;
}

.item-bImg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6.57vh;
    height: 6.57vh;
    border-radius: 0.19vh;
    background: radial-gradient(84.18% 84.18% at 50% 50%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.00) 100%);
}

.item-bImg img {
    object-fit: contain;
    height: 5.09vh;
    width: 5.09vh;
}

.item-bTxts {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 0.46vh;
}

.bTxts-bottom {
    display: flex;
    gap: 0.28vh;
}

.value-bItem {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-family: "Gilroy-Regular";
    font-size: 1.2vh;
    padding-left: 0.46vh;
    padding-top: 0.19vh;
    padding-bottom: 0.09vh;
    padding-right: 0.56vh;
    background: radial-gradient(393.74% 190.13% at 50% 50%, var(--color-valueItems) 0%, rgba(230, 114, 114, 0.00) 100%);
    box-shadow: 0vh 0vh 2.41vh 0vh var(--color-valueShadow);
}

.delete-item {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 2.31vh;
    top: 50%;
    opacity: .7;
    transform: translateY(-50%);
    width: 3.89vh;
    height: 3.8vh;
    border-radius: 0.56vh;
    background: radial-gradient(84.18% 84.18% at 50% 50%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.00) 100%);
    transition: .3s ease;
}
.delete-item:hover {
    opacity: 1;
}
.delete-item:active {
    opacity: .7;
}

.bottom-content {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 0.56vh;
    width: 32.5vh;
    height: 9.72vh;
    box-sizing: border-box;
    border: 0.09vh solid var(--color-prim);
    background: radial-gradient(227.84% 136.68% at 50% 50%, var(--color-bgPrim) 0%, var(--color-bgSec) 100%);
    box-shadow: 0vh 0vh 1.2vh 0vh var(--color-bgPrim) inset, 0vh 0vh 3.33vh 0vh var(--color-bgPrim);
}

.price-iBox {
    position: relative;
    display: flex;
    margin-left: 1.94vh;
    flex-direction: column;
    gap: 0.37vh;
}

.priceBox {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.total-txt {
    color: #FFF;
    font-family: "Gilroy-Regular";
    font-size: 1.85vh;
}

.total-desc {
    color: rgba(255, 255, 255, 0.55);
    text-align: right;
    margin-top: -0.19vh;
    font-family: "Gilroy-Regular";
    font-size: 1.11vh;
    line-height: 174%;
}

.total-price-value {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.46vh 1.39vh;
    border-radius: 0.19vh;
    color: var(--color-totalPrice);
    font-family: "Gilroy-Regular";
    font-size: 1.2vh;
    background: radial-gradient(393.74% 190.13% at 50% 50%, rgba(122, 122, 122, 0.25) 0%, rgba(240, 240, 240, 0.00) 100%);
}

.pay-options {
    position: absolute;
    display: flex;
    gap: 0.74vh;
    align-items: center;
    right: 0.93vh;
    top: 50%;
    transform: translateY(-50%);
}

.pay-option {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    gap: 1.76vh;
    align-items: center;
    justify-content: center;
    width: 5.56vh;
    height: 7.87vh;
    border-radius: 0.56vh;
    background: radial-gradient(84.18% 84.18% at 50% 50%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.00) 100%);
    transition: .3s ease;
}

.pay-option:active {
    opacity: .8;
}

.pay-type {
    color: #FFF;
    text-align: center;
    font-family: "Gilroy-Regular";
    font-size: 1.11vh;
}

.pay-option:hover {
    border-radius: 0.56vh;
    background: radial-gradient(227.84% 136.68% at 50% 50%, var(--color-payOptionsBg) 100%);
    box-shadow: 0vh 0vh 1.2vh 0vh var(--color-bgPrim) inset, 0vh 0vh 3.33vh 0vh var(--color-bgPrim);
}

.pay-option:hover:hover .pay-hoverBorder {
    opacity: 1;
}

.pay-hoverBorder {
    position: absolute;
    pointer-events: none;
    opacity: 0;
}