/* ============================================================
   Zwaapi Unified Brand Stylesheet — applied on v1 + v2 + zwaapi.com
   Purpose: unify colors + typography across all three sites.
   Strategy: override Bootstrap CSS variables + common selectors.
   Safe to remove this single file to revert.
   ============================================================ */

/* ---- 1. Google Fonts: Inter ---- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ---- 2. Brand tokens ---- */
:root {
  /* Primary palette (WhatsApp green) */
  --zwa-green-50:   #E6F9EF;
  --zwa-green-100:  #C3F0D8;
  --zwa-green-200:  #9BE5BD;
  --zwa-green-300:  #6FD79E;
  --zwa-green-400:  #47CA85;
  --zwa-green:      #25D366;   /* primary */
  --zwa-green-2:    #1FB155;
  --zwa-green-dark: #0F8A57;
  --zwa-green-deep: #075E54;
  --zwa-green-rgb:  37,211,102;

  /* Neutrals */
  --zwa-ink:       #0A0F1C;
  --zwa-ink-2:     #121A2E;
  --zwa-text:      #0F172A;
  --zwa-text-2:    #475569;
  --zwa-mute:      #64748B;
  --zwa-line:      #E5E7EB;
  --zwa-bg:        #F7FAFC;
  --zwa-card:      #FFFFFF;

  /* Accents */
  --zwa-cyan:    #0EA5E9;
  --zwa-cyan-rgb:14,165,233;
  --zwa-amber:   #F59E0B;
  --zwa-rose:    #F43F5E;

  /* Bootstrap variable overrides (universal) */
  --bs-primary:        #25D366;
  --bs-primary-rgb:    37,211,102;
  --bs-link-color:     #0F8A57;
  --bs-link-hover-color:#1FB155;
  --bs-link-color-rgb: 15,138,87;
  --bs-success:        #25D366;
  --bs-success-rgb:    37,211,102;
  --bs-info:           #0EA5E9;
  --bs-info-rgb:       14,165,233;
  --bs-body-font-family:'Inter','Public Sans','Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --bs-font-sans-serif:'Inter','Public Sans','Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  /* Vuexy / theme variable overrides (v2) */
  --color-primary:        #25D366;
  --color-primary-rgb:    37,211,102;
  --primary:              #25D366;
  --primary-color:        #25D366;
  --theme-color:          #25D366;
  --theme-color-primary:  #25D366;
}

/* Dark-mode equivalents (Vuexy switches with .light-style / .dark-style) */
.dark-style,
[data-bs-theme="dark"] {
  --bs-primary:        #25D366;
  --bs-primary-rgb:    37,211,102;
  --bs-link-color:     #7CE99B;
  --bs-link-hover-color:#25D366;
  --bs-link-color-rgb: 124,233,155;
}

/* ---- 3. Typography baseline ---- */
html, body {
  font-family: 'Inter','Public Sans','Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Inter','Public Sans','Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif !important;
  letter-spacing: -0.01em;
}

