/* =====================================
   BOTÃO DARK MODE
   ===================================== */
.dark-mode-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: var(--primary-color, #ff4081);
  color: white;
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  z-index: 9999;
  transition: all 0.3s ease;
}

/* Animação ao passar o rato */
.dark-mode-toggle:hover {
  transform: scale(1.1);
}

/* =====================================
   TRANSIÇÃO SUAVE ENTRE MODOS
   ===================================== */
body,
.login-box,
.editor-box,
input,
textarea,
button,
.site-footer-bottom {
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

/* =====================================
   TÍTULOS COM COR FIXA (independente do modo)
   ===================================== */
.accent-title1{
  color: #ff4081 !important; /* rosa neon */
  text-shadow: 0 0 8px rgba(255, 64, 129, 0.4);
}

.accent-title2{
  color: #00bfff !important; /* rosa neon */
  text-shadow: 0 0 8px rgba(0, 191, 255, 0.4);
}


/* =====================================
   MODO CLARO (COM TEXTO PRETO)
   ===================================== */
body.light-mode {
  background-color: #f7f7f7;
  color: #000 !important;
}

body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5,
body.light-mode h6,
body.light-mode p,
body.light-mode label,
body.light-mode span,
body.light-mode div,
body.light-mode a,
body.light-mode li,
body.light-mode input,
body.light-mode textarea,
body.light-mode button {
  color: inherit;
}

/* Inputs e textareas */
body.light-mode input,
body.light-mode textarea {
  background-color: #fff;
  border: 1px solid #ccc;
}

/* Caixas principais */
body.light-mode .login-box,
body.light-mode .editor-box {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Botões */
body.light-mode .btn,
body.light-mode button {
  background-color: #f1f1f1;
  color: #000 !important;
  border: 1px solid #ccc;
}

body.light-mode .btn:hover,
body.light-mode button:hover {
  background-color: #ddd;
}

/* Footer */
body.light-mode .site-footer-bottom {
  background-color: #f1f1f1;
  color: #000 !important;
}

body.light-mode .site-footer-link {
  color: #000 !important;
}

/* Botão no modo claro */
body.light-mode .dark-mode-toggle {
  background-color: #ddd;
  color: #000;
}

body.light-mode .dark-mode-toggle:hover {
  background-color: #bbb;
}

/* =====================================
   MODO ESCURO (ORIGINAL)
   ===================================== */
body.dark-mode {
  background-color: #121212;
  color: #f0f0f0;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode label {
  color: #fff;
}

body.dark-mode input,
body.dark-mode textarea{
  background-color: #1e1e1e;
  color: #fff;
  border: 1px solid #444;
}

body.dark-mode .login-box,
body.dark-mode .editor-box {
  background-color: #1c1c1c;
  color: #f0f0f0;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}

body.dark-mode .btn,
body.dark-mode button {
  background-color: #333;
  color: #fff;
  border: 1px solid #555;
}

body.dark-mode .btn:hover,
body.dark-mode button:hover {
  background-color: #555;
}

body.dark-mode .site-footer-bottom {
  background-color: #111;
  color: #aaa;
}

body.dark-mode .site-footer-link {
  color: #bbb;
}

/* Botão no modo escuro */
body.dark-mode .dark-mode-toggle {
  background-color: var(--primary-color, #ff4081);
  color: white;
}

body.dark-mode .dark-mode-toggle:hover {
  background-color: #ff2e63;
}

/* =====================================
   COR FIXA PARA TÍTULOS (IGNORA O MODO)
   ===================================== */
body.light-mode .accent-title1,
body.dark-mode .accent-title1 {
  color: #ff4081 !important; /* rosa neon */
  text-shadow: 0 0 8px rgba(255, 64, 129, 0.4);
}

body.light-mode .accent-title2,
body.dark-mode .accent-title2 {
  color: #00bfff !important; /* azul neon */
  text-shadow: 0 0 8px rgba(0, 191, 255, 0.4);
}

.button-group {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

.btn-save,
.btn-cancel {
  padding: 10px 20px;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}

/* Salvar */
.btn-save {
  background: linear-gradient(90deg, #00bfff, #ff00ff);
  color: #fff;
}

/* Cancelar */
.btn-cancel {
  background-color: #444;
  color: #fff;
}

.btn-cancel:hover {
  background-color: #666;
}

/* Estilo para o campo editável promo_desc2_text1 */
#promo_desc2_text1.form-control {
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 12px;
  background-color: #fff;
  color: #000;
  font-size: 1rem;
  line-height: 1.5;
  overflow-y: auto;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* Ajuste modo escuro */
body.dark-mode #promo_desc2_text1.form-control {
  background-color: #1e1e1e;
  border-color: #444;
  color: #fff;
  border-radius: 12px;
}

/* Ao focar (clicar dentro) */
#promo_desc2_text1.form-control:focus {
  outline: none;
  border-color: #ff4081 !important;
  box-shadow: 0 0 12px rgb(255, 64, 128);
  border-radius: 12px;
}

/* ===============================
   LINKS DENTRO DO CAMPO EDITÁVEL
   =============================== */

/* Modo claro */
body.light-mode #promo_desc2_text1 a {
  color: #ff4081; /* azul clássico bootstrap */
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

body.light-mode #promo_desc2_text1 a:hover {
  color: #b5013d; /* tom mais escuro ao passar o rato */
}

/* Modo escuro */
body.dark-mode #promo_desc2_text1 a {
  color: #ff4081; /* azul neon claro */
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

body.dark-mode #promo_desc2_text1 a:hover {
  color: #fc1662; /* tom mais claro no hover */
}


/* Corrigir o campo de link no modo escuro */
body.dark-mode #promo_desc2_link.form-control {
  background-color: #1e1e1e !important;
  color: #fff !important;
  border: 1px solid #444 !important;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* Quando o input tem foco */
body.dark-mode #promo_desc2_link.form-control:focus {
  outline: none;
  border-color: #ff4081 !important;
  box-shadow: 0 0 12px rgba(255, 64, 129, 0.5);
}