/* ==========================================
   1. RESET, BASE LAYOUT & GLOBAL THEMES (ANIMEPY)
   ========================================== */
:root {
    --primary-accent: #ff4500;
    --primary-hover: #e03d00;
    --header-bg: #171821;
    --logo-color: #fff;
    --logo-span-color: #ff4500;
    --header-text: #fff;
}

body.theme-theme1 {
    --primary-accent: #cb6ce6;
    --primary-hover: #a852c2;
    --header-bg: linear-gradient(90deg, #004aad, #cb6ce6);
    --logo-color: #fff;
    --logo-span-color: #000; 
    --header-text: #fff;
}

body.theme-theme2 {
    --primary-accent: #00bbff;
    --primary-hover: #0099cc;
    --header-bg: linear-gradient(90deg, #000000, #3533cd);
    --logo-color: #fff;
    --logo-span-color: #00bbff;
    --header-text: #fff;
}

body.theme-theme3 {
    --primary-accent: #d800a6;
    --primary-hover: #b00086;
    --header-bg: linear-gradient(90deg, #fff7ad, #ffa9f9);
    --logo-color: #000;
    --logo-span-color: #d800a6;
    --header-text: #000;
}

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}
body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    background-color: #0f1014; 
    color: #fff; 
    padding-bottom: 70px; 
    transition: background-color 0.4s ease;
}

/* ==========================================
   2. STICKY UNIVERSAL MAIN HEADER
   ========================================== */
header.main-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 15px 20px; 
    background: var(--header-bg); 
    position: sticky;
    top: 0;
    z-index: 1100;
    border-bottom: 1px solid #242538;
    transition: top 0.3s ease-in-out, background 0.4s ease; 
}
header.main-header.header-hidden {
    top: -70px; 
}
header .logo { 
    font-size: 22px; 
    font-weight: bold; 
    color: var(--logo-color); 
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: color 0.4s ease;
}
header .logo span { 
    color: var(--logo-span-color); 
    transition: color 0.4s ease;
}
header .pc-nav { 
    display: none; 
    list-style: none; 
    align-items: center; 
}
header nav li { margin-left: 25px; }
header nav li a { 
    color: var(--header-text); 
    text-decoration: none; 
    font-size: 16px;
    transition: color 0.3s; 
}
header nav li a:hover { color: var(--primary-accent); }

.search-bar-container.pc-search { display: none; }
.search-bar-container input { 
    padding: 8px 15px; 
    border-radius: 20px; 
    border: none; 
    background-color: #242538; 
    color: white; 
    outline: none;
}

/* ==========================================
   3. MOBILE TOGGLE SEARCH AREA
   ========================================== */
.mobile-search-box {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%;
    background: var(--header-bg);
    padding: 15px;
    z-index: 1500;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #242538;
    transition: background 0.4s ease;
}
.mobile-search-box input {
    width: 85%;
    padding: 10px 15px;
    border-radius: 6px;
    border: none;
    background-color: #242538;
    color: white;
    outline: none;
}
.mobile-search-box button {
    background: none;
    border: none;
    color: var(--header-text);
    font-size: 20px;
    cursor: pointer;
}

/* ==========================================
   4. 16:9 MAIN TOP BANNER SLIDER
   ========================================== */
.slider-container { 
    width: 100%; 
    aspect-ratio: 16/9; 
    max-height: 220px; 
    overflow: hidden; 
    position: relative; 
    background-color: #000;
    touch-action: pan-y; 
}
.slider { 
    display: flex; 
    width: 100%;
    height: 100%; 
    transition: transform 0.4s ease-in-out; 
}
.slide { 
    min-width: 100%; 
    height: 100%; 
    background-size: cover; 
    background-position: center top; 
    position: relative;
    display: flex; 
    align-items: flex-end; 
    padding: 15px;
    background-image: linear-gradient(to top, rgba(15,16,20,1) 10%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1) 100%);
}
.slide-content { 
    width: 100%;
    text-align: left;
    z-index: 2;
    margin-bottom: 5px;
}
.slide h1 { 
    font-size: 18px; 
    margin-bottom: 8px; 
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}
.slide-buttons { display: flex; gap: 8px; }

