/**
 * Taxi Blauw — floating contact bar
 */

.tb-floating-contact-bar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 50;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 0;
	padding-bottom: env(safe-area-inset-bottom, 0);
}

.tb-floating-contact-bar__btn {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	width: auto;
	height: 3.5rem;
	border-radius: 0;
	color: #fff;
	text-decoration: none;
	transition: transform 150ms ease, opacity 150ms ease;
}

.tb-floating-contact-bar__btn:hover,
.tb-floating-contact-bar__btn:focus-visible {
	color: #fff;
	text-decoration: none;
	opacity: 0.92;
}

.tb-floating-contact-bar__btn:active {
	opacity: 0.85;
}

.tb-floating-contact-bar__btn--phone,
.tb-floating-contact-bar__btn--email {
	background: var(--tb-floating-blue);
}

.tb-floating-contact-bar__btn--whatsapp {
	background: var(--tb-whatsapp);
}

.tb-floating-contact-bar__btn--email {
	display: none;
}

.tb-floating-contact-bar__icon {
	width: 1.5rem;
	height: 1.5rem;
	color: #fff;
}

.tb-floating-contact-bar__icon[fill='currentColor'] {
	fill: currentColor;
	stroke: none;
}

.tb-floating-contact-bar__icon:not([fill='currentColor']) {
	fill: none;
	stroke: currentColor;
}

@media (min-width: 768px) {
	.tb-floating-contact-bar {
		right: 1.5rem;
		bottom: 6rem;
		left: auto;
		flex-direction: column;
		align-items: flex-end;
		gap: 0.75rem;
		padding-bottom: 0;
	}

	.tb-floating-contact-bar__btn {
		flex: none;
		width: 3.5rem;
		height: 3.5rem;
		border-radius: 9999px;
	}

	.tb-floating-contact-bar__btn:hover,
	.tb-floating-contact-bar__btn:focus-visible {
		opacity: 1;
		transform: scale(1.1);
	}

	.tb-floating-contact-bar__btn:active {
		opacity: 1;
		transform: scale(0.95);
	}

	.tb-floating-contact-bar__btn--phone,
	.tb-floating-contact-bar__btn--email {
		box-shadow:
			0 10px 15px -3px rgb(37 99 235 / 0.3),
			0 4px 6px -4px rgb(37 99 235 / 0.3);
	}

	.tb-floating-contact-bar__btn--whatsapp {
		box-shadow:
			0 10px 15px -3px rgb(37 211 102 / 0.3),
			0 4px 6px -4px rgb(37 211 102 / 0.3);
	}

	.tb-floating-contact-bar__btn--email {
		display: flex;
	}
}