/* Bottom tab bar: floating glass bar, sliding gold indicator, bouncing icons, popping cart badge.
   Shows where the theme already showed the bar (phones and tablets, up to 960px). Items, icons and links stay manager-editable. */
:root{--mobile-nav-height:78px} /* bar 64px + 10px gap + 4px air: the sticky order bar and the WhatsApp button stack above this */

@media(max-width:960px){
	body .bottom-nav.bn{--bn-ease:cubic-bezier(.34,1.4,.5,1);--bn-gold:var(--pal-accent,var(--primary,#ff8a00));--bn-hi:var(--pal-accent-hi,color-mix(in srgb,var(--bn-gold) 62%,#fff));--bn-lo:var(--pal-accent-lo,color-mix(in srgb,var(--bn-gold) 80%,#000));--bn-on:var(--pal-on,#111);
		display:flex;position:fixed;z-index:80;top:auto;right:auto;left:50%;bottom:calc(10px + env(safe-area-inset-bottom));transform:translateX(-50%);
		width:calc(100% - 24px);max-width:560px;height:64px;padding:0 6px;gap:0;align-items:center;justify-content:space-around;
		border:1px solid rgba(255,255,255,.7);border-radius:26px;background:rgba(255,255,255,.8);
		-webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7);
		box-shadow:0 18px 44px rgba(17,17,17,.2),0 2px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(17,17,17,.05)}
	body .bottom-nav.bn .nav-link,body .bottom-nav.bn .nav-link.active{position:relative;flex:1;min-width:0;height:56px;padding:6px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
		border-radius:18px;background:transparent;color:#77736c;font-size:10.5px;font-weight:600;line-height:1.3;-webkit-tap-highlight-color:transparent;transition:color .25s}
	body .bottom-nav.bn .nav-link>span:not(.count){display:block;font-size:10.5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
	body .bottom-nav.bn .nav-link .icon{position:relative;z-index:1;width:24px;height:24px;stroke-width:1.8;transition:transform .35s var(--bn-ease),color .25s}
	body .bottom-nav.bn .nav-link.active{color:var(--pal-ink,#111)}
	body .bottom-nav.bn .nav-link.active>span:not(.count){font-weight:800}
	body .bottom-nav.bn .nav-link.active .icon{transform:translateY(-1px) scale(1.08);color:var(--bn-on)}
	body .bottom-nav.bn .nav-link:active .icon{transform:scale(.8)}
	body .bottom-nav.bn .nav-link::after{content:"";position:absolute;inset:-4px -2px}      /* comfortable touch target (the visible item is 56px high) */

	/* the indicator: one gold pill that slides to the active tab (without JS the active tab carries its own pill) */
	body .bottom-nav.bn .bn-ind{position:absolute;z-index:0;top:9px;left:0;width:52px;height:32px;border-radius:16px;pointer-events:none;opacity:0;
		background:linear-gradient(135deg,var(--bn-hi),var(--bn-gold) 55%,var(--bn-lo));
		box-shadow:0 8px 18px color-mix(in srgb,var(--bn-gold) 42%,transparent),inset 0 1px 0 rgba(255,255,255,.55);
		transform:translateX(calc(var(--x,0px) - 50%));transition:transform .5s var(--bn-ease),opacity .3s}
	body .bottom-nav.bn.bn-ready.bn-has .bn-ind{opacity:1}
	body .bottom-nav.bn:not(.bn-ready) .nav-link.active::before{content:"";position:absolute;z-index:0;top:3px;left:50%;width:52px;height:32px;margin-left:-26px;border-radius:16px;background:var(--bn-gold);box-shadow:none}
	body .bottom-nav.bn.bn-ready .nav-link.active::before{content:none}

	/* the centre «شاهد واشترِ» button stays a raised gold disc */
	body .bottom-nav.bn .nav-link[data-nav=watch]{flex:0 0 56px;width:56px;height:56px;margin-top:-24px;padding:0;border:4px solid rgba(255,255,255,.92);border-radius:50%;color:var(--bn-on);
		background:linear-gradient(135deg,var(--bn-hi),var(--bn-gold) 55%,var(--bn-lo))!important;
		box-shadow:0 12px 24px color-mix(in srgb,var(--bn-gold) 45%,transparent),0 0 0 1px rgba(17,17,17,.06);transform:none}
	body .bottom-nav.bn .nav-link[data-nav=watch]>span:not(.count){display:none}
	body .bottom-nav.bn .nav-link[data-nav=watch] .icon{width:24px;height:24px;color:var(--bn-on)}
	body .bottom-nav.bn .nav-link[data-nav=watch]:active{transform:scale(.92)}

	/* cart badge: night disc with a gold number, pops when the count changes */
	body .bottom-nav.bn .count{position:absolute;z-index:2;top:5px;right:auto;left:auto;inset-inline-start:calc(50% + 4px);min-width:18px;height:18px;padding:0 4px;display:grid;place-items:center;
		border:2px solid #fff;border-radius:99px;background:var(--pal-night,#111);color:var(--pal-gold,#ffc66b);font:800 10px/1 inherit;font-family:inherit}
	body .bottom-nav.bn .count[hidden]{display:none}
	body .bottom-nav.bn .count.bn-pop{animation:bn-pop .5s var(--bn-ease)}
	body .bottom-nav.bn .nav-link.bn-tap .icon{animation:bn-bounce .5s var(--bn-ease)}
	@keyframes bn-pop{0%{transform:scale(.4)}55%{transform:scale(1.5)}100%{transform:scale(1)}}
	@keyframes bn-bounce{0%{transform:scale(1)}30%{transform:translateY(-6px) scale(1.18)}60%{transform:translateY(1px) scale(.92)}100%{transform:scale(1.08)}}
	body .bottom-nav.bn .nav-link:focus-visible{outline:2px solid #111;outline-offset:-2px}

	/* the sticky order bar of the cod product page and the WhatsApp button sit directly above the bar, never under it */
	body.has-bottom-nav.pdp-layout-cod .cod-dock{inset-inline:12px;width:calc(100% - 24px);max-width:560px;margin-inline:auto;bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
		padding:9px 12px;border-radius:22px;border:1px solid color-mix(in srgb,var(--cod-gold,#ff8a00) 38%,transparent)}
	body.has-bottom-nav.pdp-layout-cod #nawa-toast{bottom:calc(var(--mobile-nav-height) + 92px + env(safe-area-inset-bottom))}
	body.cod-has-dock[data-page=product] .app-body{padding-bottom:calc(var(--mobile-nav-height) + 84px + env(safe-area-inset-bottom))}
	body[data-page=checkout] .bottom-nav.bn,body[data-page=order] .bottom-nav.bn{display:none}
	/* room for the floating bar under the page content */
	body.has-bottom-nav .app-body{padding-bottom:calc(var(--mobile-nav-height) + 24px + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){
	body .bottom-nav.bn .bn-ind,body .bottom-nav.bn .nav-link .icon{transition:none}
	body .bottom-nav.bn .count.bn-pop,body .bottom-nav.bn .nav-link.bn-tap .icon{animation:none}
}
@supports not (color:color-mix(in srgb,red,blue)){
	@media(max-width:960px){body .bottom-nav.bn .bn-ind,body .bottom-nav.bn .nav-link[data-nav=watch]{background:var(--pal-accent,#ff8a00)!important}}
}