:root {
	--bg: #e3e4e8;
	--fg: #17181c;
	--bs1: #ffffff;
	--bs2: #dee6ff;
	--tick: #bcceff;
	--transDur: 0.1s;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #2e3138;
		--fg: #e3e4e8;
		--bs1: #3c4049;
		--bs2: #202227;
		--tick: #c7cad1;
	}
}

/* ========= ТЕМНА ТЕМА (ДОДАТОК) ========= */
body.dark-mode {
    --dark-bg: #0f172a;
    --dark-surface: #1e293b;
    --dark-text: #f1f5f9;
    --dark-text-muted: #cbd5e1;
    --dark-border: #bdbdbd;
    --dark-accent: #60a5fa;
    
    background-color: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .actor-card,
body.dark-mode .card,
body.dark-mode div[class*="card"],
body.dark-mode section > div {
    background-color: var(--dark-surface) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode p, body.dark-mode span, body.dark-mode li {
    color: var(--dark-text) !important;
}

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

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .fav-toggle-btn {
    background-color: var(--dark-surface) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .sort-container,
body.dark-mode .user-container,
body.dark-mode .about-container,
body.dark-mode .footer-container {
    background: var(--dark-surface) !important;
    border-color: var(--dark-border) !important;
}

/* ========= СВІТЛА ТЕМА ДЛЯ BODY (ЯВНО) ========= */


body:not(.dark-mode) .sort-container,
body:not(.dark-mode) .user-container,
body:not(.dark-mode) .about-container,
body:not(.dark-mode) .footer-container {
    background: white !important;
    border-color: #bdbdbd !important;
}

body:not(.dark-mode) {
    background-color: #f5f7fa !important;
    color: #17181c !important;
}

#darkModeToggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #333;
    color: white;
    border: none;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

#darkModeToggle:hover {
    transform: scale(1.05);
    background: #444;
}

body.dark-mode #darkModeToggle {
    background: #4e4c48;
}

body.dark-mode #darkModeToggle:hover {
    background: #fbbf24;
}

/* ========= ТЕМНА ТЕМА ДЛЯ LANGUAGE SWITCH ========= */
body.dark-mode .lang-switch button {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border: 1px solid #334155 !important;
}

body.dark-mode .lang-switch button:hover {
    background-color: #334155 !important;
}

body.dark-mode .lang-switch button.active {
    background-color: #60a5fa !important;
    color: #0f172a !important;
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 1px #60a5fa;
}

/* Світла тема для Language Switch (явно) */
body:not(.dark-mode) .lang-switch button {
    background-color: #f5f5f5 !important;
    color: #17181c !important;
    border: none !important;
}

body:not(.dark-mode) .lang-switch button:hover {
    background-color: #e0e0e0 !important;
}

body:not(.dark-mode) .lang-switch button.active {
    background-color: #333 !important;
    color: #fff !important;
}

/* ========= СВІТЛА ТЕМА ДЛЯ ТЕКСТУ В БЛОКАХ ========= */
body:not(.dark-mode) .about-container,
body:not(.dark-mode) .footer-container {
    background: white !important;
    border-color: #bdbdbd !important;
}

body:not(.dark-mode) .about-container p,
body:not(.dark-mode) .about-container h1,
body:not(.dark-mode) .about-container h2,
body:not(.dark-mode) .about-container h3,
body:not(.dark-mode) .about-container span,
body:not(.dark-mode) .about-container li,
body:not(.dark-mode) .footer-container p,
body:not(.dark-mode) .footer-container h1,
body:not(.dark-mode) .footer-container h2,
body:not(.dark-mode) .footer-container h3,
body:not(.dark-mode) .footer-container span,
body:not(.dark-mode) .footer-container li,
body:not(.dark-mode) .footer p,
body:not(.dark-mode) .footer span {
    color: #17181c !important;
}

/* Посилання у футері */
body:not(.dark-mode) .footer-container a,
body:not(.dark-mode) .footer a {
    color: #0066cc !important;
}

body:not(.dark-mode) .footer-container a:hover,
body:not(.dark-mode) .footer a:hover {
    color: #e50914 !important;
}


/* ===================Темна тема для форми MODAL MESSAGE ==========================*/
body.dark-mode .contact-modal input,
body.dark-mode .contact-modal textarea {
    background: #1e293b;
    color: #f1f5f9;
    border-color: #334155;
}

body.dark-mode .contact-modal input:focus,
body.dark-mode .contact-modal textarea:focus {
    border-color: #60a5fa;
}

body.dark-mode #contactForm button {
    background: #4e4c48;
}

body.dark-mode #contactForm button:hover {
    background: #fbbf24;
    color: #0f172a;
}