.btn { 
    padding: 6px 12px; border: none; border-radius: 4px; cursor: pointer; 
    font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 4px;
    transition: all 0.3s ease;
}
.watch-btn { background-color: var(--primary-accent); color: #fff; }
.watch-btn:hover { 
    background-color: var(--primary-hover); transform: scale(1.05); 
    box-shadow: 0 4px 12px rgba(0,0,0,0.4); 
}
.watch-btn i { transition: transform 0.3s ease; }
.watch-btn:hover i { transform: translateX(3px) scale(1.1); }

.download-btn { background-color: rgba(255,255,255,0.15); color: #fff; backdrop-filter: blur(5px); transition: transform 0.2s, background-color 0.2s; }
.download-btn:hover { background-color: rgba(255,255,255,0.3); transform: translateY(-2px); }

.nav-arrow { 
    position: absolute; top: 50%; transform: translateY(-50%); 
    background-color: rgba(0,0,0,0.5); color: white; border: none; 
    width: 30px; height: 30px; border-radius: 50%; cursor: pointer; z-index: 10;
    display: flex; align-items: center; justify-content: center;
}
.left-arrow { left: 8px; }
.right-arrow { right: 8px; }
.dot-container { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; z-index: 10; }
.dot { height: 6px; width: 6px; background-color: rgba(255,255,255,0.4); border-radius: 50%; cursor: pointer; }
.dot.active { background-color: var(--primary-accent); width: 12px; border-radius: 3px; }

/* ==========================================
   5. PERFECT HORIZONTAL ROW SLIDERS
   ========================================== */
main { padding: 15px 10px; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding: 0 5px; }
.section-header h2 { font-size: 15px; color: #fff; border-left: 3px solid var(--primary-accent); padding-left: 6px; transition: border-color 0.3s ease; }
.more-btn { color: var(--primary-accent); text-decoration: none; font-size: 12px; font-weight: bold; display: flex; align-items: center; gap: 4px; transition: color 0.3s ease; }
.home-section-block { margin-bottom: 25px; }

.anime-slider-row {
    display: flex !important;
    overflow-x: auto !important; 
    scroll-behavior: smooth; 
    gap: 12px; 
    padding: 5px; 
    width: 100%;
}

.anime-slider-row .anime-card {
    flex: 0 0 42% !important;
    max-width: 42% !important;
}

.anime-slider-row::-webkit-scrollbar { height: 3px; }
.anime-slider-row::-webkit-scrollbar-thumb { background: var(--primary-accent); border-radius: 10px; }
.anime-slider-row::-webkit-scrollbar-track { background: #242538; }

.anime-card {
    background-color: #171821;
    border-radius: 6px; 
    overflow: hidden; 
    border: 1px solid #242538; 
    display: flex; 
    flex-direction: column;
    width: 100% !important; 
    height: fit-content !important; 
    position: relative !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.anime-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}

.card-img-container { 
    width: 100%; 
    aspect-ratio: 2/3 !important; 
    min-height: 160px;
    overflow: hidden; 
}
.anime-card img { width: 100%; height: 100%; object-fit: cover; }

.anime-info { padding: 8px 6px; display: flex; flex-direction: column; justify-content: space-between; flex-grow: 1; }
.anime-info h3 { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.anime-info p { font-size: 9px; color: #9899a6; margin-bottom: 6px; }

.card-watch-btn {
    background-color: var(--primary-accent); color: white; border: none; padding: 6px 0;
    border-radius: 4px; font-size: 11px; font-weight: bold; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    transition: all 0.3s ease;
}
.card-watch-btn:hover {
    background-color: var(--primary-hover); transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.card-watch-btn i { transition: transform 0.3s ease; }
.card-watch-btn:hover i { transform: translateX(3px) scale(1.1); }

.history-card-wrapper { display: contents !important; }
.anime-card.history-card .remove-history-btn {
    position: absolute !important; top: 6px !important; right: 6px !important;         
    background: rgba(23, 24, 33, 0.9) !important; color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important; width: 24px !important;        
    height: 24px !important; border-radius: 50% !important; display: flex !important; 
    align-items: center !important; justify-content: center !important; font-size: 10px !important;    
    cursor: pointer !important; z-index: 999 !important; box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}
.anime-card.history-card .remove-history-btn:hover { background: var(--primary-accent) !important; border-color: var(--primary-accent) !important; }

.filtered-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 15px; }
.filtered-grid .anime-card { min-width: 100% !important; max-width: 100% !important; width: 100% !important; }

/* ==========================================
   6. MOBILE BOTTOM NAVIGATION
   ========================================== */
.bottom-nav { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #171821; display: flex; justify-content: space-evenly; align-items: center; padding: 10px 5px; z-index: 1000; border-top: 1px solid #242538; }
.nav-item { color: #9899a6; text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: color 0.3s ease; }
.nav-item i { font-size: 16px; }
.nav-item span { font-size: 9px; }
.nav-item.active, .nav-item:hover { color: var(--primary-accent); }

/* ==========================================
   7. SLIM FILTER MODAL
   ========================================== */
.modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); }
.modal-content { background-color: #171821; margin: 80px auto; padding: 20px; width: 90%; max-width: 360px; max-height: 80vh; overflow-y: auto; border-radius: 12px; position: relative; border: 1px solid #242538; }
.close-cat { color: #fff; float: right; font-size: 24px; cursor: pointer; }
.modal-divider { border: 0; height: 1px; background: #242538; margin: 20px 0; }
.language-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.category-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
.cat-tag, .lang-tag { background-color: #242538; color: #fff; border: none; padding: 10px; border-radius: 6px; cursor: pointer; font-size: 13px; transition: background 0.3s ease; }
.cat-tag:hover, .lang-tag:hover { background-color: var(--primary-accent); }
.active-cat, .active-lang { background-color: var(--primary-accent); font-weight: bold; }

/* ==========================================
   8. LAPTOP / PC / DESKTOP MODE
   ========================================== */
@media (min-width: 768px) {
    header.main-header { padding: 15px 30px; }
    header.main-header.header-hidden { top: 0; } 
    header .pc-nav { display: flex; }
    .search-bar-container.pc-search { display: block; }
    .bottom-nav { display: none; }
    
    .slider-container { aspect-ratio: 21/9; max-height: 450px; } 
    .slide h1 { font-size: 36px; }
    .slide-content { bottom: 30px; left: 30px; }
    
    main { padding: 20px 30px; }
    .section-header h2 { font-size: 18px; }
    .more-btn { font-size: 14px; }
    
    .anime-slider-row::-webkit-scrollbar { height: 6px; }

    .anime-slider-row .anime-card { 
        flex: 0 0 14.5% !important;
        max-width: 14.5% !important; 
    }
    
    .anime-slider-row { gap: 16px; }
    .anime-card.history-card .remove-history-btn { top: 8px !important; right: 8px !important; width: 26px !important; height: 26px !important; font-size: 11px !important; }
    .filtered-grid { grid-template-columns: repeat(6, 1fr); gap: 15px; }
}

/* ==========================================
   9. GLOBAL THEME OVERRIDES FOR OTHER PAGES (POST.HTML / SEE-ALL.HTML)
   ========================================== */
.meta-poster { border-color: var(--primary-accent) !important; transition: border-color 0.3s ease; }
.tags { color: var(--primary-accent) !important; transition: color 0.3s ease; }
.season-selector-control { border-color: var(--primary-accent) !important; transition: border-color 0.3s ease; }
.server-btn.active-server { background: var(--primary-accent) !important; border-color: var(--primary-accent) !important; color: #fff !important; transition: all 0.3s ease; }
.details-toggle-btn { color: var(--primary-accent) !important; transition: color 0.3s ease; }
.anime-details-box h3 { color: var(--primary-accent) !important; border-left-color: var(--primary-accent) !important; transition: all 0.3s ease; }
.episode-section h2 { border-left-color: var(--primary-accent) !important; transition: border-color 0.3s ease; }
.ep-btn:hover, .ep-btn.active { background: var(--primary-accent) !important; border-color: var(--primary-accent) !important; transition: all 0.3s ease; }
.list-title { border-left-color: var(--primary-accent) !important; transition: border-color 0.3s ease; }
.sort-control { border-color: var(--primary-accent) !important; transition: border-color 0.3s ease; }
.back-home-btn { color: var(--primary-accent) !important; transition: color 0.3s ease; }
.anime-info h3 span { color: var(--primary-accent) !important; transition: color 0.3s ease; }
#clearAllHistory { color: var(--primary-accent) !important; transition: color 0.3s ease; }
#seasonBadge { background: var(--primary-accent) !important; color: #fff !important; transition: background 0.3s ease; }