/*!
 * com_manicontact – contact bar
 * Phones: sticky bar at the bottom (default) or floating buttons (.mc-bar--m-float).
 * Desktop: floating buttons in a bottom corner (.mc-bar--d-left / .mc-bar--d-right).
 *
 * Colours: every button uses --mc-b-bg / --mc-b-fg when set inline (own colour or brand colour,
 * text colour picked for contrast on the server), otherwise the theme button colours.
 * Rounding of the floating buttons: --mc-bar-radius (one shared option).
 */
.mc-bar {
	--mc-bar-bg: var(--mc-btn-bg, #0b1b3a);
	--mc-bar-fg: var(--mc-btn-fg, #fff);
	position: fixed;
	/* Below the usual modal / off-canvas layers (Bootstrap 1040+, UIkit 1010+), above page content and sticky headers. */
	z-index: var(--mc-bar-z, 1005);
	transition: transform .25s ease, opacity .25s ease;
	inset-inline: 0;
	inset-block-end: 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 1px;
	padding-block-end: env(safe-area-inset-bottom, 0);
	background: rgba(255, 255, 255, .2);
	box-shadow: 0 -6px 24px rgba(15, 23, 42, .18);
	font-size: 14px;
	line-height: 1.2;
}

.mc-bar__btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-block-size: 58px;
	padding: 8px 4px;
	background: var(--mc-b-bg, var(--mc-bar-bg));
	color: var(--mc-b-fg, var(--mc-bar-fg)) !important;
	text-decoration: none !important;
	font-weight: 600;
}

.mc-bar__btn .mc-icon { inline-size: 22px; block-size: 22px; font-size: 20px; line-height: 1; }
.mc-bar__btn:active { filter: brightness(.9); }
.mc-bar__btn:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }

/* Keep the end of the page (footer, copyright) clear of the bar / floating buttons: a real spacer block. */
.mc-bar-spacer { display: none; clear: both; }

/* ---------------- Floating buttons (desktop, and phones in "floating" style) ---------------- */
/* Shared look; applied inside the media queries below. */

/* ---------------- Phones ---------------- */
@media (max-width: 767.98px) {
	/* Per-device buttons: hidden ones take no column, so the rest share the width equally. */
	.mc-bar:not(.mc-bar--has-m), .mc-bar__btn:not(.mc-on-m) { display: none; }

	.mc-bar-spacer--m { display: block; block-size: calc(59px + env(safe-area-inset-bottom, 0px)); }
	.mc-bar-spacer--mf { display: block; block-size: var(--mc-spacer-m, 80px); }

	.mc-bar--m-float {
		inset-inline: auto;
		inset-block-end: calc(16px + env(safe-area-inset-bottom, 0px));
		grid-auto-flow: row;
		grid-auto-columns: auto;
		gap: 10px;
		padding: 0;
		background: none;
		box-shadow: none;
	}

	.mc-bar--m-float.mc-bar--m-right { right: 16px; left: auto; }
	.mc-bar--m-float.mc-bar--m-left { left: 16px; right: auto; }

	.mc-bar--m-float .mc-bar__btn {
		flex-direction: row;
		gap: 8px;
		min-block-size: 46px;
		padding: 10px 16px;
		border-radius: var(--mc-bar-radius, 999px);
		box-shadow: 0 8px 24px rgba(15, 23, 42, .22);
	}
}

/* ---------------- Desktop ---------------- */
@media (min-width: 768px) {
	.mc-bar:not(.mc-bar--has-d), .mc-bar__btn:not(.mc-on-d) { display: none; }

	/* Room for the floating buttons, so they never sit on the footer at the end of the page. */
	.mc-bar-spacer--d { display: block; block-size: var(--mc-spacer-d, 80px); }

	.mc-bar--has-d {
		inset-inline: auto;
		inset-block-end: 20px;
		grid-auto-flow: row;
		grid-auto-columns: auto;
		gap: 10px;
		padding: 0;
		background: none;
		box-shadow: none;
	}

	.mc-bar--has-d.mc-bar--d-right { right: 20px; left: auto; }
	.mc-bar--has-d.mc-bar--d-left { left: 20px; right: auto; }

	.mc-bar--has-d .mc-bar__btn {
		flex-direction: row;
		gap: 8px;
		min-block-size: 48px;
		padding: 10px 18px;
		border-radius: var(--mc-bar-radius, 999px);
		box-shadow: 0 8px 24px rgba(15, 23, 42, .22);
		transition: transform .15s ease;
	}

	.mc-bar--has-d .mc-bar__btn:hover { transform: translateY(-2px); }
}

/* A modal, off-canvas menu or bottom sheet is open: the bar steps aside. */
.mc-bar.mc-bar--away { transform: translateY(calc(100% + 30px)); opacity: 0; pointer-events: none; }

@media print {
	.mc-bar { display: none !important; }
}