/**
 * ==========================================================
 * ShopCore - Mobile Bottom Navigation Bar Stylesheet
 * File: assets/css/mobile-bottom-nav.css
 * ==========================================================
 */

/* Hidden by default on Desktop & Large Screens */
.sc-bottom-nav {
	display: none;
}

/* ==========================================================
 * Mobile & Tablet Styles (<= 768px)
 * ========================================================== */
@media (max-width: 768px) {

	/* Provide room at page bottom so footer content isn't blocked */
	body {
		padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
	}

	.sc-bottom-nav {
		display: block;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9999;
		background: rgba(255, 255, 255, 0.96);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		border-top: 1px solid rgba(226, 232, 240, 0.85);
		box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.08);
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}

	.sc-bottom-nav-inner {
		display: flex;
		align-items: center;
		justify-content: space-around;
		height: 60px;
		max-width: 500px;
		margin: 0 auto;
		padding: 0 4px;
		position: relative;
	}

	/* Nav Items */
	.sc-bottom-nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex: 1;
		height: 100%;
		text-decoration: none;
		color: #64748b;
		position: relative;
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
		transition: color 0.2s ease, transform 0.15s ease;
		padding: 4px 2px;
		border: 0;
		background: transparent;
		cursor: pointer;
	}

	.sc-bottom-nav-item:active {
		transform: scale(0.92);
	}

	.sc-bottom-nav-item.is-active {
		color: #ef1d25;
	}

	.sc-bottom-nav-item.is-active .sc-bottom-nav-icon-wrap i,
	.sc-bottom-nav-item.is-active .sc-bottom-nav-label {
		color: #ef1d25;
		font-weight: 700;
	}

	.sc-bottom-nav-icon-wrap {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 24px;
		min-width: 24px;
		margin-bottom: 3px;
	}

	.sc-bottom-nav-icon-wrap i {
		font-size: 20px;
		line-height: 1;
		display: inline-block;
		color: inherit;
		transition: transform 0.2s ease;
	}

	.sc-bottom-nav-item:hover .sc-bottom-nav-icon-wrap i {
		transform: translateY(-1px);
	}

	.sc-bottom-nav-label {
		font-size: 10.5px;
		font-weight: 600;
		line-height: 1.15;
		letter-spacing: -0.2px;
		white-space: nowrap;
		text-align: center;
		max-width: 68px;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* ==========================================================
	 * Cart Live Badge
	 * ========================================================== */
	.sc-bottom-nav-badge {
		position: absolute;
		top: -4px;
		right: -9px;
		background: #ef1d25;
		color: #ffffff;
		font-size: 9.5px;
		font-weight: 800;
		min-width: 17px;
		height: 17px;
		border-radius: 9px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0 4px;
		border: 2px solid #ffffff;
		box-shadow: 0 2px 6px rgba(239, 29, 37, 0.4);
		line-height: 1;
		animation: scBadgePop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	}

	@keyframes scBadgePop {
		0% {
			transform: scale(0.6);
			opacity: 0;
		}
		100% {
			transform: scale(1);
			opacity: 1;
		}
	}



	/* ==========================================================
	 * Floating Elements Offset (WhatsApp & Sales Toast)
	 * ========================================================== */
	.sc-floating-whatsapp {
		bottom: 74px !important;
	}

	.shopcore-sales-toast-wrap {
		bottom: 74px !important;
	}
}