/* 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:#00af75;
}

.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;
}

/* Desktop: show the desktop text, hide the mobile-specific text */
.fwb-button__text-mobile {
	display: none;
}

.fwb-button__text-desktop {
	display: inline;
}

/* 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: #0D2149; 
}

.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: 13%;
        right: 13%;
        bottom: calc(12px + env(safe-area-inset-bottom, 0));
        z-index: 9999;
        display: flex;
        width: 74%;
        border-radius: 999px;
        overflow: hidden;
        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: 44px;
		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: 3px;
		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: 22px;
		height: 22px;
		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: 14px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.fwb-button__text-desktop {
		display: none;
	}

	.fwb-button__text-mobile {
		display: inline;
 	    font-size: 14px;
        white-space: nowrap;
        font-family: 'Fira Sans' !important;
	}

	/* Swap which half WhatsApp sits in, per the "Position (mobile/tablet)" setting */
	.fwb-bar--wa-right .fwb-button {
		order: 2;
	}

	.fwb-bar--wa-right .fwb-call-button {
		order: 1;
	}
}

@media (max-width: 380px) {
    .fwb-bar {
        left: 24px;
        right: 24px;
        width: auto;
    }
}

/* 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: 14px;
	}
}

@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;
	}
}