/* ---- 4. Bootstrap component overrides ---- */
.btn-primary,
.btn.btn-primary {
  --bs-btn-bg:                 #25D366;
  --bs-btn-border-color:       #25D366;
  --bs-btn-hover-bg:           #1FB155;
  --bs-btn-hover-border-color: #1FB155;
  --bs-btn-active-bg:          #0F8A57;
  --bs-btn-active-border-color:#0F8A57;
  --bs-btn-disabled-bg:        #25D366;
  --bs-btn-disabled-border-color:#25D366;
  --bs-btn-color:              #ffffff;
  --bs-btn-hover-color:        #ffffff;
  --bs-btn-active-color:       #ffffff;
  box-shadow: 0 4px 12px rgba(37,211,102,.22);
}
.btn-primary:hover,
.btn.btn-primary:hover {
  box-shadow: 0 8px 22px rgba(37,211,102,.32);
}
.btn-outline-primary,
.btn.btn-outline-primary {
  --bs-btn-color:              #0F8A57;
  --bs-btn-border-color:       #0F8A57;
  --bs-btn-hover-bg:           #25D366;
  --bs-btn-hover-border-color: #25D366;
  --bs-btn-hover-color:        #ffffff;
  --bs-btn-active-bg:          #0F8A57;
  --bs-btn-active-border-color:#0F8A57;
}
.btn-success { --bs-btn-bg:#25D366;--bs-btn-border-color:#25D366;--bs-btn-hover-bg:#1FB155;--bs-btn-hover-border-color:#1FB155; }

.text-primary,
a.text-primary { color: #0F8A57 !important; }
.bg-primary    { background-color: #25D366 !important; }
.bg-primary.bg-label-primary,
.bg-label-primary { background-color: rgba(37,211,102,.16) !important; color: #0F8A57 !important; }
.border-primary{ border-color: #25D366 !important; }
.text-success  { color: #1FB155 !important; }
.bg-success    { background-color: #25D366 !important; }

/* Links */
a { color: #0F8A57; }
a:hover { color: #1FB155; }

/* Form focus rings */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: rgba(37,211,102,.6);
  box-shadow: 0 0 0 0.2rem rgba(37,211,102,.18);
}
.form-check-input:checked {
  background-color: #25D366;
  border-color: #25D366;
}

/* Badges */
.badge.bg-primary,
.badge.bg-success { background-color: #25D366 !important; color: #fff; }
.badge.bg-label-primary,
.badge.bg-label-success { background-color: rgba(37,211,102,.16) !important; color: #0F8A57 !important; }

/* Progress / sliders */
.progress-bar { background-color: #25D366; }

/* Spinners */
.spinner-border.text-primary,
.spinner-grow.text-primary { color: #25D366 !important; }

/* ---- 5. Vuexy-specific selectors (v2) ---- */
.bg-navbar-theme,
.layout-navbar { /* keep layout intact, just colour the active accents */ }

.menu-link.active,
.menu-vertical .menu-inner > .menu-item.active > .menu-link {
  background: linear-gradient(72.47deg, rgba(37,211,102,0.18) 22.16%, rgba(37,211,102,0.05) 76.47%) !important;
  color: #0F8A57 !important;
}
.menu-vertical .menu-inner > .menu-item.active > .menu-link::before,
.menu-link.active::before { background-color: #25D366 !important; }

/* Vuexy nav-tabs */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: #25D366 !important;
  color: #fff !important;
}
.nav-tabs .nav-link.active { color: #0F8A57 !important; border-bottom-color: #25D366 !important; }

/* Brand spans / accents */
.app-brand-text,
.navbar-brand,
.brand-text { color: var(--zwa-ink); font-weight: 800; letter-spacing: -.01em; }

/* Card hover lift */
.card { border-color: var(--zwa-line); }

/* Avatars */
.avatar-initial.bg-primary,
.avatar-initial.bg-success { background-color: #25D366 !important; }

/* Hero / landing — public site backgrounds (Vuexy front-page) */
.front-page-hero,
.landing-hero,
section.hero,
section.section-hero {
  background:
    radial-gradient(1100px 600px at 80% -10%, rgba(37,211,102,.22), transparent 60%),
    radial-gradient(800px 500px at 10% 110%, rgba(14,165,233,.18), transparent 60%),
    linear-gradient(180deg, #0A0F1C 0%, #0D1730 100%) !important;
  color: #ffffff !important;
}
.front-page-hero h1, .landing-hero h1, section.hero h1 { color: #ffffff !important; }

/* Toggle / switch */
.form-check-input:checked[type="checkbox"] { background-color: #25D366; border-color: #25D366; }

/* Alerts (info/success) */
.alert-primary { --bs-alert-bg: rgba(37,211,102,.10); --bs-alert-border-color: rgba(37,211,102,.25); --bs-alert-color: #0F8A57; }
.alert-success { --bs-alert-bg: rgba(37,211,102,.10); --bs-alert-border-color: rgba(37,211,102,.25); --bs-alert-color: #0F8A57; }

/* Tooltips / popovers carry brand */
.tooltip-inner { background-color: #0A0F1C; }

/* ---- 6. v1-specific tweaks (Inertia + WhatsML theme) ---- */
.btn-default-primary,
.btn--primary,
.text--primary { color: #25D366 !important; }
.bg--primary { background-color: #25D366 !important; }

/* The WhatsML admin sidebar uses --primary-color */
:root {
  --primary-bg: #25D366;
  --primary-hover: #1FB155;
}

/* ---- 7. Selection highlight ---- */
::selection { background: rgba(37,211,102,.28); color: #0A0F1C; }

/* ---- 8. v1 footer-intro: rein in the giant heading ---- */
.footer-one .footer-intro h3,
.footer-intro h3 {
  font-size: clamp(18px, 1.6vw, 22px) !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  max-width: 360px;
  margin-bottom: 18px !important;
  color: var(--zwa-text);
}
.footer-one .footer-intro form input,
.footer-intro form input {
  border-radius: 10px;
}