/* ==========================================================================
   TEMA NOBRE: SEU ASTRÓLOGO (https://seuastrologo.com) APLICADO AO TAROT3
   - Tipografia Nobre: Cormorant Garamond (títulos/cabeçalhos) + Outfit (corpo/botões)
   - Paleta de Cores:
       Fundo Principal: #1B1F3B (Azul Noite Profundo)
       Cards e Painéis: #2E3A6E (Azul Safira Noturno)
       Dourado Solar:   #C9A54C e #E3C777 (Destaques, Bordas, Acentos, Botões Nobres)
       Púrpura Místico: #9B8EC4 (Subtítulos, Badges, Efeitos)
       Papiro / Moon:   #F4ECD8 (Texto principal, leitura quente e agradável)
       Muted Lavanda:   #B9B5D0 (Texto secundário e legendas)
       Bordas Sutis:    rgba(201, 165, 76, 0.28) e rgba(255, 255, 255, 0.12)
   - Layout preservado: Nenhum controle funcional removido ou quebrado.
   - 100% Alternável: Pode voltar ao layout padrão a qualquer momento.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Outfit:wght@300;400;500;600;700&display=swap');

/* ==========================================================================
   REGRAS ATIVAS QUANDO html[data-theme="seuastrologo"] / body[data-theme="seuastrologo"]
   ========================================================================== */
html[data-theme="seuastrologo"] body,
body[data-theme="seuastrologo"] {
  --bg-sa: #1B1F3B;
  --bg-sa-card: #2E3A6E;
  --gold-sa: #C9A54C;
  --gold-sa-light: #E3C777;
  --rose-sa: #9B8EC4;
  --moon-sa: #F4ECD8;
  --mut-sa: #B9B5D0;
  --line-sa: rgba(201, 165, 76, 0.25);

  background-color: #1B1F3B !important;
  background-image: 
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,0.55) 50%, transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,0.4) 50%, transparent),
    radial-gradient(1.5px 1.5px at 40% 80%, rgba(201, 165, 76, 0.5) 50%, transparent),
    radial-gradient(1px 1px at 85% 15%, rgba(255,255,255,0.4) 50%, transparent),
    linear-gradient(rgba(15, 20, 42, 0.88), rgba(27, 31, 59, 0.94)) !important;
  background-size: 340px 340px, 260px 260px, 420px 420px, 300px 300px, 100% 100% !important;
  background-attachment: fixed !important;
  color: #F4ECD8 !important;
  font-family: 'Outfit', 'Poppins', sans-serif !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ==========================================================================
   TIPOGRAFIA & TÍTULOS
   ========================================================================== */
body[data-theme="seuastrologo"] h1,
body[data-theme="seuastrologo"] h2,
body[data-theme="seuastrologo"] h3,
body[data-theme="seuastrologo"] .font-serif {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  letter-spacing: 0.02em !important;
}

body[data-theme="seuastrologo"] h1 {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

body[data-theme="seuastrologo"] p,
body[data-theme="seuastrologo"] span,
body[data-theme="seuastrologo"] div,
body[data-theme="seuastrologo"] label,
body[data-theme="seuastrologo"] input,
body[data-theme="seuastrologo"] button,
body[data-theme="seuastrologo"] select,
body[data-theme="seuastrologo"] textarea,
body[data-theme="seuastrologo"] .font-sans {
  font-family: 'Outfit', sans-serif !important;
}

/* ==========================================================================
   HEADER / NAVBAR UNIFICADA (Altura: 68px, Efeito Blur Cósmico e Tipografia Nobre)
   ========================================================================== */
body[data-theme="seuastrologo"] .navbar-fixed,
.navbar-fixed {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 68px !important;
  max-height: 68px !important;
  min-height: 68px !important;
  padding: 0 !important;
  background-color: rgba(27, 31, 59, 0.94) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(201, 165, 76, 0.28) !important;
  box-shadow: 0 4px 25px rgba(10, 15, 35, 0.5) !important;
  display: flex !important;
  align-items: center !important;
  z-index: 50000 !important;
}

body[data-theme="seuastrologo"] .navbar-fixed.scrolled,
.navbar-fixed.scrolled {
  height: 68px !important;
  background-color: rgba(20, 24, 48, 0.98) !important;
  border-bottom-color: rgba(201, 165, 76, 0.45) !important;
}

body[data-theme="seuastrologo"] .navbar-container,
.navbar-container {
  width: 100% !important;
  box-sizing: border-box !important;
  height: 68px !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

body[data-theme="seuastrologo"] .navbar-brand-wrapper,
.navbar-brand-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-theme="seuastrologo"] .logo-link,
.logo-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body[data-theme="seuastrologo"] .brand-title,
.brand-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.55rem !important;
  font-weight: 700 !important;
  color: #C9A54C !important;
  letter-spacing: 0.5px !important;
  text-transform: none !important;
  line-height: 1 !important;
}

