/**
 * Frontend Stylesheet - EZ Sticky Business Contact Panel
 * Premium modern design with fluid responsiveness, animations, and CSS variables.
 *
 * @package EZStickyContactPanel
 */

/* Root Variables Fallback */
:root {
	--ez-icon-size: 24px;
	--ez-button-padding: 12px;
	--ez-button-spacing: 12px;
	--ez-border-radius: 50%;
	--ez-bg-color: #1e293b;
	--ez-icon-color: #ffffff;
	--ez-hover-bg-color: #3b82f6;
	--ez-hover-icon-color: #ffffff;
	--ez-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.15);
	--ez-shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.25), 0 10px 10px -5px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Core Container Positioning */
.ez-sticky-contact-container {
	position: fixed;
	z-index: 999999;
	display: flex;
	pointer-events: none; /* Let clicks pass through container except buttons */
	box-sizing: border-box;
}

.ez-sticky-contact-container * {
	box-sizing: border-box;
}

.ez-sticky-contact-buttons {
	display: flex;
	gap: var(--ez-button-spacing);
	pointer-events: auto; /* Enable clicks on buttons */
}

/* 1. Position Alignments */
/* Bottom Right */
.ez-pos-bottom-right {
	right: 24px;
	bottom: 24px;
}
.ez-pos-bottom-right .ez-sticky-contact-buttons {
	flex-direction: column;
}

/* Bottom Left */
.ez-pos-bottom-left {
	left: 24px;
	bottom: 24px;
}
.ez-pos-bottom-left .ez-sticky-contact-buttons {
	flex-direction: column;
}

/* Bottom Center */
.ez-pos-bottom-center {
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
}
.ez-pos-bottom-center .ez-sticky-contact-buttons {
	flex-direction: row;
}

/* Center Left */
.ez-pos-center-left {
	left: 24px;
	top: 50%;
	transform: translateY(-50%);
}
.ez-pos-center-left .ez-sticky-contact-buttons {
	flex-direction: column;
}

/* Center Right */
.ez-pos-center-right {
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
}
.ez-pos-center-right .ez-sticky-contact-buttons {
	flex-direction: column;
}

/* 2. Responsive Safe Area Support (iOS & Modern Browsers) */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
	.ez-safe-area.ez-pos-bottom-left,
	.ez-safe-area.ez-pos-bottom-right {
		bottom: calc(24px + env(safe-area-inset-bottom));
	}
	.ez-safe-area.ez-pos-bottom-center {
		bottom: calc(24px + env(safe-area-inset-bottom));
	}
	.ez-safe-area.ez-pos-center-left,
	.ez-safe-area.ez-pos-center-right {
		margin-bottom: calc(env(safe-area-inset-bottom) / 2);
	}
}

/* 3. Base Button Styling */
.ez-contact-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--ez-icon-size) + (var(--ez-button-padding) * 2));
	height: calc(var(--ez-icon-size) + (var(--ez-button-padding) * 2));
	background-color: var(--ez-bg-color);
	color: var(--ez-icon-color);
	border-radius: var(--ez-border-radius);
	box-shadow: var(--ez-shadow);
	text-decoration: none;
	transition: 
		background-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
		color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
		transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	will-change: transform, box-shadow;
	cursor: pointer;
	border: 1px solid rgba(255, 255, 255, 0.05);
}

.ez-btn-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ez-icon-size);
	height: var(--ez-icon-size);
}

.ez-btn-icon svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	transition: stroke 0.3s ease;
}

/* Hover & Interactive States */
.ez-contact-btn:hover,
.ez-contact-btn:focus {
	background-color: var(--ez-hover-bg-color);
	color: var(--ez-hover-icon-color);
	transform: scale(1.12) translateY(-2px);
	box-shadow: var(--ez-shadow-hover);
	outline: none;
}

.ez-pos-center-left .ez-contact-btn:hover,
.ez-pos-center-left .ez-contact-btn:focus {
	transform: scale(1.12) translateX(2px);
}

.ez-pos-center-right .ez-contact-btn:hover,
.ez-pos-center-right .ez-contact-btn:focus {
	transform: scale(1.12) translateX(-2px);
}

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

