/* Fixed Contact Buttons. Sizes and colors come from the inline variables set in PHP. */
.fcb {
	position: fixed;
	bottom: var(--fcb-y, 20px);
	z-index: var(--fcb-z, 9999);
	display: flex;
	gap: var(--fcb-gap, 10px);
	margin: 0;
	padding: 0;
	pointer-events: none;
}

.fcb > * {
	pointer-events: auto;
}

.fcb--right {
	right: var(--fcb-x, 20px);
}

.fcb--left {
	left: var(--fcb-x, 20px);
}

.fcb--center {
	left: 50%;
	transform: translateX(-50%);
}

.fcb--vertical {
	flex-direction: column;
}

.fcb--vertical.fcb--right {
	align-items: flex-end;
}

.fcb--vertical.fcb--left {
	align-items: flex-start;
}

.fcb--vertical.fcb--center {
	align-items: center;
}

.fcb .fcb__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	box-sizing: border-box;
	height: var(--fcb-h, 50px);
	min-width: var(--fcb-h, 50px);
	margin: 0;
	padding: 0 1.25em;
	border: 0;
	border-radius: var(--fcb-radius, 50px);
	background: var(--fcb-bg);
	color: var(--fcb-fg);
	font-family: inherit;
	font-size: var(--fcb-font, 16px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: normal;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.fcb .fcb__btn:hover,
.fcb .fcb__btn:focus,
.fcb .fcb__btn:active,
.fcb .fcb__btn:visited {
	color: var(--fcb-fg);
	text-decoration: none;
}

.fcb .fcb__btn:hover,
.fcb .fcb__btn:focus-visible {
	background: var(--fcb-bg-hover);
}

.fcb .fcb__btn:focus-visible {
	outline: 2px solid var(--fcb-bg);
	outline-offset: 3px;
}

.fcb--shadow .fcb__btn {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.fcb--icon-only .fcb__btn {
	width: var(--fcb-h, 50px);
	padding: 0;
}

.fcb__icon {
	display: inline-flex;
	flex: none;
}

.fcb__icon svg {
	display: block;
	width: var(--fcb-icon, 20px);
	height: var(--fcb-icon, 20px);
}

.fcb__label {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Entrance animations run on the buttons so the container keeps its own transform. */
.fcb--anim-fade .fcb__btn {
	animation: fcb-fade var(--fcb-duration, 600ms) ease-out var(--fcb-delay, 0ms) both;
}

.fcb--anim-slide-up .fcb__btn {
	animation: fcb-slide-up var(--fcb-duration, 600ms) cubic-bezier(0.2, 0.8, 0.2, 1) var(--fcb-delay, 0ms) both;
}

.fcb--anim-zoom .fcb__btn {
	animation: fcb-zoom var(--fcb-duration, 600ms) cubic-bezier(0.2, 0.8, 0.2, 1) var(--fcb-delay, 0ms) both;
}

.fcb--anim-bounce .fcb__btn {
	animation: fcb-bounce var(--fcb-duration, 600ms) ease-out var(--fcb-delay, 0ms) both;
}

.fcb[class*="fcb--anim-"] .fcb__btn:nth-child(2) {
	animation-delay: calc(var(--fcb-delay, 0ms) + 120ms);
}

/* Attention effects loop on the icon once the entrance has finished. */
.fcb--attn-pulse .fcb__icon {
	animation: fcb-pulse 2.4s ease-in-out calc(var(--fcb-delay, 0ms) + var(--fcb-duration, 600ms)) infinite;
}

.fcb--attn-shake .fcb__icon {
	animation: fcb-shake 3s ease-in-out calc(var(--fcb-delay, 0ms) + var(--fcb-duration, 600ms)) infinite;
}

@keyframes fcb-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes fcb-slide-up {
	from { opacity: 0; transform: translateY(150%); }
	to { opacity: 1; transform: none; }
}

@keyframes fcb-zoom {
	from { opacity: 0; transform: scale(0.4); }
	to { opacity: 1; transform: none; }
}

@keyframes fcb-bounce {
	0% { opacity: 0; transform: translateY(150%); }
	60% { opacity: 1; transform: translateY(-12%); }
	80% { transform: translateY(4%); }
	100% { transform: none; }
}

@keyframes fcb-pulse {
	0%, 60%, 100% { transform: scale(1); }
	30% { transform: scale(1.25); }
}

@keyframes fcb-shake {
	0%, 50%, 100% { transform: rotate(0); }
	10%, 30% { transform: rotate(-14deg); }
	20%, 40% { transform: rotate(14deg); }
}

@media (prefers-reduced-motion: reduce) {
	.fcb .fcb__btn,
	.fcb .fcb__icon {
		animation: none !important;
		transition: none !important;
	}
}

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