/* =============================================================================
   UI FORCE — sticky mobile nav + green WA all modes + FIXED mobile WA
   FULL FILE FORCE v=force3
   Nav "WhatsApp" on desktop matches Setup Desk on WhatsApp green.
   Loads LAST.
   ============================================================================= */

:root{
  --zatra-wa-green:#067647;
  --zatra-wa-green-hover:#05603b;
}

/* --------------------------------------------------------------------------
   1) MOBILE NAV — fixed (page scrolls underneath)
   -------------------------------------------------------------------------- */
@media (max-width:980px){
  html.in-wix-frame .topbar,
  html.in-wix-frame body .topbar,
  html.in-wix-frame header.topbar,
  html body.in-wix-frame .topbar,
  html body .topbar,
  html body header.topbar,
  html body .topbar.topbar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    z-index:2000!important;
    transform:none!important;
    -webkit-transform:none!important;
    will-change:auto!important;
    background:rgba(255,255,255,.96)!important;
    backdrop-filter:saturate(180%) blur(16px)!important;
    -webkit-backdrop-filter:saturate(180%) blur(16px)!important;
    box-shadow:0 10px 28px rgba(16,24,40,.10)!important;
    border-bottom:1px solid rgba(231,233,238,.92)!important;
  }

  html body .topbar .nav,
  html body .topbar .container.nav{
    position:relative!important;
    z-index:2001!important;
  }

  /* Must beat nav-wix-fix html.in-wix-frame body{padding-top:0} */
  html.in-wix-frame body,
  html body.in-wix-frame,
  html.in-wix-frame body.home-page,
  html body{
    padding-top:calc(var(--zatra-topbar-height,72px) + env(safe-area-inset-top,0px))!important;
    /* WA clearance moved into dark footer — avoids white empty band under footer */
    padding-bottom:0!important;
  }

  html body .zatra-premium-footer{
    padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))!important;
    background:#07080b!important;
  }

  html.in-wix-frame body,
  html body.in-wix-frame{
    padding-bottom:0!important;
  }

  html.in-wix-frame body .zatra-premium-footer,
  html body.in-wix-frame .zatra-premium-footer{
    padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))!important;
  }

  html body .topbar + *,
  html body .home-carousel-section,
  html body #home-carousel,
  html body main,
  html body #main{
    scroll-margin-top:var(--zatra-topbar-height,72px)!important;
  }
}

/* --------------------------------------------------------------------------
   2) WHATSAPP GREEN — all modes (desktop + mobile)
   -------------------------------------------------------------------------- */
