/*
Theme Name: Theme
Theme URI: dramaacoool.com.tr
Author: Cubicle Karma
Author URI: dramaacoool.com.tr
Description: A responsive WordPress theme based on the dramaacoool.com.tr website design. Includes templates for home, archives, search, 404, single anime, and single episode. Requires CPTs, Custom Fields (ACF Recommended), and potentially Custom Widgets for full functionality.
Version: 2.5.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: anime, streaming, two-columns, right-sidebar, single-column, custom-header, custom-menu, custom-post-types, custom-fields, theme-options-required, widgets, responsive-layout, dark-mode-support
Text Domain: gogoanime-theme

*/

/* --- Basic WordPress CSS Classes --- */
.aligncenter { display: block; margin: 0 auto; }
.alignleft { float: left; margin-right: 1em; }
.alignright { float: right; margin-left: 1em; }
img.aligncenter, img.alignleft, img.alignright { max-width: 100%; height: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { text-align: center; font-size: 0.9em; color: #666; margin-top: 0.5em; }
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }

/* --- Responsive Base & Fluid Media --- */
img,
video,
iframe,
embed,
object {
    max-width: 100%; /* Ensure media doesn't overflow its container */
    height: auto;    /* Maintain aspect ratio */
    display: block;  /* Prevent potential extra space below */
}

/* --- Theme Specific Styles (Copied from Static HTML <style>) --- */
/* Note: Assumes Tailwind is loaded (ideally via local build & compilation/enqueuing in functions.php) */

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #cccccc; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #bbbbbb; }
.dark ::-webkit-scrollbar-track { background: #1f2937; }
.dark ::-webkit-scrollbar-thumb { background: #4b5563; }
.dark ::-webkit-scrollbar-thumb:hover { background: #6b7280; }


/* Basic body styling */
body {
    font-family: 'Inter', sans-serif;
    background-color: #ffffff; /* Default light background */
    color: #374151; /* Default text color */
    overflow-x: hidden; /* Prevent accidental horizontal scroll */
    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out; /* Smooth theme transition */
}
.dark body {
     background-color: #111827; /* Dark background */
     color: #d1d5db;
}

/* Section headers (Used by widgets via functions.php registration) */
.widget .widget-title, /* Standard WP widget title */
.section-title { /* Custom class if needed */
    background-color: #ffdd57;
    color: #1f2937;
    padding: 8px 12px;
    font-weight: 600;
    border-radius: 5px 5px 0 0;
    margin-bottom: 0;
    font-size: 0.875rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allow title/buttons to wrap on small screens */
    gap: 8px; /* Add gap for wrapped elements */
}
/* Content boxes (Used by widgets via functions.php registration) */
.widget .widget-content, /* Custom class for widget content */
.section-content { /* Custom class if needed */
    border: 1px solid #e5e7eb;
    border-top: none;
    padding: 16px;
    border-radius: 0 0 5px 5px;
    background-color: #fff;
}

/* Override nested content boxes to align title and content */
.widget-area .widget .widget-content,
.widget-area .section-content {
    padding-top: 0 !important;
    border: none !important;
    margin: 0 !important;
    width: 100%;
}

/* Anime cards */
.anime-card {
    background-color: #fff;
    border-radius: 5px;
    overflow: hidden;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.3s ease-in-out; /* Added bg transition */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.anime-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}
.anime-card .poster-container {
    position: relative;
}
.anime-card img {
    aspect-ratio: 2 / 3;
    object-fit: cover;
    width: 100%;
}
/* Badges styling */
.badge {
    position: absolute;
    color: #ffffff;
    font-size: 10px;
    font-weight: 500;
    padding: 1px 6px;
    border-radius: 3px;
    background-color: rgba(0, 0, 0, 0.65);
    line-height: 1.4;
}
.badge-top-right { top: 6px; right: 6px; }
.badge-bottom-left {
    bottom: 6px;
    left: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    background-color: transparent;
    padding: 0;
}
.badge-ep, .badge-lang {
    padding: 1px 6px;
    border-radius: 3px;
    background-color: rgba(0, 0, 0, 0.65);
}

/* Footer */
.footer-az { background-color: #374151; color: #ffdd57; padding: 10px 0; text-align: center; }
.footer-az a {
    background-color: #ffdd57;
    color: #1f2937;
    padding: 2px 5px;
    margin: 1px 2px;
    border-radius: 3px;
    font-weight: 600;
    font-size: 11px;
    display: inline-block;
    text-decoration: none;
}
.footer-az a:hover {
    background-color: #ffca2c;
}
.footer-info { background-color: #1f2937; color: #9ca3af; padding: 15px 1rem; text-align: center; font-size: 0.8rem; } /* Added horizontal padding */

/* Sidebar Search Form Elements */
.adv-search-widget-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 columns */
    gap: 0.65rem; /* Space between items */
}
.adv-search-select {
    margin-top: 0; /* Remove default top margin */
    display: block;
    width: 100%;
    padding: 6px 10px;
    font-size: 0.8rem;
    color: #4b5563;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background-color: #f9fafb;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.2em 1.2em;
    padding-right: 2.5rem;
    margin-bottom: 0; /* Remove bottom margin as grid gap handles it */
}
 .adv-search-select:focus {
    outline: none;
    border-color: #fbbf24;
    box-shadow: 0 0 0 1px #fbbf24;
}
.adv-search-button {
    width: 100%;
    margin-top: 12px;
    padding: 8px 16px;
    background-color: var(--theme-color-main, #ffc107); /* Use CSS Variable */
    color: #1f2937;
    font-weight: 600;
    border-radius: 4px;
    font-size: 0.875rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
    grid-column: span 2 / span 2; /* Make button span full width */
}
.adv-search-button:hover { background-color: var(--theme-color-main-hover, #ffca2c); } /* Define hover color or adjust opacity */

/* Trending Section Buttons */
.trending-filter-btn {
     font-size: 11px;
     font-weight: 500;
     padding: 2px 8px;
     border-radius: 4px;
     background-color: #f3f4f6;
     color: #4b5563;
     border: 1px solid #e5e7eb;
     cursor: pointer;
     transition: all 0.2s;
     white-space: nowrap; /* Prevent button text wrapping */
}
.trending-filter-btn.active,
.trending-filter-btn:hover {
    background-color: var(--theme-color-main, #ffdd57);
    color: #1f2937;
    border-color: var(--theme-color-main, #ffc107);
}

/* Responsive fix for Trending Animes filter on mobile */
@media (max-width: 576px) {
    .trending-filter {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: none; /* hide scrollbar IE/Edge */
        scrollbar-width: none; /* hide scrollbar Firefox */
    }
    .trending-filter::-webkit-scrollbar {
        display: none; /* hide scrollbar Chrome/Safari */
    }
    .trending-filter > button {
        flex: 0 0 auto !important;
        margin-left: 0 !important;
    }
    .trending-filter > button + button {
        margin-left: 0.5rem !important;
    }
}

/* Ensure WP Nav Menu items don't have bullets */
.primary-menu-class ul, .primary-menu-class li {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* Add hover styles for WP menu items */
.primary-menu-class a:hover {
    color: white;
    transition: color 0.2s;
}

/* Pagination Styles */
.pagination .nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    gap: 4px; /* Tailwind space-x-1 equivalent */
}
.pagination .nav-links .page-numbers {
    padding: 4px 12px; /* Tailwind px-3 py-1 */
    border: 1px solid #d1d5db; /* Tailwind border border-gray-300 */
    color: #6b7280; /* Tailwind text-gray-500 */
    border-radius: 0.25rem; /* Tailwind rounded */
    font-size: 0.75rem; /* Tailwind text-xs */
    font-weight: 500; /* Tailwind font-medium */
    background-color: #ffffff; /* Tailwind bg-white */
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    line-height: 1.5; /* Ensure consistent height */
}
.pagination .nav-links .page-numbers:hover {
    background-color: #f9fafb; /* Tailwind hover:bg-gray-50 */
    border-color: #9ca3af; /* Tailwind hover:border-gray-400 */
}
.pagination .nav-links .page-numbers.current {
    background-color: var(--theme-color-main, #ffdd57); /* Use CSS Variable */
    color: #1f2937; /* Tailwind text-gray-800 */
    border-color: var(--theme-color-main, #ffdd57);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* Tailwind shadow-sm */
}
.pagination .nav-links .dots {
    padding: 4px 8px; /* Adjust padding */
    color: #9ca3af; /* Tailwind text-gray-400 */
    font-size: 0.75rem;
    border: 1px solid transparent; /* Match height */
    line-height: 1.5;
}

/* Single Anime/Episode Page Styles */
.anime-info-box img {
    border: 1px solid #e5e7eb;
}
.anime-info-box .genre-tag {
    display: inline-block;
    padding: 2px 8px;
    background-color: #f3f4f6;
    color: #4b5563;
    border-radius: 4px;
    font-size: 11px;
    margin-right: 4px;
    margin-bottom: 4px;
    text-decoration: none;
    transition: all 0.2s;
}
.anime-info-box .genre-tag:hover {
    background-color: var(--theme-color-main, #ffdd57);
    color: #1f2937;
}
.bookmark-btn {
    display: inline-block;
    padding: 6px 16px;
    background-color: var(--theme-color-main, #ffc107); /* Use CSS Variable */
    color: #1f2937;
    border-radius: 4px;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    transition: background-color 0.2s;
}
.bookmark-btn:hover {
    background-color: var(--theme-color-main-hover, #ffca2c);
}
.bookmark-btn i {
    margin-right: 6px;
}

/* Video Player Area Styles */
.video-player-area {
    position: relative; /* For potential overlays */
}
.player-controls {
    background-color: #1f2937; /* Dark background */
    color: #d1d5db; /* Light text */
    padding: 8px 16px;
    border-radius: 0 0 5px 5px; /* Rounded bottom */
    margin-top: -5px; /* Overlap slightly if needed */
    position: relative; /* Ensure it's above player if needed */
    z-index: 10;
    /* Responsive adjustments for controls */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem 1rem; /* Vertical and horizontal gap */
}
.player-controls > div { /* Target direct children divs */
    flex-basis: auto; /* Allow elements to take natural width */
}
.player-controls .flex-1 { /* Center element */
    text-align: center;
}
.player-controls a, .player-controls button {
    color: #d1d5db;
    transition: color 0.2s;
}
.player-controls a:hover, .player-controls button:hover {
    color: #ffffff;
}

/* Episode Grid Styles */
.episode-grid {
    background-color: #1f2937; /* Dark background */
    padding: 12px;
    border-radius: 5px;
    margin-bottom: 1.25rem; /* mb-5 */
}
.episode-grid-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px; /* gap-1.5 */
}
.episode-grid-list a, .episode-grid-list span {
    display: inline-block;
    padding: 4px 12px; /* px-3 py-1 */
    border-radius: 0.25rem; /* rounded */
    font-size: 0.75rem; /* text-xs */
    font-weight: 500; /* font-medium */
    text-decoration: none;
    line-height: 1.5;
    transition: background-color 0.2s, color 0.2s;
}
.episode-grid-list a {
    background-color: #4b5563; /* bg-gray-600 */
    color: #d1d5db; /* text-gray-200 */
}
.episode-grid-list a:hover {
    background-color: #6b7280; /* hover:bg-gray-500 */
    color: #ffffff; /* hover:text-white */
}
.episode-grid-list span.current-episode { /* For current episode */
    background-color: var(--theme-color-main, #facc15); /* Use CSS Variable */
    color: #1f2937; /* text-black */
    cursor: default;
}
.episode-grid-list span.no-episodes { /* For no episodes message */
     color: #9ca3af; /* text-gray-500 */
     font-size: 0.875rem; /* text-sm */
}

/* Alternative Episode Layout (List Left) - Requires CSS */
.episode-layout-left {
    display: flex;
    flex-direction: column; /* Stack on mobile */
    gap: 1.5rem; /* Adjust gap */
}
@media (min-width: 1024px) { /* Apply side-by-side on large screens */
    .episode-layout-left {
        flex-direction: row-reverse; /* Sidebar on the left */
    }
}
.episode-layout-left .episode-main-content {
    flex-grow: 1;
    min-width: 0; /* Prevent content overflow issues in flex */
}
.episode-layout-left .episode-sidebar {
    width: 100%; /* Full width on mobile */
    flex-shrink: 0;
    max-height: 70vh; /* Example max height */
    overflow-y: auto; /* Enable scrolling */
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    padding: 1rem;
}
@media (min-width: 1024px) { /* Apply fixed width on large screens */
     .episode-layout-left .episode-sidebar {
        width: 300px; /* Adjust width */
     }
}
.dark .episode-layout-left .episode-sidebar {
    border-color: #374151;
    background-color: #1f2937;
}
.episode-layout-left .episode-sidebar-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}
.episode-layout-left .episode-sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 2px; /* Space between items */
}
.episode-layout-left .episode-sidebar-list li a {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    text-decoration: none;
    color: #4b5563;
    font-size: 0.8rem;
    transition: background-color 0.2s, color 0.2s;
}
.dark .episode-layout-left .episode-sidebar-list li a {
     color: #d1d5db;
}
.episode-layout-left .episode-sidebar-list li a:hover {
    background-color: #f3f4f6;
}
.dark .episode-layout-left .episode-sidebar-list li a:hover {
    background-color: #374151;
}
.episode-layout-left .episode-sidebar-list li.current-episode a {
    background-color: var(--theme-color-main, #facc15);
    color: #1f2937;
    font-weight: 600;
}
.dark .episode-layout-left .episode-sidebar-list li.current-episode a {
     background-color: var(--theme-color-main-dark, #f59e0b);
     color: #1f2937;
}
.episode-layout-left .episode-sidebar-list .ep-badge {
    font-size: 9px;
    padding: 1px 4px;
    border-radius: 3px;
    margin-right: 0.5rem;
    background-color: #6b7280;
    color: white;
    flex-shrink: 0; /* Prevent badge shrinking */
}
.dark .episode-layout-left .episode-sidebar-list .ep-badge {
    background-color: #4b5563;
}
.episode-layout-left .episode-sidebar-list .ep-title {
    flex-grow: 1;
    line-height: 1.3;
}

/* Comments Section Styles */
#comments { margin-top: 2rem; }
.comment-list { list-style: none; padding: 0; margin: 0; }
.comment-list li.comment { border-bottom: 1px solid #e5e7eb; padding: 1rem 0; }
.comment-list li:last-child { border-bottom: none; }
.comment-author img.avatar { border-radius: 50%; float: left; margin-right: 1rem; }
.comment-meta { font-size: 0.8rem; color: #6b7280; margin-bottom: 0.5rem; }
.comment-meta a { color: #4b5563; text-decoration: none; }
.comment-meta a:hover { text-decoration: underline; }
.comment-content { margin-left: 4rem; /* Adjust based on avatar size */ clear: both; }
.comment-reply-link { font-size: 0.8rem; color: #fbbf24; text-decoration: none; float: right; }
.comment-reply-link:hover { text-decoration: underline; }
#respond { margin-top: 2rem; border-top: 1px solid #e5e7eb; padding-top: 1.5rem;}
#respond h3#reply-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; }
#respond h3#reply-title small a { font-size: 0.8rem; font-weight: 400; margin-left: 0.5rem; text-decoration: none; color: #fbbf24;}
#respond h3#reply-title small a:hover { text-decoration: underline;}
.comment-form label { display: block; margin-bottom: 0.25rem; font-size: 0.9rem; font-weight: 500; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: #fbbf24;
    box-shadow: 0 0 0 1px #fbbf24;
}
.comment-form .form-submit input#submit { /* Target specific submit button */
    padding: 8px 16px;
    background-color: var(--theme-color-main, #ffc107); /* Use CSS Variable */
    color: #1f2937;
    font-weight: 600;
    border-radius: 4px;
    font-size: 0.875rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}
.comment-form .form-submit input#submit:hover { background-color: var(--theme-color-main-hover, #ffca2c); }
.comment-notes, .logged-in-as { font-size: 0.8rem; color: #6b7280; margin-bottom: 1rem; }
.comment-form-cookies-consent label { display: inline-block; margin-left: 0.5rem; }
.comment-form-cookies-consent input { width: auto; margin-right: 0.25rem; }

/* Hide any anime-card immediately following comments on single pages */
#comments ~ .anime-card,
.comments-area + .anime-card {
    display: none !important;
}

/* Hide all anime-card elements on single episode and single anime pages */
body.single-episode .anime-card,
body.single-anime .anime-card {
    display: none !important;
}

/* Dark Mode Specific Styles (Add more as needed) */
/* Base dark mode styles */
.dark body { background-color: #111827; color: #d1d5db; }
.dark .bg-white { background-color: #1f2937; }
.dark .text-gray-800 { color: #e5e7eb; }
.dark .text-gray-700 { color: #d1d5db; }
.dark .text-gray-600 { color: #9ca3af; }
.dark .text-gray-500 { color: #6b7280; }
.dark .border-gray-100 { border-color: #374151; }
.dark .border-gray-200 { border-color: #374151; }
.dark .border-gray-300 { border-color: #4b5563; }
.dark .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); }
.dark .shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0, 0.3), 0 2px 4px -2px rgba(0,0,0, 0.3); }
.dark .shadow-inner { box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.2); }

/* Component specific dark styles */
.dark header { background-color: #1f2937; border-bottom-color: #374151; }
.dark nav[style*="background-color"] { background-color: var(--theme-color-main-dark, #f59e0b) !important; } /* Override inline style */
.dark .primary-menu-class a { color: #1f2937; } /* Adjust nav text color for dark */
.dark .primary-menu-class a:hover { color: #000000; }
.dark .site-description { color: #9ca3af; }
.dark .search-field { background-color: #374151; border-color: #4b5563; color: #e5e7eb; }
.dark .search-field::placeholder { color: #6b7280; }
.dark .search-field:focus { border-color: var(--theme-color-main-dark, #f59e0b); box-shadow: 0 0 0 1px var(--theme-color-main-dark, #f59e0b); }
.dark .search-submit { color: #9ca3af; }
.dark .search-submit:hover { color: var(--theme-color-main-dark, #f59e0b); }

.dark .anime-card { background-color: #1f2937; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.dark .anime-card:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.4); }
.dark .anime-card h3 { color: #e5e7eb; }
.dark .anime-card p { color: #9ca3af; }

.dark .section-title { background-color: var(--theme-color-main-dark, #f59e0b); color: #1f2937; }
.dark .section-content { background-color: #1f2937; border-color: #374151; }

.dark .adv-search-select { background-color: #374151; border-color: #4b5563; color: #e5e7eb; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");}
.dark .adv-search-select:focus { border-color: var(--theme-color-main-dark, #f59e0b); box-shadow: 0 0 0 1px var(--theme-color-main-dark, #f59e0b); }
.dark .adv-search-button { background-color: var(--theme-color-main-dark, #f59e0b); color: #1f2937; }
.dark .adv-search-button:hover { background-color: var(--theme-color-main-dark-hover, #d97706); } /* Define dark hover */

.dark .trending-filter-btn { background-color: #374151; color: #d1d5db; border-color: #4b5563; }
.dark .trending-filter-btn.active, .dark .trending-filter-btn:hover { background-color: var(--theme-color-main-dark, #f59e0b); color: #1f2937; border-color: var(--theme-color-main-dark, #f59e0b); }

.dark .pagination .nav-links .page-numbers { background-color: #374151; border-color: #4b5563; color: #9ca3af; }
.dark .pagination .nav-links .page-numbers:hover { background-color: #4b5563; border-color: #6b7280; }
.dark .pagination .nav-links .page-numbers.current { background-color: var(--theme-color-main-dark, #f59e0b); border-color: var(--theme-color-main-dark, #f59e0b); color: #1f2937; }
.dark .pagination .nav-links .dots { color: #6b7280; }

.dark .anime-info-box img { border-color: #374151; }
.dark .anime-info-box .genre-tag { background-color: #374151; color: #d1d5db; }
.dark .anime-info-box .genre-tag:hover { background-color: var(--theme-color-main-dark, #f59e0b); color: #1f2937; }
.dark .bookmark-btn { background-color: var(--theme-color-main-dark, #f59e0b); color: #1f2937; }
.dark .bookmark-btn:hover { background-color: var(--theme-color-main-dark-hover, #d97706); }

.dark .player-controls { background-color: #111827; border-top: 1px solid #374151; } /* Adjust player controls bg */
.dark .player-controls a, .dark .player-controls button { color: #9ca3af; }
.dark .player-controls a:hover, .dark .player-controls button:hover { color: #e5e7eb; }

.dark .episode-grid { background-color: #111827; border: 1px solid #374151; }
.dark .episode-grid-list a { background-color: #374151; color: #9ca3af; }
.dark .episode-grid-list a:hover { background-color: #4b5563; color: #e5e7eb; }
.dark .episode-grid-list span.current-episode { background-color: var(--theme-color-main-dark, #f59e0b); color: #1f2937; }
.dark .episode-grid-list span.no-episodes { color: #6b7280; }

.dark #comments { border-top-color: #374151; }
.dark .comment-list li.comment { border-bottom-color: #374151; }
.dark .comment-meta a { color: #9ca3af; }
.dark .comment-reply-link { color: var(--theme-color-main-dark, #f59e0b); }
.dark #respond { border-top-color: #374151; }
.dark #respond h3#reply-title small a { color: var(--theme-color-main-dark, #f59e0b); }
.dark .comment-form input, .dark .comment-form textarea { background-color: #374151; border-color: #4b5563; color: #e5e7eb; }
.dark .comment-form input:focus, .dark .comment-form textarea:focus { border-color: var(--theme-color-main-dark, #f59e0b); box-shadow: 0 0 0 1px var(--theme-color-main-dark, #f59e0b); }
.dark .comment-form .form-submit input#submit { background-color: var(--theme-color-main-dark, #f59e0b); color: #1f2937; }
.dark .comment-form .form-submit input#submit:hover { background-color: var(--theme-color-main-dark-hover, #d97706); }
.dark .comment-notes, .dark .logged-in-as { color: #9ca3af; }

/* Helper classes for dark mode icon toggle */
.dark .dark-icon { display: inline-block; }
.dark .light-icon { display: none; }
html:not(.dark) .dark-icon { display: none; }
html:not(.dark) .light-icon { display: inline-block; }

/* Add more specific dark mode overrides as needed */

/* Sidebar specific fixes for single-anime and single-episode pages */
.widget-area {
    width: 100%;
}

.widget-area .widget {
    margin-bottom: 1rem;
}

.widget-area .section-title,
.widget-area .widget-title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.widget-area .section-content,
.widget-area .widget-content {
    padding: 1rem;
    width: 100%;
}

/* --- Global Sidebar Widget Container & Heading Styling --- */
.widget-area .widget {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0 !important;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.widget-area .widget-title,
.widget-area .section-title {
    background-color: var(--theme-color-main) !important;
    color: #ffffff !important;
    padding: 0.3rem 1rem !important;
    margin: -1rem -1rem 0 -1rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border-radius: 0.5rem 0.5rem 0 0 !important;
    margin-bottom: 0.5rem !important;
}
.widget-area .widget-content,
.widget-area .section-content {
    padding: 0 1rem 1rem !important;
    padding-top: 0.3rem !important;
}

/* Fix sidebar widget heading and content width/alignment */
.widget-area .widget-title,
.widget-area .section-title,
#secondary.widget-area .widget-title,
#secondary.widget-area .section-title {
    width: 100% !important;
    left: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.widget-area .widget-content,
.widget-area .section-content,
#secondary.widget-area .widget-content,
#secondary.widget-area .section-content {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 0.75rem !important;
}

/* Make sure sidebar has consistent width on all pages */
@media (min-width: 1024px) {
    .lg\:w-72, .lg\:w-80 {
        width: 100% !important; /* Override Tailwind width classes */
    }

    .sticky.top-4 {
        position: sticky;
        top: 1rem;
    }
}

/* Widget specific styling fixes */
.widget {
    width: 100%;
    max-width: 100%;
}

.widget img {
    max-width: 100%;
    height: auto;
}

/* Fix for advanced search widget inputs */
.adv-search-widget-grid {
    width: 100%;
}

/* Fix for trending anime thumbnails */
.widget .flex.items-start.space-x-3 {
    display: flex;
    width: 100%;
}

/* Make sure text doesn't overflow */
.widget a.text-\[13px\] {
    word-break: break-word;
    display: block;
}

/* Global layout classes for 70-30 content/sidebar distribution */
@media (min-width: 768px) {
    /* Main content area - 70% width on all pages */
    .content-area {
        width: 70% !important;
    }
    
    /* Sidebar area - 30% width on all pages */
    .sidebar-area {
        width: 30% !important;
    }
    
    /* Override any Tailwind width classes */
    .md\:w-1\/2,
    .md\:w-2\/3,
    .lg\:w-3\/4,
    .lg\:flex-1 {
        width: 70% !important;
        flex: none !important;
    }
    
    .lg\:w-72,
    .lg\:w-80,
    .xl\:w-80 {
        width: 30% !important;
        flex: none !important;
    }
}

/* Fix for smaller screens */
@media (max-width: 767px) {
    .content-area,
    .sidebar-area {
        width: 100% !important;
    }
}

/* --- Sidebar Layout Fixes --- */
.widget-area {
    width: 100%;
}

.sidebar-area {
    width: 100%;
    /* Always single column for widgets */
    display: block;
}

/* Make the entire sidebar sticky on desktop, not just first widgets */
@media (min-width: 1024px) {
    .sidebar-area > .sticky {
        position: sticky;
        top: 1.5rem;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }
}

/* All widgets stack vertically, never side by side */
.widget-area .widget {
    width: 100%;
    margin-bottom: 1.5rem;
    display: block;
}

/* Fix: On mobile, sidebar always after content */
@media (max-width: 1023px) {
    .content-wrapper {
        display: flex;
        flex-direction: column;
    }
    .content-area {
        order: 1;
    }
    .sidebar-area {
        order: 2;
        margin-top: 1.5rem;
    }
    .sidebar-area > .sticky {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

/* Prevent accidental multi-column in sidebar */
.sidebar-area .widget, .widget-area .widget {
    float: none !important;
    display: block !important;
    clear: both !important;
}

/* Ensure widget content fills width */
.widget-content, .widget .section-content {
    width: 100%;
    box-sizing: border-box;
}

/* --- Sidebar Widget Styling (Professional Override) --- */
#secondary.widget-area .widget {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0 !important;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
#secondary.widget-area .widget-title,
#secondary.widget-area .section-title {
    background-color: var(--theme-color-main) !important;
    color: #ffffff !important;
    padding: 0.75rem 1rem !important;
    margin: -1rem -1rem 1 -1rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border-radius: 0.5rem 0.5rem 0 0 !important;
    margin-bottom: 0.75rem !important;
}
#secondary.widget-area .widget-content,
#secondary.widget-area .section-content {
    padding: 0 1rem 1rem !important;
    padding-top: 0.75rem !important;
}

/* --- Mobile Sidebar Layout --- */
@media (max-width: 767px) {
    /* Force sidebar below content on mobile */
    main .flex.flex-col.md\:flex-row {
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Ensure sidebar gets full width on mobile */
    #secondary.widget-area {
        width: 100% !important;
        margin-top: 1.5rem;
    }
}

/* Apply order for mobile view */
@media (max-width: 767px) {
    /* Content first, sidebar second on mobile */
    main .flex.flex-col.md\:flex-row > div:first-child {
        order: 1;
    }
    
    main .flex.flex-col.md\:flex-row > #secondary {
        order: 2;
    }
}

/* Reset ordering for desktop view */
@media (min-width: 768px) {
    main .flex.flex-col.md\:flex-row > div,
    main .flex.flex-col.md\:flex-row > #secondary {
        order: unset;
    }
}

/* Sidebar Widget Container Styling */
.widget-area .widget,
#secondary.widget-area .widget,
.sidebar-area .widget,
.home-sidebar .widget {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.5rem !important;
    padding: 0 !important;
    margin-bottom: 1.5rem !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

/**
 * Alternative Recent Posts Layout (Grid Style)
 * Based on the design from 2nd.html
 */

/* Recent Post Alternative Layout Container */
.latest-release-alt-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #20c997; /* Exact teal color from 2nd.html */
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.dark .latest-release-alt-header {
    background-color: var(--theme-color-main-dark); /* Use dark theme color */
}

.latest-release-alt-header h2 {
    font-size: 1.2em;
    font-weight: bold;
}

.view-all-btn {
    background-color: #e9ecef;
    color: #333;
    border: none;
    padding: 6px 12px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.8em;
    font-weight: bold;
    text-transform: uppercase;
}

.view-all-btn:hover {
    background-color: #dee2e6;
}

.dark .view-all-btn {
    background-color: rgba(255, 255, 255, 0.2);
    color: #f8f9fa;
}

.dark .view-all-btn:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* Video Grid */
.video-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px 20px; /* Row gap, Column gap exactly as in 2nd.html */
}

/* Individual Video Item */
.video-item {
    background-color: #fff;
}

.dark .video-item {
    background-color: #2d3748;
}

/* Thumbnail */
.thumbnail-container {
    position: relative;
    background-color: #000;
    aspect-ratio: 16 / 9; /* Maintain exact 16:9 aspect ratio as in 2nd.html */
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Disable conflicting pseudo-element play icon overlay for v2 thumbnails */
.thumbnail-container::after {
    display: none !important;
}

.thumbnail-container::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
    z-index: 1;
}

.thumbnail-container:hover::before {
    background: rgba(0, 0, 0, 0.4);
}

.thumbnail-actual-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.5s ease;
    z-index: 0;
}

.thumbnail-container:hover .thumbnail-actual-image {
    transform: scale(1.1);
}

/* Hover play icon overlay for v2 layout thumbnails */
.thumbnail-container::after {
    content: "\f04b";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #fff;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
    font-size: 2.5rem;
}
.thumbnail-container:hover::after {
    opacity: 1;
}

/* Play icon overlay on V2 layout thumbnails */
.thumbnail-container {
    position: relative; /* ensure positioning context */
    overflow: hidden;
}

.thumbnail-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2em;
    color: rgba(255, 255, 255, 0.9);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 3;
}

.thumbnail-container:hover .thumbnail-play-icon {
    opacity: 1;
}

/* Base Badge Style - exact styles from 2nd.html */
.badge {
    position: absolute;
    padding: 4px 8px;
    font-size: 0.75em;
    font-weight: bold;
    color: white;
    line-height: 1.3;
    text-transform: uppercase;
}

/* Type Badge - exact position from 2nd.html */
.type-badge {
    top: 10px;
    right: 10px;
    border-radius: 3px;
}

/* Specific colors for Type Badge - exact colors from 2nd.html */
.drama {
    background-color: #17a2b8;
}

.movie {
    background-color: white;
}

.ova, .special {
    background-color: #fd7e14;
}

/* Episode Badge - exact slanted shape from 2nd.html */
.episode-badge {
    bottom: 10px;
    left: 10px;
    background-color: #17a2b8;
    clip-path: polygon(0% 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
    padding-right: 12px; /* Extra padding for slant */
}

/* Sub/RAW/Dub Badge - exact slanted shape from 2nd.html */
.sub-badge {
    bottom: 10px;
    right: 10px;
    clip-path: polygon(10px 0%, 100% 0%, 100% 100%, 0% 100%);
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    padding-left: 12px; /* Extra padding for slant */
}

/* Specific colors for Sub/RAW/Dub Badge - exact colors from 2nd.html */
.sub {
    background-color: #ffc107;
    color: #333;
}

.raw {
    background-color: #fd7e14;
    color: white;
}

.dub {
    background-color: #28a745;
    color: white;
}

/* Video Title - exact styling from 2nd.html */
.video-title {
    font-size: 0.9em;
    color: #333;
    margin-top: 8px;
    padding: 0 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dark .video-title {
    color: #e2e8f0;
}

/* Responsive Adjustments - exact breakpoints from 2nd.html */
@media (max-width: 992px) {
    .video-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .video-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .latest-release-alt-header h2 {
        font-size: 1em;
    }
    .view-all-btn {
        font-size: 0.7em;
        padding: 5px 8px;
    }
    .video-title {
        font-size: 0.85em;
    }
}

@media (max-width: 576px) {
    .video-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .latest-release-alt-header {
        padding: 8px 10px;
    }
    .latest-release-alt-header h2 {
        font-size: 0.9em;
    }
    .view-all-btn {
        font-size: 0.65em;
        padding: 4px 6px;
    }
}

/* 2nd.html Alternative Layout - Exact Match Implementation */

/* Basic Reset & Body */
.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.latest-release-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #20c997; /* Teal color from 2nd.html */
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.dark .latest-release-header {
    background-color: var(--theme-color-main-dark, #f59e0b);
}

.latest-release-header h2 {
    font-size: 1.2em;
    font-weight: bold;
}

.view-all-btn {
    background-color: #e9ecef;
    color: #333;
    border: none;
    padding: 6px 12px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.8em;
    font-weight: bold;
    text-transform: uppercase;
}

.view-all-btn:hover {
    background-color: #dee2e6;
}

/* Video Grid */
.video-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px 20px; /* Row gap, Column gap */
}

/* Individual Video Item */
.video-item {
    background-color: #fff;
}

.dark .video-item {
    background-color: #1f2937;
}

/* Thumbnail */
.thumbnail-container {
    position: relative;
    background-color: #000;
    aspect-ratio: 16 / 9;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Disable conflicting pseudo-element play icon overlay for v2 thumbnails */
.thumbnail-container::after {
    display: none !important;
}

.thumbnail-container::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
    z-index: 1;
}

.thumbnail-container:hover::before {
    background: rgba(0, 0, 0, 0.4);
}

.thumbnail-actual-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.5s ease;
    z-index: 0;
}

.thumbnail-container:hover .thumbnail-actual-image {
    transform: scale(1.1);
}

/* Hover play icon overlay for v2 layout thumbnails */
.thumbnail-container::after {
    content: "\f04b";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #fff;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
    font-size: 2.5rem;
}
.thumbnail-container:hover::after {
    opacity: 1;
}

/* Base Badge Style */
.badge {
    position: absolute;
    padding: 4px 8px;
    font-size: 0.75em;
    font-weight: bold;
    color: white;
    line-height: 1.3;
    text-transform: uppercase;
}

/* Type Badge (Top Right - Stays simple) */
.type-badge {
    top: 10px;
    right: 10px;
    border-radius: 3px;
}

/* Specific colors for Type Badge */
.drama { background-color: #17a2b8; }
.movie { background-color: white }

/* Episode Badge (Bottom Left - Slanted Right Edge) */
.episode-badge {
    bottom: 10px;
    left: 10px;
    background-color: #17a2b8;
    clip-path: polygon(0% 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
    padding-right: 12px;
}

/* Sub/RAW/Dub Badge (Bottom Right - Slanted Left Edge + Rounded Right) */
.sub-badge {
    bottom: 10px;
    right: 10px;
    clip-path: polygon(10px 0%, 100% 0%, 100% 100%, 0% 100%);
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    padding-left: 12px;
}

/* Specific colors for Sub/RAW/Dub Badge */
.sub { background-color: #ffc107; color: #333; }
.raw { background-color: #fd7e14; color: white; }
.dub { background-color: #0dcaf0; color: #333; }

/* Video Title */
.video-title {
    font-size: 0.9em;
    color: #333;
    margin-top: 8px;
    padding: 0 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dark .video-title {
    color: #e5e7eb;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .video-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .video-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .latest-release-header h2 {
        font-size: 1em;
    }
    .view-all-btn {
        font-size: 0.7em;
        padding: 5px 8px;
    }
    .video-title {
        font-size: 0.85em;
    }
}

@media (max-width: 576px) {
    .video-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .latest-release-header {
        padding: 8px 10px;
    }
    .latest-release-header h2 {
        font-size: 0.9em;
    }
    .view-all-btn {
        font-size: 0.65em;
        padding: 4px 6px;
    }
}

/* Homepage Layout - Left Side Slider with Sidebar */
.home-content-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.main-content-column {
    display: flex;
    flex-direction: column;
}

.left-side-slider {
    margin-bottom: 20px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .home-content-wrapper {
        grid-template-columns: 1fr;
    }
    
    .home-sidebar {
        margin-top: 20px;
    }
}

.home-sidebar .widget .section-content {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Mobile Off-Canvas Menu Styles */
#mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#mobile-menu ul li + li {
    border-top: 1px solid #e5e7eb;
}
#mobile-menu ul li a {
    display: block;
    padding: 0.75rem 1rem;
    color: #374151;
    transition: background-color 0.2s;
    text-decoration: none;
}
#mobile-menu ul li a:hover {
    background-color: #f3f4f6;
}