/* ============================================================
   Karhoosh web-app layer (PWA) — 1405-08-08
   1) Welcome screen (app.php)  2) Mobile tab bar  3) Install sheet
   4) Standalone-mode tweaks     5) Login / register polish
   Rollback: remove the <link> to this file in includes/header.php
   ============================================================ */

/* ---------- 1) Welcome screen (minimal) ---------- */
body.kh-app-welcome,body.kh-app-welcome *,html body .kh-install,html body .kh-install *{font-family:'Karhoosh Yekan',Tahoma,sans-serif!important}
body.kh-app-welcome{margin:0;min-height:100vh;min-height:100dvh;background:#F5F6F8;color:#0E1B3D;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.kh-app-welcome *{box-sizing:border-box}
.kw{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;max-width:480px;margin:0 auto;background:#F5F6F8}
.kw-hero{position:relative;overflow:hidden;padding:calc(env(safe-area-inset-top) + 30px) 24px 0;text-align:center;color:#fff;background:radial-gradient(90% 55% at 50% 100%,rgba(18,185,200,.35),transparent 70%),linear-gradient(180deg,#071A4A 0%,#0A3BAA 62%,#0C54DE 100%)}
.kw-logo{width:112px;height:auto;display:block;margin:0 auto 22px}
.kw-hero h1{margin:0 auto 10px;max-width:320px;font-size:clamp(25px,7vw,30px);line-height:1.5;font-weight:800;letter-spacing:-.3px}
.kw-hero h1 em{font-style:normal;color:#8BF2FA}
.kw-lead{margin:0 auto 26px;max-width:300px;font-size:15px;line-height:1.9;color:rgba(255,255,255,.78)}
/* phone mockup */
.kw-phone{position:relative;margin:0 auto -1px;width:min(258px,72vw);height:300px;padding:9px 9px 0;border-radius:40px 40px 0 0;background:#0B1328;box-shadow:0 -1px 0 rgba(255,255,255,.18) inset,0 30px 60px -20px rgba(0,0,0,.55);overflow:hidden}
.kw-phone::before{content:"";position:absolute;top:15px;left:50%;width:70px;height:20px;margin-left:-35px;border-radius:12px;background:#0B1328;z-index:2}
.kw-screen{height:100%;border-radius:32px 32px 0 0;background:#F5F6F8;padding:40px 12px 0;text-align:right;color:#0E1B3D;position:relative;overflow:hidden}
.kw-s-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.kw-s-title{font-size:13px;font-weight:800}
.kw-s-card{background:#fff;border-radius:16px;padding:11px 12px 0;margin-bottom:8px;box-shadow:0 1px 2px rgba(14,27,61,.05),0 8px 20px -14px rgba(14,27,61,.25)}
.kw-s-card small{display:block;font-size:10px;color:#5E6884}
.kw-s-card strong{display:block;font-size:17px;font-weight:800;margin:2px 0}
.kw-s-card strong i{font-style:normal;font-size:10px;font-weight:600;color:#5E6884}
.kw-s-pl{display:inline-block;font-size:10px;font-weight:700;color:#15803D;background:#E9F7EF;border-radius:999px;padding:2px 8px}
.kw-s-chart{display:block;width:calc(100% + 24px);height:46px;margin:6px -12px 0}
.kw-s-advice{padding-bottom:6px}
.kw-s-head{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;font-weight:800;margin-bottom:4px}
.kw-s-head em{font-style:normal;font-size:9.5px;font-weight:700;color:#06606A;background:#E6F8FA;border-radius:999px;padding:2px 7px}
.kw-s-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-top:1px solid rgba(14,27,61,.07);font-size:11px}
.kw-s-row b{font-weight:600}
.kw-s-row span{font-size:10px;font-weight:700;border-radius:999px;padding:2px 8px}
.kw-hold{color:#0A4FD1;background:#EAF1FE}.kw-buy{color:#15803D;background:#E9F7EF}.kw-sell{color:#B4232C;background:#FDECEC}
.kw-s-tabs{position:absolute;inset-inline:0;bottom:0;height:34px;background:#fff;border-top:1px solid rgba(14,27,61,.08);display:flex;justify-content:space-around;align-items:center}
.kw-s-tabs i{width:16px;height:16px;border-radius:5px;background:#DDE2EC}.kw-s-tabs i.on{background:#0A4FD1}
.kw-s-tag{font-size:9.5px;font-weight:700;color:#5E6884;background:#E8EBF1;border-radius:999px;padding:2px 8px}
/* bottom sheet */
.kw-sheet{flex:1;position:relative;z-index:2;margin-top:-28px;background:#F5F6F8;border-radius:28px 28px 0 0;padding:26px 22px calc(env(safe-area-inset-bottom) + 22px);box-shadow:0 -12px 30px -18px rgba(7,26,74,.35);display:flex;flex-direction:column;gap:10px}
.kw-btn{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:16px;font-weight:700;font-size:16px;text-decoration:none;transition:transform .15s,background-color .2s}
.kw-btn:active{transform:scale(.98)}
.kw-primary{background:#0A4FD1;color:#fff}.kw-primary:hover{background:#083FAA}
.kw-secondary{background:#fff;color:#0E1B3D;border:1px solid rgba(14,27,61,.12)}
.kw-btn:focus-visible,.kw-legal a:focus-visible{outline:2px solid #0A4FD1;outline-offset:3px}
.kw-trust{list-style:none;margin:8px 0 0;padding:0;display:flex;justify-content:center;gap:18px;flex-wrap:wrap}
.kw-trust li{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:#4A5675}
.kw-trust svg{width:17px;height:17px;fill:none;stroke:#0A4FD1;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.kw-legal{margin:2px 0 0;font-size:11.5px;line-height:1.9;color:#5E6884;text-align:center}
.kw-legal a{color:#0A4FD1;font-weight:600;text-decoration:none}
.kw-hero>*{animation:kw-in .6s ease-out both}.kw-hero>h1{animation-delay:.06s}.kw-hero>.kw-lead{animation-delay:.12s}.kw-phone{animation:kw-rise .8s .18s cubic-bezier(.2,.8,.2,1) both!important}
@keyframes kw-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes kw-rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@media (min-height:820px){.kw-phone{height:340px}}
@media (min-width:700px){.kw{margin-top:24px;border-radius:28px;overflow:hidden;box-shadow:0 30px 80px -40px rgba(7,26,74,.5)}}

/* ---------- 2) Mobile tab bar (logged-in) ---------- */
html body .kh-tabbar{display:none}
@media (max-width:820px){
  html body .kh-tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;inset-inline:0;bottom:0;z-index:900;background:rgba(255,255,255,.97);border-top:1px solid rgba(14,27,61,.1);padding:6px 4px calc(env(safe-area-inset-bottom) + 6px);box-shadow:0 -8px 24px -16px rgba(14,27,61,.25)}
  html body .kh-tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:50px;border-radius:14px;color:#5E6884!important;font-size:11.5px!important;font-weight:600;text-decoration:none!important;position:relative}
  html body .kh-tabbar svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  html body .kh-tabbar a[aria-current=page]{color:#0A4FD1!important}
  html body .kh-tabbar a[aria-current=page] svg{stroke-width:2.2}
  html body .kh-tabbar a:active{background:#EAF1FE}
  html body .kh-tabbar .kha-dot{position:absolute;top:7px;inset-inline-end:calc(50% - 18px);width:9px;height:9px;border-radius:50%;background:#E5484D;border:2px solid #fff}
  html body.kh-has-tabbar{padding-bottom:calc(68px + env(safe-area-inset-bottom))!important}
  html body.kh-has-tabbar .kh-footer{margin-bottom:0!important}
}

/* ---------- 3) Install sheet ---------- */
html body .kh-install{position:fixed;inset-inline:12px;bottom:calc(env(safe-area-inset-bottom) + 12px);z-index:1000;max-width:460px;margin:0 auto;background:#fff;color:#0E1B3D;border-radius:22px;box-shadow:0 20px 50px -12px rgba(7,26,74,.45);padding:18px;display:none;font-size:14px;line-height:1.85;text-align:right}
html body.kh-has-tabbar .kh-install{bottom:calc(env(safe-area-inset-bottom) + 80px)}
html body .kh-install.is-open{display:block;animation:kw-up .28s ease-out}
html body .kh-install-head{display:flex;gap:12px;align-items:center;margin-bottom:10px}
html body .kh-install-head img{width:48px;height:48px;border-radius:12px}
html body .kh-install-head b{display:block;font-size:15.5px}
html body .kh-install-head small{color:#5E6884;font-size:12.5px}
html body .kh-install ol{margin:6px 0 12px;padding-inline-start:20px;color:#4A5675}
html body .kh-install ol li{margin:4px 0}
html body .kh-install .kh-ios-share{display:inline-block;width:18px;height:18px;vertical-align:-3px;stroke:#0A4FD1;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html body .kh-install-actions{display:flex;gap:8px}
html body .kh-install-actions button{flex:1;min-height:46px;border-radius:999px;font:inherit;font-weight:700;font-size:15px;cursor:pointer;border:1px solid rgba(14,27,61,.16);background:#fff;color:#0E1B3D}
html body .kh-install-actions .kh-install-go{background:#0A4FD1;border-color:#0A4FD1;color:#fff}
html body .kh-install-actions button:focus-visible{outline:2px solid #0A4FD1;outline-offset:2px}
@keyframes kw-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- 4) Standalone (installed app) ---------- */
html.kh-standalone body .v51-footer-grid{display:none!important}
html.kh-standalone body .v51-footer-bottom{padding-block:14px!important}
html.kh-standalone body .site-header{padding-top:env(safe-area-inset-top)}
html.kh-standalone body{-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}

/* ---------- 5) Login / register polish ---------- */
html body.kh-shell .kh-auth .kh-auth-trust{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
html body.kh-shell .kh-auth .kh-auth-trust li{display:flex;gap:10px;align-items:center;font-size:13.5px;color:#4A5675}
html body.kh-shell .kh-auth .kh-auth-trust svg{flex:0 0 20px;width:20px;height:20px;fill:none;stroke:#0A4FD1;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
html body.kh-shell .kh-auth .kh-pass{position:relative;display:block}
html body.kh-shell .kh-auth .kh-pass input{padding-inline-end:76px!important}
html body.kh-shell .kh-auth .kh-pass-toggle{position:absolute;inset-inline-end:6px;bottom:6px;min-height:36px;padding:0 12px;border:0;border-radius:10px;background:#EAF1FE;color:#0A4FD1;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
html body.kh-shell .kh-auth button[aria-busy=true]{opacity:.75;pointer-events:none}
html body.kh-shell .kh-auth input{min-height:50px;font-size:16px!important}

@media (prefers-reduced-motion:reduce){.kw *,html body .kh-install.is-open{animation:none!important;transition:none!important}}
html body [data-kh-install][hidden]{display:none!important}
html body.kh-shell #mainMenu > a[data-kh-install][hidden]{display:none!important}