/*
 * FTF Mobile Menu — scoped to #ftf-mm / .ftf-mm.
 * Every rule is !important so the theme cannot leak into the panel and the
 * panel cannot leak into the theme.
 */

html.ftf-mm-lock,
body.ftf-mm-lock {
	overflow: hidden !important;
	height: 100% !important;
}

.ftf-mm,
.ftf-mm *,
.ftf-mm *::before,
.ftf-mm *::after {
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 0 !important;
}

.ftf-mm {
	--ftf-mm-red: #e8000f;
	--ftf-mm-text: #111;
	--ftf-mm-muted: #555;
	--ftf-mm-border: #e5e5e5;
	--ftf-mm-sub-bg: #f7f7f7;
	--ftf-mm-ease: cubic-bezier(0.4, 0, 0.2, 1);

	position: fixed !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	height: 100dvh !important;
	z-index: 2147483000 !important;
	background: #fff !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	transform: translateX(100%) !important;
	transition: transform 0.45s var(--ftf-mm-ease) !important;
	visibility: hidden !important;
	display: block !important;
	overflow: hidden !important;
}

.ftf-mm.ftf-mm--no-transition {
	transition: none !important;
}

.ftf-mm[data-state="open"] {
	transform: translateX(0) !important;
	visibility: visible !important;
}

.ftf-mm[data-state="closing"] {
	transform: translateX(-100%) !important;
	visibility: visible !important;
}

.ftf-mm__inner {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	height: 100% !important;
}

.ftf-mm__close {
	position: absolute !important;
	top: 10px !important;
	right: 10px !important;
	width: 56px !important;
	height: 56px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: none !important;
	border: none !important;
	border-radius: 999px !important;
	cursor: pointer !important;
	color: var(--ftf-mm-text) !important;
	z-index: 1 !important;
	transition: background 0.15s !important;
}
.ftf-mm__close:hover {
	background: #f5f5f5 !important;
}
.ftf-mm__close svg {
	width: 28px !important;
	height: 28px !important;
	display: block !important;
}

.ftf-mm__logo-wrap {
	width: 100% !important;
	max-width: 560px !important;
	margin: 0 auto !important;
	padding: 0 20px 20px !important;
}

.ftf-mm__logo {
	display: block !important;
	max-width: 100% !important;
	height: auto !important;
}

.ftf-mm__scroll {
	flex: 1 1 auto !important;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch !important;
	padding-top: 76px !important;
	display: block !important;
}

.ftf-mm__list {
	list-style: none !important;
	width: 100% !important;
	max-width: 560px !important;
	margin: 0 auto !important;
}

.ftf-mm__item {
	list-style: none !important;
	width: 100% !important;
	border-bottom: 1px solid var(--ftf-mm-border) !important;
}

/* Toggle buttons (any depth with children) */
.ftf-mm__btn {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	width: 100% !important;
	padding: 16px 20px !important;
	background: none !important;
	border: none !important;
	cursor: pointer !important;
	text-align: left !important;
	color: var(--ftf-mm-text) !important;
	font-family: inherit !important;
	line-height: 1.2 !important;
	transition: background 0.15s, color 0.15s !important;
}
.ftf-mm__btn:hover {
	background: #f5f5f5 !important;
	color: var(--ftf-mm-red) !important;
}
.ftf-mm__btn--top,
.ftf-mm__btn--sub {
	font-size: 15px !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em !important;
	text-transform: none !important;
}
.ftf-mm__btn--sub {
	padding-top: 12px !important;
	padding-bottom: 12px !important;
}
.ftf-mm__btn--sub:hover {
	background: #ececec !important;
}

.ftf-mm__label {
	display: block !important;
}

.ftf-mm__chevron {
	width: 18px !important;
	height: 18px !important;
	flex-shrink: 0 !important;
	color: var(--ftf-mm-muted) !important;
	transition: transform 0.3s var(--ftf-mm-ease), color 0.3s !important;
	display: block !important;
}
.ftf-mm__item--open > .ftf-mm__btn .ftf-mm__chevron {
	transform: rotate(90deg) !important;
	color: var(--ftf-mm-red) !important;
}

/* Links (leaf items, any depth) */
.ftf-mm__link {
	display: block !important;
	width: 100% !important;
	color: var(--ftf-mm-text) !important;
	text-decoration: none !important;
	font-family: inherit !important;
	line-height: 1.4 !important;
	transition: background 0.15s, color 0.15s !important;
}
.ftf-mm__link:hover {
	background: #e8e8e8 !important;
	color: var(--ftf-mm-red) !important;
}
.ftf-mm__link--top,
.ftf-mm__link--nested {
	font-size: 15px !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em !important;
}
.ftf-mm__link--top {
	padding-top: 16px !important;
	padding-bottom: 16px !important;
}
.ftf-mm__link--nested {
	padding-top: 11px !important;
	padding-bottom: 11px !important;
	background: var(--ftf-mm-sub-bg) !important;
}
.ftf-mm__link--accent {
	color: var(--ftf-mm-red) !important;
}

/* Nested accordion panels */
.ftf-mm__sub {
	list-style: none !important;
	width: 100% !important;
	background: var(--ftf-mm-sub-bg) !important;
	overflow: hidden !important;
	max-height: 0 !important;
	transition: max-height 0.35s var(--ftf-mm-ease) !important;
}
.ftf-mm__item--open > .ftf-mm__sub {
	max-height: 2000px !important;
}

.ftf-mm__sub .ftf-mm__item {
	border-bottom: none !important;
	border-top: 1px solid var(--ftf-mm-border) !important;
}
.ftf-mm__sub .ftf-mm__item:first-child {
	border-top: none !important;
}
