/**
 * Premium Public CSS for WP Sticky Buttons
 * Designed by Antigravity
 */

/* Container định vị chính */
.wpsb-container {
	position: fixed;
	z-index: 999999;
	display: flex;
	box-sizing: border-box;
	transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Các vị trí hiển thị trên màn hình */
.wpsb-pos-top-left {
	top: 20px;
	left: 20px;
}

.wpsb-pos-top-right {
	top: 20px;
	right: 20px;
}

.wpsb-pos-bottom-left {
	bottom: 20px;
	left: 20px;
}

.wpsb-pos-bottom-right {
	bottom: 20px;
	right: 20px;
}

.wpsb-pos-middle-left {
	top: 50%;
	left: 20px;
	transform: translateY(-50%);
	flex-direction: column;
}

.wpsb-pos-middle-right {
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	flex-direction: column;
}

/* Hướng xếp nút: Dọc */
.wpsb-layout-vertical {
	flex-direction: column;
	gap: var(--wpsb-gap, 12px);
}

/* Hướng xếp nút: Ngang */
.wpsb-layout-horizontal {
	flex-direction: row;
	gap: var(--wpsb-gap, 12px);
}

/* Thiết kế Nút chung */
.wpsb-btn {
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	position: relative;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	outline: none;
	border: none;
	cursor: pointer;
	box-sizing: border-box;
}

/* Kích thước Icon SVG */
.wpsb-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	transition: transform 0.3s ease;
}

.wpsb-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Hiệu ứng phóng nhẹ nút & xoay icon khi Hover */
.wpsb-btn:hover {
	transform: scale(1.1);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
	z-index: 10;
}

.wpsb-btn:hover .wpsb-icon {
	transform: scale(1.1);
}

/* Kiểu dáng Nút */
.wpsb-shape-round .wpsb-btn {
	border-radius: 50%;
}

.wpsb-shape-rounded .wpsb-btn {
	border-radius: 12px;
}

.wpsb-shape-square .wpsb-btn {
	border-radius: 0px;
}

/* Thiết kế Tooltips (Nhãn nổi) */
.wpsb-label {
	position: absolute;
	background: rgba(15, 23, 42, 0.9);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	color: #ffffff;
	padding: 6px 12px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	border-radius: 6px;
	opacity: 0;
	visibility: hidden;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	pointer-events: none;
}

/* Thiết lập Hướng hiển thị Tooltip dựa trên Vị trí & Hướng bố cục */

/* Mặc định: Nút nằm bên Phải -> Tooltip trượt ra bên Trái */
.wpsb-pos-bottom-right .wpsb-label,
.wpsb-pos-middle-right .wpsb-label,
.wpsb-pos-top-right .wpsb-label {
	right: 60px;
	transform: translateX(10px);
}

.wpsb-pos-bottom-right .wpsb-btn:hover .wpsb-label,
.wpsb-pos-middle-right .wpsb-btn:hover .wpsb-label,
.wpsb-pos-top-right .wpsb-btn:hover .wpsb-label {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}

/* Nút nằm bên Trái -> Tooltip trượt ra bên Phải */
.wpsb-pos-bottom-left .wpsb-label,
.wpsb-pos-middle-left .wpsb-label,
.wpsb-pos-top-left .wpsb-label {
	left: 60px;
	transform: translateX(-10px);
}

.wpsb-pos-bottom-left .wpsb-btn:hover .wpsb-label,
.wpsb-pos-middle-left .wpsb-btn:hover .wpsb-label,
.wpsb-pos-top-left .wpsb-btn:hover .wpsb-label {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}

/* Đặc biệt: Hàng ngang ở dưới -> Tooltip trượt lên Trên */
.wpsb-layout-horizontal.wpsb-pos-bottom-right .wpsb-label,
.wpsb-layout-horizontal.wpsb-pos-bottom-left .wpsb-label {
	right: auto;
	left: 50%;
	bottom: 60px;
	transform: translate(-50%, 10px);
}

