/**
 * TP Addons Frontend Styles
 * Floating contact buttons (Zalo, WhatsApp, Phone)
 * Styled to match button-contact-vr plugin
 */

.tp-floating-contacts {
	position: fixed;
	bottom: var(--tp-float-bottom);
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.tp-floating-contacts.tp-position-right {
	right: var(--tp-float-offset);
}

.tp-floating-contacts.tp-position-left {
	left: var(--tp-float-offset);
}

.tp-floating-btn-wrapper {
	position: relative;
	width: var(--tp-float-size);
	height: var(--tp-float-size);
	margin-top: -5px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tp-floating-btn-wrapper:first-child {
	margin-top: 0;
}

.tp-floating-ping {
	position: absolute;
	top: calc((var(--tp-float-size) - var(--tp-float-size) * 0.72) / 2); /* Centers 65px in 90px = 12.5px */
	left: calc((var(--tp-float-size) - var(--tp-float-size) * 0.72) / 2);
	width: calc(var(--tp-float-size) * 0.72); /* 65px when wrapper is 90px */
	height: calc(var(--tp-float-size) * 0.72);
	border-radius: 50%;
	animation: tp-zoom 1.3s ease infinite;
	animation-delay: var(--tp-anim-delay);
	box-shadow: 0 0 0 0 currentColor;
}

.tp-floating-zalo-ping {
	background: rgba(33, 150, 243, 0.7);
	color: rgba(33, 150, 243, 0.17);
}

.tp-floating-whatsapp-ping {
	background: rgba(37, 211, 102, 0.7);
	color: rgba(37, 211, 102, 0.17);
}

.tp-floating-btn {
	position: relative;
	width: calc(var(--tp-float-size) * 0.44); /* 40px when wrapper is 90px */
	height: calc(var(--tp-float-size) * 0.44);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
	padding: 0;
	opacity: var(--tp-float-opacity);
	z-index: 1;
}

.tp-floating-zalo {
	background: #0068FF;
}

.tp-floating-whatsapp {
	background: #25D366;
}

.tp-floating-btn svg {
	width: 68%;
	height: 68%;
}

.tp-floating-btn:hover {
	transform: scale(1.1);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
	opacity: 1;
	animation-play-state: paused;
}

/* Animation variants */
.tp-floating-btn.tp-anim-bounce {
	animation: tp-bounce 1s ease-in-out infinite;
	animation-delay: var(--tp-anim-delay);
}

.tp-floating-btn.tp-anim-pulse {
	animation: tp-pulse 2s ease-in-out infinite;
	animation-delay: var(--tp-anim-delay);
}

.tp-floating-btn.tp-anim-swing {
	animation: tp-swing 1.5s ease-in-out infinite;
	animation-delay: var(--tp-anim-delay);
}

.tp-floating-btn.tp-anim-fade {
	animation: tp-fade 2s ease-in-out infinite;
	animation-delay: var(--tp-anim-delay);
}

.tp-floating-btn.tp-anim-none {
	animation: none;
}

/* Zoom animation - matches button-contact-vr */
@keyframes tp-zoom {
	0% {
		transform: scale(0.9);
		box-shadow: 0 0 0 0 currentColor;
	}
	70% {
		transform: scale(1);
		box-shadow: 0 0 0 15px transparent;
	}
	100% {
		transform: scale(0.9);
		box-shadow: 0 0 0 0 transparent;
	}
}

/* Bounce animation - matches button-contact-vr phone-vr-circle-fill */
@keyframes tp-bounce {
	0% {
		transform: rotate(0deg) scale(1) skew(1deg);
	}
	10% {
		transform: rotate(-25deg) scale(1) skew(1deg);
	}
	20% {
		transform: rotate(25deg) scale(1) skew(1deg);
	}
	30% {
		transform: rotate(-25deg) scale(1) skew(1deg);
	}
	40% {
		transform: rotate(25deg) scale(1) skew(1deg);
	}
	50% {
		transform: rotate(0deg) scale(1) skew(1deg);
	}
	100% {
		transform: rotate(0deg) scale(1) skew(1deg);
	}
}

/* Pulse animation */
@keyframes tp-pulse {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.15);
	}
}

/* Swing animation */
@keyframes tp-swing {
	0%, 100% {
		transform: rotate(0deg);
	}
	20% {
		transform: rotate(15deg);
	}
	40% {
		transform: rotate(-10deg);
	}
	60% {
		transform: rotate(5deg);
	}
	80% {
		transform: rotate(-5deg);
	}
}

/* Fade animation */
@keyframes tp-fade {
	0%, 100% {
		opacity: var(--tp-float-opacity);
	}
	50% {
		opacity: calc(var(--tp-float-opacity) * 0.5);
	}
}

/* Tooltip */
.tp-floating-btn-wrapper[data-tooltip] {
	position: relative;
}

.tp-floating-btn-wrapper[data-tooltip]::before {
	content: attr(data-tooltip);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	padding: 8px 12px;
	background: rgba(0, 0, 0, 0.85);
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	border-radius: 6px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	pointer-events: none;
	z-index: 10000;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.tp-floating-btn-wrapper[data-tooltip]::after {
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	border: 6px solid transparent;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	pointer-events: none;
	z-index: 10000;
}

/* Tooltip position for right-side buttons */
.tp-position-right .tp-floating-btn-wrapper[data-tooltip]::before {
	right: calc(100% + 10px);
}

.tp-position-right .tp-floating-btn-wrapper[data-tooltip]::after {
	right: calc(100% + 4px);
	border-left-color: rgba(0, 0, 0, 0.85);
}

/* Tooltip position for left-side buttons */
.tp-position-left .tp-floating-btn-wrapper[data-tooltip]::before {
	left: calc(100% + 10px);
}

.tp-position-left .tp-floating-btn-wrapper[data-tooltip]::after {
	left: calc(100% + 4px);
	border-right-color: rgba(0, 0, 0, 0.85);
}

/* Show tooltip on hover */
.tp-floating-btn-wrapper[data-tooltip]:hover::before,
.tp-floating-btn-wrapper[data-tooltip]:hover::after {
	opacity: 1;
	visibility: visible;
}

/* Device visibility */
@media (min-width: 1025px) {
	.tp-hide-desktop {
		display: none !important;
	}
}

@media (min-width: 690px) and (max-width: 1024px) {
	.tp-hide-tablet {
		display: none !important;
	}
}

@media (max-width: 689px) {
	.tp-hide-mobile {
		display: none !important;
	}
}