/**
 * Floating contact widget.
 *
 * A fixed bottom-right FAB with a curved "We are here!" label and three
 * actions (WhatsApp / Call / Chat) that fan out in an arc when opened.
 * Pairs with template-parts/floating-contact.php + assets/js/floating-contact.js.
 *
 * Design tokens (--color-*) come from critical.css :root.
 */

.fcontact {
	position: fixed;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: 9990;
	width: 64px;
	height: 64px;
	font-family: var(--font);
}

/* --- Main FAB toggle (rounded-square "squircle") ------------------------- */
.fcontact__toggle {
	position: absolute;
	inset: 0;
	width: 64px;
	height: 64px;
	border: 0;
	border-radius: 24px;
	cursor: pointer;
	color: #fff;
	background: var(--color-primary);
	box-shadow: 0 18px 35px -10px rgba(37, 99, 235, .6), 0 8px 16px -8px rgba(15, 23, 42, .35);
	display: grid;
	place-items: center;
	transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease, background .3s ease;
	z-index: 2;
}
.fcontact__toggle:hover {
	transform: scale(1.07);
	box-shadow: 0 22px 42px -10px rgba(37, 99, 235, .7), 0 10px 20px -8px rgba(15, 23, 42, .4);
}
.fcontact__toggle:active { transform: scale(.96); }

/* Pinging halo behind the button (Tailwind animate-ping look). */
.fcontact__pulse {
	position: absolute;
	inset: 0;
	border-radius: 24px;
	background: var(--color-primary);
	z-index: -1;
	animation: fcontact-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite;
}

/* Plus icon that rotates 45° into an X when open. */
.fcontact__icon {
	transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.fcontact.is-open .fcontact__icon { transform: rotate(135deg); }
.fcontact.is-open .fcontact__pulse { animation: none; opacity: 0; }

/* When open the button goes transparent — just the close (X) icon remains. */
.fcontact.is-open .fcontact__toggle {
	background: transparent;
	box-shadow: none;
	color: var(--color-text);
}
.fcontact.is-open .fcontact__toggle:hover {
	background: rgba(15, 23, 42, .06);
	box-shadow: none;
}

/* --- Curved "We are here!" label ----------------------------------------- */
.fcontact__curve {
	position: absolute;
	left: 50%;
	bottom: 70px;            /* Sit just above the FAB + the waving hand. */
	width: 124px;
	height: 46px;
	transform: translateX(-50%);
	pointer-events: none;
	transform-origin: 50% 120%;
	animation: fcontact-bob 3s ease-in-out infinite;
	transition: opacity .3s cubic-bezier(.34, 1.56, .64, 1), transform .3s ease;
}

/* Waving hand sitting at the start of the curved label — waves along with it
   (it's a child of .fcontact__curve, so it shares the bob animation). */
.fcontact__wave {
	position: absolute;
	left: -16px;
	top: 24px;
	font-size: 18px;
	line-height: 1;
	transform-origin: 75% 85%;
	animation: fcontact-wave 2.2s ease-in-out infinite;
}
.fcontact__curve-text {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .3px;
	fill: var(--color-primary-d);
	text-transform: uppercase;
	paint-order: stroke;
	stroke: #fff;
	stroke-width: 4px;
	stroke-linejoin: round;
}
/* Hide the label once the menu is open so it doesn't clash with the actions. */
.fcontact.is-open .fcontact__curve {
	opacity: 0;
	transform: translateX(-50%) translateY(6px) scale(.9);
	animation: none;
}

/* --- Action buttons (fan out in an arc) ---------------------------------- */
.fcontact__actions {
	position: absolute;
	left: 50%;
	bottom: 50%;
	margin: 0;
	padding: 0;
	list-style: none;
	width: 0;
	height: 0;
}
.fcontact__item {
	position: absolute;
	/* Anchor each 52px button centred over the FAB centre. */
	left: -26px;
	top: -26px;
	transform: translate(0, 0) scale(0);
	opacity: 0;
	transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease;
	transition-delay: 0s;
}

/* Stack the actions straight up in a vertical line above the FAB. */
.fcontact.is-open .fcontact__item { opacity: 1; }
.fcontact.is-open .fcontact__item[style*="--fc-i:0"] {
	transform: translate(0, -66px) scale(1);
	transition-delay: .05s;
}
.fcontact.is-open .fcontact__item[style*="--fc-i:1"] {
	transform: translate(0, -128px) scale(1);
	transition-delay: .11s;
}
.fcontact.is-open .fcontact__item[style*="--fc-i:2"] {
	transform: translate(0, -190px) scale(1);
	transition-delay: .17s;
}

.fcontact__btn {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 18px;
	color: #fff;
	text-decoration: none;
	box-shadow: 0 18px 35px -12px rgba(15, 23, 42, .5), 0 8px 16px -10px rgba(15, 23, 42, .4);
	transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.fcontact__btn:hover {
	transform: scale(1.08);
	filter: brightness(1.05);
	box-shadow: 0 22px 40px -12px rgba(15, 23, 42, .55);
	color: #fff;
}
.fcontact__btn--whatsapp { background: #22c55e; }
.fcontact__btn--call     { background: var(--color-primary); }
.fcontact__btn--chat     { background: #6366f1; }

/* Tooltip label that slides out to the left on hover. */
.fcontact__tip {
	position: absolute;
	right: calc(100% + 10px);
	white-space: nowrap;
	background: var(--color-text);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	padding: 5px 10px;
	border-radius: 6px;
	opacity: 0;
	transform: translateX(6px);
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}
.fcontact__tip::after {
	content: "";
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
	border: 5px solid transparent;
	border-left-color: var(--color-text);
}
.fcontact__btn:hover .fcontact__tip,
.fcontact__btn:focus-visible .fcontact__tip {
	opacity: 1;
	transform: translateX(0);
}

/* --- Animations ---------------------------------------------------------- */
@keyframes fcontact-ping {
	0%        { transform: scale(1);   opacity: .5; }
	75%, 100% { transform: scale(1.6); opacity: 0; }
}
@keyframes fcontact-bob {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50%      { transform: translateX(-50%) translateY(-5px); }
}
@keyframes fcontact-wave {
	0%, 60%, 100% { transform: rotate(0deg); }
	10%, 30%      { transform: rotate(18deg); }
	20%, 40%      { transform: rotate(-14deg); }
}

/* Respect users who prefer less motion. */
@media (prefers-reduced-motion: reduce) {
	.fcontact__toggle,
	.fcontact__icon,
	.fcontact__item,
	.fcontact__curve,
	.fcontact__btn { transition-duration: .01ms; }
	.fcontact__pulse,
	.fcontact__curve,
	.fcontact__wave { animation: none; }
}

/* Small screens: shrink slightly so it never crowds the content. */
@media (max-width: 480px) {
	.fcontact, .fcontact__toggle { width: 58px; height: 58px; }
}