/**
 * WM Floating Contact
 * Colours and font come from Settings › Floating contact (inline custom properties).
 * Further tweaks via custom CSS, e.g. .wm-floating-contact { --wm-fc-size: 52px; }
 */
.wm-floating-contact {
	--wm-fc-size: 48px;
	--wm-fc-gap: 15px;
	--wm-fc-offset: 25px;
	--wm-fc-icon-size: 20px;
	--wm-fc-phone: #008fe6;
	--wm-fc-whatsapp: #128c7e;
	--wm-fc-mail: #d9534f;
	--wm-fc-text: #ffffff;
	--wm-fc-font: inherit;

	position: fixed;
	top: 50%;
	right: var(--wm-fc-offset);
	z-index: 999;
	transform: translateY(-50%);
}

.wm-floating-contact__panel {
	display: flex;
	flex-direction: column;
	gap: var(--wm-fc-gap);
}

/* Drawer tab: mobile only. */
.wm-floating-contact__toggle {
	display: none;
}

.wm-floating-contact__link {
	--wm-fc-color: var(--wm-fc-phone);

	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--wm-fc-size);
	height: var(--wm-fc-size);
	border-radius: calc(var(--wm-fc-size) / 2);
	background-color: var(--wm-fc-color);
	color: var(--wm-fc-text);
	text-decoration: none;
	transition: border-radius 0.3s ease, transform 0.3s ease;
}

.wm-floating-contact__link--whatsapp { --wm-fc-color: var(--wm-fc-whatsapp); }
.wm-floating-contact__link--mail { --wm-fc-color: var(--wm-fc-mail); }

/* Hover bridge: keeps the label open while the cursor crosses the gap. */
.wm-floating-contact__link::after {
	content: "";
	position: absolute;
	top: 0;
	right: 100%;
	width: 8px;
	height: 100%;
}

.wm-floating-contact__icon {
	width: var(--wm-fc-icon-size);
	height: var(--wm-fc-icon-size);
	fill: currentColor;
}

