/* DeenWorld Quiz v1.5.4 - app feel: fixed bottom bar + "install the app" pop-up.
   Colours come from DeenWorld Quiz -> Settings -> "অ্যাপ নিচের বার" (--nb background, --nf text, --na active). */

/* ---------- fixed bottom bar ---------- */
.dwq-appnav{--nb:#092115;--nf:#cfe3d6;--na:#f7dc83;
	display:none;position:fixed;left:0;right:0;bottom:0;z-index:99980;box-sizing:border-box;
	height:calc(64px + env(safe-area-inset-bottom,0px));padding:0 6px env(safe-area-inset-bottom,0px);
	align-items:stretch;justify-content:space-around;gap:2px;
	background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0) 55%),var(--nb);
	border-top:2px solid #D4AF37;box-shadow:0 -6px 22px rgba(0,0,0,.28);
	font-family:'Noto Sans Bengali','Hind Siliguri',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
	transition:transform .2s ease}
.dwq-appnav *{box-sizing:border-box}
.dwq-appnav a{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 2px;
	color:var(--nf);text-decoration:none!important;font-size:12.5px;font-weight:600;line-height:1.25;
	-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:color .15s,transform .1s}
.dwq-appnav a:hover,.dwq-appnav a:focus{color:var(--nf);outline:0}
.dwq-appnav a svg{width:25px;height:25px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dwq-appnav a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dwq-appnav a:active{transform:scale(.93)}
.dwq-appnav a.is-on,.dwq-appnav a.is-on:hover{color:var(--na)}
.dwq-appnav a.is-on::before{content:"";position:absolute;top:0;left:24%;right:24%;height:3px;border-radius:0 0 4px 4px;background:var(--na)}
.dwq-appnav a.is-on svg{filter:drop-shadow(0 0 6px rgba(247,220,131,.5))}

/* where it shows (Settings -> "কোথায় দেখাবে") */
body.dwq-hasnav{--dwq-nav-h:0px}
@media (max-width:900px){
	body.dwq-nav-mobile .dwq-appnav{display:flex}
	body.dwq-nav-mobile{--dwq-nav-h:64px}
}
body.dwq-nav-all .dwq-appnav{display:flex}
body.dwq-nav-all{--dwq-nav-h:64px}
@media (display-mode:standalone){
	body.dwq-nav-app .dwq-appnav{display:flex}
	body.dwq-nav-app{--dwq-nav-h:64px}
}
html.dwq-standalone body.dwq-nav-app .dwq-appnav{display:flex}
html.dwq-standalone body.dwq-nav-app{--dwq-nav-h:64px}

/* page content is never hidden behind the bar */
body.dwq-hasnav{padding-bottom:calc(var(--dwq-nav-h,0px) + env(safe-area-inset-bottom,0px))}

/* hidden on the live quiz page (Settings switch) - the quiz uses the whole screen */
body.dwq-nav-hq:has(.dwq-quiz-root) .dwq-appnav{display:none!important}
body.dwq-nav-hq:has(.dwq-quiz-root){padding-bottom:0}
html.dwq-quizpage body.dwq-nav-hq .dwq-appnav{display:none!important}
html.dwq-quizpage body.dwq-nav-hq{padding-bottom:0}

/* slides away while the on-screen keyboard is open */
html.dwq-kb .dwq-appnav{transform:translateY(115%)}

/* the DeenWorld footer / floating bell must not sit under the bar */
@media (max-width:900px){body.dwq-nav-mobile .dwq-bell.is-float{z-index:99990}}

/* ---------- install pop-up ---------- */
.dwq-pwa{position:fixed;left:10px;right:10px;bottom:calc(var(--dwq-nav-h,0px) + env(safe-area-inset-bottom,0px) + 12px);z-index:99995;max-width:460px;margin:0 auto;
	font-family:'Noto Sans Bengali','Hind Siliguri',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
	transform:translateY(150%);opacity:0;pointer-events:none;transition:transform .38s cubic-bezier(.2,.9,.3,1),opacity .25s}
.dwq-pwa.is-in{transform:none;opacity:1;pointer-events:auto}
.dwq-pwa[hidden]{display:none}
.dwq-pwa *{box-sizing:border-box}
.dwq-pwa-card{position:relative;display:grid;grid-template-columns:auto 1fr;gap:8px 14px;align-items:center;
	background:linear-gradient(180deg,#fffdf4,#f8f1da);color:#16241c;border:2px solid #D4AF37;border-radius:22px;padding:16px 16px 14px;
	box-shadow:0 16px 42px rgba(6,40,25,.4),inset 0 0 0 4px rgba(255,255,255,.55)}
.dwq-pwa-ico{width:56px;height:56px;border-radius:15px;border:2px solid #D4AF37;background:#fff;object-fit:cover;display:block}
.dwq-pwa-tx{min-width:0;padding-right:22px}
.dwq-pwa-tx b{display:block;font-size:17.5px;line-height:1.4;font-weight:800;color:#0B6B3A}
.dwq-pwa-tx span{display:block;margin-top:2px;font-size:15px;line-height:1.55;color:#33463b;font-weight:600}
.dwq-pwa-acts{grid-column:1/-1;display:flex;gap:10px;margin-top:4px}
.dwq-pwa-go{flex:1 1 auto;cursor:pointer;font-weight:800;font-size:17.5px;line-height:1.2;font-family:inherit;font-family:inherit;color:#fff;background:linear-gradient(180deg,#22b45e,#0f7a3a);border:2px solid #f5d77a;border-radius:99px;padding:12px 18px;box-shadow:0 6px 14px rgba(0,0,0,.22);-webkit-tap-highlight-color:transparent}
.dwq-pwa-go:active{transform:scale(.97)}
.dwq-pwa-later{flex:0 0 auto;cursor:pointer;font-weight:700;font-size:16px;line-height:1.2;font-family:inherit;font-family:inherit;color:#33463b;background:#fff;border:2px solid #cfe0d5;border-radius:99px;padding:12px 20px}
.dwq-pwa-x{position:absolute;top:6px;right:8px;width:34px;height:34px;display:grid;place-items:center;cursor:pointer;border:0;background:transparent;color:#5b6d62;font-size:24px;line-height:1;border-radius:50%}
.dwq-pwa-x:hover{background:rgba(0,0,0,.06)}
@media (min-width:901px){.dwq-pwa{left:auto;right:20px;margin:0}}
@media (prefers-reduced-motion:reduce){.dwq-pwa,.dwq-appnav{transition:none}}
