/* #assets/css/ui_cards.css — Yummy Lunchbox/assets/css */

/* --- SHOP & GAME CARDS (ОБЩИЕ КОНТЕЙНЕРЫ) --- */
.shop-items-container {
    display: flex;
    justify-content: center;
    /* Уменьшили отступ, чтобы вместить чуть более широкие карточки */
    gap: 1.5%; 
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 1vh;
}

/* --- КАРТОЧКА МАГАЗИНА --- */
.shop-card {
    background: #FFF;
    border-radius: 2vmin; /* Скругление зависит от экрана */
    
    /* FIX: Уменьшили паддинг внутри карточки для компактности */
    padding: 1vmin;
    
    /* --- FIX: ПОЛНАЯ РЕЗИНА (БЕЗ PIXELS) --- */
    /* flex-basis: 45% — каждая карточка пытается занять 45% ширины контейнера. */
    flex: 0 0 48%; 
    
    /* FIX: Чуть увеличили макс. ширину, чтобы текст влезал в одну строку */
    max-width: 35vmin; 
    
    display: flex; 
    flex-direction: column;
    align-items: center;
    
    position: relative;
    border: 0.4vmin solid #eee;
    transition: transform 0.2s;
    box-shadow: 0 0.5vmin 1.5vmin rgba(0,0,0,0.05);
}

/* Стили по типам */
.shop-card[data-type="VIP"] {
    border-color: var(--col-accent);
    background: linear-gradient(to bottom, #FFF, #FFF9E6);
}

.shop-card[data-type="no_ads_30d"] {
    border-color: var(--col-primary);
    background: linear-gradient(to bottom, #FFF, #FFF0F5);
}

/* Иконка товара */
.shop-card .shop-icon {
    width: 45%; /* Чуть уменьшили иконку, чтобы дать место тексту */
    aspect-ratio: 1 / 1; 
    object-fit: contain;
    margin-bottom: 0.5vh;
    filter: drop-shadow(0 0.5vmin 0.5vmin rgba(0,0,0,0.1));
}

/* Тексты */
.shop-title {
    /* FIX: Уменьшили шрифт для компактности на Full HD */
    font-size: clamp(0.7rem, 3vmin, 1.1rem);
    font-weight: 900;
    color: var(--col-text-main);
    margin-bottom: 0.2vh;
    line-height: 1.1;
    text-align: center;
}

.shop-desc {
    /* FIX: Уменьшили описание */
    font-size: clamp(0.6rem, 2.2vmin, 0.8rem); 
    color: #777;
    margin-bottom: 0.5vh;
    min-height: 2.2em; 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.1;
}

/* Ценник (Стикер) */
.shop-price-sticker {
    background-color: var(--col-primary); 
    color: #FFFFFF;
    padding: 0.3em 0; /* Компактнее паддинг */
    width: 100%;
    border-radius: 2em;
    
    font-size: clamp(0.7rem, 2.8vmin, 0.95rem); 
    
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
    margin-top: auto; 
    box-shadow: none;
    border: 2px solid rgba(255, 255, 255, 0.4);
    pointer-events: none; 
}

.shop-card.active-state .shop-price-sticker {
    background-color: #b0b0b0;
    border-color: #ccc;
    color: #eee;
}

/* --- КАРТОЧКА "НАШИ ИГРЫ" --- */
.game-card {
    background: #FFF;
    
    /* MOBILE: Лента */
    /* Ширина в % от ширины экрана (vw), а не пиксели */
    flex: 0 0 60vw; 
    
    /* Ограничиваем не в px, а в vmin, чтобы на планшетах было соразмерно */
    max-width: 40vmin;
    
    border-radius: 2vmin;
    padding: 1.5vmin;
    border: 0.4vmin solid var(--col-secondary); 
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    box-shadow: 0 0.5vmin 0 rgba(78, 205, 196, 0.3), 0 1vmin 2vmin rgba(0,0,0,0.1);
}

.game-card:hover {
    transform: translateY(-0.5vh) scale(1.02);
    box-shadow: 0 1vmin 0 rgba(78, 205, 196, 0.4), 0 2vmin 3vmin rgba(0,0,0,0.15);
}

.game-card-cover {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover; 
    border-radius: 1.5vmin;
    border: 2px solid #eee;
    margin-bottom: 0.5vh;
}

.game-card-title {
    font-size: clamp(0.9rem, 4vmin, 1.3rem);
    font-weight: 900;
    color: var(--col-text-main);
    text-align: center;
    line-height: 1.2;
    padding: 0 0.5em;
}

/* =========================================
   FIX DESKTOP 2K: ПРЕВРАЩАЕМ ЛЕНТУ В СЕТКУ
   ========================================= */
@media (min-width: 1024px) {
    .game-card {
        /* На десктопе используем vmin для сетки */
        flex: 1 1 25vmin; 
        max-width: 35vmin; 
        padding: 2vmin;
    }
}