/* 4. Tooltips Styling */
.ez-btn-tooltip {
	position: absolute;
	padding: 6px 12px;
	background-color: #0f172a; /* Slate 900 */
	color: #f8fafc; /* Slate 50 */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 12px;
	font-weight: 500;
	border-radius: 6px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.2s;
	z-index: 100000;
	border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Tooltip position based on parent container layout */
/* Right layouts: Tooltip on left */
.ez-pos-bottom-right .ez-btn-tooltip,
.ez-pos-center-right .ez-btn-tooltip {
	right: calc(100% + 12px);
	top: 50%;
	transform: translateY(-50%) translateX(10px);
}

/* Left layouts: Tooltip on right */
.ez-pos-bottom-left .ez-btn-tooltip,
.ez-pos-center-left .ez-btn-tooltip {
	left: calc(100% + 12px);
	top: 50%;
	transform: translateY(-50%) translateX(-10px);
}

/* Bottom Center layout: Tooltip on top */
.ez-pos-bottom-center .ez-btn-tooltip {
	bottom: calc(100% + 12px);
	left: 50%;
	transform: translateX(-50%) translateY(10px);
}

/* Show Tooltips on Hover */
.ez-has-tooltips .ez-contact-btn:hover .ez-btn-tooltip {
	opacity: 1;
	visibility: visible;
}

.ez-pos-bottom-right .ez-has-tooltips .ez-contact-btn:hover .ez-btn-tooltip,
.ez-pos-center-right .ez-has-tooltips .ez-contact-btn:hover .ez-btn-tooltip {
	transform: translateY(-50%) translateX(0);
}

.ez-pos-bottom-left .ez-has-tooltips .ez-contact-btn:hover .ez-btn-tooltip,
.ez-pos-center-left .ez-has-tooltips .ez-contact-btn:hover .ez-btn-tooltip {
	transform: translateY(-50%) translateX(0);
}

.ez-pos-bottom-center .ez-has-tooltips .ez-contact-btn:hover .ez-btn-tooltip {
	transform: translateX(-50%) translateY(0);
}

/* 5. Glassmorphism Design */
.ez-glassmorphism .ez-contact-btn {
	background-color: color-mix(in srgb, var(--ez-bg-color) 70%, transparent) !important;
	backdrop-filter: blur(12px) saturate(180%);
	-webkit-backdrop-filter: blur(12px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.12);
}

.ez-glassmorphism .ez-contact-btn:hover {
	background-color: color-mix(in srgb, var(--ez-hover-bg-color) 85%, transparent) !important;
	border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 6. Animations System */
/* Entrance Animations triggers (executed on page load) */
.ez-anim-fade .ez-contact-btn {
	opacity: 0;
	animation: ezFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.ez-anim-slide .ez-contact-btn {
	opacity: 0;
	animation: ezSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.ez-anim-bounce .ez-contact-btn {
	opacity: 0;
	animation: ezSpringIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.ez-anim-scale .ez-contact-btn {
	opacity: 0;
	animation: ezScaleUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Stagger animations for list items */
.ez-sticky-contact-buttons > *:nth-child(1) { animation-delay: 0.1s; }
.ez-sticky-contact-buttons > *:nth-child(2) { animation-delay: 0.2s; }
.ez-sticky-contact-buttons > *:nth-child(3) { animation-delay: 0.3s; }
.ez-sticky-contact-buttons > *:nth-child(4) { animation-delay: 0.4s; }
.ez-sticky-contact-buttons > *:nth-child(5) { animation-delay: 0.5s; }
.ez-sticky-contact-buttons > *:nth-child(6) { animation-delay: 0.6s; }
.ez-sticky-contact-buttons > *:nth-child(7) { animation-delay: 0.7s; }
.ez-sticky-contact-buttons > *:nth-child(8) { animation-delay: 0.8s; }
.ez-sticky-contact-buttons > *:nth-child(9) { animation-delay: 0.9s; }
.ez-sticky-contact-buttons > *:nth-child(10) { animation-delay: 1.0s; }

/* Keyframes */
@keyframes ezFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes ezSlideUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes ezScaleUp {
	from {
		opacity: 0;
		transform: scale(0.7);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes ezSpringIn {
	0% {
		opacity: 0;
		transform: scale(0.4) translateY(20px);
	}
	50% {
		opacity: 0.8;
		transform: scale(1.08) translateY(-4px);
	}
	75% {
		transform: scale(0.96) translateY(2px);
	}
	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

/* ==========================================
   8. Inline Text Labels (Pill Layouts)
   ========================================== */
.ez-inline-labels .ez-contact-btn {
	width: auto;
	padding: var(--ez-button-padding) calc(var(--ez-button-padding) * 1.5);
	justify-content: flex-start;
	gap: 10px;
}

/* Ensure pill-shape if rounded circular setting was chosen */
.ez-inline-labels .ez-contact-btn {
	border-radius: var(--ez-border-radius);
}
.ez-inline-labels[style*="--ez-border-radius: 50%"] .ez-contact-btn {
	border-radius: 9999px !important;
}

.ez-btn-text {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	line-height: 1;
	color: currentColor;
	transition: opacity 0.2s ease;
}

/* ==========================================
   9. Collapsible Panel / Expand-Collapse Toggle
   ========================================== */
/* Toggle button brand custom colors */
.ez-toggle-trigger {
	background-color: var(--ez-toggle-bg-color) !important;
	color: var(--ez-toggle-icon-color) !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	z-index: 1000000;
}

.ez-toggle-trigger:hover,
.ez-toggle-trigger:focus {
	background-color: var(--ez-hover-bg-color) !important;
	color: var(--ez-hover-icon-color) !important;
}

/* Toggle state transitions for non-toggle buttons */
.ez-has-toggle .ez-sticky-contact-buttons {
	position: relative;
	transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Minimize non-trigger buttons under collapsed state */
.ez-collapsed .ez-contact-btn:not(.ez-toggle-trigger) {
	opacity: 0 !important;
	pointer-events: none !important;
	visibility: hidden !important;
	transform: scale(0.3) !important;
	
	/* Collapse box sizing to disappear from layout spacing */
	width: 0 !important;
	height: 0 !important;
	padding: 0 !important;
	border-width: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
}

/* Rotate or spring animate the toggle action icon */
.ez-toggle-trigger .ez-btn-icon {
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ez-toggle-trigger:hover .ez-btn-icon {
	transform: rotate(12deg) scale(1.05);
}

/* Stagger expands inside spring animations when opening */
#ez-sticky-contact-panel:not(.ez-collapsed) .ez-contact-btn:not(.ez-toggle-trigger) {
	transition: 
		background-color 0.3s ease,
		color 0.3s ease,
		transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 0.3s ease,
		opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
		width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
		height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
		padding 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
		margin 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Stoggles visibility rules for inner toggle states */
.ez-collapsed .ez-icon-open-state { display: flex !important; }
.ez-collapsed .ez-icon-close-state { display: none !important; }

#ez-sticky-contact-panel:not(.ez-collapsed) .ez-icon-open-state { display: none !important; }
#ez-sticky-contact-panel:not(.ez-collapsed) .ez-icon-close-state { display: flex !important; }

.ez-collapsed .ez-toggle-text-open { display: inline !important; }
.ez-collapsed .ez-toggle-text-close { display: none !important; }

#ez-sticky-contact-panel:not(.ez-collapsed) .ez-toggle-text-open { display: none !important; }
#ez-sticky-contact-panel:not(.ez-collapsed) .ez-toggle-text-close { display: inline !important; }

/* 7. Dark Mode Overrides (Optional / Native adaptation) */
@media (prefers-color-scheme: dark) {
	.ez-theme-auto .ez-btn-tooltip {
		background-color: #020617;
		color: #f1f5f9;
		border: 1px solid rgba(255, 255, 255, 0.05);
	}
}

.ez-theme-dark .ez-btn-tooltip {
	background-color: #020617;
	color: #f1f5f9;
	border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Ensure icons scale smoothly in mobile display overrides */
@media (max-width: 600px) {
	.ez-sticky-contact-container {
		/* Bring layout margins in slightly on small viewports */
		right: 16px;
		left: 16px;
		bottom: 16px;
	}
	.ez-pos-bottom-center {
		left: 50%;
		transform: translateX(-50%);
	}
	
	/* Scale buttons slightly on mobile if spacing is very large */
	.ez-contact-btn {
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
	}
}

/* ==========================================================================
   10. Premium Presets, Hover Motions, Stack Overrides, & Attention Grabbers
   ========================================================================== */

/* --- Button Style Presets --- */

/* Outline Preset */
.ez-style-outline .ez-contact-btn {
	background-color: transparent !important;
	border: 2px solid var(--ez-bg-color) !important;
	color: var(--ez-bg-color) !important;
	box-shadow: none !important;
}

.ez-style-outline .ez-contact-btn:hover,
.ez-style-outline .ez-contact-btn:focus {
	background-color: var(--ez-hover-bg-color) !important;
	border-color: var(--ez-hover-bg-color) !important;
	color: var(--ez-hover-icon-color) !important;
	box-shadow: var(--ez-shadow-hover) !important;
}

/* 3D Tactile Preset */
.ez-style-3d .ez-contact-btn {
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	border-bottom: 4px solid rgba(0, 0, 0, 0.3) !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
	transform: translateY(-2px);
}

.ez-style-3d .ez-contact-btn:hover,
.ez-style-3d .ez-contact-btn:focus {
	border-bottom-width: 4px !important;
	transform: translateY(-4px) scale(1.06) !important;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), var(--ez-shadow-hover) !important;
}

.ez-style-3d .ez-contact-btn:active {
	border-bottom-width: 1px !important;
	transform: translateY(1px) scale(0.98) !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Minimalist Icon Preset */
.ez-style-minimal .ez-contact-btn {
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	color: var(--ez-bg-color) !important;
}

.ez-style-minimal .ez-contact-btn:hover,
.ez-style-minimal .ez-contact-btn:focus {
	background-color: color-mix(in srgb, var(--ez-hover-bg-color) 12%, transparent) !important;
	color: var(--ez-hover-bg-color) !important;
	box-shadow: none !important;
}

/* --- Hover Micro-Animations --- */

/* Zoom Animation */
.ez-hover-zoom .ez-contact-btn:hover,
.ez-hover-zoom .ez-contact-btn:focus {
	transform: scale(1.18) !important;
}

/* Lift Animation */
.ez-hover-lift .ez-contact-btn:hover,
.ez-hover-lift .ez-contact-btn:focus {
	transform: translateY(-6px) !important;
}

/* Spin Animation */
.ez-hover-spin .ez-contact-btn .ez-btn-icon {
	transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ez-hover-spin .ez-contact-btn:hover .ez-btn-icon,
.ez-hover-spin .ez-contact-btn:focus .ez-btn-icon {
	transform: rotate(360deg) !important;
}

.ez-hover-spin .ez-contact-btn:hover,
.ez-hover-spin .ez-contact-btn:focus {
	transform: scale(1.08) !important;
}

/* Wobble Animation */
@keyframes ezWobbleHover {
	0% { transform: scale(1.1) rotate(0deg); }
	15% { transform: scale(1.1) rotate(-8deg); }
	30% { transform: scale(1.1) rotate(6deg); }
	45% { transform: scale(1.1) rotate(-4deg); }
	60% { transform: scale(1.1) rotate(2deg); }
	75% { transform: scale(1.1) rotate(-1deg); }
	100% { transform: scale(1.1) rotate(0deg); }
}

.ez-hover-wobble .ez-contact-btn:hover,
.ez-hover-wobble .ez-contact-btn:focus {
	animation: ezWobbleHover 0.6s ease-in-out !important;
}

/* Glow Animation */
.ez-hover-glow .ez-contact-btn:hover,
.ez-hover-glow .ez-contact-btn:focus {
	transform: scale(1.05) !important;
	box-shadow: 0 0 20px 6px color-mix(in srgb, var(--ez-hover-bg-color) 60%, transparent) !important;
}

/* Static Preset (Disable hover movements) */
.ez-hover-none .ez-contact-btn:hover,
.ez-hover-none .ez-contact-btn:focus {
	transform: none !important;
}

/* --- Layout Direction Stacking Overrides --- */
.ez-layout-vertical .ez-sticky-contact-buttons {
	flex-direction: column !important;
}

.ez-layout-horizontal .ez-sticky-contact-buttons {
	flex-direction: row !important;
}

/* --- Attention Grabber Infinite Loops --- */

/* Heartbeat Pulse Halo Glow */
@keyframes ezAttentionPulse {
	0% {
		box-shadow: 0 0 0 0 color-mix(in srgb, var(--ez-bg-color) 65%, transparent);
	}
	70% {
		box-shadow: 0 0 0 14px transparent;
	}
	100% {
		box-shadow: 0 0 0 0 transparent;
	}
}

.ez-attention-pulse .ez-contact-btn:not(.ez-toggle-trigger):not(:hover) {
	animation: ezAttentionPulse 2s infinite cubic-bezier(0.25, 0, 0, 1);
}

/* Intermittent Gentle Bounces (Every 4s) */
@keyframes ezAttentionBounce {
	0%, 80%, 100% {
		transform: translateY(0);
	}
	84% {
		transform: translateY(-8px);
	}
	88% {
		transform: translateY(2px);
	}
	92% {
		transform: translateY(-3px);
	}
	96% {
		transform: translateY(0);
	}
}

.ez-attention-bounce .ez-contact-btn:not(.ez-toggle-trigger):not(:hover) {
	animation: ezAttentionBounce 4s infinite ease;
}

/* Intermittent Gentle Shake Wobbles (Every 5s) */
@keyframes ezAttentionWobble {
	0%, 80%, 100% {
		transform: rotate(0deg) scale(1);
	}
	82% {
		transform: rotate(-8deg) scale(1.04);
	}
	84% {
		transform: rotate(6deg) scale(1.04);
	}
	86% {
		transform: rotate(-4deg) scale(1.04);
	}
	88% {
		transform: rotate(2deg) scale(1.04);
	}
	90% {
		transform: rotate(-1deg) scale(1.04);
	}
	92% {
		transform: rotate(0deg) scale(1.04);
	}
}

.ez-attention-wobble .ez-contact-btn:not(.ez-toggle-trigger):not(:hover) {
	animation: ezAttentionWobble 5s infinite ease-in-out;
}