/* JUST AQAR — unified app/PWA hero layout v3 — strict mobile scope
   Scope: installed/native app and PWA only.
   Desktop/browser header and layout remain unchanged.
*/

.ja-login-app-hero{display:none;}

html.ja-app-page-hero-mode.ja-mobile-app-confirmed{
  --ja-app-page-top-gap:0px;
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  background:#02343a!important;
  overflow-x:hidden!important;
}

html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page{
  width:100%!important;
  max-width:100%!important;
  min-height:100dvh!important;
  margin:0!important;
  padding:0!important;
  background:#02343a!important;
  overflow-x:hidden!important;
}

/* Hide only the shared top header in app/PWA mode. */
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page > header,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page header.app-header,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page .app-header,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page .mobile-header,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page .main-header,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page .site-header,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page .site-app-header,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page .app-top-header,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page .app-topbar,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page [data-app-header],
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page #appHeader,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page #app-header,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page #mobileHeader,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page .app-header-spacer,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page .header-spacer,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page .top-header-spacer,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page .app-top-spacer,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page .safe-area-top-spacer,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page [data-header-spacer],
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page [data-app-header-spacer]{
  display:none!important;
  position:static!important;
  width:0!important;
  height:0!important;
  min-width:0!important;
  min-height:0!important;
  max-width:0!important;
  max-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  opacity:0!important;
  visibility:hidden!important;
  overflow:hidden!important;
  pointer-events:none!important;
}

/* Keep sidebar/drawer out of the visual flow when there is no header menu button. */
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page > .app-sidebar,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page > .mobile-drawer,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page > #mobileDrawer{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page [data-ja-app-main]{
  box-sizing:border-box!important;
  position:relative!important;
  width:100%!important;
  max-width:100%!important;
  min-height:100dvh!important;
  margin-top:calc(-1 * var(--ja-app-page-top-gap, 0px))!important;
  margin-right:0!important;
  margin-left:0!important;
  padding-top:0!important;
  padding-bottom:calc(94px + env(safe-area-inset-bottom, 0px))!important;
  right:auto!important;
  left:auto!important;
  top:auto!important;
  transform:none!important;
  background:#f4f8f7!important;
  overflow-x:hidden!important;
}

/* Full-bleed hero that replaces the shared header. */
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page [data-ja-app-hero]{
  box-sizing:border-box!important;
  position:relative!important;
  z-index:3!important;
  display:block!important;
  width:100vw!important;
  max-width:100vw!important;
  min-height:142px!important;
  margin-top:0!important;
  margin-bottom:16px!important;
  margin-right:calc(50% - 50vw)!important;
  margin-left:calc(50% - 50vw)!important;
  padding:
    calc(env(safe-area-inset-top, 0px) + 20px)
    16px
    20px!important;
  border:0!important;
  border-radius:0 0 28px 28px!important;
  background:
    radial-gradient(circle at 12% 0%, rgba(42,208,103,.28), transparent 35%),
    linear-gradient(135deg, #02343a 0%, #02403c 58%, #029990 145%)!important;
  box-shadow:0 12px 28px rgba(2,52,58,.16)!important;
  color:#fff!important;
  overflow:hidden!important;
  transform:none!important;
}

html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page [data-ja-app-hero]::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  top:-78px!important;
  left:-55px!important;
  width:210px!important;
  height:210px!important;
  border-radius:50%!important;
  background:radial-gradient(circle, rgba(42,208,103,.22), transparent 68%)!important;
  pointer-events:none!important;
}

html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page [data-ja-app-hero]::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  right:-45px!important;
  bottom:-90px!important;
  width:210px!important;
  height:210px!important;
  border-radius:50%!important;
  background:radial-gradient(circle, rgba(255,255,255,.12), transparent 68%)!important;
  pointer-events:none!important;
}

html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page [data-ja-app-hero] > *{
  position:relative!important;
  z-index:2!important;
}

html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page [data-ja-app-hero] h1,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page [data-ja-app-hero] h2,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page [data-ja-app-hero] .main-title,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page [data-ja-app-hero] .request-hero-text h1,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page [data-ja-app-hero] .services-hero-text h1,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page [data-ja-app-hero] .faq-title,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page [data-ja-app-hero] .terms-title,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page [data-ja-app-hero] .broker-title,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page [data-ja-app-hero] .profile-screen-title{
  margin-top:0!important;
  margin-bottom:6px!important;
  color:#fff!important;
  font-size:22px!important;
  font-weight:900!important;
  line-height:1.35!important;
  text-shadow:none!important;
}

html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page [data-ja-app-hero] p,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page [data-ja-app-hero] .hero-desc,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page [data-ja-app-hero] .faq-subtitle,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page [data-ja-app-hero] .terms-subtitle,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page [data-ja-app-hero] .broker-subtitle,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page [data-ja-app-hero] .profile-screen-subtitle{
  display:-webkit-box!important;
  max-width:720px!important;
  margin:0!important;
  overflow:hidden!important;
  color:rgba(255,255,255,.82)!important;
  font-size:12px!important;
  line-height:1.75!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
}

html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page [data-ja-app-hero] .hero-badge,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page [data-ja-app-hero] .faq-hero-badge,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page [data-ja-app-hero] .broker-hero-badge,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page [data-ja-app-hero] .notifications-kicker,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page [data-ja-app-hero] .profile-screen-kicker,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page [data-ja-app-hero] .ja-app-hero-kicker{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  width:auto!important;
  min-height:28px!important;
  margin:0 0 9px!important;
  padding:4px 10px!important;
  border:1px solid rgba(255,255,255,.22)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.13)!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:800!important;
  line-height:1.2!important;
  box-shadow:none!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
}

