/* SMM Provider Hub — Shared Public Header Component (2026-09-27)
   Homepage is the visual source of truth. This file only normalizes the public
   header across Homepage, Services/FAQ/API/general pages, Blog and SEO pages.
   Routes, collapse behavior and authentication logic remain unchanged. */

:root{
  --sph-header-bg:rgba(5,6,11,.88);
  --sph-header-surface:#0b0e19;
  --sph-header-border:rgba(255,255,255,.08);
  --sph-header-border-strong:rgba(255,255,255,.14);
  --sph-header-text:#f1f3fb;
  --sph-header-muted:#9ba1b8;
  --sph-header-violet:#7c6cf6;
  --sph-header-cyan:#33e0d8;
  --sph-header-gradient:linear-gradient(135deg,#7c6cf6 0%,#5b8cff 52%,#33e0d8 100%);
}

/* ---------- Shared shell ---------- */
.sph-premium-home .navbar-custom,
#headerNav,
body.sph-seo-layout .sph5-seo-header{
  background:var(--sph-header-bg)!important;
  border-bottom:1px solid var(--sph-header-border)!important;
  box-shadow:0 12px 40px rgba(0,0,0,.18)!important;
  backdrop-filter:blur(18px) saturate(140%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(140%)!important;
}

/* Keep the same desktop alignment/container width as the homepage Bootstrap header. */
.sph-premium-home .navbar-custom > .container,
#headerNav > .container,
body.sph-seo-layout .sph5-seo-header-inner{
  width:100%!important;
  max-width:1140px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

.sph-premium-home .navbar-custom,
#headerNav{
  min-height:74px!important;
  padding:.55rem 0!important;
}
.sph-premium-home .navbar-custom .container,
#headerNav > .container,
#headerNav .navbar{
  min-height:56px!important;
  align-items:center!important;
}
#headerNav .navbar{width:100%!important;padding:0!important;}

.sph-premium-home .navbar-custom .navbar-brand img,
#headerNav .navbar-brand img,
body.sph-seo-layout .sph5-seo-logo img{
  width:auto!important;
  max-width:140px!important;
  max-height:44px!important;
  object-fit:contain!important;
  filter:none!important;
}

/* ---------- Navigation ---------- */
.sph-premium-home .navbar-custom .nav-link,
#headerNav .nav-link,
body.sph-seo-layout .sph5-seo-nav .nav-link,
body.sph-seo-layout .sph5-seo-nav ul > li > a{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.42rem!important;
  min-height:36px!important;
  padding:.58rem .68rem!important;
  border-radius:8px!important;
  background:transparent!important;
  color:var(--sph-header-muted)!important;
  font-size:14px!important;
  font-weight:600!important;
  line-height:1.15!important;
  text-decoration:none!important;
  white-space:nowrap!important;
}

.sph-premium-home .navbar-custom .nav-link:hover,
#headerNav .nav-link:hover,
body.sph-seo-layout .sph5-seo-nav .nav-link:hover,
body.sph-seo-layout .sph5-seo-nav ul > li > a:hover{
  color:#fff!important;
  background:rgba(124,108,246,.06)!important;
}

.sph-premium-home .navbar-custom .nav-item.active > .nav-link,
.sph-premium-home .navbar-custom .nav-link.active,
#headerNav .nav-item.active > .nav-link,
#headerNav .nav-link.active,
body.sph-seo-layout .sph5-seo-nav .active > a,
body.sph-seo-layout .sph5-seo-nav .active > .nav-link{
  color:#fff!important;
  background:rgba(124,108,246,.11)!important;
  font-weight:800!important;
}

/* Preserve the existing green WhatsApp action, using one visual treatment everywhere. */
.sph-premium-home .navbar-custom .sph-whatsapp-link,
#headerNav .sph-whatsapp-link,
body.sph-seo-layout .sph5-seo-nav .sph-whatsapp-link,
body.sph-seo-layout .sph5-seo-nav a[href*="wa.me"],
body.sph-seo-layout .sph5-seo-nav a[href*="whatsapp"]{
  color:#5ee39a!important;
  background:rgba(37,211,102,.08)!important;
  border:1px solid rgba(37,211,102,.28)!important;
  border-radius:8px!important;
  text-decoration:none!important;
}
.sph-premium-home .navbar-custom .sph-whatsapp-link:hover,
#headerNav .sph-whatsapp-link:hover,
body.sph-seo-layout .sph5-seo-nav .sph-whatsapp-link:hover,
body.sph-seo-layout .sph5-seo-nav a[href*="wa.me"]:hover,
body.sph-seo-layout .sph5-seo-nav a[href*="whatsapp"]:hover{
  color:#7aebb0!important;
  background:rgba(37,211,102,.14)!important;
}

/* ---------- Auth actions: exact same visual hierarchy everywhere ---------- */
.sph-premium-home .navbar-custom span.nav-item,
#headerNav .btn-login-signup,
body.sph-seo-layout .sph5-seo-auth{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  flex:0 0 auto!important;
  margin-left:8px!important;
  padding:0!important;
}

/* Login = dark glass secondary action. Higher specificity intentionally neutralizes
   legacy .header .btn-login !important colors from general_page.css. */
.sph-premium-home .navbar-custom .btn-login,
#headerNav .btn-login-signup .btn-login,
body.sph-seo-layout .sph5-seo-auth .btn-login{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  gap:.38rem!important;
  min-height:44px!important;
  height:44px!important;
  padding:10px 18px!important;
  margin:0!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid var(--sph-header-border-strong)!important;
  border-radius:11px!important;
  box-shadow:none!important;
  color:#fff!important;
  font-size:14px!important;
  font-weight:700!important;
  line-height:1!important;
  text-transform:uppercase!important;
  text-decoration:none!important;
  white-space:nowrap!important;
}
.sph-premium-home .navbar-custom .btn-login:hover,
#headerNav .btn-login-signup .btn-login:hover,
body.sph-seo-layout .sph5-seo-auth .btn-login:hover,
.sph-premium-home .navbar-custom .btn-login:focus,
#headerNav .btn-login-signup .btn-login:focus,
body.sph-seo-layout .sph5-seo-auth .btn-login:focus{
  color:#fff!important;
  background:rgba(255,255,255,.085)!important;
  border-color:rgba(124,108,246,.50)!important;
  box-shadow:0 0 0 3px rgba(124,108,246,.10)!important;
  outline:0!important;
  transform:translateY(-1px);
}

/* Sign Up / logged-in dashboard = homepage premium gradient primary action. */
.sph-premium-home .navbar-custom .btn-getstarted,
#headerNav .btn-login-signup .sign-up,
#headerNav .btn-login-signup .btn-statistics,
body.sph-seo-layout .sph5-seo-auth .sign-up,
body.sph-seo-layout .sph5-seo-auth .btn-statistics{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  gap:.38rem!important;
  min-height:44px!important;
  height:44px!important;
  padding:10px 20px!important;
  margin:0!important;
  background:var(--sph-header-gradient)!important;
  border:1px solid transparent!important;
  border-radius:11px!important;
  box-shadow:0 8px 24px rgba(91,140,255,.24)!important;
  color:#05060b!important;
  font-size:14px!important;
  font-weight:700!important;
  line-height:1!important;
  text-transform:uppercase!important;
  text-decoration:none!important;
  white-space:nowrap!important;
}
.sph-premium-home .navbar-custom .btn-getstarted:hover,
#headerNav .btn-login-signup .sign-up:hover,
#headerNav .btn-login-signup .btn-statistics:hover,
body.sph-seo-layout .sph5-seo-auth .sign-up:hover,
body.sph-seo-layout .sph5-seo-auth .btn-statistics:hover,
.sph-premium-home .navbar-custom .btn-getstarted:focus,
#headerNav .btn-login-signup .sign-up:focus,
#headerNav .btn-login-signup .btn-statistics:focus,
body.sph-seo-layout .sph5-seo-auth .sign-up:focus,
body.sph-seo-layout .sph5-seo-auth .btn-statistics:focus{
  color:#05060b!important;
  background:linear-gradient(135deg,#8a7bff 0%,#66a0ff 52%,#43eee6 100%)!important;
  border-color:transparent!important;
  box-shadow:0 12px 30px rgba(91,140,255,.34)!important;
  outline:0!important;
  transform:translateY(-1px);
}

.sph-premium-home .navbar-custom .sph-auth-icon,
#headerNav .sph-auth-icon,
body.sph-seo-layout .sph5-seo-auth .sph-auth-icon{
  margin:0!important;
  font-size:.86em!important;
  line-height:1!important;
}

/* ---------- Mobile More / menu button ---------- */
.sph-premium-home .navbar-custom .navbar-toggler,
#headerNav .navbar-toggler,
body.sph-seo-layout .sph5-seo-toggle{
  box-sizing:border-box!important;
  width:42px!important;
  min-width:42px!important;
  height:42px!important;
  min-height:42px!important;
  padding:0!important;
  margin-left:auto!important;
  display:none!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 42px!important;
  position:relative!important;
  z-index:1102!important;
  background:rgba(255,255,255,.055)!important;
  border:1px solid var(--sph-header-border-strong)!important;
  border-radius:11px!important;
  box-shadow:0 8px 24px rgba(0,0,0,.18)!important;
  color:#f1f3fb!important;
  text-shadow:none!important;
  opacity:1!important;
  outline:0!important;
}
.sph-premium-home .navbar-custom .navbar-toggler:hover,
#headerNav .navbar-toggler:hover,
body.sph-seo-layout .sph5-seo-toggle:hover,
.sph-premium-home .navbar-custom .navbar-toggler:focus,
#headerNav .navbar-toggler:focus,
body.sph-seo-layout .sph5-seo-toggle:focus,
.sph-premium-home .navbar-custom .navbar-toggler[aria-expanded="true"],
#headerNav .navbar-toggler[aria-expanded="true"],
body.sph-seo-layout .sph5-seo-toggle[aria-expanded="true"]{
  color:#fff!important;
  background:rgba(124,108,246,.15)!important;
  border-color:rgba(124,108,246,.48)!important;
  box-shadow:0 0 0 3px rgba(124,108,246,.10)!important;
}
.sph-premium-home .navbar-custom .navbar-toggler i,
.sph-premium-home .navbar-custom .navbar-toggler span,
#headerNav .navbar-toggler i,
#headerNav .navbar-toggler span,
body.sph-seo-layout .sph5-seo-toggle i{
  color:inherit!important;
  opacity:1!important;
  font-size:20px!important;
  line-height:1!important;
}

@media (max-width:1199.98px) and (min-width:992px){
  .sph-premium-home .navbar-custom > .container,
  #headerNav > .container,
  body.sph-seo-layout .sph5-seo-header-inner{max-width:960px!important;}
  .sph-premium-home .navbar-custom .nav-link,
  #headerNav .nav-link,
  body.sph-seo-layout .sph5-seo-nav .nav-link,
  body.sph-seo-layout .sph5-seo-nav ul > li > a{
    padding-left:.45rem!important;
    padding-right:.45rem!important;
    font-size:12px!important;
  }
  .sph-premium-home .navbar-custom .btn-login,
  #headerNav .btn-login-signup .btn-login,
  body.sph-seo-layout .sph5-seo-auth .btn-login{padding-left:13px!important;padding-right:13px!important;font-size:12px!important;}
  .sph-premium-home .navbar-custom .btn-getstarted,
  #headerNav .btn-login-signup .sign-up,
  #headerNav .btn-login-signup .btn-statistics,
  body.sph-seo-layout .sph5-seo-auth .sign-up,
  body.sph-seo-layout .sph5-seo-auth .btn-statistics{padding-left:14px!important;padding-right:14px!important;font-size:12px!important;}
}

@media (max-width:991.98px) and (min-width:768px){
  .sph-premium-home .navbar-custom > .container,
  #headerNav > .container,
  body.sph-seo-layout .sph5-seo-header-inner{max-width:720px!important;}
}

@media (max-width:767.98px) and (min-width:576px){
  .sph-premium-home .navbar-custom > .container,
  #headerNav > .container,
  body.sph-seo-layout .sph5-seo-header-inner{max-width:540px!important;}
}

@media (max-width:991.98px){
  .sph-premium-home .navbar-custom,
  #headerNav{min-height:66px!important;padding:.45rem 0!important;}

  .sph-premium-home .navbar-custom .navbar-toggler,
  #headerNav .navbar-toggler,
  body.sph-seo-layout .sph5-seo-toggle{display:inline-flex!important;}

  .sph-premium-home .navbar-custom .navbar-collapse,
  #headerNav .navbar-collapse,
  body.sph-seo-layout .sph5-seo-nav{
    position:relative!important;
    box-sizing:border-box!important;
    z-index:1101!important;
    flex-basis:100%!important;
    width:100%!important;
    margin-top:10px!important;
    padding:14px!important;
    background:rgba(11,14,25,.98)!important;
    border:1px solid var(--sph-header-border)!important;
    border-radius:16px!important;
    box-shadow:0 25px 60px rgba(0,0,0,.45)!important;
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
  }

  /* Bootstrap controls display for homepage/general/blog; SEO keeps its existing is-open JS. */
  .sph-premium-home .navbar-custom .navbar-nav,
  #headerNav .navbar-nav,
  body.sph-seo-layout .sph5-seo-nav .navbar-nav{
    width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:2px!important;
    margin:0!important;
  }
  .sph-premium-home .navbar-custom .navbar-nav .nav-item,
  #headerNav .navbar-nav .nav-item,
  body.sph-seo-layout .sph5-seo-nav .nav-item{
    width:100%!important;
  }
  .sph-premium-home .navbar-custom .navbar-nav .nav-link,
  #headerNav .navbar-nav .nav-link,
  body.sph-seo-layout .sph5-seo-nav .nav-link,
  body.sph-seo-layout .sph5-seo-nav ul > li > a{
    width:100%!important;
    min-height:42px!important;
    justify-content:flex-start!important;
    padding:10px 11px!important;
    font-size:13px!important;
  }

  .sph-premium-home .navbar-custom span.nav-item,
  #headerNav .btn-login-signup,
  body.sph-seo-layout .sph5-seo-auth{
    width:100%!important;
    margin:8px 0 0!important;
    padding-top:10px!important;
    border-top:1px solid rgba(255,255,255,.07)!important;
    justify-content:flex-start!important;
    flex-wrap:wrap!important;
  }

  .sph-premium-home .navbar-custom .btn-login,
  #headerNav .btn-login-signup .btn-login,
  body.sph-seo-layout .sph5-seo-auth .btn-login,
  .sph-premium-home .navbar-custom .btn-getstarted,
  #headerNav .btn-login-signup .sign-up,
  #headerNav .btn-login-signup .btn-statistics,
  body.sph-seo-layout .sph5-seo-auth .sign-up,
  body.sph-seo-layout .sph5-seo-auth .btn-statistics{
    flex:1 1 140px!important;
    max-width:100%!important;
  }
}

@media (max-width:575.98px){
  .sph-premium-home .navbar-custom > .container,
  #headerNav > .container,
  body.sph-seo-layout .sph5-seo-header-inner{
    padding-left:15px!important;
    padding-right:15px!important;
  }
  .sph-premium-home .navbar-custom .navbar-brand img,
  #headerNav .navbar-brand img,
  body.sph-seo-layout .sph5-seo-logo img{
    max-width:132px!important;
    max-height:38px!important;
  }
  .sph-premium-home .navbar-custom .navbar-collapse,
  #headerNav .navbar-collapse,
  body.sph-seo-layout .sph5-seo-nav{
    max-height:calc(100vh - 82px)!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
  }
  /* SEO mobile auth stack changes flex direction to column; reset the desktop/mobile
     horizontal flex-basis so it cannot become a 140px button height. */
  body.sph-seo-layout .sph5-seo-auth .btn-login,
  body.sph-seo-layout .sph5-seo-auth .sign-up,
  body.sph-seo-layout .sph5-seo-auth .btn-statistics{
    flex:0 0 auto!important;
    width:100%!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .sph-premium-home .navbar-custom *,
  #headerNav *,
  body.sph-seo-layout .sph5-seo-header *{transition:none!important;animation:none!important;}
}

/* Global light-theme integration for the shared public header. */
html[data-sph-theme="light"]{--sph-header-bg:rgba(255,255,255,.92);--sph-header-surface:#fff;--sph-header-border:rgba(21,27,58,.09);--sph-header-border-strong:rgba(21,27,58,.15);--sph-header-text:#12152b;--sph-header-muted:#59617b;--sph-header-violet:#6858ef;--sph-header-cyan:#149f9a}
html[data-sph-theme="light"] .sph-premium-home .navbar-custom,html[data-sph-theme="light"] #headerNav,html[data-sph-theme="light"] body.sph-seo-layout .sph5-seo-header{box-shadow:0 12px 38px rgba(31,40,75,.08)!important}
html[data-sph-theme="light"] .sph-premium-home .navbar-custom .nav-link,html[data-sph-theme="light"] #headerNav .nav-link,html[data-sph-theme="light"] body.sph-seo-layout .sph5-seo-nav a{color:#59617b!important}html[data-sph-theme="light"] .sph-premium-home .navbar-custom .nav-link:hover,html[data-sph-theme="light"] #headerNav .nav-link:hover,html[data-sph-theme="light"] body.sph-seo-layout .sph5-seo-nav a:hover{color:#171c34!important;background:rgba(104,88,239,.06)!important}
html[data-sph-theme="light"] #headerNav .site-logo{display:block!important}html[data-sph-theme="light"] #headerNav .site-logo-white{display:none!important}html[data-sph-theme="dark"] #headerNav .site-logo{display:none!important}html[data-sph-theme="dark"] #headerNav .site-logo-white{display:block!important}