/* PWA-3 Native Client App Experience */
:root{
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --app-bg:#06111f;
  --app-card:#07172a;
  --app-line:rgba(101,213,255,.18);
  --app-text:#eaf5ff;
  --app-muted:#bcd0e8;
}
html,body{
  min-height:100%!important;
  height:auto!important;
  max-width:100%!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  background:var(--app-bg)!important;
}
*{box-sizing:border-box}
body.client-pwa-mode{
  min-height:100%!important;
  height:auto!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior-y:auto!important;
  touch-action:pan-y!important;
  -webkit-tap-highlight-color:transparent!important;
}

/* Make portal feel app-only */
body.client-pwa-mode a[href="/"],
body.client-pwa-mode a[href="/index.php"],
body.client-pwa-mode a[href="../"],
body.client-pwa-mode a[href*="pricing.php"],
body.client-pwa-mode a[href*="order.php"]:not([href*="/client/"]),
body.client-pwa-mode a[href*="partner-academy.php"],
body.client-pwa-mode a[href*="/ref/"]{
  display:none!important;
}

body.client-pwa-mode .shell,
body.client-pwa-mode main,
body.client-pwa-mode .panel,
body.client-pwa-mode .card{
  height:auto!important;
  max-height:none!important;
}

body.client-pwa-mode main{
  padding-bottom:calc(98px + var(--safe-bottom))!important;
}

/* Clean native header */
body.client-pwa-mode:before{
  content:"Archietalicinfo Portal";
  position:sticky;
  top:0;
  z-index:9998;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  margin:0 -14px 14px;
  padding:calc(12px + var(--safe-top)) 14px 12px;
  background:rgba(4,11,22,.98);
  border-bottom:1px solid var(--app-line);
  color:var(--app-text);
  font-weight:900;
  letter-spacing:.3px;
  backdrop-filter:blur(18px);
}

/* Hide the old tip from PWA1 */
.pwa-install-tip{display:none!important}

/* Premium install modal */
#atiInstallShade{
  position:fixed;
  inset:0;
  z-index:2147483600;
  display:none;
  background:rgba(0,0,0,.58);
  backdrop-filter:blur(7px);
}
#atiInstallModal{
  position:fixed;
  left:14px;
  right:14px;
  bottom:calc(94px + var(--safe-bottom));
  z-index:2147483601;
  display:none;
  max-width:480px;
  margin:auto;
  border-radius:28px;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(7,23,42,.98),rgba(18,31,67,.98));
  border:1px solid rgba(101,213,255,.24);
  box-shadow:0 28px 90px rgba(0,0,0,.62);
  color:var(--app-text);
}
body.show-ati-install #atiInstallShade,
body.show-ati-install #atiInstallModal{
  display:block;
}
#atiInstallModal .install-hero{
  padding:22px 20px 16px;
  text-align:center;
}
#atiInstallModal .app-icon{
  width:76px;
  height:76px;
  margin:0 auto 12px;
  border-radius:22px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#2cc9ff,#7357ff);
  box-shadow:0 14px 36px rgba(44,201,255,.22);
}
#atiInstallModal .app-icon img{
  width:54px;
  height:54px;
  object-fit:contain;
}
#atiInstallModal h2{
  margin:0 0 8px;
  font-size:24px;
  line-height:1.12;
}
#atiInstallModal p{
  margin:0 auto;
  max-width:360px;
  color:var(--app-muted);
  font-size:15px;
  line-height:1.55;
}
#atiInstallModal .benefits{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:0 18px 16px;
}
#atiInstallModal .benefit{
  border-radius:16px;
  padding:10px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(101,213,255,.12);
  font-weight:800;
  font-size:13px;
  color:#dcecff;
}
#atiInstallModal .install-actions{
  display:grid;
  gap:10px;
  padding:0 18px 18px;
}
#atiInstallNow{
  width:100%;
  min-height:50px;
  border:0;
  border-radius:17px;
  background:linear-gradient(135deg,#2cc9ff,#7357ff);
  color:#061121;
  font-weight:950;
  font-size:16px;
}
#atiInstallLater{
  width:100%;
  min-height:46px;
  border-radius:16px;
  border:1px solid rgba(101,213,255,.18);
  background:rgba(255,255,255,.045);
  color:#dcecff;
  font-weight:900;
}
#atiInstallModal .manual{
  display:block;
  padding:0 18px 18px;
  color:#9fb9d9;
  font-size:12.5px;
  line-height:1.45;
  text-align:center;
}

/* Login page install badge */
.ati-login-install-badge{
  display:none;
  margin:0 auto 14px;
  max-width:420px;
  padding:12px 14px;
  border-radius:18px;
  background:rgba(44,201,255,.10);
  border:1px solid rgba(101,213,255,.18);
  color:#dcecff;
  font-weight:850;
  line-height:1.45;
  text-align:center;
}
.ati-login-install-badge button{
  margin-top:9px;
  width:100%;
  min-height:44px;
  border:0;
  border-radius:14px;
  background:linear-gradient(135deg,#2cc9ff,#7357ff);
  color:#061121;
  font-weight:950;
}

@media(max-width:980px){
  body.client-pwa-mode .ati-login-install-badge{
    display:block;
  }
}

@media all and (display-mode: standalone){
  #atiInstallModal,#atiInstallShade,.ati-login-install-badge{display:none!important}
}