/* ==========================================================================
   Multi-Template Engine - 11 Dynamic Theme Presets
   Supports Live Switching without altering database content
   ========================================================================== */

/* --------------------------------------------------------------------------
   TEMPLATE 1: Clássico Dourado & Navy (Default / Navy Gold)
   -------------------------------------------------------------------------- */
[data-template="navy-gold"] {
  --bg-dark-primary: #0C1825;
  --bg-dark-secondary: #132235;
  --bg-dark-card: #1E2E44;
  --bg-light-primary: #FFFFFF;
  --bg-light-secondary: #F8FAFC;
  --gold-primary: #C69A59;
  --gold-hover: #B58948;
  --gold-dark: #9A753C;
  --gold-glow: rgba(198, 154, 89, 0.25);
  --text-white: #FFFFFF;
  --text-dark-primary: #0F172A;
  --text-dark-secondary: #475569;
  --text-muted-light: #94A3B8;
  --border-light: #E2E8F0;
  --border-dark: #1E293B;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
}

/* --------------------------------------------------------------------------
   TEMPLATE 2: Odontopediatria / Infantil (Kids)
   Acolhedor, cores pastéis alegre, bordas arredondadas e atmosfera sem medo
   -------------------------------------------------------------------------- */
[data-template="kids"] {
  --bg-dark-primary: #1E293B;
  --bg-dark-secondary: #0F172A;
  --bg-dark-card: #334155;
  --bg-light-primary: #FFFDF5;
  --bg-light-secondary: #F0F9FF;
  --gold-primary: #38BDF8; /* Azul Bebê Vibrante */
  --gold-hover: #0284C7;
  --gold-dark: #0369A1;
  --gold-glow: rgba(56, 189, 248, 0.3);
  --text-white: #FFFFFF;
  --text-dark-primary: #0C4A6E;
  --text-dark-secondary: #334155;
  --text-muted-light: #BAE6FD;
  --border-light: #BAE6FD;
  --border-dark: #334155;
  --radius-sm: 16px;
  --radius-md: 24px;
  --radius-lg: 32px;
  --font-heading: 'Outfit', cursive, sans-serif;
  --font-body: 'Inter', sans-serif;
}

[data-template="kids"] .btn-gold {
  background: linear-gradient(135deg, #38BDF8 0%, #818CF8 100%) !important;
  color: #FFFFFF !important;
  border-radius: 30px !important;
  box-shadow: 0 8px 20px rgba(56, 189, 248, 0.35) !important;
}

[data-template="kids"] .badge-academic {
  background: #FEF08A !important;
  color: #854D0E !important;
  border-radius: 20px !important;
  font-weight: 700 !important;
}

[data-template="kids"] .specialty-card {
  border-radius: 24px !important;
  border: 2px solid #E0F2FE !important;
  box-shadow: 0 10px 25px rgba(56, 189, 248, 0.1) !important;
}

[data-template="kids"] .specialty-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  border-color: #38BDF8 !important;
}

/* --------------------------------------------------------------------------
   TEMPLATE 3: Odontologia Estética & Feminina (Aesthetic Rose)
   Rose Gold, Nude, Champagne, sofisticação spa boutique
   -------------------------------------------------------------------------- */
[data-template="aesthetic-female"] {
  --bg-dark-primary: #2A1B24;
  --bg-dark-secondary: #1F131A;
  --bg-dark-card: #3A2633;
  --bg-light-primary: #FFFDFD;
  --bg-light-secondary: #FAF4F5;
  --gold-primary: #E2A7AC; /* Rose Gold Luxo */
  --gold-hover: #D48C92;
  --gold-dark: #B86B72;
  --gold-glow: rgba(226, 167, 172, 0.3);
  --text-white: #FFFFFF;
  --text-dark-primary: #3B222E;
  --text-dark-secondary: #634352;
  --text-muted-light: #F2D6D8;
  --border-light: #F0D5D8;
  --border-dark: #4A3140;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --font-heading: 'Outfit', Georgia, serif;
  --font-body: 'Inter', sans-serif;
}

