/**
 * Enhanced Dark Mode Styles with Slider Toggle
 * Comprehensive overrides for Starter Blog + Advanced ACF Search
 * 
 * @package starter-blog-child
 * @version 1.3.0
 */

/* ============================================
   DARK MODE TOGGLE WITH SLIDER
   ============================================ */

/* Make toggle icon visible when styled as social icon */
.social-dark-mode-toggle .icon {
    font-style: normal !important;
}

/* Wrapper for icon and slider - displayed horizontally */
.dark-mode-icon-and-slider {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Icon wrapper */
.dark-mode-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
}

/* Slider container */
.dark-mode-slider {
    display: inline-flex;
    align-items: center;
}

/* Slider track */
.dark-mode-slider-track {
    position: relative;
    width: 40px;
    height: 20px;
    background-color: #ccc;
    border-radius: 10px;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

/* Slider track when dark mode is active */
body.dark-mode .dark-mode-slider-track,
.dark-mode-slider.dark-mode-active .dark-mode-slider-track {
    background-color: #4a9eff;
}

/* Slider thumb (the moving circle) */
.dark-mode-slider-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Hover effect on the entire toggle */
.social-dark-mode-toggle:hover .dark-mode-slider-track {
    opacity: 0.8;
}

/* Active/pressed state */
.social-dark-mode-toggle:active .dark-mode-slider-thumb {
    width: 18px;
}

/* ============================================
   MOBILE RESPONSIVE - INJECTED TOGGLE
   ============================================ */

/* Mobile toggles - full width row below search/hamburger */
[id^="mobile-dark-mode-toggle-"] {
    display: none;
    width: 100%;
    justify-content: center;
    padding: 10px 0;
}

.mobile-dark-mode-toggle-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Show mobile toggle on small screens only */
@media (max-width: 768px) {
    [id^="mobile-dark-mode-toggle-"] {
        display: flex !important;
        width: 100% !important;
        justify-content: center !important;
    }
    
    /* Make col-v2-right wrap to allow stacking */
    .col-v2.col-v2-right {
        flex-wrap: wrap !important;
    }
    
    /* Adjust slider for mobile */
    [id^="mobile-dark-mode-toggle-"] .dark-mode-slider-track {
        width: 36px;
        height: 18px;
    }
    
    [id^="mobile-dark-mode-toggle-"] .dark-mode-slider-thumb {
        width: 14px;
        height: 14px;
    }
    
    [id^="mobile-dark-mode-toggle-"] .dark-mode-icon-wrapper {
        font-size: 16px;
    }
    
    /* Adjust slider thumb position for mobile size */
    body.dark-mode [id^="mobile-dark-mode-toggle-"] .dark-mode-slider-thumb,
    [id^="mobile-dark-mode-toggle-"] .dark-mode-slider.dark-mode-active .dark-mode-slider-thumb {
        transform: translateX(18px) !important;
    }
}

@media (min-width: 769px) {
    [id^="mobile-dark-mode-toggle-"] {
        display: none !important;
    }
}


/* ============================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ============================================ */

body.dark-mode {
    /* Default dark mode colors - can be overridden by customizer */
    --dark-bg: #2a2a2a;
    --dark-text: #e0e0e0;
    /* --dark-primary: #4a9eff; */
	--dark-primary: #2a2a2a;
    --dark-secondary: #2a2a2a;
    --dark-border: #3a3a3a;
    --dark-link: #5ab3ff;
    
    /* Derived colors for better contrast */
    --dark-bg-lighter: #252525;
    --dark-text-muted: #b0b0b0;
    --dark-heading: #f5f5f5;
    --dark-hover-bg: #333333;
}

/* ============================================
   CORE DARK MODE STYLES
   ============================================ */

body.dark-mode {
    /* background-color: var(--dark-bg) !important */
	background-color: #2a2a2a !important;
    color: var(--dark-text) !important;
}

/* Text elements */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: var(--dark-heading) !important;
}

body.dark-mode p,
body.dark-mode span,
body.dark-mode div:not([class*="dashicons"]),
body.dark-mode li {
    color: var(--dark-text);
}

/* Links */
body.dark-mode a {
    color: var(--dark-link) !important;
}

body.dark-mode a:hover {
    color: var(--dark-primary) !important;
}

/* ============================================
   LAYOUT - PAGE STRUCTURE
   ============================================ */

/* Remove all white backgrounds from main containers */
body.dark-mode,
body.dark-mode #page,
body.dark-mode #page.site,
body.dark-mode .site,
body.dark-mode .site-content,
body.dark-mode #content,
body.dark-mode #sidebar-primary
body.dark-mode .starterblog-grid {
/*    background-color: var(--dark-bg) !important; remvoed 202601021714  */
    /* background-color: #2a2a2a !important; */
	background: var(--dark-secondary) !important;
}

