/**
 * ============================================
 * RCS THEMES - Sistema de Temas
 * ============================================
 * Tema Light (claro) e Dark (escuro)
 */

/* ============================================
   VARIÁVEIS CSS - TEMA LIGHT (PADRÃO)
   ============================================ */
:root {
  /* Cores principais */
  --rcs-primary-color: #7b2fff;
  --rcs-secondary-color: #3ac6ff;
  --rcs-gradient: linear-gradient(199deg, #7b2fff 0%, #3ac6ff 100%);
  --rcs-gradient-horizontal: linear-gradient(90deg, #3ac6ff 0%, #7b2fff 100%);

  /* Backgrounds */
  --rcs-bg-primary: #ffffff;
  --rcs-bg-secondary: #f8f9fa;
  --rcs-bg-hero: linear-gradient(199deg, #7b2fff 0%, #3ac6ff 100%);

  /* Textos */
  --rcs-text-primary: #1a1a1a;
  --rcs-text-secondary: #555555;
  --rcs-text-light: #ffffff;
  --rcs-text-muted: #888888;

  /* Bordas e sombras */
  --rcs-border-color: rgba(0, 0, 0, 0.1);
  --rcs-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
  --rcs-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
  --rcs-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);

  /* Cards e containers */
  --rcs-card-bg: rgba(255, 255, 255, 0.95);
  --rcs-card-border: rgba(255, 255, 255, 0.3);

  /* Botões */
  --rcs-button-primary-bg: linear-gradient(207deg, #0a9538 0%, #83c44c 100%);
  --rcs-button-primary-shadow: 0 0px 10px #01ff56;
}

/* ============================================
   TEMA LIGHT (CLARO) - Mesmo que :root
   ============================================ */
[data-theme="light"] {
  /* Usa as mesmas variáveis do :root (tema padrão) */
  /* Cores principais */
  --rcs-primary-color: #7b2fff;
  --rcs-secondary-color: #3ac6ff;
  --rcs-gradient: linear-gradient(199deg, #7b2fff 0%, #3ac6ff 100%);
  --rcs-gradient-horizontal: linear-gradient(90deg, #3ac6ff 0%, #7b2fff 100%);

  /* Backgrounds */
  --rcs-bg-primary: #ffffff;
  --rcs-bg-secondary: #f8f9fa;
  --rcs-bg-hero: linear-gradient(199deg, #7b2fff 0%, #3ac6ff 100%);

  /* Textos */
  --rcs-text-primary: #1a1a1a;
  --rcs-text-secondary: #555555;
  --rcs-text-light: #ffffff;
  --rcs-text-muted: #888888;

  /* Bordas e sombras */
  --rcs-border-color: rgba(0, 0, 0, 0.1);
  --rcs-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
  --rcs-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
  --rcs-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);

  /* Cards e containers */
  --rcs-card-bg: rgba(255, 255, 255, 0.95);
  --rcs-card-border: rgba(255, 255, 255, 0.3);

  /* Botões */
  --rcs-button-primary-bg: linear-gradient(207deg, #0a9538 0%, #83c44c 100%);
  --rcs-button-primary-shadow: 0 0px 10px #01ff56;
}

/* ============================================
   TEMA DARK
   ============================================ */
[data-theme="dark"] {
  /* Cores principais */
  --rcs-primary-color: #8b5cf6;
  --rcs-secondary-color: #06b6d4;
  --rcs-gradient: linear-gradient(199deg, #8b5cf6 0%, #06b6d4 100%);
  --rcs-gradient-horizontal: linear-gradient(90deg, #06b6d4 0%, #8b5cf6 100%);
  --rcs-gradient-dark-body: radial-gradient(circle at top center,
      rgba(113, 137, 233, 0.18),
      transparent 60%),
    #141a21;

  /* Backgrounds */
  --rcs-bg-primary: #0f172a;
  --rcs-bg-secondary: #1e293b;
  --rcs-bg-hero: linear-gradient(35deg,
      #120a2e 0%,
      #2a1365 45%,
      #4b1fa6 75%,
      #6a5cff 100%);
  --rcs-bg-primary: #010101;
  --rcs-card-bg-secondary: #181818;

  /* Textos */
  --rcs-text-primary: #f1f5f9;
  --rcs-text-secondary: #e1e1e1;
  --rcs-text-light: #ffffff;
  --rcs-text-muted: #94a3b8;

  /* Bordas e sombras */
  --rcs-border-color: rgba(255, 255, 255, 0.1);
  --rcs-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --rcs-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --rcs-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

  /* Cards e containers */
  --rcs-card-bg: rgba(30, 41, 59, 0.8);
  --rcs-card-border: rgba(255, 255, 255, 0.1);

  /* Botões */
  --rcs-button-primary-bg: linear-gradient(35deg, #7b2fff 0%, #9a6cff 100%);
  --rcs-button-primary-shadow: 0 0px 10px rgb(138, 92, 246);
}

/* ============================================
   APLICAÇÃO DAS VARIÁVEIS
   ============================================ */

/* Backgrounds principais */
body {
  background-color: var(--rcs-bg-primary);
  color: var(--rcs-text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

[data-theme="dark"] .telefone-sim .moldura {
  box-shadow: 0 0px 40px #ffffff38;
}

/* Background com gradiente para tema dark */
[data-theme="dark"] body {
  background: var(--rcs-gradient-dark-body);
  background-color: var(--rcs-bg-primary);
}

[data-theme="dark"] .rcs-metrics-section,
[data-theme="dark"] .rcs-market-background,
[data-theme="dark"] .rcs-conclusion-section {
  background: var(--rcs-bg-hero) !important;
}

[data-theme="dark"] .rcs-info-desc,
[data-theme="dark"] .rcs-transform-subtitle,
[data-theme="dark"] .rcs-shortcode-desc,
[data-theme="dark"] .rcs-faq-subtitle {
  color: var(--rcs-text-light);
}

/* Tabs - Tema Dark */
[data-theme="dark"] .rcs-tabs-nav {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(123, 47, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .rcs-tab-btn {
  color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .rcs-tab-btn:hover {
  color: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .rcs-tab-btn.active {
  color: #ffffff;
}



[data-theme="dark"] .rcs-info-card {
  background: var(--rcs-card-bg-secondary);
}

[data-theme="dark"] .rcs-info-card h4 {
  color: var(--rcs-text-light);
}

[data-theme="dark"] .rcs-info-card p {
  color: #e1e1e1;
}

/* Hero section */
.home-rcs {
  background: var(--rcs-bg-hero);
}

[data-theme="dark"] .home-rcs {
  background: radial-gradient(circle at 62% 50%, rgb(69 60 165 / 48%) 0%, rgb(71 0 215 / 38%) 14%, rgb(52 3 187 / 22%) 26%, rgb(0 0 0 / 0%) 40%),
    linear-gradient(135deg, #0a0618 0%, #120a2e 40%, #1c0f42 70%, #070312 100%);
}

/* Seções com gradiente */
.rcs-features-seo {
  background: var(--rcs-gradient-horizontal);
}

/* .rcs-conclusion-section já tem background no rcs-conclusion.css usando var(--rcs-bg-hero) */

.rcs-metrics-section {
  background: var(--rcs-gradient);
}

/* Cards */
.rcs-feature-item {
  background: var(--rcs-card-bg);
  border-color: var(--rcs-card-border);
  box-shadow: var(--rcs-shadow-sm);
}

/* Wrapper de seções - aplica background do tema */
/* [data-theme="dark"] .rcs-sections-wrapper {
  background-color: var(--rcs-bg-primary);
} */
[data-theme="dark"] .rcs-section1-desc,
[data-theme="dark"] .rcs-section2-desc,
[data-theme="dark"] .rcs-section3-desc {
  color: var(--rcs-text-light);
}

[data-theme="dark"] .rcs-section1-list li,
[data-theme="dark"] .rcs-section2-list li,
[data-theme="dark"] .rcs-section3-list li {
  color: var(--rcs-text-secondary);
}

[data-theme="dark"] .rcs-section3-note {
  color: var(--rcs-text-secondary);
}

[data-theme="dark"] .rcs-insight-text {
  color: var(--rcs-text-light);
}

[data-theme="dark"] .rcs-shortcode-card,
[data-theme="dark"] .rcs-shortcode-item,
[data-theme="dark"] .rcs-shortcode-btn {
  background: var(--rcs-card-bg-secondary);
}

[data-theme="dark"] .rcs-shortcode-card h4 {
  color: var(--rcs-text-light);
}

[data-theme="dark"] .rcs-shortcode-card p,
[data-theme="dark"] .rcs-shortcode-item div,
[data-theme="dark"] .rcs-btn-content {
  color: var(--rcs-text-secondary);
}

[data-theme="dark"] .rcs-shortcode-btn {
  border-left-color: #7b2fff;
}

[data-theme="dark"] .rcs-shortcode-btn:hover {
  background: rgba(123, 47, 255, 0.1);
}

[data-theme="dark"] .rcs-shortcode-btn.active {
  background: linear-gradient(135deg, rgba(123, 47, 255, 0.15) 0%, rgba(58, 198, 255, 0.15) 100%);
  border-color: rgba(123, 47, 255, 0.4);
}

[data-theme="dark"] .rcs-video-wrapper {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  border-color: rgba(123, 47, 255, 0.2);
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(123, 47, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .rcs-video-placeholder {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  color: var(--rcs-text-light);
}

[data-theme="dark"] .rcs-video-placeholder p {
  color: var(--rcs-text-secondary);
}

[data-theme="dark"] .rcs-faq-item {
  background: var(--rcs-card-bg-secondary);
}

[data-theme="dark"] .rcs-faq-question span {
  color: var(--rcs-text-light);
}

[data-theme="dark"] .rcs-faq-answer p,
[data-theme="dark"] .rcs-faq-answer ul li,
[data-theme="dark"] .rcs-faq-answer ol li {
  color: var(--rcs-text-secondary);
}

[data-theme="dark"] .rcs-faq-answer p strong {
  color: var(--rcs-text-muted);
}

@media (max-width: 767px) {

  [data-theme="dark"] .tra-menu .wsmobileheader,
  [data-theme="dark"] .white-menu [data-theme="dark"].dropdown-menu[data-theme="dark"] .wsmobileheader {
    background-color: rgb(0 0 0 / 70%);
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {

  [data-theme="dark"].tra-menu [data-theme="dark"].wsmobileheader,
  [data-theme="dark"].white-menu [data-theme="dark"].wsmobileheader {
    background-color: rgb(0 0 0 / 70%);
  }
}

/* Textos */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--rcs-text-primary);
}

p {
  color: var(--rcs-text-secondary);
}




[data-theme="dark"] .botao-rcs {
  color: var(--rcs-text-light) !important;
}

[data-theme="dark"] .botao-rcs:hover,
[data-theme="dark"] .botao-rcs-home:hover,
[data-theme="dark"] .rcs-cta-button:hover {
  background: linear-gradient(-35deg, #7b2fff 0%, #9a6cff 100%);
  color: #010101 !important;
}

/* Transições suaves ao trocar tema */
* {
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Exceções - elementos que não devem ter transição */
img,
svg,
video,
iframe {
  transition: none;
}

/* ============================================
   CONTROLE DE LOGOS NO HEADER
   ============================================ */
/* Por padrão (light mode - tema normal): mostra logo branca, esconde logo preta */
.tra-menu.navbar-dark .logo-white {
  display: block !important;
}

.tra-menu.navbar-dark .logo-black {
  display: none !important;
}

/* Light mode com scroll (quando menu fica preto): mostra logo preta, esconde logo branca */
.tra-menu.navbar-dark.white-scroll .scroll .logo-white {
  display: none !important;
}

.tra-menu.navbar-dark.white-scroll .scroll .logo-black {
  display: block !important;
}

/* Dark mode: mostra apenas logo branca (mesmo no scroll) */
[data-theme="dark"] .tra-menu.navbar-dark .logo-white {
  display: block !important;
}

[data-theme="dark"] .tra-menu.navbar-dark .logo-black {
  display: none !important;
}

/* Dark mode no scroll: mantém logo branca */
[data-theme="dark"] .tra-menu.navbar-dark.white-scroll .scroll .logo-white {
  display: block !important;
}

[data-theme="dark"] .tra-menu.navbar-dark.white-scroll .scroll .logo-black {
  display: none !important;
}

/* ============================================
   HEADER NO DARK MODE COM SCROLL
   ============================================ */
[data-theme="dark"] .tra-menu.white-scroll .wsmainfull.scroll,
[data-theme="dark"] .white-menu.white-scroll .wsmainfull.scroll {
  padding: 0;
  background-color: rgb(0 0 0 / 70%) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  -webkit-box-shadow: 0 2px 3px rgba(96, 96, 96, 0.1);
  -moz-box-shadow: 0 2px 3px rgba(96, 96, 96, 0.1);
  box-shadow: 0 2px 3px rgba(96, 96, 96, 0.1);
}

/* Links do menu no dark mode durante scroll */
[data-theme="dark"] .tra-menu.navbar-dark.white-scroll .scroll .wsmenu>.wsmenu-list>li>a.h-link,
[data-theme="dark"] .tra-menu.navbar-light.white-scroll .scroll .wsmenu>.wsmenu-list>li>a.h-link {
  color: #ffffff !important;
}