/* =============================================================================
   Mobile polish — selects, notice scroll, spacing cleanup
   Loads last. Desktop (≥981px) mostly untouched except select sheet.
   ============================================================================= */

/* ---- Custom select (all viewports; fixes iframe / phone-frame overflow) ---- */
.zatra-select{
  position:relative!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  z-index:2;
}
.zatra-select-native{
  position:absolute!important;
  left:0!important;
  top:0!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  clip:rect(0,0,0,0)!important;
}
.zatra-select-trigger{
  appearance:none!important;
  -webkit-appearance:none!important;
  display:flex!important;
  align-items:center!important;
  width:100%!important;
  max-width:100%!important;
  min-height:48px!important;
  margin:0!important;
  padding:12px 42px 12px 14px!important;
  border:1px solid #d0d5dd!important;
  border-radius:14px!important;
  background-color:#fff!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:right 14px center!important;
  background-size:16px 16px!important;
  color:#101828!important;
  font:650 15px/1.3 Inter,system-ui,sans-serif!important;
  text-align:left!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  box-sizing:border-box!important;
  cursor:pointer!important;
  box-shadow:none!important;
}
.zatra-select-trigger:focus-visible,
.zatra-select-trigger[aria-expanded="true"]{
  outline:none!important;
  border-color:rgba(237,0,0,.55)!important;
  box-shadow:0 0 0 3px rgba(237,0,0,.12)!important;
}
.estimator-command .zatra-select-trigger,
#fee-calculator .zatra-select-trigger{
  min-height:52px!important;
  background-color:#fff!important;
}

html.zatra-select-open,
body.zatra-select-open{
  overflow:hidden!important;
}

.zatra-select-sheet{
  position:fixed!important;
  inset:0!important;
  z-index:2147483000!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:opacity .18s ease, visibility .18s ease!important;
}
.zatra-select-sheet.is-open{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
.zatra-select-sheet-backdrop{
  position:absolute!important;
  inset:0!important;
  background:rgba(7,17,31,.5)!important;
}
.zatra-select-sheet-panel{
  position:relative!important;
  z-index:1!important;
  width:100%!important;
  max-width:560px!important;
  max-height:min(78dvh, 680px)!important;
  display:flex!important;
  flex-direction:column!important;
  margin:0!important;
  border-radius:22px 22px 0 0!important;
  background:#fff!important;
  box-shadow:0 -20px 60px rgba(7,17,31,.28)!important;
  transform:translateY(100%)!important;
  transition:transform .24s cubic-bezier(.2,.8,.2,1)!important;
  overflow:hidden!important;
}
.zatra-select-sheet.is-open .zatra-select-sheet-panel{
  transform:translateY(0)!important;
}
.zatra-select-sheet-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  flex:0 0 auto!important;
  padding:14px 16px!important;
  border-bottom:1px solid #eaecf0!important;
  background:#fff!important;
}
.zatra-select-sheet-title{
  font:800 1rem/1.2 Montserrat,Inter,sans-serif!important;
  letter-spacing:-.02em!important;
  color:#101828!important;
}
.zatra-select-sheet-close{
  appearance:none!important;
  border:0!important;
  width:36px!important;
  height:36px!important;
  border-radius:999px!important;
  background:#f2f4f7!important;
  color:#101828!important;
  font-size:22px!important;
  line-height:1!important;
  cursor:pointer!important;
}
.zatra-select-sheet-list{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain!important;
  touch-action:pan-y!important;
  padding:8px 10px calc(18px + env(safe-area-inset-bottom,0px))!important;
}
.zatra-select-option{
  appearance:none!important;
  display:block!important;
  width:100%!important;
  margin:0 0 6px!important;
  padding:13px 14px!important;
  border:1px solid transparent!important;
  border-radius:14px!important;
  background:#f8fafc!important;
  color:#101828!important;
  font:650 14.5px/1.35 Inter,system-ui,sans-serif!important;
  text-align:left!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
  cursor:pointer!important;
  box-sizing:border-box!important;
}
.zatra-select-option.is-selected,
.zatra-select-option:hover,
.zatra-select-option:focus-visible{
  background:#fff1f2!important;
  border-color:rgba(237,0,0,.22)!important;
  color:#890009!important;
  outline:none!important;
}