body.dark-mode #sidebar-primary,
body.dark-mode #main.starterblog-col-12,
body.dark-mode #main.starterblog-col-9_sm-12 {
    background-color: #2a2a2a !important;
}

/* Page Title Bar */
body.dark-mode .page-titlebar {
    background-color: #2a2a2a !important;
    color: var(--dark-text) !important;
}

/* Header and Footer */
body.dark-mode .site-header,
body.dark-mode header,
body.dark-mode .header-wrapper,
body.dark-mode .header--row,
body.dark-mode .header--row-inner,
body.dark-mode .header-main-inner,
body.dark-mode .starterblog-container {
    background-color: #2a2a2a !important;
    border-bottom-color: var(--dark-border) !important;
}

/* Override hardcoded light-mode class in header */
body.dark-mode .header--row-inner.light-mode,
body.dark-mode .header-main-inner.light-mode,
body.dark-mode .header--row.light-mode {
    background-color: var(--dark-secondary) !important;
}

/* Override light-mode text colors in header */
body.dark-mode .header--row-inner.light-mode *,
body.dark-mode .header-main-inner.light-mode *,
body.dark-mode .header--row.light-mode * {
    color: var(--dark-text) !important;
}

body.dark-mode .header--row-inner.light-mode a,
body.dark-mode .header-main-inner.light-mode a,
body.dark-mode .header--row.light-mode a {
    color: var(--dark-link) !important;
}

body.dark-mode .header--row-inner.light-mode a:hover,
body.dark-mode .header-main-inner.light-mode a:hover,
body.dark-mode .header--row.light-mode a:hover {
    color: var(--dark-primary) !important;
}

/* Override site branding colors */
body.dark-mode .site-branding,
body.dark-mode .site-name-desc {
    color: var(--dark-text) !important;
}

/* Override site description in header */
body.dark-mode .site-description {
    color: var(--dark-text-muted) !important;
}

body.dark-mode .site-footer,
body.dark-mode footer {
    background-color: var(--dark-secondary) !important;
    border-top-color: var(--dark-border) !important;
}

/* Main Content Area */
body.dark-mode .site-main,
body.dark-mode main,
body.dark-mode .content-area {
    background-color: #2a2a2a; !important;
}

/* Sidebar */
body.dark-mode .sidebar,
body.dark-mode aside,
body.dark-mode .widget-area {
    /* background-color: var(--dark-bg) !important; */
	background-color: #2a2a2a !important;
}

/* ============================================
   HEADER ICONS - MAKE VISIBLE
   ============================================ */

/* Search icon */
body.dark-mode .search-icon,
body.dark-mode .search-icon svg,
body.dark-mode .ic-search,
body.dark-mode .ic-search svg {
    fill: var(--dark-text) !important;
    color: var(--dark-text) !important;
    stroke: var(--dark-text) !important;
}

