/* Floating Call & WhatsApp Button
 *
 * Screen position, stack direction and the edge-tab / chat-bubble radii are
 * generated by the plugin as inline CSS (they depend on the settings). This
 * file holds everything else.
 */

.fcwb {
	position: fixed;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	gap: var(--fcwb-gap, 12px);
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	/* Fallback position; overridden by the generated inline CSS. */
	right: calc(16px + env(safe-area-inset-right, 0px));
	bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

.fcwb *,
.fcwb *::before,
.fcwb *::after {
	box-sizing: border-box;
}

/* ---------- Shapes ---------- */
/* "Chat bubble" (leaf) and "Edge tab" radii are set by the inline CSS. */
.fcwb--shape-circle   { --fcwb-radius: 999px; }
.fcwb--shape-rounded  { --fcwb-radius: calc(var(--fcwb-size, 56px) * 0.24); }
.fcwb--shape-squircle { --fcwb-radius: calc(var(--fcwb-size, 56px) * 0.38); }
.fcwb--shape-square   { --fcwb-radius: 0; }

.fcwb-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: var(--fcwb-size, 56px);
	min-width: var(--fcwb-size, 56px);
	padding: 0;
	border-radius: var(--fcwb-radius, 999px);
	color: var(--fcwb-icon, #fff);
	text-decoration: none;
	line-height: 1;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

.fcwb-btn:hover,
.fcwb-btn:focus {
	color: var(--fcwb-icon, #fff);
	text-decoration: none;
	transform: translateY(-2px) scale(1.04);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.fcwb-btn:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
	box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.55);
}

.fcwb-btn--wa {
	background: var(--fcwb-wa, #25d366);
}

.fcwb-btn--call {
	background: var(--fcwb-call, #1a73e8);
}

.fcwb-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--fcwb-size, 56px);
	height: var(--fcwb-size, 56px);
	flex: 0 0 auto;
}

.fcwb-ico svg {
	display: block;
	width: 48%;
	height: 48%;
}

/* Label: screen-reader only unless labels are enabled. */
.fcwb-label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	font-size: 15px;
	font-weight: 600;
}

/* Pulse ring */
.fcwb--pulse .fcwb-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: inherit;
	opacity: 0.55;
	z-index: -1;
	animation: fcwb-pulse 2.2s ease-out infinite;
	pointer-events: none;
}

.fcwb--pulse .fcwb-btn--call::after {
	animation-delay: 1.1s;
}

/* Edge tabs are attached to the screen edge, so a pulse ring looks wrong. */
.fcwb--shape-tab.fcwb--pulse .fcwb-btn::after {
	display: none;
}

@keyframes fcwb-pulse {
	0% {
		transform: scale(1);
		opacity: 0.55;
	}
	100% {
		transform: scale(1.55);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fcwb--pulse .fcwb-btn::after {
		animation: none;
		display: none;
	}
	.fcwb-btn {
		transition: none;
	}
	.fcwb-btn:hover,
	.fcwb-btn:focus {
		transform: none;
	}
}

/* ---------- Desktop (769px and up) ---------- */
@media (min-width: 769px) {
	.fcwb--hide-desktop {
		display: none !important;
	}

	.fcwb--labels .fcwb-btn {
		padding-right: 22px;
	}

	.fcwb--labels .fcwb-ico {
		width: calc(var(--fcwb-size, 56px) - 8px);
	}

	.fcwb--labels .fcwb-label {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		color: inherit;
	}
}

/* ---------- Mobile & tablet (768px and below) ---------- */
@media (max-width: 768px) {
	.fcwb--hide-mobile {
		display: none !important;
	}

	/* Keep round icons a comfortable size on small screens. */
	.fcwb--m-icons {
		--fcwb-size: min(var(--fcwb-size-base, 56px), 56px);
	}

	/* Full-width bottom bar (replaces the chosen mobile position). */
	.fcwb--m-bar {
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		transform: none;
		flex-direction: row;
		align-items: stretch;
		gap: 0;
		padding-bottom: env(safe-area-inset-bottom, 0px);
		background: #fff;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
	}

	.fcwb--m-bar .fcwb-btn {
		flex: 1 1 0;
		height: 52px;
		min-width: 0;
		border-radius: 0;
		box-shadow: none;
		gap: 8px;
	}

	.fcwb--m-bar .fcwb-btn:hover,
	.fcwb--m-bar .fcwb-btn:focus {
		transform: none;
		box-shadow: none;
	}

	.fcwb--m-bar .fcwb-ico {
		width: 28px;
		height: 28px;
	}

	.fcwb--m-bar .fcwb-ico svg {
		width: 24px;
		height: 24px;
	}

	.fcwb--m-bar .fcwb-label {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		color: inherit;
	}

	.fcwb--m-bar.fcwb--pulse .fcwb-btn::after {
		display: none;
	}

	/* Keep page content from hiding behind the bar. */
	body.fcwb-has-bar {
		padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px));
	}
}

@media print {
	.fcwb {
		display: none !important;
	}
}