/* ==========================================================
   Creemly Mobile Bottom Navigation
   ========================================================== */

:root {
	--creemly-nav-bg: #ffffff;
	--creemly-nav-accent: #ff6b35;
	--creemly-nav-active: #ff6b35;
	--creemly-nav-muted: #8c9693;
	--creemly-nav-shadow: rgba(21, 25, 24, 0.16);
}


/* ==========================================================
   Base
   ========================================================== */

.creemly-mobile-bottom-nav {
	display: none;
}

/* Removes mobile tap highlight color (iOS/Android) */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Removes the focus outline on click while preserving keyboard accessibility */
:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width: 767px) {

	.creemly-mobile-bottom-nav {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: auto;
		z-index: 99999;
		pointer-events: none;
	}

	.creemly-mobile-bottom-nav-container {
		position: relative;

		display: flex;
		align-items: center;
		justify-content: space-between;

		width: 100%;
		height: 45px;

		padding: 0 4px env(safe-area-inset-bottom);

		box-sizing: border-box;

		background: var(--creemly-nav-bg);

		border-top: 1px solid rgba(128, 128, 128, 0.311);

		box-shadow:
			0 -8px 25px var(--creemly-nav-shadow);

		pointer-events: auto;
	}


	/* ======================================================
	   Navigation Items
	   ====================================================== */

	.creemly-mobile-nav-item {
		position: relative;

		display: flex;
		align-items: center;
		justify-content: center;

		flex: 1 1 20%;
		width: 20%;
		height: 45px;

		margin: 0;
		padding: 0;

		border: 0;
		outline: 0;

		background: transparent;

		color: var(--creemly-nav-muted);

		text-decoration: none;

		cursor: pointer;

		z-index: 3;

		transition:
			color 220ms ease,
			transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
	}


	/* ======================================================
	   Icons
	   ====================================================== */

	.creemly-mobile-nav-item svg {
		position: relative;
		z-index: 5;

		display: block;

		width: 24px;
		height: 24px;

		fill: none;
		stroke: currentColor;

		stroke-width: 1.8;
		stroke-linecap: round;
		stroke-linejoin: round;

		transition:
			transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
			color 220ms ease;
	}


	/* ======================================================
	   Active Item
	   ====================================================== */

	.creemly-mobile-nav-item.active {
		color: var(--creemly-nav-active);

		transform: translateY(-22px);
	}


	/* ======================================================
	   Active White Circle
	   ====================================================== */

	.creemly-mobile-nav-item.active::before {
		content: "";

		position: absolute;

		left: 50%;
		top: 50%;

		width: 62px;
		height: 62px;

		transform: translate(-50%, -50%);

		border-radius: 50%;

		background: var(--creemly-nav-bg);

		box-shadow:
			0 2px 8px rgba(21, 25, 24, 0.04);

		z-index: -1;
	}


	/* ======================================================
	   White Arc / Curve Around Active Circle
	   ====================================================== */

	.creemly-mobile-nav-item.active::after {
		content: "";

		position: absolute;

		left: 50%;
		top: 50%;

		width: 82px;
		height: 82px;

		transform: translate(-50%, -50%);

		border-radius: 50%;

		border: 10px solid transparent;

		border-bottom-color: var(--creemly-nav-bg);

		pointer-events: none;

		z-index: -2;
	}


	/* ======================================================
	   Active Icon
	   ====================================================== */

	.creemly-mobile-nav-item.active svg {
		transform: scale(1.05);
	}


	/* ======================================================
	   Remove Old Indicator Shape
	   ====================================================== */

	.creemly-mobile-nav-indicator {
		position: absolute;

		top: 0;
		left: 0;

		width: 20%;
		height: 72px;

		pointer-events: none;

		z-index: 1;

		transition:
			transform 240ms ease;
	}

	.creemly-mobile-nav-indicator::before,
	.creemly-mobile-nav-indicator::after {
		display: none;
	}

	.creemly-mobile-nav-indicator svg {
		display: none;
	}


	/* ======================================================
	   Cart Count
	   ====================================================== */

	.creemly-mobile-cart-count {
		position: absolute;

		/*
		 * Keep the badge attached to the cart icon.
		 * Do NOT change its position when active.
		 */
		top: calc(50% - 19px);
		right: calc(50% - 11px);

		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 18px;
		height: 18px;
		padding: 0 4px;
		box-sizing: border-box;
		border-radius: 50%;
		color: var(--creemly-nav-accent);
		font-size: 12px;
		font-weight: 700;
		line-height: 1;
		z-index: 8;
	}


	/*
	 * IMPORTANT:
	 * No special .active position here.
	 *
	 * The entire cart item moves upward together,
	 * so the cart icon and badge remain aligned.
	 */

	.creemly-mobile-nav-item.active
	.creemly-mobile-cart-count {
		top: calc(50% - 9px);
	}


	/* ======================================================
	   Transition
	   ====================================================== */

	.creemly-mobile-bottom-nav-container.transition
	.creemly-mobile-nav-indicator {
		opacity: 1;
	}


	/* ======================================================
	   Focus
	   ====================================================== */

	.creemly-mobile-nav-item:focus-visible {
		outline: 2px solid rgba(0, 164, 153, 0.35);
		outline-offset: -5px;
		border-radius: 14px;
	}


	/* ======================================================
	   Body Spacing
	   ====================================================== */

	body {
		padding-bottom: calc(
			78px + env(safe-area-inset-bottom)
		);
	}

}


/* ==========================================================
   Small Phones
   ========================================================== */

@media (max-width: 400px) {

	.creemly-mobile-bottom-nav-container {
		height: 45px;
	}

	.creemly-mobile-nav-item {
		height: 45px;
	}

	.creemly-mobile-nav-item svg {
		width: 22px;
		height: 22px;
	}

	.creemly-mobile-nav-item.active {
		transform: translateY(-10px);
	}

	.creemly-mobile-nav-item.active::before {
		width: 45px;
		height: 45px;
	}

	.creemly-mobile-nav-item.active::after {
		width: 62px;
		height: 62px;
		border-width: 8px;
	}

	.creemly-mobile-nav-indicator {
		height: 45px;
	}

	.creemly-mobile-cart-count {
		top: calc(50% - 17px);
		right: calc(50% - 20px);
	}

	.creemly-mobile-nav-item.active
	.creemly-mobile-cart-count {
		top: calc(50% - 17px);
	}

	body {
		padding-bottom: calc(
			40px + env(safe-area-inset-bottom)
		);
	}

}


/* ==========================================================
   Desktop
   ========================================================== */

@media (min-width: 768px) {

	.creemly-mobile-bottom-nav {
		display: none !important;
	}

}