/* Installed app: install card, notification prompt, instructions sheet, offline bar, notification settings */
.bks-appcard{position:fixed;z-index:9990;left:12px;right:12px;bottom:calc(var(--bks-tab,68px) + env(safe-area-inset-bottom,0px) + 12px);display:grid;grid-template-columns:44px 1fr;gap:6px 12px;align-items:center;background:var(--bks-card);color:var(--bks-tx,var(--bks-tx));border:1px solid var(--bks-bd,var(--bks-bd));border-radius:18px;box-shadow:0 10px 34px rgba(20,35,25,.22);padding:14px;max-width:460px;margin:0 auto;transform:translateY(20px);opacity:0;transition:transform .25s ease,opacity .25s ease}
.bks-appcard.is-in{transform:none;opacity:1}
.bks-appcard img{width:44px;height:44px;border-radius:11px;grid-row:1}
.bks-appcard__t{display:flex;flex-direction:column;min-width:0}
.bks-appcard__t strong{font-size:15px;line-height:1.25}
.bks-appcard__t span{font-size:13px;line-height:1.35;color:var(--bks-mu,var(--bks-mu))}
.bks-appcard__a{grid-column:1/-1;display:flex;gap:8px;align-items:center;justify-content:flex-end}
body.bks .bks-appcard .bks-appcard__go{min-height:44px;font-size:15px;padding:0 20px;flex:1}
.bks-appcard__later{min-height:44px;padding:0 14px;font-size:14px;font-weight:500;color:var(--bks-mu,var(--bks-mu))}
@media(min-width:900px){.bks-appcard{left:auto;right:24px;bottom:24px;margin:0;width:400px}}
.bks-appovl{position:fixed;inset:0;z-index:99990;background:rgba(15,25,18,.55);display:flex;align-items:flex-end;justify-content:center;padding:0}
.bks-appsheet{background:var(--bks-card);width:100%;max-width:480px;border-radius:24px 24px 0 0;padding:26px 22px calc(22px + env(safe-area-inset-bottom,0px));text-align:center;color:var(--bks-tx,var(--bks-tx));animation:bksup .25s ease}
@keyframes bksup{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.bks-appsheet img{border-radius:16px;margin:0 auto 6px;display:block}
.bks-appsheet h2{font-size:20px;margin:6px 0 14px}
.bks-appsheet__steps{list-style:none;margin:0 0 18px;padding:0;text-align:left;display:grid;gap:10px}
.bks-appsheet__steps li{display:flex;gap:12px;align-items:center;background:var(--bks-bg,var(--bks-bg));border:1px solid var(--bks-bd,var(--bks-bd));border-radius:14px;padding:12px 14px;font-size:15px;line-height:1.4}
.bks-appsheet__ic{flex:none;width:38px;height:38px;border-radius:10px;background:var(--bks-soft,var(--bks-ge8eee8));color:var(--bks-p,var(--bks-p));display:flex;align-items:center;justify-content:center}
.bks-appsheet .bks-btn{width:100%}
@media(min-width:700px){.bks-appovl{align-items:center}.bks-appsheet{border-radius:24px}}
.bks-offbar{position:fixed;z-index:99995;left:0;right:0;top:0;background:var(--bks-tx);color:var(--bks-on);font-size:14px;text-align:center;padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px}
.bks-installbtn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:14px;border:0;background:var(--bks-p,var(--bks-p));color:var(--bks-on);font:600 17px/1.2 var(--bks-font,system-ui);cursor:pointer}
.bks-installbtn:hover,.bks-installbtn:focus{background:var(--bks-p2,var(--bks-p2));color:var(--bks-on)}
.bks-installed{font-weight:600;color:var(--bks-p,var(--bks-p))}
.bks-pcard{background:var(--bks-card);border:1px solid var(--bks-bd,var(--bks-bd));border-radius:var(--bks-r,24px);box-shadow:var(--bks-sh);padding:20px;max-width:560px}
.bks-pcard__head{display:flex;gap:14px;align-items:center;margin-bottom:8px}
.bks-pcard__head h2{margin:0;font-size:20px}
.bks-pcard__head p{margin:2px 0 0;font-size:14px;font-weight:600;color:var(--bks-mu,var(--bks-mu))}
.bks-pcard[data-state=on] .bks-pcard__head p{color:var(--bks-p,var(--bks-p))}
.bks-pcard__ic{width:46px;height:46px;border-radius:14px;background:var(--bks-soft,var(--bks-ge8eee8));color:var(--bks-p,var(--bks-p));display:flex;align-items:center;justify-content:center}
.bks-pcard__acts{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 4px}
.bks-pcard__opts{display:grid;gap:10px;margin-top:14px}
.bks-pcard__opts label{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--bks-bd,var(--bks-bd));border-radius:14px;cursor:pointer}
.bks-pcard__opts input{width:22px;height:22px;margin-top:2px;accent-color:var(--bks-p,var(--bks-p));flex:none}
.bks-pcard__opts span{display:flex;flex-direction:column}
.bks-pcard__opts small{color:var(--bks-mu,var(--bks-mu));font-size:13px}
.bks-pcard__test{margin-top:12px;min-height:44px;font-weight:600;color:var(--bks-p,var(--bks-p));text-decoration:underline!important}
.bks-pcard__msg{margin:10px 0 0;font-size:14px;min-height:1.2em;color:var(--bks-mu,var(--bks-mu))}
.bks-pcard__msg.is-bad{color:var(--bks-red,var(--bks-red))}
/* when running as the installed app */
html.bks-standalone body.bks{-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
html.bks-standalone body.bks a,html.bks-standalone body.bks button{-webkit-touch-callout:none}
html.bks-standalone .bks-header{padding-top:env(safe-area-inset-top,0px)}
.bks-getapp{max-width:760px;margin:0 auto;padding:32px 16px 48px;text-align:center}
.bks-getapp>img{border-radius:22px;box-shadow:var(--bks-sh)}
.bks-getapp h2{font-size:30px;line-height:1.2;margin:14px 0 8px}
.bks-getapp__lead{color:var(--bks-mu,var(--bks-mu));font-size:17px;max-width:520px;margin:0 auto 18px}
.bks-getapp__warn{background:#fff4e5;border:1px solid #f0c98a;border-radius:14px;padding:12px 14px;font-size:14px;text-align:left}
.bks-getapp__cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;text-align:left;margin:26px 0}
.bks-getapp__cols>div{background:var(--bks-card);border:1px solid var(--bks-bd,var(--bks-bd));border-radius:18px;padding:16px 18px}
.bks-getapp__cols h3{margin:0 0 8px;font-size:17px}
.bks-getapp__cols ol{margin:0;padding-left:20px;font-size:15px;line-height:1.5}
.bks-getapp .bks-pcard{margin:0 auto;text-align:left}
@media(max-width:640px){.bks-getapp__cols{grid-template-columns:1fr}}

/* Installed app only (phones/tablets): the bottom bar looks exactly like the mobile website's floating bar,
   but sits lower, because the app has no browser address bar under it. Nothing here applies outside the installed app. */
@media(max-width:1023px){
 html.bks-standalone body.bks .bks-tabbar{bottom:max(8px,calc(env(safe-area-inset-bottom,0px) - 22px))}
 html.bks-standalone body.bks{padding-bottom:calc(var(--bks-tab) + 30px + max(8px,calc(env(safe-area-inset-bottom,0px) - 22px)))}
 html.bks-standalone body.bks.bks-checkout{padding-bottom:24px}
}