body[data-theme="seuastrologo"] .brand-badge,
.brand-badge {
  color: #9B8EC4 !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  margin-left: 4px !important;
  padding-left: 8px !important;
  border-left: 1px solid rgba(201, 165, 76, 0.35) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  line-height: 1 !important;
}

body[data-theme="seuastrologo"] .logo-link,
.logo-link {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: 1.55rem !important;
  color: #C9A54C !important;
  letter-spacing: 0.5px !important;
}

body[data-theme="seuastrologo"] .nav-item,
.nav-item {
  color: #F4ECD8 !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  transition: color 0.25s ease, text-shadow 0.25s ease !important;
}

body[data-theme="seuastrologo"] .nav-item:hover,
.nav-item:hover {
  color: #E3C777 !important;
  text-shadow: 0 0 10px rgba(201, 165, 76, 0.5) !important;
}

body[data-theme="seuastrologo"] .user-welcome {
  color: #9B8EC4 !important;
  font-family: 'Outfit', sans-serif !important;
}

body[data-theme="seuastrologo"] .nav-divider {
  background: rgba(201, 165, 76, 0.25) !important;
}

body[data-theme="seuastrologo"] .mobile-overlay {
  background: rgba(27, 31, 59, 0.98) !important;
  border-left: 1px solid rgba(201, 165, 76, 0.3) !important;
}

body[data-theme="seuastrologo"] .mobile-link {
  color: #F4ECD8 !important;
  font-family: 'Outfit', sans-serif !important;
}

body[data-theme="seuastrologo"] .mobile-link:hover {
  color: #C9A54C !important;
}

/* ==========================================================================
   ELEMENTOS DE DESTAQUE & ACENTOS DOURADOS
   ========================================================================== */
body[data-theme="seuastrologo"] .text-accent-yellow {
  color: #C9A54C !important;
}

body[data-theme="seuastrologo"] .text-accent-violet {
  color: #9B8EC4 !important;
}

body[data-theme="seuastrologo"] .text-accent-signal {
  color: #E3C777 !important;
}

body[data-theme="seuastrologo"] .border-accent-yellow {
  border-color: #C9A54C !important;
}

body[data-theme="seuastrologo"] .border-accent-violet {
  border-color: #9B8EC4 !important;
}

