/* =========================================================
   ИСТОРИЯ ПРОСМОТРОВ (HISTORY.CSS)
   Полное соответствие карточкам Главной страницы (index.css)
   ========================================================= */

/* 1. Сетка карточек */
#historyGrid,
.movies-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    gap: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 2. Контейнер-обертка для карточки истории */
.history-card-wrapper {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    width: 100% !important;
}

/* 3. Карточка фильма */
#historyGrid .movie-card,
.movie-card {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    text-decoration: none !important;
    color: #ffffff !important;
    transition: transform 0.2s ease !important;
    position: relative !important;
    min-width: 0 !important;
    width: 100% !important;
}

#historyGrid .movie-card:hover,
.movie-card:hover {
    transform: translateY(-5px) !important;
    border-color: #3b82f6 !important;
}

/* 4. Постер фильма */
#historyGrid .movie-card img,
.movie-card img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
}

/* 5. Информация под постером */
#historyGrid .movie-info,
.movie-info {
    padding: 10px 12px !important;
    background: #1e293b !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    min-width: 0 !important;
}

/* Название фильма */
#historyGrid .movie-title,
.movie-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #f8fafc !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
}

/* Мета-данные (Год, Качество, Рейтинг) */
#historyGrid .movie-meta,
.movie-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 12px !important;
    color: #94a3b8 !important;
    gap: 4px !important;
    width: 100% !important;
    margin-top: 2px !important;
}

/* Золотистый рейтинг */
#historyGrid .rating,
.rating {
    color: #f59e0b !important;
    font-weight: bold !important;
    flex-shrink: 0 !important;
}

/* Бэдж качества (HD / WEB-DL) */
#historyGrid .badge-quality,
.badge-quality {
    position: static !important; /* Убираем позиционирование поверх постера */
    background: #f97316 !important; /* Оранжевый цвет */
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    display: inline-block !important;
    text-transform: uppercase !important;
    max-width: 60px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* 6. Кнопка удаления из истории (Крестик поверх карточки) */
.remove-item-btn,
.remove-history-item {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    z-index: 20 !important;
    background: rgba(15, 23, 42, 0.85) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: bold !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

.remove-item-btn:hover,
.remove-history-item:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
    transform: scale(1.1) !important;
}

/* 7. Адаптивность под мобильные телефоны (2 карточки в ряд) */
@media (max-width: 768px) {
    #historyGrid,
    .movies-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}