.wm-floating-contact__label {
	position: absolute;
	top: 0;
	right: calc(100% + 5px);
	height: var(--wm-fc-size);
	padding: 0 15px;
	border-radius: calc(var(--wm-fc-size) / 2) 5px calc(var(--wm-fc-size) / 2) calc(var(--wm-fc-size) / 2);
	background-color: var(--wm-fc-color);
	color: var(--wm-fc-text);
	font-family: var(--wm-fc-font);
	font-size: 15px;
	font-weight: 400;
	line-height: var(--wm-fc-size);
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transform: translateX(8px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
	pointer-events: none;
}

.wm-floating-contact__link:hover,
.wm-floating-contact__link:focus-visible {
	border-radius: 5px calc(var(--wm-fc-size) / 2) calc(var(--wm-fc-size) / 2) calc(var(--wm-fc-size) / 2);
}

.wm-floating-contact__link:hover .wm-floating-contact__label,
.wm-floating-contact__link:focus-visible .wm-floating-contact__label {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}

.wm-floating-contact__link:focus-visible {
	outline: 2px solid var(--wm-fc-color);
	outline-offset: 3px;
}

/* Desktop/tablet: mirrored on the left side. */
@media (min-width: 768px) {
	.wm-floating-contact--left {
		right: auto;
		left: var(--wm-fc-offset);
	}

	.wm-floating-contact--left .wm-floating-contact__link::after {
		right: auto;
		left: 100%;
	}

	.wm-floating-contact--left .wm-floating-contact__label {
		right: auto;
		left: calc(100% + 5px);
		border-radius: 5px calc(var(--wm-fc-size) / 2) calc(var(--wm-fc-size) / 2) calc(var(--wm-fc-size) / 2);
		transform: translateX(-8px);
	}

	.wm-floating-contact--left .wm-floating-contact__link:hover,
	.wm-floating-contact--left .wm-floating-contact__link:focus-visible {
		border-radius: calc(var(--wm-fc-size) / 2) 5px calc(var(--wm-fc-size) / 2) calc(var(--wm-fc-size) / 2);
	}
}

/* ------------------------------------------------------------------
 * Phone (Breakdance phone landscape breakpoint)
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
	.wm-floating-contact {
		--wm-fc-accent: #1b3a6b;
		--wm-fc-surface: #ffffff;
		--wm-fc-surface-text: #1a1a1a;
		--wm-fc-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
	}

	.wm-floating-contact--mobile-hidden {
		display: none;
	}

	.wm-floating-contact__link::after {
		display: none;
	}

	.wm-floating-contact__link:hover,
	.wm-floating-contact__link:focus-visible {
		border-radius: calc(var(--wm-fc-size) / 2);
	}

	.wm-floating-contact__toggle {
		margin: 0;
		border: 0;
		cursor: pointer;
		appearance: none;
		-webkit-tap-highlight-color: transparent;
	}

	/* --- Mode: FAB (default) — one button bottom right, options expand upwards. --- */
	.wm-floating-contact--mobile-fab {
		top: auto;
		right: calc(16px + env(safe-area-inset-right, 0px));
		bottom: calc(24px + env(safe-area-inset-bottom, 0px));
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 12px;
		transform: none;
	}

	/* Dimmed backdrop; tapping it closes (handled in JS). */
	.wm-floating-contact--mobile-fab::before {
		content: "";
		position: fixed;
		inset: 0;
		z-index: -1;
		background-color: rgba(0, 0, 0, 0.35);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.25s ease, visibility 0.25s;
	}

	.wm-floating-contact--mobile-fab.is-open::before {
		opacity: 1;
		visibility: visible;
	}

	.wm-floating-contact--mobile-fab .wm-floating-contact__panel {
		align-items: flex-end;
		gap: 12px;
		/* Align option buttons with the centre of the 56px toggle. */
		padding-right: 4px;
		opacity: 0;
		visibility: hidden;
		transform: translateY(12px);
		transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
	}

	.wm-floating-contact--mobile-fab.is-open .wm-floating-contact__panel {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.wm-floating-contact--mobile-fab .wm-floating-contact__link {
		box-shadow: var(--wm-fc-shadow);
	}

	/* Labels always visible when open, and part of the tap target. */
	.wm-floating-contact--mobile-fab .wm-floating-contact__label {
		top: 50%;
		right: calc(100% + 10px);
		height: 36px;
		border-radius: 18px;
		background-color: var(--wm-fc-surface);
		box-shadow: var(--wm-fc-shadow);
		color: var(--wm-fc-surface-text);
		font-size: 14px;
		line-height: 36px;
		opacity: 1;
		visibility: inherit;
		transform: translateY(-50%);
		pointer-events: auto;
	}

	.wm-floating-contact--mobile-fab .wm-floating-contact__toggle {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 56px;
		height: 56px;
		padding: 0;
		border-radius: 50%;
		background-color: var(--wm-fc-accent);
		box-shadow: var(--wm-fc-shadow);
		color: #ffffff;
	}

	.wm-floating-contact--mobile-fab .wm-floating-contact__toggle-icon {
		position: absolute;
		width: 24px;
		height: 24px;
		fill: currentColor;
		transition: opacity 0.2s ease, transform 0.25s ease;
	}

	.wm-floating-contact--mobile-fab .wm-floating-contact__toggle-icon--close {
		opacity: 0;
		transform: rotate(-90deg);
	}

	.wm-floating-contact--mobile-fab.is-open .wm-floating-contact__toggle-icon--open {
		opacity: 0;
		transform: rotate(90deg);
	}

	.wm-floating-contact--mobile-fab.is-open .wm-floating-contact__toggle-icon--close {
		opacity: 1;
		transform: rotate(0);
	}

	/* --- Mode: drawer — one uniform block on the left edge, tap to open. --- */
	.wm-floating-contact--mobile-drawer {
		--wm-fc-toggle-width: 34px;

		right: auto;
		left: 0;
		display: flex;
		align-items: stretch;
		border-radius: 0 16px 16px 0;
		background-color: var(--wm-fc-surface);
		box-shadow: var(--wm-fc-shadow);
		transform: translate(calc(-100% + var(--wm-fc-toggle-width)), -50%);
		transition: transform 0.3s ease;
	}

	.wm-floating-contact--mobile-drawer.is-open {
		transform: translate(0, -50%);
	}

	.wm-floating-contact--mobile-drawer .wm-floating-contact__panel {
		padding: 16px 4px 16px calc(12px + env(safe-area-inset-left, 0px));
	}

	.wm-floating-contact--mobile-drawer .wm-floating-contact__label {
		display: none;
	}

	.wm-floating-contact--mobile-drawer .wm-floating-contact__toggle {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: var(--wm-fc-toggle-width);
		padding: 0;
		border-radius: 0 16px 16px 0;
		background: transparent;
		color: var(--wm-fc-surface-text);
		font-family: var(--wm-fc-font);
		font-size: 13px;
		font-weight: 400;
		line-height: 1;
	}

	.wm-floating-contact--mobile-drawer .wm-floating-contact__toggle-text {
		writing-mode: vertical-rl;
		white-space: nowrap;
	}

	.wm-floating-contact--mobile-drawer .wm-floating-contact__toggle-icon {
		width: 12px;
		height: 12px;
		transition: transform 0.3s ease;
	}

	.wm-floating-contact--mobile-drawer.is-open .wm-floating-contact__toggle-icon {
		transform: rotate(180deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wm-floating-contact,
	.wm-floating-contact__link,
	.wm-floating-contact__label,
	.wm-floating-contact::before,
	.wm-floating-contact__panel,
	.wm-floating-contact__toggle,
	.wm-floating-contact__toggle-icon {
		transition: none;
	}
}

@media print {
	.wm-floating-contact {
		display: none;
	}
}