/* bot_app/web_app/css/pages/case-detail.css */

/* Страница детального просмотра */

#case-detail-page .page-header h1 {
    /* Стили наследуются из layout.css */
}


.case-detail-container { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-bottom: 80px; }
.case-detail-image-placeholder { width: 100%; max-width: 300px; height: 250px; background-color: var(--primary-color); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 150px; color: #444; border: 1px solid var(--secondary-color); }
.rewards-header { margin-top: 20px; width: 100%; text-align: center; font-size: 22px; color: var(--text-color); padding-bottom: 10px; }
.rewards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 15px; width: 100%; }
.reward-card { background-color: var(--primary-color); border: 1px solid var(--secondary-color); border-radius: 12px; padding: 10px; text-align: center; }
.reward-card-image-placeholder { height: 80px; display: flex; align-items: center; justify-content: center; font-size: 30px; color: #444; background-color: var(--secondary-color); border-radius: 8px; }
.reward-card-name {
    margin: 8px 0 4px 0;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(12px, 3vw, 16px); /* Адаптивный размер шрифта */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Ограничиваем текст двумя строками */
    -webkit-box-orient: vertical;
    white-space: normal; /* Разрешаем перенос текста */
}
.reward-card-price {
    font-size: 14px; /* Увеличим размер шрифта */
    color: #FFCA5A; /* Цвет звезды */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 4px;
}
.reward-card-price svg {
    width: 14px;
    height: 14px;
}

/* Стили для изображений внутри карточек */
.reward-card-image-placeholder img,
.case-card-image-placeholder img,
.case-detail-image-placeholder img,
.reel-item img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 'contain' чтобы изображение полностью помещалось */
    border-radius: 8px;
}

.case-cooldown-info {
    font-size: 16px;
    color: var(--text-color-secondary);
    margin-top: -10px;
    text-align: center;
}

.case-cooldown-info .cooldown-timer {
    font-weight: bold;
    color: var(--accent-color);
}

.button-green.disabled {
    opacity: 0.4 !important; /* Сделаем более заметно неактивной */
    cursor: not-allowed !important;
    pointer-events: none !important; /* Полностью отключаем события мыши */
    background-color: var(--secondary-color) !important; /* Изменим цвет для неактивного состояния */
    color: var(--text-color-secondary) !important;
}