.wpsb-layout-horizontal.wpsb-pos-bottom-right .wpsb-btn:hover .wpsb-label,
.wpsb-layout-horizontal.wpsb-pos-bottom-left .wpsb-btn:hover .wpsb-label {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

/* Đặc biệt: Hàng ngang ở trên -> Tooltip trượt xuống Dưới */
.wpsb-layout-horizontal.wpsb-pos-top-right .wpsb-label,
.wpsb-layout-horizontal.wpsb-pos-top-left .wpsb-label {
	right: auto;
	left: 50%;
	top: 60px;
	transform: translate(-50%, -10px);
}

.wpsb-layout-horizontal.wpsb-pos-top-right .wpsb-btn:hover .wpsb-label,
.wpsb-layout-horizontal.wpsb-pos-top-left .wpsb-btn:hover .wpsb-label {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

/* Ẩn hiện khi cuộn trang */
.wpsb-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* Hiệu ứng trượt khi hiện nếu ẩn đến lúc cuộn */
.wpsb-hidden.wpsb-pos-bottom-right, 
.wpsb-hidden.wpsb-pos-middle-right, 
.wpsb-hidden.wpsb-pos-top-right {
	transform: translateX(100px);
}

.wpsb-hidden.wpsb-pos-bottom-left, 
.wpsb-hidden.wpsb-pos-middle-left, 
.wpsb-hidden.wpsb-pos-top-left {
	transform: translateX(-100px);
}

/* Tự động ẩn/hiện theo thiết bị hiển thị */
@media (min-width: 768px) {
	.wpsb-show-mobile {
		display: none !important;
	}
}

@media (max-width: 767px) {
	.wpsb-show-desktop {
		display: none !important;
	}
	
	/* Thu nhỏ nhẹ các nút trên di động */
	.wpsb-btn {
		width: 44px;
		height: 44px;
	}
	
	.wpsb-icon {
		width: 20px;
		height: 20px;
	}
	
	.wpsb-container {
		--wpsb-gap: 10px !important;
	}
	
	/* Điều chỉnh khoảng cách tooltip cho di động */
	.wpsb-pos-bottom-right .wpsb-label,
	.wpsb-pos-middle-right .wpsb-label,
	.wpsb-pos-top-right .wpsb-label {
		right: 52px;
	}

	.wpsb-pos-bottom-left .wpsb-label,
	.wpsb-pos-middle-left .wpsb-label,
	.wpsb-pos-top-left .wpsb-label {
		left: 52px;
	}
	
	.wpsb-layout-horizontal.wpsb-pos-bottom-right .wpsb-label,
	.wpsb-layout-horizontal.wpsb-pos-bottom-left .wpsb-label {
		bottom: 52px;
	}
	
	.wpsb-layout-horizontal.wpsb-pos-top-right .wpsb-label,
	.wpsb-layout-horizontal.wpsb-pos-top-left .wpsb-label {
		top: 52px;
	}
}

/* HIỆU ỨNG CAO CẤP: Nhấp nháy / Tỏa sáng cho nút Gọi điện và Zalo (Tạo chuyển đổi cao) */
@keyframes wpsbPulse {
	0% {
		box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.4);
	}
	70% {
		box-shadow: 0 0 0 12px rgba(46, 204, 113, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
	}
}

.wpsb-btn-phone {
	animation: wpsbPulse 2s infinite;
}

@keyframes wpsbZaloPulse {
	0% {
		box-shadow: 0 0 0 0 rgba(0, 104, 255, 0.4);
	}
	70% {
		box-shadow: 0 0 0 12px rgba(0, 104, 255, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(0, 104, 255, 0);
	}
}

.wpsb-btn-zalo {
	animation: wpsbZaloPulse 2s infinite;
	animation-delay: 0.5s; /* Lệch nhịp để không nhấp nháy cùng lúc */
}