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

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

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

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

/* Button base */
.smxfcb-btn {
	display: flex;
	align-items: center;
	gap: 0;
	width: var(--smxfcb-size, 56px);
	height: var(--smxfcb-size, 56px);
	border-radius: var(--smxfcb-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;
}

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

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

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

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

/* Labels */
.smxfcb-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

@keyframes smxfcb-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 */
.smxfcb-anim-pulse .smxfcb-btn {
	animation: smxfcb-pulse 2s ease-in-out infinite;
}

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

@keyframes smxfcb-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 */
.smxfcb-anim-slide.smxfcb-pos-right .smxfcb-btn {
	animation: smxfcb-slide-right 0.5s ease both;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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