/*
 * =========================================================
 * ZTZ CODE STORE — Mobile Bottom Navigation
 * =========================================================
 *
 * Mobile only
 * No external fonts
 * No external icons
 * No external libraries
 * No external images
 *
 * Optimized for:
 * - Astra
 * - WooCommerce
 * - Mobile browsers
 * - Android Chrome
 * - iOS Safari
 *
 * =========================================================
 */


/* =========================================================
   ROOT VARIABLES
   ========================================================= */

:root {
	--ztz-mn-bg: rgba(9, 7, 22, 0.94);
	--ztz-mn-border: rgba(255, 255, 255, 0.09);
	--ztz-mn-text: #aaa7b8;
	--ztz-mn-active: #b56cff;
	--ztz-mn-active-2: #7c3cff;
}


/* =========================================================
   DESKTOP DEFAULT
   ========================================================= */

.ztz-mobile-nav,
.ztz-mobile-overlay,
.ztz-mobile-sheet {
	display: none;
}


/* =========================================================
   MOBILE NAVIGATION
   ========================================================= */

@media (max-width: 767px) {

	/* -------------------------------------------------------
	   Prevent unwanted horizontal / bottom page spacing
	   ------------------------------------------------------- */

	html,
	body {
		margin: 0 !important;
		padding-bottom: 0 !important;
		overflow-x: hidden !important;
	}


	/* -------------------------------------------------------
	   MOBILE BOTTOM NAV
	   ------------------------------------------------------- */

	.ztz-mobile-nav {
		position: fixed !important;
		z-index: 99990 !important;

		left: 10px !important;
		right: 10px !important;

		bottom: max(8px, env(safe-area-inset-bottom)) !important;

		width: auto !important;
		height: 64px !important;

		display: grid;

		grid-template-columns: repeat(5, 1fr);
		align-items: end;

		padding: 7px 4px;

		box-sizing: border-box;

		border: 1px solid var(--ztz-mn-border);
		border-radius: 22px;

		background: var(--ztz-mn-bg);

		box-shadow:
			0 14px 45px rgba(0, 0, 0, 0.42),
			0 0 30px rgba(124, 60, 255, 0.06);

		backdrop-filter: blur(18px);
		-webkit-backdrop-filter: blur(18px);

		transform: translateZ(0);
		-webkit-transform: translateZ(0);

		-webkit-tap-highlight-color: transparent;
	}


	/* -------------------------------------------------------
	   NAV ITEM
	   ------------------------------------------------------- */

	.ztz-mobile-nav__item {
		position: relative;

		height: 50px;

		display: flex;
		flex-direction: column;

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

		gap: 4px;

		padding: 0;
		margin: 0;

		border: 0;
		outline: none;

		background: transparent;

		color: var(--ztz-mn-text);

		font: inherit;
		text-decoration: none;

		cursor: pointer;

		-webkit-tap-highlight-color: transparent;
		touch-action: manipulation;
	}


	/* -------------------------------------------------------
	   NAV ICON WRAPPER
	   ------------------------------------------------------- */

	.ztz-mobile-nav__icon,
	.ztz-mobile-nav__center-icon {
		position: relative;

		width: 21px;
		height: 21px;

		display: grid;
		place-items: center;

		flex-shrink: 0;
	}


	/* -------------------------------------------------------
	   SVG ICON
	   ------------------------------------------------------- */

	.ztz-mobile-nav svg {
		width: 20px;
		height: 20px;

		fill: none;
		stroke: currentColor;

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


	/* -------------------------------------------------------
	   NAV LABEL
	   ------------------------------------------------------- */

	.ztz-mobile-nav__label {
		font-size: 10px;
		font-weight: 600;
		line-height: 1;

		white-space: nowrap;

		user-select: none;
		-webkit-user-select: none;
	}


	/* -------------------------------------------------------
	   ACTIVE ITEM
	   ------------------------------------------------------- */

	.ztz-mobile-nav__item.is-active {
		color: var(--ztz-mn-active);
	}


	/* -------------------------------------------------------
	   CENTER CATEGORY BUTTON
	   ------------------------------------------------------- */

	.ztz-mobile-nav__item--center {
		height: 58px;

		margin-top: -25px;
	}


	/* -------------------------------------------------------
	   CENTER CATEGORY ICON
	   ------------------------------------------------------- */

	.ztz-mobile-nav__center-icon {
		width: 52px;
		height: 52px;

		border-radius: 18px;

		color: #fff;

		background:
			linear-gradient(
				145deg,
				var(--ztz-mn-active),
				var(--ztz-mn-active-2)
			);

		border: 4px solid #0b0818;

		box-shadow:
			0 8px 24px rgba(124, 60, 255, 0.35);

		transform: translateZ(0);
		-webkit-transform: translateZ(0);
	}


	.ztz-mobile-nav__center-icon svg {
		width: 22px;
		height: 22px;
	}


	/* -------------------------------------------------------
	   CART COUNT
	   ------------------------------------------------------- */

	.ztz-cart-count {
		position: absolute;

		top: -7px;
		right: -9px;

		min-width: 17px;
		height: 17px;

		padding: 0 4px;

		display: grid;
		place-items: center;

		box-sizing: border-box;

		border-radius: 999px;

		background: #b84cff;
		color: #fff;

		font-size: 9px;
		font-weight: 800;
		line-height: 1;

		border: 2px solid #0b0818;

		z-index: 2;
	}


	/* =======================================================
	   OVERLAY
	   ======================================================= */

	.ztz-mobile-overlay {
		position: fixed;

		inset: 0;

		z-index: 99991;

		display: block;

		background: rgba(0, 0, 0, 0.55);

		opacity: 0;
		visibility: hidden;

		pointer-events: none;

		transition:
			opacity 0.22s ease,
			visibility 0.22s ease;
	}


	.ztz-mobile-overlay.is-open {
		opacity: 1;
		visibility: visible;

		pointer-events: auto;
	}


	/* =======================================================
	   BOTTOM SHEET
	   ======================================================= */

	.ztz-mobile-sheet {
		position: fixed;

		z-index: 99992;

		left: 0;
		right: 0;
		bottom: 0;

		width: 100%;

		max-height: min(78vh, 620px);

		overflow-x: hidden;
		overflow-y: auto;

		box-sizing: border-box;

		padding:
			10px
			18px
			calc(22px + env(safe-area-inset-bottom));

		border-radius: 25px 25px 0 0;

		border: 1px solid rgba(255, 255, 255, 0.08);

		background: #0b0818;

		box-shadow:
			0 -18px 55px rgba(0, 0, 0, 0.5);

		transform: translate3d(0, 105%, 0);

		visibility: hidden;

		pointer-events: none;

		transition:
			transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
			visibility 0.25s;

		overscroll-behavior: contain;

		-webkit-overflow-scrolling: touch;
	}


	/* -------------------------------------------------------
	   OPEN SHEET
	   ------------------------------------------------------- */

	.ztz-mobile-sheet.is-open {
		display: block;

		transform: translate3d(0, 0, 0);

		visibility: visible;

		pointer-events: auto;
	}


	/* =======================================================
	   SHEET HANDLE
	   ======================================================= */

	.ztz-mobile-sheet__handle {
		width: 38px;
		height: 4px;

		margin: 0 auto 18px;

		border-radius: 99px;

		background: rgba(255, 255, 255, 0.18);
	}


	/* =======================================================
	   SHEET HEADER
	   ======================================================= */

	.ztz-mobile-sheet__header {
		display: flex;

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

		margin-bottom: 16px;
	}


	/* -------------------------------------------------------
	   EYEBROW
	   ------------------------------------------------------- */

	.ztz-mobile-sheet__eyebrow {
		display: block;

		margin-bottom: 4px;

		color: #a56bff;

		font-size: 9px;
		font-weight: 800;

		letter-spacing: 0.14em;

		line-height: 1.2;
	}


	/* -------------------------------------------------------
	   SHEET TITLE
	   ------------------------------------------------------- */

	.ztz-mobile-sheet h2 {
		margin: 0;

		color: #fff;

		font-size: 24px;
		font-weight: 700;

		line-height: 1.1;
	}


	/* =======================================================
	   CLOSE BUTTON
	   ======================================================= */

	.ztz-mobile-sheet__close {
		width: 40px;
		height: 40px;

		display: grid;
		place-items: center;

		padding: 0;

		border: 1px solid rgba(255, 255, 255, 0.08);
		border-radius: 13px;

		background: rgba(255, 255, 255, 0.05);

		color: #fff;

		cursor: pointer;

		touch-action: manipulation;

		-webkit-tap-highlight-color: transparent;
	}


	.ztz-mobile-sheet__close svg {
		width: 19px;
		height: 19px;

		fill: none;

		stroke: currentColor;

		stroke-width: 2;

		stroke-linecap: round;
		stroke-linejoin: round;
	}


	/* =======================================================
	   CATEGORY / MENU LIST
	   ======================================================= */

	.ztz-mobile-category-list,
	.ztz-mobile-menu-list {
		display: grid;

		gap: 9px;
	}


	/* =======================================================
	   CATEGORY ITEM / MENU ITEM
	   ======================================================= */

	.ztz-mobile-category,
	.ztz-mobile-menu-list a {
		min-height: 58px;

		display: flex;

		align-items: center;

		gap: 13px;

		box-sizing: border-box;

		padding: 11px 13px;

		border: 1px solid rgba(255, 255, 255, 0.065);

		border-radius: 16px;

		background: rgba(255, 255, 255, 0.035);

		color: #fff;

		text-decoration: none;

		transition:
			background 0.18s ease,
			border-color 0.18s ease,
			transform 0.18s ease;
	}


	/* -------------------------------------------------------
	   Touch feedback
	   ------------------------------------------------------- */

	.ztz-mobile-category:active,
	.ztz-mobile-menu-list a:active {
		transform: scale(0.985);

		background: rgba(255, 255, 255, 0.06);
	}


	/* =======================================================
	   CATEGORY TEXT
	   ======================================================= */

	.ztz-mobile-category__text {
		min-width: 0;

		flex: 1;
	}


	.ztz-mobile-category strong {
		display: block;

		font-size: 14px;
		font-weight: 700;

		line-height: 1.2;
	}


	.ztz-mobile-category small {
		display: block;

		margin-top: 3px;

		color: #858193;

		font-size: 10px;

		line-height: 1.3;
	}


	/* =======================================================
	   CATEGORY ARROW
	   ======================================================= */

	.ztz-mobile-category__arrow,
	.ztz-mobile-menu-list a > svg:last-child {
		margin-left: auto;

		color: #8f56ff;

		flex-shrink: 0;
	}


	.ztz-mobile-category__arrow svg,
	.ztz-mobile-menu-list a > svg:last-child {
		width: 18px;
		height: 18px;

		fill: none;

		stroke: currentColor;

		stroke-width: 2;

		stroke-linecap: round;
		stroke-linejoin: round;
	}


	/* =======================================================
	   MENU ICON BOX
	   ======================================================= */

	.ztz-mobile-menu-list a > span {
		width: 34px;
		height: 34px;

		display: grid;
		place-items: center;

		flex-shrink: 0;

		border-radius: 10px;

		background: rgba(139, 72, 255, 0.12);

		color: #b56cff;
	}


	.ztz-mobile-menu-list a > span svg {
		width: 18px;
		height: 18px;

		fill: none;

		stroke: currentColor;

		stroke-width: 1.8;

		stroke-linecap: round;
		stroke-linejoin: round;
	}


	/* =======================================================
	   TOUCH OPTIMIZATION
	   ======================================================= */

	.ztz-mobile-nav button,
	.ztz-mobile-sheet button,
	.ztz-mobile-nav a,
	.ztz-mobile-sheet a {
		touch-action: manipulation;
	}


	/* =======================================================
	   PREVENT BODY SCROLL WHILE SHEET IS OPEN
	   ======================================================= */

	body.ztz-mobile-menu-open {
		padding-bottom: 0 !important;
		overflow: hidden !important;
	}


	/* =======================================================
	   REDUCED MOTION
	   ======================================================= */

	@media (prefers-reduced-motion: reduce) {

		.ztz-mobile-overlay,
		.ztz-mobile-sheet,
		.ztz-mobile-category,
		.ztz-mobile-menu-list a {
			transition: none !important;
		}
	}


	/* =======================================================
	   SMALL MOBILE DEVICES
	   ======================================================= */

	@media (max-width: 380px) {

		.ztz-mobile-nav {
			left: 7px !important;
			right: 7px !important;

			padding-left: 2px;
			padding-right: 2px;
		}

		.ztz-mobile-nav__label {
			font-size: 9px;
		}

		.ztz-mobile-nav__center-icon {
			width: 48px;
			height: 48px;

			border-radius: 16px;
		}
	}


	/* =======================================================
	   VERY SMALL HEIGHT DEVICES
	   ======================================================= */

	@media (max-height: 600px) {

		.ztz-mobile-nav {
			height: 60px !important;

			bottom: max(6px, env(safe-area-inset-bottom)) !important;
		}

		.ztz-mobile-nav__item {
			height: 47px;
		}

		.ztz-mobile-nav__item--center {
			height: 54px;

			margin-top: -22px;
		}

		.ztz-mobile-nav__center-icon {
			width: 46px;
			height: 46px;
		}
	}
}


/* =========================================================
   DESKTOP — COMPLETELY DISABLE MOBILE NAV
   ========================================================= */

@media (min-width: 768px) {

	html,
	body {
		padding-bottom: 0 !important;
	}

	.ztz-mobile-nav,
	.ztz-mobile-overlay,
	.ztz-mobile-sheet {
		display: none !important;
	}
}


/* =========================================================
   END — ZTZ MOBILE BOTTOM NAVIGATION
   ========================================================= */