/* Botões do Brutalismo adaptados para o Luxo Cósmico Nobre */
body[data-theme="seuastrologo"] .brute-btn,
body[data-theme="seuastrologo"] .btn-primary {
  background: linear-gradient(135deg, #C9A54C 0%, #B8923E 100%) !important;
  color: #1B1F3B !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  border: 1px solid #E3C777 !important;
  box-shadow: 0 4px 15px rgba(201, 165, 76, 0.3) !important;
  transition: all 0.25s ease !important;
}

body[data-theme="seuastrologo"] .brute-btn:hover,
body[data-theme="seuastrologo"] .btn-primary:hover {
  background: linear-gradient(135deg, #E3C777 0%, #C9A54C 100%) !important;
  color: #0e1222 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(201, 165, 76, 0.5) !important;
}

/* Botão de Registro / CTA na barra */
body[data-theme="seuastrologo"] .register-cta {
  background: linear-gradient(135deg, #C9A54C, #A88434) !important;
  color: #1B1F3B !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  transition: all 0.25s ease;
}

body[data-theme="seuastrologo"] .register-cta:hover {
  background: linear-gradient(135deg, #E3C777, #C9A54C) !important;
  box-shadow: 0 4px 14px rgba(201, 165, 76, 0.4);
}

/* ==========================================================================
   CARDS DE CONSULTA / PRODUTOS / MÓDULOS
   ========================================================================== */
body[data-theme="seuastrologo"] .service-card,
body[data-theme="seuastrologo"] .mystic-card,
body[data-theme="seuastrologo"] .book-card {
  background: linear-gradient(160deg, #2E3A6E 0%, #1B1F3B 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.35s ease !important;
}

body[data-theme="seuastrologo"] .service-card:hover,
body[data-theme="seuastrologo"] .mystic-card:hover,
body[data-theme="seuastrologo"] .book-card:hover {
  border-color: rgba(201, 165, 76, 0.4) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 40px rgba(201, 165, 76, 0.18) !important;
}

/* ==========================================================================
   TABELAS, LISTAS & PAINÉIS
   ========================================================================== */
body[data-theme="seuastrologo"] table {
  color: #F4ECD8 !important;
}

body[data-theme="seuastrologo"] table th {
  color: #9B8EC4 !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  border-bottom: 1px solid rgba(201, 165, 76, 0.3) !important;
}

body[data-theme="seuastrologo"] table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body[data-theme="seuastrologo"] table tr:hover td {
  background-color: rgba(201, 165, 76, 0.05) !important;
}

/* ==========================================================================
   INPUTS & FORMULÁRIOS
   ========================================================================== */
body[data-theme="seuastrologo"] input[type="text"],
body[data-theme="seuastrologo"] input[type="email"],
body[data-theme="seuastrologo"] input[type="password"],
body[data-theme="seuastrologo"] input[type="number"],
body[data-theme="seuastrologo"] input[type="date"],
body[data-theme="seuastrologo"] input[type="time"],
body[data-theme="seuastrologo"] select,
body[data-theme="seuastrologo"] textarea {
  background: rgba(30, 36, 68, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #F4ECD8 !important;
  border-radius: 8px !important;
  font-family: 'Outfit', sans-serif !important;
  transition: all 0.25s ease !important;
}

body[data-theme="seuastrologo"] input:focus,
body[data-theme="seuastrologo"] select:focus,
body[data-theme="seuastrologo"] textarea:focus {
  border-color: #C9A54C !important;
  outline: none !important;
  box-shadow: 0 0 12px rgba(201, 165, 76, 0.35) !important;
  background: rgba(46, 58, 110, 0.85) !important;
}

/* ==========================================================================
   PÁGINAS ADMINISTRATIVAS & MÓDULOS CONECTADOS (ADMIN / DASHBOARD / ESTATÍSTICAS)
   ========================================================================== */
body[data-theme="seuastrologo"] .admin-card,
body[data-theme="seuastrologo"] .ticket-card,
body[data-theme="seuastrologo"] .log-row,
body[data-theme="seuastrologo"] .timeline-event,
body[data-theme="seuastrologo"] .form-container,
body[data-theme="seuastrologo"] main .bg-white\/\[0\.02\] {
  background: linear-gradient(160deg, #2E3A6E 0%, #1B1F3B 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35) !important;
  color: #F4ECD8 !important;
}

body[data-theme="seuastrologo"] .ticket-card:hover,
body[data-theme="seuastrologo"] .admin-card:hover,
body[data-theme="seuastrologo"] a.group.relative:hover {
  border-color: rgba(201, 165, 76, 0.45) !important;
  box-shadow: 0 12px 35px rgba(201, 165, 76, 0.15) !important;
}

body[data-theme="seuastrologo"] .form-container {
  background: linear-gradient(160deg, #2E3A6E 0%, #1B1F3B 100%) !important;
  border: 1px solid rgba(201, 165, 76, 0.3) !important;
  color: #F4ECD8 !important;
}

body[data-theme="seuastrologo"] .form-container label,
body[data-theme="seuastrologo"] .admin-books-form label {
  color: #E3C777 !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 500 !important;
}

body[data-theme="seuastrologo"] .form-control {
  background: rgba(27, 31, 59, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #F4ECD8 !important;
}

body[data-theme="seuastrologo"] .form-control:focus {
  border-color: #C9A54C !important;
  box-shadow: 0 0 10px rgba(201, 165, 76, 0.3) !important;
}

/* Botões do Admin */
body[data-theme="seuastrologo"] .btn,
body[data-theme="seuastrologo"] .admin-btn {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}

body[data-theme="seuastrologo"] a.btn-primary,
body[data-theme="seuastrologo"] button.btn-primary {
  background: linear-gradient(135deg, #C9A54C, #A88434) !important;
  color: #1B1F3B !important;
  border: 1px solid #E3C777 !important;
}

body[data-theme="seuastrologo"] a[href="/admin"],
body[data-theme="seuastrologo"] a[href*="/admin"] {
  transition: all 0.25s ease;
}

/* ==========================================================================
   WIDGET FLUTUANTE DE ALTERNÂNCIA DE TEMA (DISCRETO / LUXO)
   ========================================================================== */
.tarot-theme-switch-widget {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(27, 31, 59, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(201, 165, 76, 0.4);
  padding: 8px 14px;
  border-radius: 40px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.65), 0 0 16px rgba(201, 165, 76, 0.15);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: 'Outfit', system-ui, sans-serif;
}

.tarot-theme-switch-widget:hover {
  border-color: #E3C777;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.8), 0 0 22px rgba(201, 165, 76, 0.28);
}

.tarot-theme-badge-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: #B9B5D0;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}

.tarot-theme-badge-label svg {
  width: 14px;
  height: 14px;
  stroke: #C9A54C;
  fill: #C9A54C;
}

.tarot-btn-toggle-theme {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(201, 165, 76, 0.14);
  border: 1px solid rgba(201, 165, 76, 0.35);
  color: #F4ECD8;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Outfit', sans-serif;
}

.tarot-btn-toggle-theme:hover {
  background: rgba(201, 165, 76, 0.3);
  color: #E3C777;
  border-color: #E3C777;
}

.tarot-btn-toggle-theme svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  transition: transform 0.4s ease;
}

.tarot-btn-toggle-theme:active svg {
  transform: rotate(180deg);
}

@media (max-width: 768px) {
  .tarot-theme-switch-widget {
    bottom: 14px;
    right: 14px;
    padding: 6px 10px;
  }
  .tarot-theme-badge-label {
    display: none;
  }
}