/* ===== DARK MODE IMPROVEMENTS ===== */
body.dark-mode {
    --color-primary: #4fb3d8;
    --color-secondary: #2596be;
    --color-dark: #e6edf3;
    --color-light: #121a20;
    --color-gray: #9aa4ad;
    --color-light-gray: #1b2630;
    --color-border: #2a3a46;
    --color-bg-light: #162029;
    --color-footer-bg: #0d141a;
    --color-blue-dark: #1a5a7a;
    --color-danger: #e63946;
    --box-shadow: 0 2px 8px rgba(0,0,0,0.6);
    --box-shadow-lg: 0 5px 15px rgba(0,0,0,0.7);
}

body.dark-mode .header {
    background: var(--color-light);
    border-bottom-color: var(--color-border);
}

body.dark-mode .main-nav {
    background: var(--color-primary);
}

body.dark-mode .portal-nav {
    background: var(--color-bg-light);
    border-bottom-color: var(--color-border);
}

body.dark-mode .breaking-news {
    background: var(--color-danger);
    color: white;
}

body.dark-mode .headline-item,
body.dark-mode .equatortv-item,
body.dark-mode .trending-item,
body.dark-mode .news-item,
body.dark-mode .media-item,
body.dark-mode .widget,
body.dark-mode .story-item {
    background: var(--color-light);
    border-color: var(--color-border);
    box-shadow: var(--box-shadow);
}

body.dark-mode .widget-title {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-blue-dark) 100%);
    color: var(--color-dark);
}

body.dark-mode .ad-widget {
    background: linear-gradient(135deg, #1e2935 0%, #2d3b4a 100%);
    border-color: var(--color-border);
}

body.dark-mode .trending-tag-simple {
    background: var(--color-bg-light);
    border-color: var(--color-border);
    color: var(--color-dark);
}

body.dark-mode .trending-tag-simple:hover {
    background: var(--color-primary);
    color: var(--color-light);
}

body.dark-mode .popular-number {
    background: var(--color-bg-light);
    color: var(--color-dark);
}

body.dark-mode .popular-item:nth-child(1) .popular-number {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
}

body.dark-mode .popular-item:nth-child(2) .popular-number {
    background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
}

body.dark-mode .popular-item:nth-child(3) .popular-number {
    background: linear-gradient(135deg, #ffd166 0%, #f9c74f 100%);
}

body.dark-mode .sticky-header {
    background: var(--color-primary);
}

body.dark-mode .sticky-mobile-links a {
    color: var(--color-light);
}

body.dark-mode .sticky-mobile-links a:hover {
    background: rgba(255, 255, 255, 0.15);
}

body.dark-mode .sticky-search-form input {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-light);
}

body.dark-mode .sticky-search-form input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

body.dark-mode .ad-label,
body.dark-mode .ad-content {
    color: var(--color-gray);
}

body.dark-mode .newsletter-widget {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-blue-dark) 100%);
    color: var(--color-light);
}

body.dark-mode .newsletter-form input {
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-dark);
}

body.dark-mode .footer {
    background: var(--color-footer-bg);
    color: var(--color-light);
}

body.dark-mode .footer-links a {
    color: #ccc;
}

body.dark-mode .footer-links a:hover {
    color: var(--color-light);
}

body.dark-mode .sidebar-kanal {
    background: var(--color-light);
    border-left: 1px solid var(--color-border);
}

body.dark-mode .sidebar-links a {
    color: var(--color-dark);
}

body.dark-mode .sidebar-links a:hover {
    background: var(--color-bg-light);
    color: var(--color-primary);
}

body.dark-mode .portal-sidebar-links a {
    background: var(--color-bg-light);
    color: var(--color-dark);
}

body.dark-mode .portal-sidebar-links a:hover {
    background: var(--color-primary);
    color: var(--color-light);
}

