/* bot_app/web_app/css/results.css */

/* Модальное окно результата */
#result-modal .modal-content { display: flex; flex-direction: column; align-items: center; gap: 15px; width: 100%; max-width: 100vw; position: absolute; top: 60px; /* Высота top-bar */ left: 0; right: 0; bottom: 60px; /* Высота bottom-nav */ padding: 20px 20px 80px 20px; /* Увеличиваем padding-bottom */ box-sizing: border-box; overflow-y: auto; background-color: var(--bg-color); /* Добавляем фон */ box-shadow: none; border: none; /* Убираем тень и границу */ }

#result-modal-title {
    margin-top: -10px; /* Уменьшаем отступ сверху */
    margin-bottom: 10px; /* Немного уменьшаем отступ снизу, если нужно */
}
#result-modal-grid {
    display: flex; /* Изменено с grid на flex */
    flex-wrap: wrap; /* Добавлено для переноса элементов */
    justify-content: center; /* Добавлено для центрирования */
    gap: 10px; /* Уменьшаем отступ между элементами */
    width: 100%;
    /* max-height: 50vh; */ /* Удаляем, чтобы весь контент прокручивался */
    /* overflow-y: auto; */ /* Удаляем, чтобы весь контент прокручивался */
    padding: 5px;
}

#result-modal-footer {
    display: flex;
    width: 100%;
    gap: 10px;
    margin-top: 15px;
}

.result-item-card { 
    background-color: var(--bg-color); /* Меняем фон на основной */
    border-radius: 12px; /* Увеличиваем радиус */
    padding: 15px; /* Увеличиваем отступ */
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    gap: 10px; /* Увеличиваем отступ внутри карточки */
    width: calc(50% - 10px); /* Для двух элементов в ряд с учетом gap: 10px */
    box-sizing: border-box;
}
.result-item-card .reward-card-image-placeholder { 
    font-size: 55px; /* Увеличиваем размер иконки */
    width: 90px; /* Увеличиваем размер контейнера */
    height: 90px; /* Увеличиваем размер контейнера */
    background: none; 
}
.result-item-card .reward-card-name { 
    font-size: clamp(12px, 3vw, 18px); /* Адаптивный размер шрифта */
    font-weight: bold; /* Делаем жирнее */
    margin: 0; 
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Ограничиваем текст двумя строками */
    -webkit-box-orient: vertical;
    white-space: normal; /* Разрешаем перенос текста */
}
.result-item-card .sell-btn {
    font-size: 16px; /* Увеличиваем размер шрифта кнопки */
    padding: 10px 15px; /* Увеличиваем отступы кнопки */
    border-radius: 8px; /* Скругляем углы кнопки */
    margin-top: 5px;
    background-image: linear-gradient(to right, var(--success-color), #218838);
    color: white;
    border: 1px solid transparent;
}
.result-item-card .sell-btn.sold {
    background-image: none;
    background-color: var(--danger-color); /* Красный цвет после продажи */
    color: white; /* Белый текст */
    border: 1px solid var(--danger-color); /* Красная рамка */
    cursor: not-allowed;
}

.result-item-card .sell-btn.sold:hover {
    transform: none;
    box-shadow: none;
}

#result-modal .rewards-header {
    margin-top: 30px; /* Отступ сверху */
    margin-bottom: 10px; /* Отступ снизу */
    font-size: 24px; /* Размер шрифта */
    font-weight: bold;
    text-align: center;
    width: 100%;
}

#result-possible-rewards-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px; /* Уменьшаем отступ между элементами */
    width: 100%;
    padding: 5px;
}

#result-possible-rewards-grid .reward-card {
    background-color: var(--bg-color); /* Фон как у основного */
    border-radius: 12px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center; 
    gap: 10px; /* Увеличиваем отступ внутри карточки */
    width: calc(50% - 10px); /* Для двух элементов в ряд с учетом gap: 10px */
    box-sizing: border-box;
}

#result-possible-rewards-grid .reward-card .reward-card-image-placeholder {
    font-size: 55px; /* Увеличиваем размер иконки */
    width: 90px; /* Увеличиваем размер контейнера */
    height: 90px; /* Увеличиваем размер контейнера */
    background: none;
}

#result-possible-rewards-grid .reward-card .reward-card-name {
    font-size: clamp(12px, 3vw, 18px); /* Адаптивный размер шрифта */
    font-weight: bold;
    margin: 0;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Ограничиваем текст двумя строками */
    -webkit-box-orient: vertical;
    white-space: normal; /* Разрешаем перенос текста */
}

#result-possible-rewards-grid .reward-card .reward-card-price {
    font-size: 14px; /* Увеличим размер шрифта */
    color: #FFCA5A; /* Цвет звезды */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 4px;
}
#result-possible-rewards-grid .reward-card .reward-card-price svg {
    width: 14px;
    height: 14px;
}