/*!
 * com_manicontact – sticky contact bar (phones) / floating buttons (desktop, optional)
 */
.mc-bar {
	--mc-bar-bg: var(--mc-btn-bg, #0b1b3a);
	--mc-bar-fg: var(--mc-btn-fg, #fff);
	--mc-wa: #1fa855;
	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-bar-bg);
	color: var(--mc-bar-fg) !important;
	text-decoration: none !important;
	font-weight: 600;
}

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

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

/* Keep the end of the page (footer, copyright) above the bar on phones: a real spacer block, whatever the template does with body. */
.mc-bar-spacer { display: none; clear: both; }
.mc-bar-spacer--m { display: block; block-size: calc(59px + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 768px) {
	.mc-bar-spacer--m { display: none; }
	/* Desktop: 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); }
}

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

	/* Desktop: small floating group in the bottom corner */
	.mc-bar--has-d {
		inset-inline: auto 20px;
		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__btn {
		flex-direction: row;
		gap: 8px;
		min-block-size: 48px;
		padding: 10px 18px;
		border-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; }
}