/* Compact app hero: decorative large icons are desktop-only. */
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-client-request-page .request-icon-wrap,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-services-page .services-icon-wrap,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-notifications-page .notifications-hero-icon{
  display:none!important;
  width:0!important;
  height:0!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}

/* Request + Services: title on right, compact stat on left. */
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-client-request-page .request-hero-content,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-services-page .services-hero-content{
  position:relative!important;
  z-index:2!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:12px!important;
  width:100%!important;
  min-height:102px!important;
}

html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-client-request-page .request-hero-right,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-services-page .services-hero-right{
  display:block!important;
  width:100%!important;
  min-width:0!important;
}

html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-client-request-page .request-hero-left,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-services-page .services-hero-left{
  display:block!important;
  min-width:0!important;
}

html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-client-request-page .request-stat-box,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-services-page .services-stat-box,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-notifications-page .notifications-stat{
  min-width:72px!important;
  width:auto!important;
  margin:0!important;
  padding:10px 11px!important;
  border:1px solid rgba(255,255,255,.25)!important;
  border-radius:17px!important;
  background:rgba(255,255,255,.14)!important;
  color:#fff!important;
  box-shadow:none!important;
  text-align:center!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
}

html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-client-request-page .request-stat-box span,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-services-page .services-stat-box span,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-notifications-page .notifications-stat span{
  display:block!important;
  margin:0 0 4px!important;
  color:rgba(255,255,255,.78)!important;
  font-size:10px!important;
  white-space:nowrap!important;
}

html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-client-request-page .request-stat-box strong,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-services-page .services-stat-box strong,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-notifications-page .notifications-stat strong{
  display:block!important;
  margin:0!important;
  color:#fff!important;
  font-size:18px!important;
  line-height:1.1!important;
}

/* Notifications hero layout. */
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-notifications-page .notifications-hero{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:12px!important;
}
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-notifications-page .notifications-hero-title{
  display:block!important;
  min-width:0!important;
}

/* Bank / FAQ / Terms / Privacy / Brokers are compact stacked heroes. */
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-bank-page .bankcalc-hero,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-faq-page .faq-hero,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-terms-page .terms-hero,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-privacy-page .terms-hero,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-brokers-page .broker-hero{
  text-align:right!important;
}

html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-bank-page .bankcalc-main .page-container,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-faq-page .faq-shell,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-terms-page .terms-shell,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-privacy-page .terms-shell,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-brokers-page .broker-shell{
  width:100%!important;
  max-width:100%!important;
  margin-top:0!important;
  padding-top:0!important;
}

/* Profile top block becomes the app hero. */
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-profile-page .profile-screen{
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding-top:0!important;
}
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-profile-page .profile-screen-top{
  display:flex!important;
  align-items:center!important;
  min-height:142px!important;
}
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-profile-page .profile-screen-intro{
  width:100%!important;
  max-width:720px!important;
  margin:0!important;
}

/* App-only login hero. Desktop uses the original login card unchanged. */
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-login-page .ja-login-app-hero{
  display:block!important;
}
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-login-page .login-main-only[data-ja-app-main]{
  display:block!important;
  height:auto!important;
  min-height:100dvh!important;
  padding-right:0!important;
  padding-left:0!important;
  overflow:visible!important;
}
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-login-page .login-page-block{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:520px!important;
  margin:0 auto!important;
  padding:0 14px!important;
}
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-login-page .login-form-panel{
  padding:0!important;
}
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-login-page .login-card-box{
  animation:none!important;
  transform:none!important;
  margin:0 auto!important;
}
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-login-page .ja-login-app-hero h1{
  margin:0 0 6px!important;
}

/* Prevent inherited top gaps/pseudo spacers. */
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page::before,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page::after,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page [data-ja-app-main]::before,
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page [data-ja-app-main]::after{
  content:none!important;
  display:none!important;
}

@media (max-width:420px){
  html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page [data-ja-app-hero]{
    min-height:136px!important;
    padding-right:14px!important;
    padding-left:14px!important;
    border-radius:0 0 24px 24px!important;
  }
  html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page [data-ja-app-hero] h1,
  html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page [data-ja-app-hero] .main-title,
  html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page [data-ja-app-hero] .faq-title,
  html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page [data-ja-app-hero] .terms-title,
  html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page [data-ja-app-hero] .broker-title,
  html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page [data-ja-app-hero] .profile-screen-title{
    font-size:20px!important;
  }
}


/* =========================================================
   v3 — Fixed app hero (acts like the native header)
   Active only when strict mobile app/PWA classes are present.
   ========================================================= */
html.ja-app-page-hero-mode.ja-mobile-app-confirmed{
  --ja-app-fixed-hero-height:158px;
}

html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page [data-ja-app-main]{
  margin-top:0!important;
  padding-top:calc(var(--ja-app-fixed-hero-height, 158px) + 16px)!important;
  scroll-padding-top:calc(var(--ja-app-fixed-hero-height, 158px) + 16px)!important;
}

html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page [data-ja-app-hero]{
  position:fixed!important;
  inset:0 0 auto 0!important;
  top:0!important;
  right:0!important;
  left:0!important;
  z-index:10020!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  transform:translateZ(0)!important;
  -webkit-transform:translateZ(0)!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  isolation:isolate!important;
}

html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page [id],
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-app-hero-page [name]{
  scroll-margin-top:calc(var(--ja-app-fixed-hero-height, 158px) + 18px)!important;
}

/* Login content also starts below the fixed hero. */
html.ja-app-page-hero-mode.ja-mobile-app-confirmed body.ja-login-page .login-main-only[data-ja-app-main]{
  padding-top:calc(var(--ja-app-fixed-hero-height, 158px) + 16px)!important;
}