/**
 * Floating Buttons - Frontend Styles
 *
 * @package WPZOOM_Social_Icons
 */

/* Main container - fixed positioning */
.wpzoom-floating-buttons {
	position: fixed;
	z-index: 9999;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Horizontal positioning */
.wpzoom-floating-left {
	left: var(--wpzoom-floating-offset, 20px);
}

.wpzoom-floating-right {
	right: var(--wpzoom-floating-offset, 20px);
}

/* Vertical positioning */
.wpzoom-floating-top {
	top: var(--wpzoom-floating-offset, 20px);
}

.wpzoom-floating-middle {
	top: 50%;
	transform: translateY(-50%);
}

.wpzoom-floating-bottom {
	bottom: var(--wpzoom-floating-offset, 20px);
}

/* Container styling */
.wpzoom-floating-container {
	display: flex;
	gap: 8px;
}

/* Layout variations */
.wpzoom-floating-vertical .wpzoom-floating-container {
	flex-direction: column;
	align-items: center;
}

.wpzoom-floating-horizontal .wpzoom-floating-container {
	flex-direction: row;
	align-items: center;
}

/* Override block styles for floating context - Social Sharing Block */
.wpzoom-floating-buttons .wpzoom-social-sharing-block,
.wpzoom-floating-buttons .wp-block-wpzoom-blocks-social-sharing {
	margin: 0;
	padding: 0;
}

.wpzoom-floating-buttons .social-sharing-icons {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Vertical layout: stack icons */
.wpzoom-floating-vertical .social-sharing-icons {
	display: flex;
	flex-direction: column;
	gap: 0;
	flex-wrap: nowrap;
}

.wpzoom-floating-vertical .social-sharing-icon-li {
	margin: 0 !important;
}

.wpzoom-floating-vertical .wpzoom-social-sharing-total-count  {
    flex-direction: column;
    margin-left: 0 !Important;
    font-size: 12px !Important;
    font-weight: normal !important;
    text-transform: uppercase;
    gap: 0 !important;
}

.wpzoom-floating-vertical .wpzoom-social-sharing-total-count svg {
    display: none;
}

.wpzoom-floating-vertical .wpzoom-shares-number {
    display: block;
    margin-left: 0 !important;
    font-weight: 600 !important;

}

/* Horizontal layout: row icons */
.wpzoom-floating-horizontal .social-sharing-icons {
	display: flex;
	flex-direction: row;
	gap: 4px;
	flex-wrap: nowrap;
}

.wpzoom-floating-horizontal .social-sharing-icon-li {
	margin: 0 !important;
}

/* Adjust icon styling for floating context */
.wpzoom-floating-buttons .social-sharing-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Hover effect */
.wpzoom-floating-buttons .social-sharing-icon:hover {
	transform: scale(1.1);
	transition: transform 0.2s ease;
}

/* Slide-in animations */
.wpzoom-floating-left {
	animation: wpzoom-slide-in-left 0.5s ease-out;
}

.wpzoom-floating-right {
	animation: wpzoom-slide-in-right 0.5s ease-out;
}

@keyframes wpzoom-slide-in-left {
	from {
		transform: translateX(-100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes wpzoom-slide-in-right {
	from {
		transform: translateX(100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

/* Middle position with animation - maintain vertical centering */
.wpzoom-floating-middle.wpzoom-floating-left {
	animation: wpzoom-slide-in-left-middle 0.5s ease-out;
}

.wpzoom-floating-middle.wpzoom-floating-right {
	animation: wpzoom-slide-in-right-middle 0.5s ease-out;
}

@keyframes wpzoom-slide-in-left-middle {
	from {
		transform: translateX(-100%) translateY(-50%);
		opacity: 0;
	}
	to {
		transform: translateX(0) translateY(-50%);
		opacity: 1;
	}
}

@keyframes wpzoom-slide-in-right-middle {
	from {
		transform: translateX(100%) translateY(-50%);
		opacity: 0;
	}
	to {
		transform: translateX(0) translateY(-50%);
		opacity: 1;
	}
}

/* ==========================================================================
   Mobile Styles - Bottom bar with inline icons
   ========================================================================== */

/* Mobile mode: reposition to bottom, full width, horizontal layout */
.wpzoom-floating-buttons.wpzoom-floating-mobile-mode {
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	top: auto !important;
	transform: none !important;
	width: 100%;
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
	padding: 8px 0;
	animation: wpzoom-slide-in-bottom 0.3s ease-out;
}

@keyframes wpzoom-slide-in-bottom {
	from {
		transform: translateY(100%);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* Mobile mode container: center horizontally */
.wpzoom-floating-buttons.wpzoom-floating-mobile-mode .wpzoom-floating-container {
	justify-content: center;
	width: 100%;
}

/* Mobile mode: force horizontal layout */
.wpzoom-floating-buttons.wpzoom-floating-mobile-mode .social-sharing-icons {
	display: flex;
	flex-direction: row !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
}

.wpzoom-floating-buttons.wpzoom-floating-mobile-mode .social-sharing-icon-li {
	margin: 2px !important;
}

/* Hide labels on mobile for compact display */
.wpzoom-floating-buttons.wpzoom-floating-mobile-mode .social-sharing-icon-label {
	display: none;
}

/* Hide on mobile when disabled */
.wpzoom-floating-buttons.wpzoom-floating-hide-mobile {
	display: none !important;
}

/* Print styles - hide floating buttons when printing */
@media print {
	.wpzoom-floating-buttons {
		display: none !important;
	}
}

/* Accessibility - reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
	.wpzoom-floating-buttons {
		animation: none;
		transition: none;
	}

	.wpzoom-floating-buttons .social-sharing-icon:hover {
		transform: none;
		transition: none;
	}
}