/*
Theme Name: FabriSite Pro
Theme URI: https://fabrisite.com.br/
Description: Tema profissional de alta conversao para Provedores de Hospedagem de Sites, Revenda WHM/cPanel, Registro de Dominios e Solucoes Digitais no padrao KingHost.
Author: FabriSite Team
Author URI: https://fabrisite.com.br/
Version: 2.5.0
Requires at least: 5.6
Requires PHP: 8.2
License: Commercial / GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: hosting-theme, whmcs-ready, custom-colors, custom-header, custom-menu, custom-logo, responsive-layout, translation-ready
Text Domain: fabrisite
*/

/* ==========================================================================
   FabriSite Theme Core Styles & Variables (Zero FOUC / Pure Static Performance)
   ========================================================================== */

:root {
    --fs-primary: #8B47F9;
    --fs-primary-dark: #180436;
    --fs-accent: #FFD700;
    --fs-action: #E5A823;
    --fs-surface-tint: #F8F5FF;
    --header-bg: #180436;
    --footer-bg: #0C0217;
    --hero-gradient: linear-gradient(168deg, #0C0217 0%, #180436 48%, #3F0899 88%, #8B47F9 100%);
    --bg-page: #0C0217;
    --bg-card: #180436;
    --text-heading: #FFFFFF;
    --text-body: #CBD5E1;
    --border-color: rgba(139, 71, 249, 0.25);
    --btn-cta-bg: linear-gradient(135deg, #FFD700 0%, #F59E0B 50%, #D97706 100%);
    --btn-cta-text: #180436;
}

/* Base Body & Reset */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Área do Cliente CTA Button (Modo Escuro Padrão) */
.btn-cta-primary {
    background: linear-gradient(135deg, #FFD700 0%, #F59E0B 50%, #D97706 100%) !important;
    color: #180436 !important;
    font-weight: 800 !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.btn-cta-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 20px -5px rgba(245, 158, 11, 0.45) !important;
}

/* ==========================================================================
   PADRÃO UNIFICADO - MODO CLARO (FABRISITE)
   ========================================================================== */

/* 1. Fundo geral elegante em degradê claro para todas as páginas */
body.light-mode, 
body.modo-claro,
html.light-mode body,
[data-theme-mode="light"] body,
body.light-mode .site,
body.modo-claro .site,
html.light-mode #site-main-wrapper,
[data-theme-mode="light"] #site-main-wrapper {
    background: linear-gradient(135deg, #f8f9fa 0%, #edf2f7 100%) !important;
    color: #1f2937 !important;
}

/* 2. Cabeçalho unificado com degradê suave no modo claro */
body.light-mode header, 
body.modo-claro header,
html.light-mode header,
[data-theme-mode="light"] header,
body.light-mode .site-header,
body.modo-claro .site-header,
html.light-mode header.purple-nav-bg,
[data-theme-mode="light"] header.purple-nav-bg {
    background: linear-gradient(90deg, #ffffff 0%, #f1f5f9 100%) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    color: #1f2937 !important;
}

html.light-mode header.purple-nav-bg .text-white,
[data-theme-mode="light"] header.purple-nav-bg .text-white {
    color: #0f172a !important;
}
html.light-mode header.purple-nav-bg .text-purple-200,
[data-theme-mode="light"] header.purple-nav-bg .text-purple-200 {
    color: #64748b !important;
}
html.light-mode .fabrisite-nav-menu > li > a,
[data-theme-mode="light"] .fabrisite-nav-menu > li > a {
    color: #1e293b !important;
}
html.light-mode .fabrisite-nav-menu > li:hover > a,
[data-theme-mode="light"] .fabrisite-nav-menu > li:hover > a,
html.light-mode .fabrisite-nav-menu > li.current-menu-item > a,
[data-theme-mode="light"] .fabrisite-nav-menu > li.current-menu-item > a {
    color: #4f46e5 !important;
    background: #f1f5f9 !important;
}
html.light-mode .theme-mode-toggle,
[data-theme-mode="light"] .theme-mode-toggle {
    color: #4f46e5 !important;
}
html.light-mode .theme-mode-toggle:hover,
[data-theme-mode="light"] .theme-mode-toggle:hover {
    color: #4338ca !important;
}

/* Topbar Micro Bar Modo Claro */
html.light-mode .bg-\[\#2a0c3b\],
[data-theme-mode="light"] .bg-\[\#2a0c3b\] {
    background: linear-gradient(90deg, #f8f9fa 0%, #edf2f7 100%) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    color: #475569 !important;
}
html.light-mode .bg-\[\#2a0c3b\] span,
[data-theme-mode="light"] .bg-\[\#2a0c3b\] span,
html.light-mode .bg-\[\#2a0c3b\] strong,
[data-theme-mode="light"] .bg-\[\#2a0c3b\] strong {
    color: #475569 !important;
}
html.light-mode .bg-\[\#2a0c3b\] a,
[data-theme-mode="light"] .bg-\[\#2a0c3b\] a {
    color: #4f46e5 !important;
}

/* Hero Section Modo Claro */
html.light-mode .purple-gradient-hero,
[data-theme-mode="light"] .purple-gradient-hero,
html.light-mode .purple-hero-gradient,
[data-theme-mode="light"] .purple-hero-gradient,
html.light-mode .hero-mesh-premium,
[data-theme-mode="light"] .hero-mesh-premium {
    background: linear-gradient(135deg, #f8f9fa 0%, #edf2f7 100%) !important;
}

/* 3. Textos, títulos e menus legíveis no modo claro */
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.modo-claro h1, body.modo-claro h2, body.modo-claro h3, 
body.modo-claro h4, body.modo-claro h5, body.modo-claro h6,
html.light-mode h1:not(.site-footer-premium *):not(.migration-banner-container *),
html.light-mode h2:not(.site-footer-premium *):not(.migration-banner-container *),
html.light-mode h3:not(.site-footer-premium *):not(.migration-banner-container *),
html.light-mode h4:not(.site-footer-premium *):not(.migration-banner-container *),
[data-theme-mode="light"] h1:not(.site-footer-premium *):not(.migration-banner-container *),
[data-theme-mode="light"] h2:not(.site-footer-premium *):not(.migration-banner-container *),
[data-theme-mode="light"] h3:not(.site-footer-premium *):not(.migration-banner-container *),
[data-theme-mode="light"] h4:not(.site-footer-premium *):not(.migration-banner-container *) {
    color: #0f172a !important;
}

body.light-mode p:not(.site-footer-premium *):not(.migration-banner-container *), 
body.modo-claro p:not(.site-footer-premium *):not(.migration-banner-container *),
html.light-mode p:not(.site-footer-premium *):not(.migration-banner-container *),
[data-theme-mode="light"] p:not(.site-footer-premium *):not(.migration-banner-container *) {
    color: #334155 !important;
}

/* 4. Cards e Blocos de Conteúdo no Modo Claro */
body.light-mode .card, 
body.light-mode .pricing-table, 
body.light-mode .wp-block-group,
body.modo-claro .card, 
body.modo-claro .pricing-table, 
body.modo-claro .wp-block-group {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
}

/* 5. Transformação da Área do Cliente em um Botão com Degradê Roxo/Índigo no Modo Claro */
body.light-mode .client-area, 
body.modo-claro .client-area,
body.light-mode a[href*="cliente"],
body.modo-claro a[href*="cliente"],
html.light-mode .client-area,
[data-theme-mode="light"] .client-area,
html.light-mode a[href*="cliente"],
[data-theme-mode="light"] a[href*="cliente"] {
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important;
    color: #ffffff !important;
    padding: 10px 20px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.3) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.light-mode .client-area:hover, 
body.modo-claro .client-area:hover,
body.light-mode a[href*="cliente"]:hover,
body.modo-claro a[href*="cliente"]:hover,
html.light-mode .client-area:hover,
[data-theme-mode="light"] .client-area:hover,
html.light-mode a[href*="cliente"]:hover,
[data-theme-mode="light"] a[href*="cliente"]:hover {
    background: linear-gradient(135deg, #6d28d9 0%, #4338ca 100%) !important;
    box-shadow: 0 6px 18px rgba(109, 40, 217, 0.45) !important;
    transform: translateY(-2px) !important;
    color: #ffffff !important;
}

/* 6. Botões de Ação de Planos (CTA) - Alto Contraste & Consistência Garantida */
.bg-slate-900,
a.bg-slate-900,
html.light-mode a.bg-slate-900,
[data-theme-mode="light"] a.bg-slate-900,
html.light-mode .bg-slate-900,
[data-theme-mode="light"] .bg-slate-900 {
    background-color: #0f172a !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

.bg-slate-900:hover,
a.bg-slate-900:hover,
html.light-mode a.bg-slate-900:hover,
[data-theme-mode="light"] a.bg-slate-900:hover {
    background-color: #1e293b !important;
    color: #ffffff !important;
}

/* Botão Premium (Destaque Central) - Roxo Vibrante no Modo Claro / Dourado no Modo Escuro */
.btn-plan-premium,
a.btn-plan-premium,
#btnPremium,
a#btnPremium {
    background: linear-gradient(135deg, #8B47F9 0%, #6B21A8 100%) !important;
    color: #FFFFFF !important;
    font-weight: 900 !important;
    box-shadow: 0 10px 25px -5px rgba(139, 71, 249, 0.45) !important;
    border: none !important;
    text-decoration: none !important;
    display: block !important;
    text-align: center !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.btn-plan-premium:hover,
a.btn-plan-premium:hover,
#btnPremium:hover,
a#btnPremium:hover {
    background: linear-gradient(135deg, #7C3AED 0%, #581C87 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 14px 30px -5px rgba(139, 71, 249, 0.6) !important;
    transform: translateY(-2px) !important;
}

/* Modo Escuro: Botão Premium Dourado */
html:not(.light-mode):not([data-theme-mode="light"]) body:not(.light-mode) .btn-plan-premium,
html:not(.light-mode):not([data-theme-mode="light"]) body:not(.light-mode) a.btn-plan-premium,
html:not(.light-mode):not([data-theme-mode="light"]) body:not(.light-mode) #btnPremium,
html:not(.light-mode):not([data-theme-mode="light"]) body:not(.light-mode) a#btnPremium {
    background: linear-gradient(135deg, #FFD700 0%, #F59E0B 50%, #D97706 100%) !important;
    color: #180436 !important;
    box-shadow: 0 10px 25px -5px rgba(245, 158, 11, 0.45) !important;
}
html:not(.light-mode):not([data-theme-mode="light"]) body:not(.light-mode) .btn-plan-premium:hover,
html:not(.light-mode):not([data-theme-mode="light"]) body:not(.light-mode) a.btn-plan-premium:hover,
html:not(.light-mode):not([data-theme-mode="light"]) body:not(.light-mode) #btnPremium:hover,
html:not(.light-mode):not([data-theme-mode="light"]) body:not(.light-mode) a#btnPremium:hover {
    background: linear-gradient(135deg, #FFF0A8 0%, #FFD700 50%, #F59E0B 100%) !important;
    color: #180436 !important;
    box-shadow: 0 14px 30px -5px rgba(245, 158, 11, 0.6) !important;
}

/* Botões WhatsApp */
.btn-whatsapp-cta,
a.btn-whatsapp-cta,
.bg-emerald-500,
a.bg-emerald-500,
html.light-mode a.bg-emerald-500,
[data-theme-mode="light"] a.bg-emerald-500,
html.light-mode a.btn-whatsapp-cta,
[data-theme-mode="light"] a.btn-whatsapp-cta {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    background-color: #10b981 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    box-shadow: 0 6px 18px -3px rgba(16, 185, 129, 0.4) !important;
}
.btn-whatsapp-cta:hover,
a.btn-whatsapp-cta:hover,
.bg-emerald-500:hover,
a.bg-emerald-500:hover,
html.light-mode a.bg-emerald-500:hover,
[data-theme-mode="light"] a.bg-emerald-500:hover {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%) !important;
    background-color: #059669 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 24px -3px rgba(16, 185, 129, 0.5) !important;
}

/* ==========================================================================
   7. FAQ ACCORDION PREMIUM SAAS STYLING (ZERO BLUE BARS / PURE CLEAN CARDS)
   ========================================================================== */
.faq-card {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 1rem !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.faq-card:hover {
    border-color: #c084fc !important;
    box-shadow: 0 10px 25px -5px rgba(139, 71, 249, 0.1) !important;
}
.faq-card button,
.faq-item button,
[onclick*="toggleFaq"] {
    background: transparent !important;
    border: none !important;
    color: #0f172a !important;
    cursor: pointer;
}
.faq-card button span {
    color: #0f172a !important;
}

/* Modo Escuro para FAQ */
html:not(.light-mode):not([data-theme-mode="light"]) body:not(.light-mode) .faq-card {
    background-color: #180436 !important;
    border: 1px solid rgba(139, 71, 249, 0.3) !important;
}
html:not(.light-mode):not([data-theme-mode="light"]) body:not(.light-mode) .faq-card button span {
    color: #ffffff !important;
}
html:not(.light-mode):not([data-theme-mode="light"]) body:not(.light-mode) .faq-card .text-slate-600 {
    color: #cbd5e1 !important;
}

/* ==========================================================================
   8. MEGA RODAPÉ NOTURNO SOFISTICADO (PRESERVADO EM TODOS OS MODOS)
   ========================================================================== */
footer.site-footer-premium,
.site-footer-premium,
footer.fs-footer-section {
    background: linear-gradient(180deg, #180436 0%, #0f0224 45%, #080114 100%) !important;
    border-top: 1px solid rgba(139, 71, 249, 0.35) !important;
    color: #cbd5e1 !important;
}
footer.site-footer-premium h4,
footer.site-footer-premium strong,
footer.site-footer-premium span.text-white {
    color: #ffffff !important;
}
footer.site-footer-premium a {
    color: rgba(226, 232, 240, 0.85) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}
footer.site-footer-premium a:hover {
    color: #ffd700 !important;
}
footer.site-footer-premium a[href*="wa.me"] {
    color: #34d399 !important;
}
footer.site-footer-premium a[href*="wa.me"]:hover {
    color: #6ee7b7 !important;
}

/* Custom Arbitrary Classes Mappings */
.bg-\[\#1f0a2d\] { background-color: #1f0a2d; }
.bg-\[\#25d366\] { background-color: #25d366; }
.bg-\[\#2a0c3b\] { background-color: #2a0c3b; }
.bg-\[\#3b1450\] { background-color: #3b1450; }
.bg-\[\#6b2d8b\] { background-color: #6b2d8b; }
.bg-\[\#F8FAFC\] { background-color: #F8FAFC; }
.text-\[\#3b1450\] { color: #3b1450; }
.text-\[\#6b2d8b\] { color: #6b2d8b; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.border-\[\#6b2d8b\] { border-color: #6b2d8b; }
.hover\:bg-\[\#4a1c61\]:hover { background-color: #4a1c61; }
.hover\:bg-\[\#6b2d8b\]:hover { background-color: #6b2d8b; }
.hover\:text-\[\#6b2d8b\]:hover { color: #6b2d8b; }
.focus\:ring-\[\#6b2d8b\]:focus { --tw-ring-color: #6b2d8b; }
.leading-\[1\.15\] { line-height: 1.15; }
.min-h-\[70vh\] { min-height: 70vh; }

/* Dynamic Theme Utilities */
.fs-bg-primary { background-color: var(--fs-primary) !important; }
.fs-bg-primary-dark { background-color: var(--fs-primary-dark) !important; }
.fs-bg-accent { background-color: var(--fs-accent) !important; }
.fs-bg-action { background-color: var(--fs-action) !important; }
.fs-bg-surface { background-color: var(--fs-surface-tint) !important; }
.fs-text-primary { color: var(--fs-primary) !important; }
.fs-text-accent { color: var(--fs-accent) !important; }
.fs-text-action { color: var(--fs-action) !important; }
.fs-border-primary { border-color: var(--fs-primary) !important; }
.fs-border-accent { border-color: var(--fs-accent) !important; }

.purple-gradient-hero,
.purple-hero-gradient,
.hero-mesh-premium {
    background: var(--hero-gradient) !important;
}

/* Native Scroll Reveal (Zero Overhead) */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.reveal-on-scroll.is-revealed {
    opacity: 1;
    transform: translateY(0);
}