[data-template="aesthetic-female"] .btn-gold {
  background: linear-gradient(135deg, #E2A7AC 0%, #C88389 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 25px rgba(226, 167, 172, 0.35) !important;
  border-radius: 8px !important;
}

[data-template="aesthetic-female"] .badge-academic {
  background: rgba(226, 167, 172, 0.15) !important;
  color: #B86B72 !important;
  border: 1px solid #E2A7AC !important;
}

[data-template="aesthetic-female"] .hero-section {
  background: linear-gradient(135deg, #2A1B24 0%, #1A0F16 100%) !important;
}

/* --------------------------------------------------------------------------
   TEMPLATE 4: Obsidian & Neon Cyber (Dark Luxury)
   Dark mode profundo, detalhes champagne metálico e neon glow moderno
   -------------------------------------------------------------------------- */
[data-template="obsidian-luxury"] {
  --bg-dark-primary: #05070A;
  --bg-dark-secondary: #0A0E14;
  --bg-dark-card: #121824;
  --bg-light-primary: #0B0F17;
  --bg-light-secondary: #121824;
  --gold-primary: #D4AF37; /* Champanhe Metálico */
  --gold-hover: #F3E5AB;
  --gold-dark: #AA8C2C;
  --gold-glow: rgba(212, 175, 55, 0.4);
  --text-white: #F8FAFC;
  --text-dark-primary: #F8FAFC;
  --text-dark-secondary: #CBD5E1;
  --text-muted-light: #64748B;
  --border-light: #1E293B;
  --border-dark: #1E293B;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
}

[data-template="obsidian-luxury"] .specialty-card,
[data-template="obsidian-luxury"] .blog-card {
  background: #0D131D !important;
  border: 1px solid rgba(212, 175, 55, 0.2) !important;
}

[data-template="obsidian-luxury"] .btn-gold {
  background: #D4AF37 !important;
  color: #05070A !important;
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.4) !important;
}

/* --------------------------------------------------------------------------
   TEMPLATE 5: Esmeralda & Mármore (Clean Medical)
   Verde esmeralda limpo, alta precisão hospitalar e biossegurança
   -------------------------------------------------------------------------- */
[data-template="emerald-medical"] {
  --bg-dark-primary: #064E3B;
  --bg-dark-secondary: #022C22;
  --bg-dark-card: #047857;
  --bg-light-primary: #FFFFFF;
  --bg-light-secondary: #F0FDF4;
  --gold-primary: #10B981; /* Esmeralda */
  --gold-hover: #059669;
  --gold-dark: #047857;
  --gold-glow: rgba(16, 185, 129, 0.25);
  --text-white: #FFFFFF;
  --text-dark-primary: #064E3B;
  --text-dark-secondary: #334155;
  --text-muted-light: #A7F3D0;
  --border-light: #D1FAE5;
  --border-dark: #065F46;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
}

/* --------------------------------------------------------------------------
   TEMPLATE 6: Safira Imperial & Prata (Executive Blue)
   Azul safira profundo e prata metálico, focado em credibilidade
   -------------------------------------------------------------------------- */
[data-template="sapphire-royal"] {
  --bg-dark-primary: #0F172A;
  --bg-dark-secondary: #1E293B;
  --bg-dark-card: #334155;
  --bg-light-primary: #FFFFFF;
  --bg-light-secondary: #F1F5F9;
  --gold-primary: #3B82F6; /* Safira Royal */
  --gold-hover: #2563EB;
  --gold-dark: #1D4ED8;
  --gold-glow: rgba(59, 130, 246, 0.3);
  --text-white: #FFFFFF;
  --text-dark-primary: #0F172A;
  --text-dark-secondary: #475569;
  --text-muted-light: #94A3B8;
  --border-light: #E2E8F0;
  --border-dark: #334155;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
}

/* --------------------------------------------------------------------------
   TEMPLATE 7: Orgânico Terracota & Areia (Holistic Dental)
   Tons quentes de terracota e areia, acolhedor e natural
   -------------------------------------------------------------------------- */
[data-template="warm-terracotta"] {
  --bg-dark-primary: #2C1A1D;
  --bg-dark-secondary: #1F1214;
  --bg-dark-card: #3D262A;
  --bg-light-primary: #FAF6F0;
  --bg-light-secondary: #F3ECE2;
  --gold-primary: #C2593F; /* Terracota */
  --gold-hover: #A3442C;
  --gold-dark: #87341F;
  --gold-glow: rgba(194, 89, 63, 0.25);
  --text-white: #FFFFFF;
  --text-dark-primary: #2C1A1D;
  --text-dark-secondary: #574145;
  --text-muted-light: #E8D5C8;
  --border-light: #EADCD0;
  --border-dark: #4A3135;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --font-heading: 'Outfit', serif;
  --font-body: 'Inter', sans-serif;
}

/* --------------------------------------------------------------------------
   TEMPLATE 8: Platina & Ciano Cirúrgico (High-Tech Implants)
   Cinza platina, ciano cirúrgico e precisão tecnológica
   -------------------------------------------------------------------------- */
[data-template="platinum-tech"] {
  --bg-dark-primary: #0F172A;
  --bg-dark-secondary: #1E293B;
  --bg-dark-card: #1E293B;
  --bg-light-primary: #F8FAFC;
  --bg-light-secondary: #F1F5F9;
  --gold-primary: #0EA5E9; /* Ciano Cirúrgico */
  --gold-hover: #0284C7;
  --gold-dark: #0369A1;
  --gold-glow: rgba(14, 165, 233, 0.3);
  --text-white: #FFFFFF;
  --text-dark-primary: #0F172A;
  --text-dark-secondary: #334155;
  --text-muted-light: #7DD3FC;
  --border-light: #CBD5E1;
  --border-dark: #334155;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
}

/* --------------------------------------------------------------------------
   TEMPLATE 9: Ametista & Harmonização (Orofacial Boutique)
   Violeta ametista e ouro rosa, focado em estética facial
   -------------------------------------------------------------------------- */
[data-template="velvet-amethyst"] {
  --bg-dark-primary: #1E1035;
  --bg-dark-secondary: #130924;
  --bg-dark-card: #2B184B;
  --bg-light-primary: #FCFAFF;
  --bg-light-secondary: #F5EEFE;
  --gold-primary: #A855F7; /* Violeta Ametista */
  --gold-hover: #9333EA;
  --gold-dark: #7E22CE;
  --gold-glow: rgba(168, 85, 247, 0.3);
  --text-white: #FFFFFF;
  --text-dark-primary: #1E1035;
  --text-dark-secondary: #4A3B63;
  --text-muted-light: #E9D5FF;
  --border-light: #E9D5FF;
  --border-dark: #3B2064;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
}

/* --------------------------------------------------------------------------
   TEMPLATE 10: Minimalismo Escandinavo (Nordic Dental)
   Preto e branco absoluto, ultra-clean com linhas marcantes
   -------------------------------------------------------------------------- */
[data-template="nordic-minimal"] {
  --bg-dark-primary: #000000;
  --bg-dark-secondary: #111111;
  --bg-dark-card: #222222;
  --bg-light-primary: #FFFFFF;
  --bg-light-secondary: #F5F5F5;
  --gold-primary: #000000; /* Monocromático Alto Contraste */
  --gold-hover: #333333;
  --gold-dark: #111111;
  --gold-glow: rgba(0, 0, 0, 0.15);
  --text-white: #FFFFFF;
  --text-dark-primary: #000000;
  --text-dark-secondary: #555555;
  --text-muted-light: #888888;
  --border-light: #E5E5E5;
  --border-dark: #333333;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
}

[data-template="nordic-minimal"] .btn-gold {
  background: #000000 !important;
  color: #FFFFFF !important;
  border-radius: 0px !important;
}

[data-template="nordic-minimal"] .badge-academic {
  border-radius: 0px !important;
}

/* --------------------------------------------------------------------------
   TEMPLATE 11: Cobre & Sol Nascente (Warm Sunset)
   Cobre metálico e tons quentes de pôr do sol
   -------------------------------------------------------------------------- */
[data-template="sunset-copper"] {
  --bg-dark-primary: #1C1917;
  --bg-dark-secondary: #0C0A09;
  --bg-dark-card: #292524;
  --bg-light-primary: #FFFBEB;
  --bg-light-secondary: #FEF3C7;
  --gold-primary: #F59E0B; /* Cobre & Âmbar */
  --gold-hover: #D97706;
  --gold-dark: #B45309;
  --gold-glow: rgba(245, 158, 11, 0.3);
  --text-white: #FFFFFF;
  --text-dark-primary: #451A03;
  --text-dark-secondary: #78350F;
  --text-muted-light: #FDE68A;
  --border-light: #FDE68A;
  --border-dark: #44403C;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
}

/* --------------------------------------------------------------------------
   Template Selector Grid UI in Admin Dashboard
   -------------------------------------------------------------------------- */
.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.template-card {
  background: white;
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.template-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: var(--gold-primary);
}

.template-card.active {
  border-color: var(--gold-primary);
  background: rgba(198, 154, 89, 0.05);
  box-shadow: 0 0 0 3px var(--gold-glow);
}

.template-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.template-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-dark-primary);
}

.template-badge-active {
  background: var(--gold-primary);
  color: var(--bg-dark-primary);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}

.template-swatch-group {
  display: flex;
  gap: 0.4rem;
  margin: 0.75rem 0;
}

.template-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
}

.template-card-desc {
  font-size: 0.82rem;
  color: var(--text-dark-secondary);
  line-height: 1.5;
}