/**
 * SMX-Floating Contact Buttons – Frontend Styles
 *
 * @package FCB_Contact_Buttons
 */

#fcb-container {
	position: fixed;
	bottom: var(--fcb-bottom, 20px);
	display: flex;
	flex-direction: column-reverse;
	gap: var(--fcb-spacing, 12px);
	z-index: var(--fcb-z, 9999);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

#fcb-container.fcb-pos-right {
	right: var(--fcb-side, 20px);
	align-items: flex-end;
}

#fcb-container.fcb-pos-left {
	left: var(--fcb-side, 20px);
	align-items: flex-start;
}

/* Button base */
.fcb-btn {
	display: flex;
	align-items: center;
	gap: 0;
	width: var(--fcb-size, 56px);
	height: var(--fcb-size, 56px);
	border-radius: var(--fcb-radius, 50%);
	text-decoration: none !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	transition: transform 0.25s ease, box-shadow 0.25s ease, width 0.3s ease, border-radius 0.3s ease;
	overflow: hidden;
	cursor: pointer;
	position: relative;
}

.fcb-btn:hover {
	transform: scale(1.1);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
	text-decoration: none !important;
}

.fcb-btn:active {
	transform: scale(0.95);
}

/* Icon container */
.fcb-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--fcb-size, 56px);
	height: var(--fcb-size, 56px);
}

.fcb-icon svg {
	width: calc(var(--fcb-size, 56px) * 0.45);
	height: calc(var(--fcb-size, 56px) * 0.45);
}

/* Labels */
.fcb-label {
	display: none;
	white-space: nowrap;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding-right: 16px;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.fcb-show-labels .fcb-label {
	display: block;
}

/* Hover expand on desktop */
@media (min-width: 769px) {
	.fcb-show-labels .fcb-btn:hover {
		width: auto;
		border-radius: calc(var(--fcb-size, 56px) / 2);
	}

	.fcb-show-labels .fcb-btn:hover .fcb-label {
		opacity: 1;
	}
}

/* Colors — forced on icon, svg, path and label to override theme link styles */
#fcb-container .fcb-whatsapp,
#fcb-container .fcb-whatsapp .fcb-icon,
#fcb-container .fcb-whatsapp .fcb-icon svg,
#fcb-container .fcb-whatsapp .fcb-icon svg path,
#fcb-container .fcb-whatsapp .fcb-label {
	color: var(--fcb-wa-icon, #fff) !important;
	fill: var(--fcb-wa-icon, #fff) !important;
}

#fcb-container .fcb-whatsapp {
	background: var(--fcb-wa-color, #25D366);
}

#fcb-container .fcb-phone,
#fcb-container .fcb-phone .fcb-icon,
#fcb-container .fcb-phone .fcb-icon svg,
#fcb-container .fcb-phone .fcb-icon svg path,
#fcb-container .fcb-phone .fcb-label {
	color: var(--fcb-ph-icon, #fff) !important;
	fill: var(--fcb-ph-icon, #fff) !important;
}

#fcb-container .fcb-phone {
	background: var(--fcb-ph-color, #0066FF);
}

#fcb-container .fcb-email,
#fcb-container .fcb-email .fcb-icon,
#fcb-container .fcb-email .fcb-icon svg,
#fcb-container .fcb-email .fcb-icon svg path,
#fcb-container .fcb-email .fcb-label {
	color: var(--fcb-em-icon, #fff) !important;
	fill: var(--fcb-em-icon, #fff) !important;
}

#fcb-container .fcb-email {
	background: var(--fcb-em-color, #EA4335);
}

/* ─── Animations ──────────────────────────── */

/* Bounce */
.fcb-anim-bounce .fcb-btn {
	animation: fcb-bounce 0.6s ease both;
}

.fcb-anim-bounce .fcb-btn:nth-child(1) { animation-delay: 0.1s; }
.fcb-anim-bounce .fcb-btn:nth-child(2) { animation-delay: 0.25s; }
.fcb-anim-bounce .fcb-btn:nth-child(3) { animation-delay: 0.4s; }

@keyframes fcb-bounce {
	0%   { opacity: 0; transform: scale(0.3); }
	50%  { transform: scale(1.1); }
	70%  { transform: scale(0.9); }
	100% { opacity: 1; transform: scale(1); }
}

/* Pulse */
.fcb-anim-pulse .fcb-btn {
	animation: fcb-pulse 2s ease-in-out infinite;
}

.fcb-anim-pulse .fcb-btn:nth-child(2) { animation-delay: 0.3s; }
.fcb-anim-pulse .fcb-btn:nth-child(3) { animation-delay: 0.6s; }

@keyframes fcb-pulse {
	0%, 100% { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); }
	50%      { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 0 0 8px rgba(0, 0, 0, 0.05); }
}

/* Slide */
.fcb-anim-slide.fcb-pos-right .fcb-btn {
	animation: fcb-slide-right 0.5s ease both;
}

.fcb-anim-slide.fcb-pos-left .fcb-btn {
	animation: fcb-slide-left 0.5s ease both;
}

.fcb-anim-slide .fcb-btn:nth-child(1) { animation-delay: 0.1s; }
.fcb-anim-slide .fcb-btn:nth-child(2) { animation-delay: 0.25s; }
.fcb-anim-slide .fcb-btn:nth-child(3) { animation-delay: 0.4s; }

@keyframes fcb-slide-right {
	from { opacity: 0; transform: translateX(60px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes fcb-slide-left {
	from { opacity: 0; transform: translateX(-60px); }
	to   { opacity: 1; transform: translateX(0); }
}

/* ─── Mobile ──────────────────────────────── */

@media (max-width: 768px) {
	#fcb-container {
		bottom: var(--fcb-m-bottom, 16px);
		gap: var(--fcb-m-spacing, 10px);
	}

	#fcb-container.fcb-pos-right {
		right: var(--fcb-m-side, 16px);
	}

	#fcb-container.fcb-pos-left {
		left: var(--fcb-m-side, 16px);
	}

	/* Horizontal layout on mobile */
	#fcb-container.fcb-mobile-horizontal {
		flex-direction: row;
	}

	#fcb-container.fcb-mobile-horizontal.fcb-pos-right {
		align-items: flex-end;
	}

	#fcb-container.fcb-mobile-horizontal.fcb-pos-left {
		align-items: flex-start;
	}

	.fcb-btn {
		width: var(--fcb-m-size, 48px);
		height: var(--fcb-m-size, 48px);
	}

	.fcb-icon {
		width: var(--fcb-m-size, 48px);
		height: var(--fcb-m-size, 48px);
	}

	.fcb-icon svg {
		width: calc(var(--fcb-m-size, 48px) * 0.45);
		height: calc(var(--fcb-m-size, 48px) * 0.45);
	}

	/* No expand on mobile, just icon */
	.fcb-label {
		display: none !important;
	}
}

/* Print: hide */
@media print {
	#fcb-container {
		display: none !important;
	}
}