/* Premium tech theme */
:root{
	--btnn-accent:#39a7ff;
	--btnn-accent-2:#ff6a00;
	--btnn-center-1:#ff9a3a;
	--btnn-center-2:#ff6a00;
	--btnn-text:#f1f7ff;
	--btnn-muted:rgba(241,247,255,0.70);
	--btnn-border:rgba(255,255,255,0.07);
	--btnn-shadow:0 10px 28px rgba(2,6,23,0.45);
	--btnn-ease:cubic-bezier(.2,.9,.2,1);
}

/* Outer container: centered glass pill */
#bottom-tech-nav{
	position:fixed;
	left:50%;
	bottom:6px;
	transform:translateX(-50%);
	width:min(500px, calc(100% - 18px));
	z-index:120000;
	overflow:visible;
}

/* Give the bar more presence on larger phones / small tablets (565px+) */
@media(min-width:565px){
	#bottom-tech-nav{width:min(720px, calc(100% - 30px))}
}

#bottom-tech-nav .btnn-row{
	position:relative;
	display:grid;
	grid-auto-flow:column;
	grid-auto-columns:1fr;
	align-items:stretch;
	padding:0 6px;
	border-radius:16px;
	overflow:visible;
	box-shadow:var(--btnn-shadow);
}

/* Background layer (gets notch mask; doesn't clip children) */
#bottom-tech-nav .btnn-bg{
	position:absolute;
	inset:0;
	border-radius:16px;
	/* Apple-like: avoid visible outlines; rely on glass + soft inner highlights */
	border:0;
	background:rgba(9,12,18,0.58);
	-webkit-backdrop-filter: blur(18px) saturate(165%);
	backdrop-filter: blur(18px) saturate(165%);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.055),
		inset 0 -1px 0 rgba(0,0,0,0.20);
	z-index:0;
}

/* Specular highlight + subtle tint (masked with the bg) */
#bottom-tech-nav .btnn-bg::before{
	content:'';
	position:absolute;
	inset:0;
	border-radius:inherit;
	pointer-events:none;
	background:
		linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.03) 26%, rgba(0,0,0,0) 60%),
		radial-gradient(120% 140% at 18% 0%, rgba(57,167,255,0.10) 0%, rgba(57,167,255,0.03) 40%, rgba(0,0,0,0) 72%),
		radial-gradient(120% 140% at 82% 10%, rgba(255,106,0,0.09) 0%, rgba(255,106,0,0.03) 40%, rgba(0,0,0,0) 72%);
	opacity:0.75;
}

/* Fine grain (Apple-like) */
#bottom-tech-nav .btnn-bg::after{
	content:'';
	position:absolute;
	inset:0;
	border-radius:inherit;
	pointer-events:none;
	background:
		repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, rgba(0,0,0,0) 1px 3px),
		repeating-linear-gradient(90deg, rgba(255,255,255,0.018) 0 1px, rgba(0,0,0,0) 1px 6px);
	opacity:0.10;
	mix-blend-mode:overlay;
}

/* Fallback if blur isn't supported */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
	#bottom-tech-nav .btnn-bg{background:rgba(9,12,18,0.78)}
}

/* Notch overlay layer (kept off unless explicitly styled) */
#bottom-tech-nav .btnn-notch{
	position:absolute;
	inset:0;
	pointer-events:none;
	z-index:1;
	display:none;
}



/* Moving active indicator (JS sets --btnn-count and --btnn-active) */
#bottom-tech-nav{
	--btnn-count:4;
	--btnn-center:0;
}

#bottom-tech-nav .btnn-indicator{
	display:none;
}

/* Base item */
#bottom-tech-nav .btn-link{
	position:relative;
	z-index:3;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:3px;
	padding:8px 6px;
	min-width:0;
	text-decoration:none;
	border-radius:11px;
	color:var(--btnn-muted);
	transition:transform .18s var(--btnn-ease), color .18s ease;
	-webkit-tap-highlight-color:transparent;
}

#bottom-tech-nav .btn-link:focus-visible{
	outline:2px solid rgba(57,167,255,0.22);
	outline-offset:3px;
}

#bottom-tech-nav .btn-hit{position:absolute;inset:0;pointer-events:none}

/* Icons: support fill + stroke */
#bottom-tech-nav .btn-icon svg{
	width:22px;
	height:22px;
	display:block;
	fill:currentColor;
}
#bottom-tech-nav .btn-icon svg [stroke-width]{stroke:currentColor;fill:none}