/* Menu toggle / Hamburger */
body.dark-mode .menu-mobile-toggle,
body.dark-mode .menu-mobile-toggle svg,
body.dark-mode .nav-icon,
body.dark-mode .nav-icon svg {
    fill: var(--dark-text) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .menu-mobile-toggle line,
body.dark-mode .ic-menu line {
    stroke: var(--dark-text) !important;
}

/* Close buttons */
body.dark-mode .ic-close,
body.dark-mode .ic-close svg,
body.dark-mode .close-icon,
body.dark-mode .close-icon svg {
    fill: var(--dark-text) !important;
    stroke: var(--dark-text) !important;
}

/* Make toggle icon visible when styled as social icon */
.social-dark-mode-toggle .icon {
    font-style: normal !important;
}

/* ============================================
   ADVANCED ACF SEARCH - MAIN FORM
   ============================================ */

/* Search Container */
body.dark-mode .aas-search-container {
    /* background-color: var(--dark-bg) !important; */
	background-color: #2a2a2a !important;
}

/* Search Form */
body.dark-mode .aas-search-form {
    background: var(--dark-secondary) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    border: 1px solid var(--dark-border) !important;
}

/* Search Input */
body.dark-mode .aas-search-input {
    background-color: var(--dark-bg-lighter) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .aas-search-input::placeholder {
    color: var(--dark-text-muted) !important;
}

body.dark-mode .aas-search-input:focus {
    border-color: var(--dark-primary) !important;
    background-color: var(--dark-bg) !important;
}

/* Search Button */
body.dark-mode .aas-search-button {
    background: var(--dark-primary) !important;
    color: #ffffff !important;
}

body.dark-mode .aas-search-button:hover {
    background: var(--dark-link) !important;
}

/* ============================================
   ADVANCED ACF SEARCH - FILTERS
   ============================================ */

/* Filter Labels */
body.dark-mode .aas-filter-label {
    color: var(--dark-heading) !important;
}

/* Filter Select Dropdowns */
body.dark-mode .aas-filter-select {
    background-color: var(--dark-bg-lighter) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .aas-filter-select:focus {
    border-color: var(--dark-primary) !important;
}

/* Checkboxes and Radio buttons */
body.dark-mode .aas-checkbox-label,
body.dark-mode .aas-radio-label {
    color: var(--dark-text) !important;
}

body.dark-mode .aas-checkbox-label:hover,
body.dark-mode .aas-radio-label:hover {
    background: var(--dark-hover-bg) !important;
}

/* Filter Actions */
body.dark-mode .aas-filter-actions {
    border-top-color: var(--dark-border) !important;
}

body.dark-mode .aas-apply-filters {
    background: var(--dark-primary) !important;
    color: #ffffff !important;
}

body.dark-mode .aas-apply-filters:hover {
    background: var(--dark-link) !important;
}

body.dark-mode .aas-reset-filters {
    background: var(--dark-hover-bg) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .aas-reset-filters:hover {
    background: var(--dark-bg-lighter) !important;
}

/* ============================================
   ADVANCED ACF SEARCH - RESULTS
   ============================================ */

/* Results Container */
body.dark-mode .aas-results-container {
    /* background-color: var(--dark-bg) !important; */
	/* background-color: #2a2a2a !important; */
	background: var(--dark-secondary) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    border: 1px solid var(--dark-border) !important;

}

/* Results Header */
body.dark-mode .aas-results-header {
    background-color: var(--dark-secondary) !important;
    border-bottom-color: var(--dark-border) !important;
}

body.dark-mode .aas-results-count {
    color: var(--dark-text) !important;
}

/* Sort Dropdown */
body.dark-mode .aas-sort-select {
    background-color: var(--dark-bg-lighter) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

/* Result Items - Grid Layout */
body.dark-mode .aas-result-item {
    background-color: var(--dark-secondary) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .aas-result-item:hover {
    background-color: var(--dark-hover-bg) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}

body.dark-mode .aas-result-title,
body.dark-mode .aas-result-title a {
    color: var(--dark-link) !important;
}

body.dark-mode .aas-result-title a:hover {
    color: var(--dark-primary) !important;
}

body.dark-mode .aas-result-excerpt {
    color: var(--dark-text-muted) !important;
}

body.dark-mode .aas-field-label {
    color: var(--dark-text-muted) !important;
}

body.dark-mode .aas-field-value {
    color: var(--dark-text) !important;
}

/* List Layout */
body.dark-mode .aas-layout-list .aas-result-item {
    background: var(--dark-secondary) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .aas-layout-list .aas-result-item:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
}

/* Table Layout */
body.dark-mode .aas-results-table {
    background-color: var(--dark-secondary) !important;
}

body.dark-mode .aas-results-table th {
    background: var(--dark-hover-bg) !important;
    color: var(--dark-heading) !important;
    border-bottom-color: var(--dark-border) !important;
}

body.dark-mode .aas-results-table td {
    color: var(--dark-text) !important;
    border-bottom-color: var(--dark-border) !important;
}

body.dark-mode .aas-results-table tr:hover {
    background: var(--dark-bg-lighter) !important;
}

/* Pagination */
body.dark-mode .aas-pagination {
    border-top-color: var(--dark-border) !important;
}

body.dark-mode .aas-page-btn {
    background: var(--dark-hover-bg) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .aas-page-btn:hover:not(:disabled) {
    background: var(--dark-primary) !important;
    color: #ffffff !important;
    border-color: var(--dark-primary) !important;
}

body.dark-mode .aas-page-btn.active {
    background: var(--dark-primary) !important;
    color: #ffffff !important;
    border-color: var(--dark-primary) !important;
}

/* ============================================
   ADVANCED ACF SEARCH - MINI SEARCH
   ============================================ */

/* Mini Search Form */
body.dark-mode .aas-mini-search-form {
    background: var(--dark-secondary) !important;
}

body.dark-mode .aas-mini-type-selector {
    background: var(--dark-primary) !important;
    color: #ffffff !important;
}

body.dark-mode .aas-mini-type-selector:hover {
    background-color: var(--dark-link) !important;
}

body.dark-mode .aas-mini-search-input-wrapper {
    background: var(--dark-bg-lighter) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .aas-mini-search-input {
    background: var(--dark-bg-lighter) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .aas-mini-search-button {
    background: var(--dark-primary) !important;
}

body.dark-mode .aas-mini-search-button:hover {
    background: var(--dark-link) !important;
}

/* Mini Search Results Dropdown */
body.dark-mode .aas-mini-results {
    background: var(--dark-secondary) !important;
    border-color: var(--dark-border) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4) !important;
}

body.dark-mode .aas-mini-results-header {
    background: var(--dark-hover-bg) !important;
    border-bottom-color: var(--dark-border) !important;
}

body.dark-mode .aas-mini-results-count {
    color: var(--dark-text) !important;
}

body.dark-mode .aas-mini-close {
    color: var(--dark-text-muted) !important;
}

body.dark-mode .aas-mini-close:hover {
    color: #ff6b6b !important;
}

body.dark-mode .aas-mini-results-list {
    background: var(--dark-secondary) !important;
}

body.dark-mode .aas-mini-result-item {
    border-bottom-color: var(--dark-border) !important;
    background: var(--dark-secondary) !important;
}

body.dark-mode .aas-mini-result-item:hover {
    background: var(--dark-hover-bg) !important;
}

body.dark-mode .aas-mini-result-title {
    color: var(--dark-link) !important;
}

body.dark-mode .aas-mini-result-excerpt {
    color: var(--dark-text-muted) !important;
}

/* ============================================
   CONTENT ELEMENTS
   ============================================ */

body.dark-mode article,
body.dark-mode .entry,
body.dark-mode .post,
body.dark-mode .hentry {
    background-color: var(--dark-secondary) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .entry-content,
body.dark-mode .post-content {
    color: var(--dark-text) !important;
}

body.dark-mode .entry-title,
body.dark-mode .post-title {
    color: var(--dark-heading) !important;
}

body.dark-mode .entry-meta,
body.dark-mode .post-meta {
    color: var(--dark-text-muted) !important;
}

/* ============================================
   NAVIGATION
   ============================================ */

body.dark-mode .main-navigation,
body.dark-mode .nav-menu,
body.dark-mode nav {
    background-color: var(--dark-secondary) !important;
}

body.dark-mode .main-navigation a,
body.dark-mode .nav-menu a {
    color: var(--dark-text) !important;
}

body.dark-mode .main-navigation a:hover,
body.dark-mode .nav-menu a:hover {
    color: var(--dark-primary) !important;
}

body.dark-mode .current-menu-item > a,
body.dark-mode .current_page_item > a {
    color: var(--dark-primary) !important;
}

/* Mobile Menu */
body.dark-mode .mobile-menu,
body.dark-mode .menu-mobile {
    background-color: var(--dark-secondary) !important;
}

/* ============================================
   WIDGETS & SIDEBARS
   ============================================ */

body.dark-mode .widget {
    background-color: var(--dark-secondary) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .widget-title {
    color: var(--dark-heading) !important;
}

body.dark-mode .widget ul li,
body.dark-mode .widget ol li {
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

/* ============================================
   FORMS & INPUTS
   ============================================ */

body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="url"],
body.dark-mode input[type="password"],
body.dark-mode input[type="search"],
body.dark-mode input[type="number"],
body.dark-mode input[type="tel"],
body.dark-mode input[type="date"],
body.dark-mode textarea,
body.dark-mode select {
    background-color: var(--dark-bg-lighter) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--dark-text-muted) !important;
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    border-color: var(--dark-primary) !important;
    outline-color: var(--dark-primary) !important;
    background-color: var(--dark-bg) !important;
}

/* ============================================
   BUTTONS
   ============================================ */

body.dark-mode button,
body.dark-mode .button,
body.dark-mode input[type="submit"],
body.dark-mode input[type="button"] {
    background-color: var(--dark-primary) !important;
    color: #ffffff !important;
    border-color: var(--dark-primary) !important;
}

body.dark-mode button:hover,
body.dark-mode .button:hover,
body.dark-mode input[type="submit"]:hover,
body.dark-mode input[type="button"]:hover {
    background-color: var(--dark-link) !important;
    border-color: var(--dark-link) !important;
}

/* ============================================
   TABLES
   ============================================ */

body.dark-mode table {
    background-color: var(--dark-secondary) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode th {
    background-color: var(--dark-hover-bg) !important;
    color: var(--dark-heading) !important;
}

body.dark-mode td {
    border-color: var(--dark-border) !important;
}

body.dark-mode tr:hover {
    background-color: var(--dark-bg-lighter) !important;
}

/* ============================================
   CODE BLOCKS
   ============================================ */

body.dark-mode code,
body.dark-mode pre {
    background-color: var(--dark-bg-lighter) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

/* ============================================
   BORDERS & DIVIDERS
   ============================================ */

body.dark-mode hr {
    border-color: var(--dark-border) !important;
    background-color: var(--dark-border) !important;
}

body.dark-mode .separator,
body.dark-mode .divider {
    border-color: var(--dark-border) !important;
}

/* ============================================
   COMMENTS
   ============================================ */

body.dark-mode .comment,
body.dark-mode .comment-list {
    background-color: var(--dark-secondary) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .comment-author,
body.dark-mode .comment-meta {
    color: var(--dark-text-muted) !important;
}

body.dark-mode .comment-body {
    border-color: var(--dark-border) !important;
}

/* ============================================
   BLOCKQUOTES
   ============================================ */

body.dark-mode blockquote {
    background-color: var(--dark-secondary) !important;
    border-left-color: var(--dark-primary) !important;
    color: var(--dark-text) !important;
}

/* ============================================
   PAGINATION
   ============================================ */

body.dark-mode .pagination {
    color: var(--dark-text) !important;
}

body.dark-mode .pagination a,
body.dark-mode .page-numbers {
    background-color: var(--dark-secondary) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .pagination a:hover,
body.dark-mode .page-numbers:hover {
    background-color: var(--dark-primary) !important;
    color: #ffffff !important;
}

body.dark-mode .pagination .current {
    background-color: var(--dark-primary) !important;
    color: #ffffff !important;
}

/* ============================================
   BREADCRUMBS
   ============================================ */

body.dark-mode .breadcrumbs,
body.dark-mode .breadcrumb {
    color: var(--dark-text-muted) !important;
}

body.dark-mode .breadcrumbs a,
body.dark-mode .breadcrumb a {
    color: var(--dark-link) !important;
}

/* ============================================
   IMAGES & MEDIA
   ============================================ */

body.dark-mode img {
    opacity: 0.9;
}

body.dark-mode img:hover {
    opacity: 1;
}

body.dark-mode .wp-caption,
body.dark-mode figure {
    border-color: var(--dark-border) !important;
}

/* ============================================
   CUSTOM POST TYPES (YOUR SPECIFIC CONTENT)
   ============================================ */

/* Effect Links */
body.dark-mode .effect-link {
    color: var(--dark-link) !important;
    background-color: rgba(74, 158, 255, 0.15) !important;
}

body.dark-mode .effect-link:hover {
    background-color: rgba(74, 158, 255, 0.25) !important;
}

/* Effect Badges */
body.dark-mode .effect-badge {
    background-color: var(--dark-secondary) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .effect-badge:hover {
    background-color: var(--dark-primary) !important;
    color: #ffffff !important;
}

/* Hero Effects */
body.dark-mode .hero-effects {
    background-color: var(--dark-secondary) !important;
    border-color: var(--dark-border) !important;
}

/* Info Boxes - Weapon and Effect */
body.dark-mode .weapon-info-box,
body.dark-mode .effect-info-box {
    background-color: var(--dark-secondary) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .weapon-info-box *,
body.dark-mode .effect-info-box * {
    color: var(--dark-text) !important;
}

body.dark-mode .weapon-info-box h1,
body.dark-mode .weapon-info-box h2,
body.dark-mode .weapon-info-box h3,
body.dark-mode .weapon-info-box h4,
body.dark-mode .weapon-info-box h5,
body.dark-mode .weapon-info-box h6,
body.dark-mode .effect-info-box h1,
body.dark-mode .effect-info-box h2,
body.dark-mode .effect-info-box h3,
body.dark-mode .effect-info-box h4,
body.dark-mode .effect-info-box h5,
body.dark-mode .effect-info-box h6 {
    color: var(--dark-heading) !important;
}

body.dark-mode .weapon-info-box a,
body.dark-mode .effect-info-box a {
    color: var(--dark-link) !important;
}

body.dark-mode .weapon-info-box a:hover,
body.dark-mode .effect-info-box a:hover {
    color: var(--dark-primary) !important;
}

/* Info box labels and metadata */
body.dark-mode .weapon-info-box .label,
body.dark-mode .weapon-info-box .meta,
body.dark-mode .effect-info-box .label,
body.dark-mode .effect-info-box .meta {
    color: var(--dark-text-muted) !important;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

body.dark-mode :focus {
    outline-color: var(--dark-primary) !important;
}

body.dark-mode ::selection {
    background-color: var(--dark-primary);
    color: #ffffff;
}

body.dark-mode ::-moz-selection {
    background-color: var(--dark-primary);
    color: #ffffff;
}

/* ============================================
   SMOOTH TRANSITIONS
   ============================================ */

body,
body * {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease;
}

/* Prevent transition on page load */
body.dark-mode-loading,
body.dark-mode-loading * {
    transition: none !important;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    body.dark-mode .aas-mini-search {
        background-color: var(--dark-bg) !important;
    }
}

/* ============================================
   CUSTOM SECTIONS - HEROES, IMPRINTS, ETC.
   ============================================ */

/* Heroes with Effect Section */
body.dark-mode .heroes-with-effect-section {
    background: var(--dark-secondary) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .heroes-with-effect-section h2 {
    color: var(--dark-heading) !important;
}

body.dark-mode .heroes-grid {
    color: var(--dark-text) !important;
}

/* Hero Cards */
body.dark-mode .hero-card {
    background: var(--dark-bg-lighter) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .hero-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}

body.dark-mode .hero-card a {
    color: var(--dark-text) !important;
}

body.dark-mode .hero-card-image {
    background: var(--dark-hover-bg) !important;
}

body.dark-mode .hero-card-title {
    color: var(--dark-heading) !important;
}

body.dark-mode .hero-card-meta {
    color: var(--dark-text-muted) !important;
}

body.dark-mode .hero-card-meta span {
    background: var(--dark-hover-bg) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .hero-abilities-with-effect {
    color: var(--dark-text-muted) !important;
}

/* Hero Info Box */
body.dark-mode .hero-info-box {
    background-color: var(--dark-secondary) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .hero-info-box * {
    color: var(--dark-text) !important;
}

body.dark-mode .hero-info-box h1,
body.dark-mode .hero-info-box h2,
body.dark-mode .hero-info-box h3 {
    color: var(--dark-heading) !important;
}

body.dark-mode .hero-info-box a {
    color: var(--dark-link) !important;
}

/* Override for feedback forms inside hero-info-box - need black text for visibility */
body.dark-mode .hero-featured-image div.display-myfeedback-left,
body.dark-mode .hero-featured-image div.display-myfeedback-left *,
body.dark-mode .hero-info-box div.display-myfeedback-left,
body.dark-mode .hero-info-box div.display-myfeedback-left *,
body.dark-mode div.display-myfeedback-left,
body.dark-mode div.display-myfeedback-left *,
body.dark-mode .imprint-meta-left div.display-myfeedback-left,
body.dark-mode .imprint-meta-left div.display-myfeedback-left *,
body.dark-mode .imprint-meta-left > p div.display-myfeedback-left,
body.dark-mode .imprint-meta-left > p div.display-myfeedback-left, *
body.dark-mode .hero-info-box div.display-myfeedback-right,
body.dark-mode .hero-info-box div.display-myfeedback-right *,
body.dark-mode div.display-myfeedback-right,
body.dark-mode div.display-myfeedback-right *,
body.dark-mode .imprint-meta-left div.display-myfeedback-right,
body.dark-mode .imprint-meta-left div.display-myfeedback-right *,
body.dark-mode .imprint-meta-left > p div.display-myfeedback-right,
body.dark-mode .imprint-meta-left > p div.display-myfeedback-right * {
    color: #2a2a2a !important;
}

body.dark-mode .hero-info-right {
    background-color: var(--dark-bg-lighter) !important;
}

/* Hero Stats */
body.dark-mode .hero-stats-container {
    background-color: var(--dark-secondary) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .stats-grid {
    color: var(--dark-text) !important;
}

body.dark-mode .stat-item {
    background: var(--dark-bg-lighter) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .stat-label {
    color: var(--dark-text-muted) !important;
}

body.dark-mode .stat-value {
    color: var(--dark-heading) !important;
}

/* Hero Abilities Section */
body.dark-mode .hero-abilities-section {
    background: var(--dark-secondary) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .ability-item {
    background: var(--dark-bg-lighter) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .ability-header {
    background: var(--dark-hover-bg) !important;
}

body.dark-mode .ability-icon {
    background: var(--dark-secondary) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .ability-title-area {
    color: var(--dark-text) !important;
}

body.dark-mode .ability-type {
    color: var(--dark-text-muted) !important;
}

body.dark-mode .ability-name {
    color: var(--dark-heading) !important;
}

body.dark-mode .ability-cost {
    background: var(--dark-primary) !important;
    color: #ffffff !important;
}

body.dark-mode .ability-description {
    color: var(--dark-text) !important;
}

body.dark-mode .ability-label {
    color: var(--dark-text-muted) !important;
}

/* Hero Bonuses Section */
body.dark-mode .hero-bonuses-section {
    background: var(--dark-secondary) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .bonuses-grid {
    color: var(--dark-text) !important;
}

body.dark-mode .bonus-level {
    background: var(--dark-hover-bg) !important;
    color: var(--dark-heading) !important;
}

body.dark-mode .bonus-item {
    background: var(--dark-bg-lighter) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .bonuses-container {
    background: var(--dark-secondary) !important;
}

/* Display Hero Effects */
body.dark-mode .display-hero-effects {
    background: var(--dark-secondary) !important;
}

body.dark-mode .hero-effect-badge {
    background: var(--dark-bg-lighter) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-link) !important;
}

body.dark-mode .hero-effect-badge:hover {
    background: var(--dark-primary) !important;
    color: #ffffff !important;
}

/* Hero Effects Section */
body.dark-mode .hero-effects-section {
    background: var(--dark-secondary) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .hero-effects {
    color: var(--dark-text) !important;
}

/* Imprint Styles */
body.dark-mode .imprint-wrapper {
    background: transparent !important;
    /* Keep wrapper transparent - it just positions the image and frame */
}

body.dark-mode .imprint-image {
    /* DO NOT change background - it uses background-image from inline styles */
    /* The image itself is set via background-image in the HTML */
    background-color: transparent !important;
}

body.dark-mode .imprint-frame {
    /* DO NOT change background - it uses background-image for the frame overlay */
    /* The frame PNG is set via background-image in the HTML */
    background-color: transparent !important;
}

/* Imprint Meta Left - History and Abilities */
body.dark-mode .imprint-meta-left > p:first-child {
    background: linear-gradient(135deg, var(--dark-hover-bg) 0%, var(--dark-bg-lighter) 100%) !important;
    border-left-color: var(--dark-primary) !important;
    color: var(--dark-text) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .imprint-meta-left > p:nth-child(2),
body.dark-mode .imprint-meta-left > p:nth-child(3),
body.dark-mode .imprint-meta-left > p:nth-child(4),
body.dark-mode .imprint-meta-left > p:nth-child(5),
body.dark-mode .imprint-meta-left > p:nth-child(6),
body.dark-mode .imprint-meta-left > p:nth-child(7) {
    background: linear-gradient(135deg, var(--dark-secondary) 0%, var(--dark-bg-lighter) 100%) !important;
    border-color: var(--dark-border) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .imprint-meta-left > p:nth-child(2):hover,
body.dark-mode .imprint-meta-left > p:nth-child(3):hover,
body.dark-mode .imprint-meta-left > p:nth-child(4):hover,
body.dark-mode .imprint-meta-left > p:nth-child(5):hover,
body.dark-mode .imprint-meta-left > p:nth-child(6):hover,
body.dark-mode .imprint-meta-left > p:nth-child(7):hover {
    border-color: var(--dark-primary) !important;
    box-shadow: 0 4px 12px rgba(74, 158, 255, 0.3) !important;
}

body.dark-mode .imprint-meta-left > p:nth-child(2) strong,
body.dark-mode .imprint-meta-left > p:nth-child(3) strong,
body.dark-mode .imprint-meta-left > p:nth-child(4) strong,
body.dark-mode .imprint-meta-left > p:nth-child(5) strong,
body.dark-mode .imprint-meta-left > p:nth-child(6) strong,
body.dark-mode .imprint-meta-left > p:nth-child(7) strong {
    color: var(--dark-primary) !important;
}

body.dark-mode .imprint-meta-left > p:nth-child(2) img,
body.dark-mode .imprint-meta-left > p:nth-child(3) img,
body.dark-mode .imprint-meta-left > p:nth-child(4) img,
body.dark-mode .imprint-meta-left > p:nth-child(5) img,
body.dark-mode .imprint-meta-left > p:nth-child(6) img,
body.dark-mode .imprint-meta-left > p:nth-child(7) img,
body.dark-mode .imprint-meta-left > p:nth-child(8) img {
    background: var(--dark-hover-bg) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .imprint-meta-left > p.imprint-ability {
    background: linear-gradient(135deg, var(--dark-secondary) 0%, var(--dark-bg-lighter) 100%) !important;
    border-color: var(--dark-border) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .imprint-meta-left > p.imprint-ability:hover {
    border-color: var(--dark-primary) !important;
    box-shadow: 0 4px 12px rgba(74, 158, 255, 0.3) !important;
}

body.dark-mode .imprint-meta-left > p.imprint-ability > strong:first-of-type {
    color: var(--dark-primary) !important;
}

/* Imprint Meta Right */
body.dark-mode .imprint-meta-right,
body.dark-mode .effect-meta-right {
    background: var(--dark-secondary) !important;
    color: var(--dark-text) !important;
}

/* Effect Meta Left */
body.dark-mode .effect-meta-left > p {
    background: linear-gradient(135deg, var(--dark-hover-bg) 0%, var(--dark-bg-lighter) 100%) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

/* Weapon Archive */
body.dark-mode .weapons-archive {
    background: var(--dark-bg) !important;
}

body.dark-mode .weapon-item {
    background: var(--dark-secondary) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .weapon-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}

body.dark-mode .weapon-thumbnail {
    background: var(--dark-hover-bg) !important;
}

body.dark-mode .weapon-rarity {
    color: var(--dark-text) !important;
}

body.dark-mode .read-more {
    background: var(--dark-primary) !important;
    color: #ffffff !important;
}

body.dark-mode .read-more:hover {
    background: var(--dark-link) !important;
}

/* Effects Archive */
body.dark-mode .effects-archive {
    background: var(--dark-bg) !important;
}

body.dark-mode .effect-item {
    background: var(--dark-secondary) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .effect-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}

body.dark-mode .effect-thumbnail {
    background: var(--dark-hover-bg) !important;
}

/* Status Effect Wrapper */
body.dark-mode .status-effect-wrapper {
    background: var(--dark-secondary) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .effect-text {
    color: var(--dark-text) !important;
}

body.dark-mode .effect-text-buff {
    color: #4ade80 !important;
}

body.dark-mode .effect-text-debuff {
    color: #f87171 !important;
}

body.dark-mode .effect-text-disable {
    color: #a855f7 !important;
}

body.dark-mode .status-effects-divider {
    background: var(--dark-border) !important;
}

body.dark-mode .status-effects-icons {
    background: var(--dark-bg-lighter) !important;
}

body.dark-mode .status-effect-icon {
    background: var(--dark-hover-bg) !important;
    border-color: var(--dark-border) !important;
}

/* Status Types */
body.dark-mode .status-buff {
    background: rgba(74, 222, 128, 0.2) !important;
    color: #4ade80 !important;
    border-color: #4ade80 !important;
}

body.dark-mode .status-debuff {
    background: rgba(248, 113, 113, 0.2) !important;
    color: #f87171 !important;
    border-color: #f87171 !important;
}

body.dark-mode .status-disable {
    background: rgba(168, 85, 247, 0.2) !important;
    color: #a855f7 !important;
    border-color: #a855f7 !important;
}

/* Effect Stats Container Status Colors */
body.dark-mode .effect-stats-container .status-buff {
    background: rgba(74, 222, 128, 0.2) !important;
    color: #4ade80 !important;
}

body.dark-mode .effect-stats-container .status-debuff {
    background: rgba(248, 113, 113, 0.2) !important;
    color: #f87171 !important;
}

body.dark-mode .effect-stats-container .status-disable {
    background: rgba(168, 85, 247, 0.2) !important;
    color: #a855f7 !important;
}

/* Hero Stats Container Rarity Colors */
body.dark-mode .hero-stats-container .rarity-legendary,
body.dark-mode .rarity-legendary {
    background: rgba(234, 179, 8, 0.2) !important;
    color: #fbbf24 !important;
    border-color: #f59e0b !important;
}

body.dark-mode .hero-stats-container .rarity-epic,
body.dark-mode .rarity-epic {
    background: rgba(168, 85, 247, 0.2) !important;
    color: #c084fc !important;
    border-color: #a855f7 !important;
}

body.dark-mode .hero-stats-container .rarity-rare,
body.dark-mode .rarity-rare {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #60a5fa !important;
    border-color: #3b82f6 !important;
}

/* Headers */
body.dark-mode .weapon-header,
body.dark-mode .imprint-header,
body.dark-mode .hero-header,
body.dark-mode .effect-header {
    background: var(--dark-secondary) !important;
    color: var(--dark-heading) !important;
    border-color: var(--dark-border) !important;
}

/* Search Containers */
body.dark-mode .weapon-search,
body.dark-mode .imprint-search,
body.dark-mode .hero-search,
body.dark-mode .effect-search {
    background: var(--dark-bg-lighter) !important;
    border-color: var(--dark-border) !important;
}

/* Featured Images */
body.dark-mode .weapon-featured-image,
body.dark-mode .effect-featured-image {
    background: var(--dark-hover-bg) !important;
}

/* ACF Fields */
body.dark-mode .weapon-acf-fields,
body.dark-mode .effect-acf-fields {
    background: var(--dark-secondary) !important;
    color: var(--dark-text) !important;
}

/* Effect Details, Description, Notes */
body.dark-mode .effect-details,
body.dark-mode .effect-description,
body.dark-mode .effect-notes {
    background: var(--dark-secondary) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

/* Effect Meta */
body.dark-mode .effect-meta {
    background: var(--dark-bg-lighter) !important;
    color: var(--dark-text) !important;
}

/* Effect Stats Container */
body.dark-mode .effect-stats-container {
    background: var(--dark-secondary) !important;
    border-color: var(--dark-border) !important;
}

/* Ability Image */
body.dark-mode .ability-image {
    background: var(--dark-hover-bg) !important;
    border-color: var(--dark-border) !important;
}