/* Floating WhatsApp + Call buttons */

.fwb-button,
.fwb-call-button {
	position: fixed;
	bottom: 24px;
	z-index: 9999;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px 12px 16px;
	border-radius: 999px;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.fwb-button {
	background-color: #00b67a;
}

.fwb-button--right {
	right: 24px;
}

.fwb-button--left {
	left: 24px;
}

.fwb-button:hover,
.fwb-button:focus {
	background-color: #009463;
	color: #fff;
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.fwb-button:focus-visible,
.fwb-call-button:focus-visible {
	outline: 3px solid #0b4a24;
	outline-offset: 3px;
}

.fwb-button__icon,
.fwb-call-button__icon {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
}

.fwb-button__text,
.fwb-call-button__text {
	white-space: nowrap;
}

/* Icon only: perfect circle (used only on desktop when text is empty) */
.fwb-button--icon-only {
	padding: 15px;
	gap: 0;
}

/* Call button: hidden by default, only shown inside the mobile/tablet bar */
.fwb-call-button {
	display: none;
	background-color: #16345a; /* adjust to match your brand */
}

.fwb-call-button:hover,
.fwb-call-button:focus {
	background-color: #0f2740;
	color: #fff;
	text-decoration: none;
}

/*
 * Mobile & tablet: turn the shared bar into a full-width bottom row.
 * Whichever of the two buttons is enabled fills the available space —
 * if only one is on, it naturally takes 100% because it's the only
 * flex item in the row.
 */
@media (max-width: 767px) {
	.fwb-bar {
		position: fixed;
		left: 24px;
		right: 24px;
		bottom: calc(12px + env(safe-area-inset-bottom, 0));
		z-index: 9999;
		display: flex;
		width: auto;
		border-radius: 999px;
		overflow: hidden; /* clips both buttons into one pill shape */
		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
	}

	.fwb-bar .fwb-button,
	.fwb-bar .fwb-call-button {
		position: static;
		display: inline-flex;
		flex: 1 1 0;
		min-width: 0; /* critical: lets the button shrink below its text's natural width */
		width: auto;
		height: 48px;
		margin: 0;
		padding: 0 6px;
		box-sizing: border-box; /* critical: keeps padding inside the flexed width instead of adding to it */
		border-radius: 0; /* the bar's overflow:hidden provides the rounded outer corners */
		box-shadow: none;
		justify-content: center;
		gap: 6px;
		overflow: hidden;
	}

	.fwb-bar .fwb-button:hover,
	.fwb-bar .fwb-button:focus,
	.fwb-bar .fwb-call-button:hover,
	.fwb-bar .fwb-call-button:focus {
		transform: none;
	}

	.fwb-bar .fwb-button__icon,
	.fwb-bar .fwb-call-button__icon {
		width: 20px;
		height: 20px;
		flex-shrink: 0;
	}

	.fwb-bar .fwb-button__text,
	.fwb-bar .fwb-call-button__text {
		display: inline-block;
		min-width: 0;
		max-width: 100%;
		font-size: 13px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* Extra-narrow phones: trim further so both buttons still fit comfortably */
@media (max-width: 360px) {
	.fwb-bar .fwb-button,
	.fwb-bar .fwb-call-button {
		padding: 0 6px;
		gap: 4px;
	}

	.fwb-bar .fwb-button__text,
	.fwb-bar .fwb-call-button__text {
		font-size: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fwb-button,
	.fwb-call-button {
		transition: none;
	}

	.fwb-button:hover,
	.fwb-button:focus,
	.fwb-call-button:hover,
	.fwb-call-button:focus {
		transform: none;
	}
}