html body .floating-whatsapp,
html body a.floating-whatsapp,
html body a.floating-whatsapp.js-wa,
html body.show-sticky .floating-whatsapp,
html body .btn.js-wa,
html body a.btn.js-wa,
html body .btn-primary.js-wa,
html body a.btn-primary.js-wa,
html body .nav-cta .btn.js-wa{
  background:var(--zatra-wa-green,var(--green,#067647))!important;
  background-color:var(--zatra-wa-green,var(--green,#067647))!important;
  background-image:none!important;
  border-color:var(--zatra-wa-green,var(--green,#067647))!important;
  color:#fff!important;
  box-shadow:0 14px 34px rgba(6,118,71,.28)!important;
}

html body .floating-whatsapp:hover,
html body a.floating-whatsapp:hover,
html body .btn.js-wa:hover,
html body a.btn.js-wa:hover,
html body .btn-primary.js-wa:hover{
  background:var(--zatra-wa-green-hover,#05603b)!important;
  background-color:var(--zatra-wa-green-hover,#05603b)!important;
  border-color:var(--zatra-wa-green-hover,#05603b)!important;
  color:#fff!important;
}

/* Desktop floating WA pill */
@media (min-width:981px){
  html body .floating-whatsapp,
  html body a.floating-whatsapp,
  html body a.floating-whatsapp.js-wa,
  html body.show-sticky .floating-whatsapp{
    position:fixed!important;
    right:20px!important;
    bottom:20px!important;
    left:auto!important;
    top:auto!important;
    z-index:96!important;
    display:inline-flex!important;
    width:auto!important;
    min-height:52px!important;
    margin:0!important;
    padding:14px 20px!important;
    border-radius:999px!important;
    font-weight:900!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
  }

  /* Nav bar "WhatsApp" = same green as "Setup Desk on WhatsApp" */
  html body .topbar .nav-cta a.btn.js-wa,
  html body .topbar .nav-cta a.btn.btn-primary.js-wa,
  html body .topbar .nav-cta a[data-track="nav-whatsapp"],
  html body .nav-cta a.btn.js-wa,
  html body .nav-cta a.btn.btn-primary.js-wa,
  html body .nav-cta a[data-track="nav-whatsapp"],
  html body header .nav-cta .btn-primary.js-wa{
    background:var(--zatra-wa-green,var(--green,#067647))!important;
    background-color:var(--zatra-wa-green,var(--green,#067647))!important;
    background-image:none!important;
    border:1px solid var(--zatra-wa-green,var(--green,#067647))!important;
    border-color:var(--zatra-wa-green,var(--green,#067647))!important;
    color:#fff!important;
    box-shadow:0 10px 26px rgba(6,118,71,.28)!important;
  }

  html body .topbar .nav-cta a.btn.js-wa:hover,
  html body .topbar .nav-cta a.btn.btn-primary.js-wa:hover,
  html body .topbar .nav-cta a[data-track="nav-whatsapp"]:hover,
  html body .nav-cta a.btn.js-wa:hover,
  html body .nav-cta a[data-track="nav-whatsapp"]:hover{
    background:var(--zatra-wa-green-hover,#05603b)!important;
    background-color:var(--zatra-wa-green-hover,#05603b)!important;
    border-color:var(--zatra-wa-green-hover,#05603b)!important;
    color:#fff!important;
  }
}

/* --------------------------------------------------------------------------
   3) MOBILE — "Setup Desk on WhatsApp" FIXED while page scrolls
   -------------------------------------------------------------------------- */
@media (max-width:980px){
  html body .floating-whatsapp,
  html body a.floating-whatsapp,
  html body a.floating-whatsapp.js-wa,
  html body.show-sticky .floating-whatsapp,
  html body.show-sticky a.floating-whatsapp,
  html.in-wix-frame body .floating-whatsapp,
  html body.in-wix-frame .floating-whatsapp,
  body .floating-whatsapp[data-track="floating-whatsapp"]{
    position:fixed!important;
    left:18px!important;
    right:18px!important;
    bottom:calc(14px + env(safe-area-inset-bottom,0px))!important;
    top:auto!important;
    inset:auto 18px calc(14px + env(safe-area-inset-bottom,0px)) 18px!important;
    z-index:1900!important;
    display:flex!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    min-height:54px!important;
    margin:0!important;
    padding:15px 18px!important;
    justify-content:center!important;
    align-items:center!important;
    gap:10px!important;
    border-radius:16px!important;
    background:var(--zatra-wa-green,var(--green,#067647))!important;
    background-color:var(--zatra-wa-green,var(--green,#067647))!important;
    color:#fff!important;
    box-shadow:0 14px 34px rgba(6,118,71,.30)!important;
    box-sizing:border-box!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
    transition:none!important;
    float:none!important;
  }

  html body .floating-whatsapp .svg,
  html body .floating-whatsapp svg{
    width:20px!important;
    height:20px!important;
    flex:0 0 auto!important;
    color:#fff!important;
    fill:none!important;
    stroke:currentColor!important;
  }

  html body .mobile-action-bar,
  html body.show-sticky .mobile-action-bar,
  html body .sticky-conversion-bar{
    display:none!important;
    opacity:0!important;
    pointer-events:none!important;
  }
}


/* NAV WHATSAPP DESKTOP GREEN FORCE — force3 */
@media (min-width:981px){
  html body .topbar .nav-cta a[data-track="nav-whatsapp"],
  html body .topbar .nav-cta a.btn.btn-primary.js-wa[data-track="nav-whatsapp"],
  html body header.topbar .nav-cta a.btn-primary.js-wa,
  html body .nav .nav-cta a.btn.js-wa{
    background:#067647!important;
    background-color:#067647!important;
    background-image:none!important;
    border-color:#067647!important;
    color:#fff!important;
    box-shadow:0 10px 26px rgba(6,118,71,.28)!important;
  }
  html body .topbar .nav-cta a[data-track="nav-whatsapp"]:hover,
  html body .topbar .nav-cta a.btn.btn-primary.js-wa[data-track="nav-whatsapp"]:hover{
    background:#05603b!important;
    background-color:#05603b!important;
    border-color:#05603b!important;
    color:#fff!important;
  }
}