/* ═══════════════════════════════════════════════════════════════
   OMNI.SITE — DARK MODE GLOBAL (Home + todos os componentes)
   ═══════════════════════════════════════════════════════════════ */

/* ── Variáveis escuras (reutilizadas no site inteiro) ── */
:root {
  --dark-bg:        #0B0F1A;
  --dark-surface:   #111827;
  --dark-card:      #1A2235;
  --dark-border:    rgba(255,255,255,.08);
  --dark-border-md: rgba(255,255,255,.13);
  --dark-text:      #F1F5F9;
  --dark-text-sec:  #94A3B8;
  --dark-text-muted:#64748B;
  --purple:         #7C4DFF;
  --purple-dk:      #5722CC;
  --orange:         #FF6B35;
  --green:          #22C55E;
}

/* ── Base global ── */
html, body {
  background-color: var(--dark-bg) !important;
  color: var(--dark-text) !important;
}

/* ── Loading screen ── */
.app-load {
  background: linear-gradient(135deg, var(--dark-bg), var(--dark-surface)) !important;
}

/* ── Bootstrap overrides ── */
.bg-white   { background-color: var(--dark-surface) !important; }
.bg-light   { background-color: var(--dark-surface) !important; }
.text-muted { color: var(--dark-text-muted) !important; }
.text-dark  { color: var(--dark-text) !important; }
.border, .border-bottom, .border-top { border-color: var(--dark-border-md) !important; }
hr { border-color: var(--dark-border-md) !important; opacity: 1 !important; }

/* Tables */
.table { color: var(--dark-text) !important; border-color: var(--dark-border-md) !important; }
.table th, .table td { border-color: var(--dark-border-md) !important; }
.thead-light th { background-color: var(--dark-card) !important; color: var(--dark-text) !important; }
.table-hover tbody tr:hover { background-color: rgba(124,77,255,.08) !important; }

/* Cards */
.card {
  background-color: var(--dark-card) !important;
  border-color: var(--dark-border-md) !important;
  color: var(--dark-text) !important;
}
.card-body, .card-header, .card-footer { background-color: transparent !important; }