@media (min-width:981px){
  .zatra-select-sheet{align-items:center!important;padding:24px!important}
  .zatra-select-sheet-panel{
    border-radius:22px!important;
    max-height:min(70vh,560px)!important;
    transform:translateY(16px) scale(.98)!important;
  }
  .zatra-select-sheet.is-open .zatra-select-sheet-panel{
    transform:none!important;
  }
}

@media (max-width:980px){
  /* ---- Live notice: scrollable card inside viewport ---- */
  .zatra-live-popup,
  .zatra-notice-bar.zatra-live-popup{
    position:fixed!important;
    inset:auto!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    left:0!important;
    width:100%!important;
    max-width:100%!important;
    height:100%!important;
    max-height:100dvh!important;
    margin:0!important;
    padding:calc(64px + env(safe-area-inset-top,0px)) 12px 12px!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:center!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    background:rgba(16,24,40,.42)!important;
    backdrop-filter:blur(10px)!important;
    -webkit-backdrop-filter:blur(10px)!important;
    z-index:2000!important;
    box-sizing:border-box!important;
    transform:none!important;
  }
  .zatra-live-popup:not(.is-open),
  .zatra-notice-bar.zatra-live-popup:not(.is-open){
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
  .zatra-live-popup.is-open,
  .zatra-notice-bar.zatra-live-popup.is-open{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  .zatra-live-popup .zatra-notice-inner,
  .zatra-notice-bar.zatra-live-popup .zatra-notice-inner{
    width:100%!important;
    max-width:420px!important;
    max-height:min(78dvh, 640px)!important;
    margin:0 auto!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    padding:14px!important;
    border-radius:18px!important;
    box-sizing:border-box!important;
  }
  .zatra-live-popup .zatra-notice-copy,
  .zatra-live-popup .zatra-notice-copy p{
    white-space:normal!important;
    overflow-wrap:break-word!important;
  }
  .zatra-live-popup .zatra-notice-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    width:100%!important;
    padding:0!important;
  }
  .zatra-live-popup .zatra-notice-link{
    width:100%!important;
    min-height:44px!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    justify-content:center!important;
  }

  /* ---- Nav accordion scroll ---- */
  #primary-nav.navlinks.is-open,
  .topbar .navlinks.is-open{
    max-height:min(78dvh, calc(100dvh - 60px))!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
  }

  /* ---- Kill excess top / bottom empty space ---- */
  :root{
    --zatra-mobile-section-y:28px!important;
    --section-y:28px!important;
  }
  body{
    padding-bottom:12px!important;
  }
  html.in-wix-frame body,
  body.in-wix-frame{
    padding-bottom:0!important;
  }
  .page-intro-section,
  .section{
    padding-top:var(--zatra-mobile-section-y)!important;
    padding-bottom:var(--zatra-mobile-section-y)!important;
  }
  .page-hero-fill,
  #page-overview.page-hero-fill,
  #pricing-overview.page-hero-fill,
  .legal-hero.page-hero-fill{
    padding-top:clamp(58px,12vw,76px)!important;
    padding-bottom:clamp(22px,5vw,34px)!important;
  }
  .zatra-premium-footer{
    padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))!important;
    background:#07080b!important;
  }
  html.in-wix-frame .zatra-premium-footer,
  body.in-wix-frame .zatra-premium-footer{
    padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))!important;
  }
  .zatra-premium-footer .zatra-footer-shell{
    padding-top:28px!important;
    padding-bottom:20px!important;
  }
  .floating-whatsapp{
    margin-bottom:16px!important;
  }
  .page-flow-nav{
    margin-top:8px!important;
    margin-bottom:8px!important;
    padding-top:8px!important;
    padding-bottom:8px!important;
  }
  #contact .cta-wrap,
  #contact #setup-form,
  #contact .cta-wrap form{
    overflow:visible!important;
  }
  #contact .form-grid{
    overflow:visible!important;
  }
}

@media (max-width:680px){
  .page-hero-fill,
  #page-overview.page-hero-fill,
  #pricing-overview.page-hero-fill,
  .legal-hero.page-hero-fill{
    padding-top:clamp(52px,14vw,68px)!important;
    padding-bottom:clamp(18px,5vw,28px)!important;
  }
  .section,
  .page-intro-section{
    padding-top:24px!important;
    padding-bottom:24px!important;
  }
}