#bottom-tech-nav .btn-label{
	font-size:9px;
	line-height:1;
	letter-spacing:0.02em;
	color:inherit;
	max-width:84px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	opacity:0.96;
}

#bottom-tech-nav .btn-link:hover{transform:translateY(-2px);color:rgba(241,247,255,0.92)}

/* Product CTA bar (custom mode on product page) */
#bottom-tech-nav.btnn-cta .btnn-row{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	padding:8px 10px;
}

#bottom-tech-nav.btnn-cta .btnn-bg{border-radius:16px}

#bottom-tech-nav.btnn-cta .btnn-cta-left{
	position:relative;
	z-index:3;
	display:flex;
	align-items:center;
	gap:10px;
	min-width:0;
}

#bottom-tech-nav.btnn-cta .btnn-cta-thumb{
	width:42px;
	height:42px;
	flex:0 0 42px;
	border-radius:12px;
	overflow:hidden;
	background:rgba(255,255,255,0.04);
	border:1px solid rgba(255,255,255,0.06);
	box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
}

#bottom-tech-nav.btnn-cta .btnn-cta-thumb img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

#bottom-tech-nav.btnn-cta .btnn-cta-meta{min-width:0}

#bottom-tech-nav.btnn-cta .btnn-cta-title{
	color:rgba(241,247,255,0.94);
	font-weight:780;
	font-size:12px;
	line-height:1.1;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	max-width:260px;
}

@media(min-width:565px){
	#bottom-tech-nav.btnn-cta .btnn-row{padding:10px 12px}
	#bottom-tech-nav.btnn-cta .btnn-cta-thumb{width:46px;height:46px;flex-basis:46px}
	#bottom-tech-nav.btnn-cta .btnn-cta-title{font-size:13px;max-width:420px}
	#bottom-tech-nav.btnn-cta .btnn-cta-price{font-size:13px}
	#bottom-tech-nav.btnn-cta .btnn-cta-btn{padding:11px 16px;font-size:13px}
}

#bottom-tech-nav.btnn-cta .btnn-cta-price{
	margin-top:-3px;
	font-size:12px;
	color:rgba(241,247,255,0.82);
}

#bottom-tech-nav.btnn-cta .btnn-cta-price del{opacity:0.65}
#bottom-tech-nav.btnn-cta .btnn-cta-price ins{text-decoration:none}

#bottom-tech-nav.btnn-cta .btnn-cta-right{
	position:relative;
	z-index:3;
	flex:0 0 auto;
}

#bottom-tech-nav.btnn-cta .btnn-cta-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	text-decoration:none;
	border-radius:999px;
	padding:10px 12px;
	font-weight:850;
	letter-spacing:0.01em;
	font-size:12px;
	color:#ffffff;
	/* Solid brand orange pill */
	background:#ff6a00;
	border:0;
	box-shadow:
		0 10px 22px rgba(2,6,23,0.50),
		0 12px 26px rgba(255,106,0,0.18),
		inset 0 1px 0 rgba(255,255,255,0.18);
	cursor:pointer;
	white-space:nowrap;
}

#bottom-tech-nav.btnn-cta .btnn-cta-btn:hover{filter:brightness(1.03)}

#bottom-tech-nav.btnn-cta .btnn-cta-btn:focus-visible{
	outline:2px solid rgba(57,167,255,0.22);
	outline-offset:3px;
}

@media(max-width:410px){
	#bottom-tech-nav.btnn-cta .btnn-row{padding:7px 9px;gap:8px}
	#bottom-tech-nav.btnn-cta .btnn-cta-thumb{width:38px;height:38px;flex-basis:38px;border-radius:11px}
	#bottom-tech-nav.btnn-cta .btnn-cta-title{font-size:11px;max-width:190px}
	#bottom-tech-nav.btnn-cta .btnn-cta-price{font-size:11px}
	#bottom-tech-nav.btnn-cta .btnn-cta-btn{padding:9px 12px;border-radius:999px;font-size:11px}
}

/* Notch + center button effect (Galaxy S2-like) */
#bottom-tech-nav.has-center{
	--btnn-notch-x: calc(8px + ((100% - 16px) / var(--btnn-count)) * (var(--btnn-center) + 0.5));
}