/* Badges */
.badge-success  { background: rgba(34,197,94,.18)  !important; color: #4ADE80 !important; }
.badge-info     { background: rgba(14,165,233,.18) !important; color: #38BDF8 !important; }
.badge-warning  { background: rgba(234,179,8,.18)  !important; color: #FDE047 !important; }
.badge-primary  { background: rgba(124,77,255,.25) !important; color: #A78BFA !important; }

/* Modals */
.modal-content {
  background-color: var(--dark-card) !important;
  border-color: var(--dark-border-md) !important;
  color: var(--dark-text) !important;
}
.modal-content .modal-premium { background-color: var(--dark-card) !important; }

/* ── Navbar (NavMenu.razor) ── */
.navbar.navbar-premium,
.navbar-light.bg-white {
  background: rgba(11,15,26,.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--dark-border-md) !important;
  box-shadow: 0 1px 20px rgba(0,0,0,.4) !important;
}
.navbar-premium .navbar-brand span { color: var(--purple) !important; }
.navbar-light .nav-link { color: var(--dark-text-sec) !important; }
.navbar-light .nav-link:hover, .navbar-light .nav-link:focus { color: var(--dark-text) !important; }
.navbar-toggler { border-color: var(--dark-border-md) !important; }
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(241,245,249,0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
/* Collapsible nav dark */
@media (max-width: 991px) {
  .navbar-collapse { background: var(--dark-surface); border-radius: 12px; padding: 16px; margin-top: 8px; border: 1px solid var(--dark-border-md); }
}

/* ── Site-wrap / main wrapper ── */
.site-wrap { background-color: var(--dark-bg) !important; }

/* ── Hero section (Home.razor) ── */
.hero-banner-premium,
.main-banner {
  background: radial-gradient(ellipse at 30% 0%, rgba(124,77,255,.20) 0%, transparent 55%),
              radial-gradient(ellipse at 80% 80%, rgba(255,107,53,.12) 0%, transparent 50%),
              var(--dark-bg) !important;
}
.hero-headline { color: var(--dark-text) !important; }
.hero-subheadline { color: var(--dark-text-sec) !important; }
.hero-benefits .benefit-item { color: var(--dark-text-sec) !important; }
.hero-benefits .benefit-item i { color: var(--green) !important; }
.hero-image-container { border-radius: 12px; }
.hero-image { border-radius: 10px; }
.rating-badge {
  background: var(--dark-card) !important;
  border: 1px solid var(--dark-border-md) !important;
  color: var(--dark-text) !important;
}
.rating-badge .stars { color: #F59E0B !important; }
.rating-badge .rating-text { color: var(--dark-text-sec) !important; }
.compatibility-icons .compat-item { color: var(--dark-text-sec) !important; }

/* ── Value section ── */
.value-section { background: var(--dark-bg) !important; }
.section-title, .value-section h2 { color: var(--dark-text) !important; }
.section-subtitle { color: var(--dark-text-sec) !important; }
.value-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.value-card {
  background: var(--dark-card) !important;
  border: 1px solid var(--dark-border-md) !important;
  border-radius: 12px;
  padding: 20px;
  transition: border-color .2s, transform .2s;
}
.value-card:hover { border-color: rgba(124,77,255,.4) !important; transform: translateY(-3px); }
.value-card h4 { color: var(--dark-text) !important; }
.value-card p  { color: var(--dark-text-sec) !important; }
.value-card .card-icon { font-size: 1.8rem; margin-bottom: 10px; }
.competitive-advantage h4 { color: var(--purple) !important; }
.advantage-list { display: flex; flex-direction: column; gap: 16px; }
.advantage-item { display: flex; align-items: flex-start; gap: 14px; }
.advantage-item .advantage-icon { font-size: 1.4rem; flex-shrink: 0; }
.advantage-item strong { color: var(--dark-text) !important; display: block; }
.advantage-item p { color: var(--dark-text-sec) !important; margin: 4px 0 0; font-size: .9rem; }

/* ── Services section ── */
.services.section { background: var(--dark-surface) !important; }
.services .section-heading h4 { color: var(--dark-text) !important; }
.services .section-heading p  { color: var(--dark-text-sec) !important; }
.service-item {
  background: var(--dark-card) !important;
  border: 1px solid var(--dark-border) !important;
  border-radius: 16px;
  padding: 28px;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.service-item:hover {
  border-color: rgba(124,77,255,.4) !important;
  box-shadow: 0 12px 40px rgba(124,77,255,.18) !important;
  transform: translateY(-4px);
}
.service-item h4 { color: var(--dark-text) !important; }
.service-item p  { color: var(--dark-text-sec) !important; }
.service-item .text-button a { color: var(--purple) !important; }
.service-item .text-button a:hover { color: #A78BFA !important; }
.service-item .icon img { filter: drop-shadow(0 4px 12px rgba(124,77,255,.3)); }

/* ── About section ── */
.about-premium { background: var(--dark-bg) !important; }
.about-premium .section-heading h2 { color: var(--dark-text) !important; }
.about-premium .section-heading p  { color: var(--dark-text-sec) !important; }
.benefit-card {
  background: var(--dark-card) !important;
  border: 1px solid var(--dark-border-md) !important;
  color: var(--dark-text) !important;
}
.benefit-card::before { background: linear-gradient(90deg, var(--purple), #A78BFA) !important; }
.benefit-card.premium:hover {
  border-color: rgba(124,77,255,.5) !important;
  box-shadow: 0 15px 40px rgba(124,77,255,.18) !important;
}
.benefit-card h4 { color: var(--dark-text) !important; }
.benefit-card p  { color: var(--dark-text-sec) !important; }
.benefit-stat { color: var(--orange) !important; }
.benefit-icon {
  background: rgba(124,77,255,.15) !important;
  color: var(--purple) !important;
}
/* Stats grid */
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin: 24px 0; }
.stat-card {
  background: var(--dark-card) !important;
  border: 1px solid var(--dark-border-md) !important;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}
.stat-card .stat-number { color: var(--purple) !important; font-size: 1.4rem; font-weight: 800; }
.stat-card .stat-label  { color: var(--dark-text-muted) !important; font-size: .78rem; }
@media (max-width: 768px) { .stats-grid { grid-template-columns: 1fr 1fr; } }

/* Social proof section */
.social-proof-section h4 { color: var(--purple) !important; }
.image-with-badge { position: relative; }
.feature-badge {
  position: absolute;
  bottom: 20px; right: -10px;
  background: var(--dark-card) !important;
  border: 1px solid var(--dark-border-md) !important;
  border-radius: 12px;
  padding: 12px 16px;
  display: flex; flex-direction: column; align-items: flex-start;
  color: var(--dark-text) !important;
}
.feature-badge i { color: var(--green); margin-bottom: 4px; font-size: 1.2rem; }
.feature-badge strong { color: var(--dark-text) !important; font-size: .9rem; }
.feature-badge small  { color: var(--dark-text-sec) !important; font-size: .75rem; }

/* ── Clients / Testimonials section ── */
.the-clients.clients-premium { background: var(--dark-surface) !important; }
.clients-premium .section-heading h2 { color: var(--dark-text) !important; }
.clients-premium .section-heading p  { color: var(--dark-text-sec) !important; }
.testimonials-naccs .menu { background: var(--dark-card) !important; border-radius: 16px; overflow: hidden; }
.testimonials-naccs .thumb,
.testimonials-naccs .testimonial-thumb {
  background: var(--dark-card) !important;
  border-bottom: 1px solid var(--dark-border) !important;
}
.testimonials-naccs .thumb:hover,
.testimonials-naccs .active .thumb {
  background: rgba(124,77,255,.12) !important;
}
.client-name { color: var(--dark-text) !important; }
.client-role { color: var(--dark-text-muted) !important; }
.stars-rating i { color: #F59E0B !important; }
.rating { color: var(--dark-text-sec) !important; }
/* Content panel */
.naccs .nacc { background: var(--dark-card) !important; border-radius: 16px; border: 1px solid var(--dark-border-md) !important; }
.naccs .nacc .thumb { color: var(--dark-text-sec) !important; }

/* ── Pricing section ── */
.pricing-tables { background: var(--dark-bg) !important; }
.pricing-tables .section-heading h4 { color: var(--dark-text) !important; }
.pricing-tables .section-heading p  { color: var(--dark-text-sec) !important; }
.pricing-item-regular,
.pricing-item-pro {
  background: var(--dark-card) !important;
  border: 1px solid var(--dark-border-md) !important;
  border-radius: 16px;
  color: var(--dark-text) !important;
  transition: box-shadow .2s, transform .2s;
}
.pricing-item-regular:hover { box-shadow: 0 12px 40px rgba(124,77,255,.2) !important; }
.pricing-item-pro {
  border-color: var(--purple) !important;
  box-shadow: 0 0 0 1px var(--purple), 0 12px 40px rgba(124,77,255,.25) !important;
  transform: scale(1.03);
}
.pricing-item-regular h4,
.pricing-item-pro h4 { color: var(--dark-text) !important; }
.pricing-item-regular ul li,
.pricing-item-pro ul li { color: var(--dark-text-sec) !important; }
.pricing-item-regular .price,
.pricing-item-pro .price { color: var(--purple) !important; }
/* Table in pricing */
.table-bordered { border-color: var(--dark-border-md) !important; }
.table-bordered th, .table-bordered td { border-color: var(--dark-border-md) !important; }

/* ── Shopping cart modal ── */
.modal-premium {
  background: var(--dark-card) !important;
  color: var(--dark-text) !important;
}
.modal-premium table { color: var(--dark-text) !important; }
.modal-premium tfoot tr { color: var(--purple) !important; }
.modal-premium small { color: var(--dark-text-sec) !important; }
.empty-cart-state p { color: var(--dark-text) !important; }
.modal-benefits .benefit-banner {
  background: rgba(34,197,94,.1) !important;
  border: 1px solid rgba(34,197,94,.25) !important;
  border-radius: 10px;
  padding: 12px 16px;
}

/* ── Carousel (ImageCarousel.razor) ── */
.carousel-section {
  background: linear-gradient(135deg, rgba(11,15,26,.95) 0%, rgba(66,6,243,.35) 100%) !important;
}

/* ── Image carousel nav dots/buttons ── */
.carousel-btn { background: rgba(124,77,255,.35) !important; border: 1px solid var(--purple) !important; color: var(--dark-text) !important; }
.carousel-btn:hover { background: rgba(124,77,255,.6) !important; }

/* ── Footer ── */
.footer-premium {
  background: linear-gradient(135deg, #060913 0%, #0B0F1A 100%) !important;
  border-top: 1px solid var(--dark-border-md) !important;
}
.footer-premium .newsletter-content h3 { color: var(--dark-text) !important; }
.footer-premium .newsletter-content p  { color: var(--dark-text-sec) !important; }
.footer-premium .newsletter-note { color: var(--dark-text-muted) !important; }
.footer-links h5 { color: var(--dark-text) !important; }
.footer-links ul li a { color: var(--dark-text-sec) !important; }
.footer-links ul li a:hover { color: var(--dark-text) !important; }
.footer-trust { border-bottom-color: var(--dark-border-md) !important; }
.trust-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px; }
.trust-item { color: var(--dark-text-sec) !important; }
.trust-item strong { color: var(--dark-text) !important; display: block; }
.trust-item small { color: var(--dark-text-muted) !important; }
.trust-item i { color: var(--purple) !important; font-size: 1.3rem; }
.copyright-text p { color: var(--dark-text-muted) !important; }
.social-footer a { color: var(--dark-text-sec) !important; }
.social-footer a:hover { color: var(--purple) !important; }

/* ── Heading line decoration image (invert para modo dark) ── */
img[src*="heading-line-dec"] { filter: invert(1) brightness(.5) !important; }

/* ── WOW / animated elements ── */
.section-heading h4 em,
.section-heading h2 em { color: var(--purple) !important; }
.section-heading h4 { color: var(--dark-text) !important; }
.section-heading p   { color: var(--dark-text-sec) !important; }

/* ── templatemo-chain-app-dev.css overrides ── */
body { background: var(--dark-bg) !important; }
.main-banner { background-color: var(--dark-bg) !important; }

/* Pricing item list bullets */
.pricing-item-regular ul li::before,
.pricing-item-pro ul li::before { color: var(--purple) !important; }

/* Generic white backgrounds inside sections */
section, .section { background-color: transparent !important; }
section.services { background-color: var(--dark-surface) !important; }

/* ── Buttons overrides ── */
.btn-primary,
.btn-hero {
  background: linear-gradient(135deg, var(--purple), var(--purple-dk)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 6px 24px rgba(124,77,255,.4) !important;
}
.btn-primary:hover, .btn-hero:hover {
  box-shadow: 0 10px 32px rgba(124,77,255,.55) !important;
  transform: translateY(-2px);
}
.btn-primary-premium {
  background: linear-gradient(135deg, var(--purple), var(--purple-dk)) !important;
  color: #fff !important;
}
.btn-secondary {
  background: transparent !important;
  border-color: var(--purple) !important;
  color: var(--purple) !important;
}
.btn-secondary:hover { background: rgba(124,77,255,.12) !important; }
.btn-info {
  background: rgba(14,165,233,.2) !important;
  border-color: rgba(14,165,233,.4) !important;
  color: #38BDF8 !important;
}
.btn-danger {
  background: rgba(239,68,68,.2) !important;
  border-color: rgba(239,68,68,.4) !important;
  color: #FCA5A5 !important;
}
.btn-success {
  background: rgba(34,197,94,.2) !important;
  border-color: rgba(34,197,94,.4) !important;
  color: #86EFAC !important;
}
.btn-checkout {
  background: linear-gradient(135deg, #16A34A, #15803D) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.btn-newsletter {
  background: linear-gradient(135deg, var(--purple), var(--purple-dk)) !important;
  color: #fff !important;
}
.btn-light {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.2) !important;
  color: var(--dark-text) !important;
}

/* ── Text de texto claro que seria invisível no dark ── */
p[style*="color: black"],
p[style*="color:#000"],
p[style*="color: #000"],
span[style*="color: black"],
span[style*="color:#000"],
small[style*="color: #666"],
p[style*="color: #666"],
p[style*="color: #555"],
p[style*="color:#666"],
p[style*="color:#555"],
p[style*="color: black"] { color: var(--dark-text-sec) !important; }

strong[style*="color: orange"],
a[style*="color: orange"] { color: var(--orange) !important; }

h2[style*="color: #48058f"],
h3[style*="color: #48058f"],
h4[style*="color: #48058f"],
h3[style*="color: #ff6b6b"] { color: var(--purple) !important; }

/* ── WhatsApp float ── */
.whatsapp-float { /* already green, just ensure z-index */ z-index: 999 !important; }

/* ── Toast notifications ── */
.blazored-toast-container { z-index: 9999 !important; }

/* ── Loading overlay ── */
.app-load { background: var(--dark-bg) !important; }

/* ── Scrollbar (nice dark) ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--dark-bg); }
::-webkit-scrollbar-thumb { background: rgba(124,77,255,.4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(124,77,255,.7); }