/* ===== HIGH CONTRAST MODE IMPROVEMENTS ===== */
body.high-contrast {
    --color-primary: #0000ff;
    --color-secondary: #0000ee;
    --color-dark: #000000;
    --color-light: #ffffff;
    --color-gray: #000000;
    --color-light-gray: #ffffff;
    --color-border: #000000;
    --color-bg-light: #ffffff;
    --color-footer-bg: #000000;
    --color-blue-dark: #000080;
    --color-danger: #ff0000;
    --box-shadow: 0 0 0 2px #000000;
    --box-shadow-lg: 0 0 0 3px #000000;
}

body.high-contrast * {

}

body.high-contrast a,
body.high-contrast button,
body.high-contrast input,
body.high-contrast select,
body.high-contrast textarea {

}

body.high-contrast a:hover,
body.high-contrast button:hover {

}

body.high-contrast .header,
body.high-contrast .main-nav,
body.high-contrast .portal-nav,
body.high-contrast .sticky-header,
body.high-contrast .footer {
    border: 2px solid #000000;
}

body.high-contrast .widget {
    border: 2px solid #000000;
}

body.high-contrast .trending-tab.active,
body.high-contrast .nav-links .active,
body.high-contrast .sticky-mobile-links a.active {
    border: 2px solid #000000 !important;
    background: #000000 !important;
    color: #ffffff !important;
}

body.high-contrast .breaking-news {
    border: 3px solid #ff0000;
}

body.high-contrast .section-title {
    border-bottom: 3px solid #0000ff;
}

body.high-contrast .search-form input:focus,
body.high-contrast .sticky-search-form input:focus {

    border-color: #0000ff !important;
}



/* ===== MODE TOGGLE BUTTONS IMPROVEMENTS ===== */
.mode-toggle {
    display: flex;
    gap: 8px;
    align-items: center;
  
}

.mode-toggle button {
    width: 30px;
    height: 30px;
    border-radius: 50%;

    background: transparent;
    color: var(--color-dark);
    cursor: pointer;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.mode-toggle button:hover {
    transform: scale(1.1);
    border-color: var(--color-primary);
}

.mode-toggle button.active {
    background: transparent;
    color: var(--color-light);
    border-color: var(--color-primary);
}

.mode-toggle button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
}

.mode-toggle button:active::after {
    width: 100%;
    height: 100%;
}

body.dark-mode .mode-toggle button {
    background: var(--color-light);
    color: var(--color-dark);
    border-color: var(--color-border);
}

body.dark-mode .mode-toggle button.active {
    background: var(--color-primary);
    color: var(--color-light);
}

body.high-contrast .mode-toggle button {
    border: 2px solid #000000 !important;

}

body.high-contrast .mode-toggle button.active {
    background: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #0000ff !important;
}



/* ===== ACCESSIBILITY IMPROVEMENTS ===== */
/* Focus styles for keyboard navigation */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {

    box-shadow: 0 0 0 3px rgba(37, 150, 190, 0.3) !important;
}

body.high-contrast a:focus,
body.high-contrast button:focus,
body.high-contrast input:focus {
 

}

/* Skip to main content link for screen readers */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-primary);
    color: white;
    padding: 8px;
    z-index: 9999;
    text-decoration: none;
    border-radius: 0 0 4px 0;
}

.skip-to-content:focus {
    top: 0;
}

/* Print styles for all modes */
@media print {
    body.dark-mode,
    body.high-contrast
 {
        --color-primary: #000000 !important;
        --color-secondary: #000000 !important;
        --color-dark: #000000 !important;
        --color-light: #ffffff !important;
        --color-gray: #000000 !important;
        --color-border: #000000 !important;
        background: white !important;
        color: black !important;
    }
    
    .mode-toggle,
    .menu-toggle,
    .search-icon-mobile,
    .login-btn,
    .social-btn,
    .sidebar-btn {
        display: none !important;
    }
}




body.dark-mode .header .logo img {
    filter: brightness(0) invert(1);
}

body.dark-mode .equatortv-header .logo-tv img {
    filter: brightness(0) invert(1);
}
body.dark-mode .footer-logo img {
    filter: brightness(0) invert(1);
}