/* Carve a notch at the top edge using mask on the background ONLY */
#bottom-tech-nav.has-center .btnn-bg{
	/* notch radius */
	/* --btnn-notch-r: 34px; */
	-webkit-mask-image: radial-gradient(circle var(--btnn-notch-r) at var(--btnn-notch-x) -1px,
		transparent 0 calc(var(--btnn-notch-r) - 1px),
		#000 var(--btnn-notch-r));
	-webkit-mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-image: radial-gradient(circle var(--btnn-notch-r) at var(--btnn-notch-x) -1px,
		transparent 0 calc(var(--btnn-notch-r) - 1px),
		#000 var(--btnn-notch-r));
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
}

/* A subtle shadow ring around the notch */
#bottom-tech-nav.has-center .btnn-indicator{
	/* keep indicator inside; notch is at top */
	top:10px;
	bottom:10px;
}

/* Center button sits into the notch and pops up a bit */
#bottom-tech-nav.has-center .btn-link.is-center{
	align-self:start;
	justify-self:center;
	width:66px;
	height:66px;
	padding:0;
	border-radius:999px;
	transform:translateY(-20px);
	color:#fff;
	background:linear-gradient(180deg, var(--btnn-center-1), var(--btnn-center-2));
	border:1px solid rgba(255,255,255,0.18);
	box-shadow:0 12px 28px rgba(2,6,23,0.56), 0 10px 18px rgba(255,106,0,0.16);
	overflow:hidden;
}

/* Force icon+label layout inside the circle (avoid losing the icon) */
#bottom-tech-nav.has-center .btn-link.is-center{gap:0}
#bottom-tech-nav.has-center .btn-link.is-center .btn-icon{position:absolute;top:13px}
#bottom-tech-nav.has-center .btn-link.is-center .btn-icon svg{width:24px;height:24px}
#bottom-tech-nav.has-center .btn-link.is-center .btn-label{
	position:absolute;
	bottom:9px;
	display:block;
	font-weight:800;
	letter-spacing:0.02em;
	opacity:0.98;
	max-width:64px;
}

/* soften side items a bit to reinforce hierarchy */
#bottom-tech-nav.has-center .btn-link:not(.is-center){
	opacity:0.92;
}

/* Ripple */
#bottom-tech-nav a .ripple{
	position:absolute;
	width:170px;
	height:170px;
	margin-left:-85px;
	margin-top:-85px;
	border-radius:50%;
	background:radial-gradient(circle, rgba(57,167,255,0.22) 0%, rgba(57,167,255,0.08) 40%, transparent 62%);
	pointer-events:none;
	transform:scale(0);
	animation:btnn-ripple .6s linear;
}
@keyframes btnn-ripple{to{transform:scale(1);opacity:0}}

/* Motion accessibility */
@media (prefers-reduced-motion: reduce){
	#bottom-tech-nav .btnn-indicator,
	#bottom-tech-nav .btn-link,
	#bottom-tech-nav a .ripple{
		transition:none !important;
		animation:none !important;
	}
}

/* Hide on desktop */
@media(min-width:900px){
	#bottom-tech-nav{display:none}
	#bottom-tech-nav.btnn-cta.btnn-show-all{display:block}
}

/* Desktop layout for product CTA (when visibility=all) */
@media(min-width:900px){
	#bottom-tech-nav.btnn-cta.btnn-show-all{
		left:auto;
		right:18px;
		bottom:18px;
		transform:none;
		width:min(460px, calc(100% - 36px));
	}

	#bottom-tech-nav.btnn-cta.btnn-show-all .btnn-row{
		padding:12px 14px;
		border-radius:18px;
	}
	#bottom-tech-nav.btnn-cta.btnn-show-all .btnn-bg{border-radius:18px}

	#bottom-tech-nav.btnn-cta.btnn-show-all .btnn-cta-thumb{
		width:52px;
		height:52px;
		flex-basis:52px;
		border-radius:14px;
	}

	#bottom-tech-nav.btnn-cta.btnn-show-all .btnn-cta-title{
		font-size:14px;
		font-weight:820;
		white-space:normal;
		display:-webkit-box;
		-webkit-line-clamp:2;
		-webkit-box-orient:vertical;
		overflow:hidden;
		max-width:320px;
	}

	#bottom-tech-nav.btnn-cta.btnn-show-all .btnn-cta-price{font-size:13px;margin-top:2px}
	#bottom-tech-nav.btnn-cta.btnn-show-all .btnn-cta-btn{padding:12px 18px;font-size:13px}
}

/* Compact labels on tiny screens (keep center label) */
@media(max-width:420px){
	#bottom-tech-nav .btn-label{display:none}
	#bottom-tech-nav.has-center .btn-link.is-center .btn-label{display:block}
}