/**
 * synergiintl — 手机底栏 mfoot 美化（对齐 navy / gold）
 * 系统自动注入，盖过 _common/Public/xy_mfoot.css
 */
:root {
	--xy-mfoot-bg: rgba(255, 255, 255, 0.97);
	--xy-mfoot-border: rgba(26, 43, 74, 0.08);
	--xy-mfoot-color: #1a2b4a;
	--xy-mfoot-muted: #6b7c8f;
	--xy-mfoot-hover: #c4a35a;
	--xy-mfoot-hover-bg: rgba(196, 163, 90, 0.12);
	--xy-mfoot-wa: #25d366;
	--xy-mfoot-wa-bg: rgba(37, 211, 102, 0.12);
	--xy-mfoot-top-bg: #1a2b4a;
	--xy-mfoot-top-hover: linear-gradient(135deg, #c4a35a 0%, #b8944a 100%);
	--xy-mfoot-z: 1030;
	--xy-mfoot-height: 58px;
}

.footer-bar {
	margin-bottom: 0;
}

@media screen and (max-width: 768px) {
	body {
		padding-bottom: calc(var(--xy-mfoot-height) + env(safe-area-inset-bottom, 0px));
	}

	.mfoot_box {
		display: block;
		background: var(--xy-mfoot-bg);
		border-top: 1px solid var(--xy-mfoot-border);
		box-shadow: 0 -8px 28px rgba(26, 43, 74, 0.1);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		min-height: calc(var(--xy-mfoot-height) + env(safe-area-inset-bottom, 0px));
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}

	.mfoot_inner {
		height: var(--xy-mfoot-height);
		max-width: 520px;
		margin: 0 auto;
	}

	.mfoot_nav {
		border-right: none;
	}

	.mfoot_nav + .mfoot_nav::before {
		content: "";
		position: absolute;
		left: 0;
		top: 18%;
		bottom: 18%;
		width: 1px;
		background: linear-gradient(
			180deg,
			transparent,
			rgba(26, 43, 74, 0.1) 20%,
			rgba(26, 43, 74, 0.1) 80%,
			transparent
		);
		pointer-events: none;
	}

	.mfoot_nav a {
		color: var(--xy-mfoot-muted);
		gap: 3px;
		font-family: "Montserrat", system-ui, sans-serif;
	}

	.mfoot_box.navbar-default .mfoot_nav a {
		color: var(--xy-mfoot-muted);
	}

	.mfoot_nav .fa,
	.mfoot_nav .xy-iconfont {
		font-size: 19px;
		margin-bottom: 2px;
		color: var(--xy-mfoot-color);
	}

	.mfoot_label {
		font-size: 9px;
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: inherit;
	}

	.mfoot_nav:not(.mfoot_nav_top) a:hover,
	.mfoot_nav:not(.mfoot_nav_top) a:focus,
	.mfoot_nav:not(.mfoot_nav_top) a:active,
	.mfoot_box.navbar-default .mfoot_nav:not(.mfoot_nav_top) a:hover,
	.mfoot_box.navbar-default .mfoot_nav:not(.mfoot_nav_top) a:focus,
	.mfoot_box.navbar-default .mfoot_nav:not(.mfoot_nav_top) a:active {
		color: var(--xy-mfoot-hover);
		background: var(--xy-mfoot-hover-bg);
	}

	.mfoot_nav:not(.mfoot_nav_top) a:hover .fa,
	.mfoot_nav:not(.mfoot_nav_top) a:focus .fa,
	.mfoot_nav:not(.mfoot_nav_top) a:active .fa {
		color: var(--xy-mfoot-hover);
	}

	/* WhatsApp */
	.mfoot_nav:first-child a:hover,
	.mfoot_nav:first-child a:focus,
	.mfoot_nav:first-child a:active,
	.mfoot_box.navbar-default .mfoot_nav:first-child a:hover,
	.mfoot_box.navbar-default .mfoot_nav:first-child a:focus,
	.mfoot_box.navbar-default .mfoot_nav:first-child a:active {
		color: var(--xy-mfoot-wa);
		background: var(--xy-mfoot-wa-bg);
	}
	.mfoot_nav:first-child a:hover .fa,
	.mfoot_nav:first-child a:focus .fa,
	.mfoot_nav:first-child a:active .fa {
		color: var(--xy-mfoot-wa);
	}

	/* Phone — navy */
	.mfoot_nav:nth-child(2) a:hover .fa,
	.mfoot_nav:nth-child(2) a:focus .fa,
	.mfoot_nav:nth-child(2) a:active .fa {
		color: #1a2b4a;
	}

	/* E-mail — gold */
	.mfoot_nav:nth-child(4) a:hover,
	.mfoot_nav:nth-child(4) a:focus,
	.mfoot_nav:nth-child(4) a:active {
		color: #c4a35a;
	}

	/* Inquiry — navy */
	.mfoot_nav:nth-child(5) a:hover .fa,
	.mfoot_nav:nth-child(5) a:focus .fa,
	.mfoot_nav:nth-child(5) a:active .fa {
		color: #1a2b4a;
	}

	/* Center back-to-top */
	.mfoot_nav_top {
		position: relative;
	}
	.mfoot_nav_top::before {
		display: none;
	}
	.mfoot_nav_top a {
		padding: 0;
	}
	.mfoot_top_btn {
		width: 42px;
		height: 42px;
		border-radius: 50%;
		background: var(--xy-mfoot-top-bg);
		color: #fff;
		box-shadow: 0 4px 14px rgba(26, 43, 74, 0.28);
		border: 2px solid #fff;
		margin-top: -10px;
		transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
	}
	.mfoot_top_btn .fa {
		margin: 0 !important;
		font-size: 16px !important;
		color: #fff !important;
		transform: none !important;
	}
	.mfoot_nav_top a:hover .mfoot_top_btn,
	.mfoot_nav_top a:focus .mfoot_top_btn,
	.mfoot_nav_top a:active .mfoot_top_btn {
		background: var(--xy-mfoot-top-hover);
		transform: translateY(-3px);
		box-shadow: 0 8px 18px rgba(196, 163, 90, 0.4);
	}
}