/* MODO CLARO / ESCURO */
/* O escuro é o padrão do site; aqui ficam o botão do header e as cores do modo claro */

/* BOTÃO DO HEADER */
.theme-toggle {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #FF6F00;
    border-radius: 50%;
    background: transparent;
    color: #FF6F00;
    font-size: 18px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.theme-toggle:hover {
    background: #FF6F00;
    color: #fff;
}

/* Escuro: mostra o sol (ir para o claro) | Claro: mostra a lua (voltar ao escuro) */
.theme-toggle .theme-toggle-moon,
html[data-theme="light"] .theme-toggle .theme-toggle-sun {
    display: none;
}

html[data-theme="light"] .theme-toggle .theme-toggle-moon {
    display: inline-flex;
}

/* Transição suave ao trocar de tema */
body,
.container-body,
.container-nav,
.contact-modal-content,
.site-footer {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ---------------- MODO CLARO ---------------- */

html[data-theme="light"] body,
html[data-theme="light"] .container-body {
    background-color: #f4f4f4;
}

/* Header e Modal de Contato são estilizados de forma modular em header.css */

/* Modal de contato */
html[data-theme="light"] .contact-modal-content {
    background: #fff;
}

/* Footer */
html[data-theme="light"] .site-footer {
    background: #e9e7e4;
}

/* Textos que são brancos no modo escuro */
html[data-theme="light"] .text-white {
    color: #1F1C18 !important;
}

/* Cards da página de filmes */
html[data-theme="light"] .container-body .bg-dark {
    background-color: #fff !important;
}

html[data-theme="light"] .container-body .border-white {
    border-color: #ddd !important;
}

/* Scrollbar */
html[data-theme="light"]::-webkit-scrollbar-track,
html[data-theme="light"] ::-webkit-scrollbar-track {
    background: #f4f4f4;
}

html[data-theme="light"]::-webkit-scrollbar-thumb,
html[data-theme="light"] ::-webkit-scrollbar-thumb {
    border-color: #f4f4f4;
}

html[data-theme="light"],
html[data-theme="light"] * {
    scrollbar-color: #FF6F00 #f4f4f4;
}