/* css/library.css */

#library-main-content {    
    padding: 20px 40px; 
}

#main-header {
    background-color: var(--background-dark);
  
}

/* 2. Add top padding to push filters down from header */
.filter-container {
    position: relative;
    padding-top: 80px; /* Space for the fixed header */
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #2a2a2a;
    transition: padding-bottom 0.4s ease-in-out;
}

/* 3. Reduce bottom padding when collapsed */
.filter-container.collapsed {
    padding-bottom: 10px;
    margin-bottom: 10px;
}
/* --- END OF CHANGE --- */


.filter-groups {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-height: 500px;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
  
}
.filter-group[data-filter-key="mediaType"] a {
  font-size: 1.1em; 
  font-weight: 500;
}

.filter-container.collapsed .filter-groups {
    max-height: 25px;
}

.filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    row-gap: 10px;
}

/* --- CSS CHANGE IS HERE --- */
/* 4. Increase font size of filter links */
.filter-group a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 15px; /* Increased from 14px */
    cursor: pointer;
    transition: color 0.2s ease;
}
/* --- END OF CHANGE --- */


.filter-group a:hover { color: var(--text-primary); }
.filter-group a.active { color: var(--accent-purple); font-weight: 500; }

.collapse-btn {
    position: absolute;
    top: 80px; /* Match the new padding-top */
    right: 0;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.collapse-btn i { transition: transform 0.4s ease-in-out; }
.filter-container.collapsed .collapse-btn i { transform: rotate(180deg); }

.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--card-gap); margin-top:30px;}
.media-card { text-decoration: none; color: var(--text-primary); }
.media-card .card-image-container { position: relative; }
.media-card img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 12px; margin-bottom: 10px; }
.media-card p { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-card .card-image-container::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 50%; background: linear-gradient(to top, rgba(0,0,0,0.85), transparent); border-radius: 0 0 12px 12px; z-index: 2; }
.episode-overlay { position: absolute; bottom: 10px; left: 12px; color: #fff; padding-left: 10px; font-size: 13px; font-weight: 500; z-index: 3; }
.episode-overlay::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 5px; height: 60%; background-color: var(--accent-purple); border-radius: 2px; }

.media-card.loading .card-image-container { background-color: #202020; border-radius: 12px; display: flex; align-items: center; justify-content: center; aspect-ratio: 2 / 3; animation: pulse 2s infinite ease-in-out; position: relative; }
.media-card.loading img { display: none; }
.media-card.loading .card-image-container::after { content: 'i-FLIX'; font-family: 'Anton', sans-serif; font-size: 1.5rem; color: rgba(255, 255, 255, 0.1); position: absolute; }

.loader { width: 48px; height: 48px; border: 5px solid var(--text-secondary); border-bottom-color: transparent; border-radius: 50%; display: none; box-sizing: border-box; animation: rotation 1s linear infinite; margin: 30px auto; }
.loader.visible { display: block; }
@keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }