/* Mobile menu (built into the theme). Active below 1024px. */

/* The old Mobile Menu plugin is replaced by this; hide anything it still prints. */
.mobmenu, .mob-menu-header-holder, .mobmenu-panel, .mobmenu-overlay,
.mobmenu-right-panel, .mobmenu-left-panel, .mobmenu-content {
	display: none !important;
}

.zeo-mm-bar,
.zeo-mm-overlay,
.zeo-mm-panel {
	display: none;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

@media (max-width: 1024px) {

	/* The site CSS hides #trackheader on mobile (the old plugin drew its own bar). Show it again. */
	html body div#trackheader.section-menu-stripe {
		display: block !important;
		position: sticky !important;
		top: 0;
		z-index: 9990;
		background: #fff !important;
		border-bottom: 1px solid #edf1f7 !important;
	}

	html body.admin-bar div#trackheader.section-menu-stripe {
		top: 46px;
	}

	/* Replace the desktop header parts with the compact bar */
	#trackheader .menu-stripe-wrapper > .menu-stripe-left,
	#trackheader .menu-stripe-wrapper > .menu-stripe-center,
	#trackheader .menu-stripe-wrapper > .menu-stripe-right {
		display: none !important;
	}

	/* Same rule the site uses for the flex-wrapped header, but hidden on mobile (doubled id to win over zeo_main.css) */
	html body div#trackheader#trackheader .menu-stripe-wrapper.menu-stripe-flex-wrapped .menu-stripe-right,
	html body div#trackheader#trackheader .menu-stripe-wrapper.menu-stripe-flex-wrapped .menu-stripe-left,
	html body div#trackheader#trackheader .menu-stripe-wrapper.menu-stripe-flex-wrapped .menu-stripe-center {
		display: none !important;
	}

	#trackheader .menu-stripe-wrapper {
		display: block !important;
	}

	.zeo-mm-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		min-height: 56px;
		padding: 8px 0;
	}

	.zeo-mm-bar-logo img {
		display: block;
		height: 30px;
		width: auto;
	}

	/* Hamburger */
	button.zeo-mm-toggle {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		min-width: 44px !important;
		padding: 0 !important;
		margin: 0;
		border: 0 !important;
		border-radius: 10px !important;
		background: #eef5ff !important;
		color: #157ef8;
		cursor: pointer;
		letter-spacing: 0 !important;
		text-transform: none !important;
	}

	button.zeo-mm-toggle:hover,
	button.zeo-mm-toggle:focus-visible {
		background: #dcebff !important;
	}

	.zeo-mm-toggle-bars {
		display: flex;
		flex-direction: column;
		gap: 5px;
		width: 20px;
	}

	.zeo-mm-toggle-bars span {
		display: block;
		height: 2px;
		border-radius: 2px;
		background: #157ef8;
	}

	/* Overlay */
	.zeo-mm-overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 2147483000;
		background: rgba(11, 30, 60, .55);
		opacity: 0;
		visibility: hidden;
		transition: opacity .25s ease, visibility .25s ease;
	}

	.zeo-mm-overlay[hidden] {
		display: block;
	}

	html.zeo-mm-open .zeo-mm-overlay {
		opacity: 1;
		visibility: visible;
	}

	html.zeo-mm-open,
	html.zeo-mm-open body {
		overflow: hidden;
	}

	/* Keep floating widgets (language switcher, Freshchat, app banner) from covering the panel */
	html.zeo-mm-open .gt_switcher_wrapper,
	html.zeo-mm-open #gt_float_wrapper,
	html.zeo-mm-open .gtranslate_wrapper,
	html.zeo-mm-open #fc_frame,
	html.zeo-mm-open #freshworks-container,
	html.zeo-mm-open iframe#fc_frame,
	html.zeo-mm-open .DownloadApp_wrapper {
		display: none !important;
	}

	/* Panel */
	.zeo-mm-panel {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 2147483001;
		width: min(88vw, 380px);
		background: #fff;
		box-shadow: -10px 0 40px rgba(15, 15, 15, .18);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform .28s ease, visibility .28s ease;
		font-family: 'Poppins', sans-serif;
	}

	html.zeo-mm-open .zeo-mm-panel {
		transform: translateX(0);
		visibility: visible;
	}

	.zeo-mm-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12px 20px;
		border-bottom: 1px solid #edf1f7;
	}

	button.zeo-mm-close {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		min-width: 40px !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 50% !important;
		background: #f1f5fb !important;
		color: #0b2d5c;
		cursor: pointer;
	}

	button.zeo-mm-close:hover {
		background: #e2ebf8 !important;
	}

	/* Search */
	.zeo-mm-search {
		position: relative;
		margin: 16px 20px 8px;
	}

	.zeo-mm-search input[type="search"] {
		width: 100%;
		height: 44px;
		padding: 0 46px 0 16px;
		border: 1px solid #d9e3f2;
		border-radius: 10px;
		background: #f7faff;
		font-size: 15px;
		box-shadow: none;
	}

	.zeo-mm-search input[type="search"]:focus {
		outline: 0;
		border-color: #157ef8;
		background: #fff;
	}

	.zeo-mm-search button {
		position: absolute;
		top: 0;
		right: 0;
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		min-width: 44px !important;
		padding: 0 !important;
		border: 0 !important;
		background: transparent !important;
		color: #157ef8;
		cursor: pointer;
	}

	/* Menu list */
	.zeo-mm-nav {
		flex: 1 1 auto;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 4px 12px 16px;
	}

	.zeo-mm-nav ul,
	.zeo-mm-nav li {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.zeo-mm-row {
		display: flex;
		align-items: stretch;
	}

	.zeo-mm-link {
		flex: 1 1 auto;
		display: block;
		padding: 13px 12px;
		border-radius: 10px;
		color: #141414;
		font-size: 16px;
		font-weight: 500;
		line-height: 1.35;
		text-decoration: none;
	}

	.zeo-mm-link i {
		width: 20px;
		margin-right: 8px;
		color: #157ef8;
		text-align: center;
	}

	.zeo-mm-link:hover,
	.zeo-mm-link:focus-visible {
		background: #f1f7ff;
		color: #157ef8;
		text-decoration: none;
	}

	.zeo-mm-item.current-menu-item > .zeo-mm-row > .zeo-mm-link {
		color: #157ef8;
		background: #eef5ff;
	}

	button.zeo-mm-sub-toggle {
		flex: 0 0 44px;
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		min-width: 44px !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 10px !important;
		background: transparent !important;
		color: #5b6b82;
		cursor: pointer;
	}

	button.zeo-mm-sub-toggle svg {
		transition: transform .2s ease;
	}

	.zeo-mm-item.is-open > .zeo-mm-row > .zeo-mm-sub-toggle svg {
		transform: rotate(180deg);
		color: #157ef8;
	}

	/* Collapsible sub-menus */
	.zeo-mm-sub-wrap {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows .25s ease;
	}

	.zeo-mm-sub-wrap > .zeo-mm-sub {
		overflow: hidden;
		min-height: 0;
	}

	.zeo-mm-item.is-open > .zeo-mm-sub-wrap {
		grid-template-rows: 1fr;
	}

	.zeo-mm-sub {
		margin-left: 14px !important;
		padding-left: 8px !important;
		border-left: 2px solid #e3edfb;
	}

	.zeo-mm-sub .zeo-mm-link {
		padding: 10px 12px;
		font-size: 15px;
		font-weight: 400;
		color: #2c3a4f;
	}

	.zeo-mm-sub .zeo-mm-depth-2 .zeo-mm-link {
		font-size: 14px;
	}

	/* Login / signup buttons */
	.zeo-mm-cta {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 16px 20px 24px;
		border-top: 1px solid #edf1f7;
		background: #fff;
	}

	.zeo-mm-btn {
		display: block;
		padding: 13px 18px;
		border-radius: 100px;
		font-size: 15px;
		font-weight: 600;
		text-align: center;
		text-decoration: none;
	}

	.zeo-mm-btn[hidden] {
		display: none;
	}

	.zeo-mm-btn-primary {
		background: #157ef8;
		border: 2px solid #157ef8;
		color: #fff;
	}

	.zeo-mm-btn-primary:hover {
		background: #0f6ad6;
		border-color: #0f6ad6;
		color: #fff;
		text-decoration: none;
	}

	.zeo-mm-btn-ghost {
		background: #fff;
		border: 2px solid #d5e3f7;
		color: #157ef8;
	}

	.zeo-mm-btn-ghost:hover {
		border-color: #157ef8;
		text-decoration: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.zeo-mm-panel,
	.zeo-mm-overlay,
	.zeo-mm-sub-wrap,
	button.zeo-mm-sub-toggle svg {
		transition: none;
	}
}