/**
 * Custom Floating Buttons — Frontend.
 *
 * Toàn bộ nằm trong layer `custom-floating-buttons` (sub-layer base → effects → utilities)
 * và @scope (.custom-floating-buttons): không rò style ra ngoài cụm nút.
 * Biến theo option (size, margin, màu từng nút) được PHP in inline vào cùng layer.
 */

@layer wp-core, theme, custom-floating-buttons;


@layer custom-floating-buttons {
	@layer base, effects, utilities;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
@layer custom-floating-buttons.base {
	@scope (.custom-floating-buttons) {
		:scope {
			--custom-floating-buttons-shadow: 0 0.5rem 1.125rem rgb(0 0 0 / 0.25), inset 0 0.125rem 0.25rem rgb(255 255 255 / 0.4);
			--custom-floating-buttons-tooltip-bg: var(--wp--preset--color--contrast, rgb(0 0 0 / 0.78));
			--custom-floating-buttons-tooltip-fg: var(--wp--preset--color--base, #fff);

			/*
			 * !important: widget phải nổi trên mọi stacking context do theme/page builder (CSS không kiểm soát) tạo ra.
			 * Đọc qua biến để khung xem trước trong trang cài đặt đặt được position: absolute.
			 */
			position: var(--custom-floating-buttons-position, fixed) !important;
			z-index: var(--custom-floating-buttons-z, 2147483647) !important;
			inset-block-end: var(--custom-floating-buttons-margin-bottom, 1.25rem);
			display: flex;
			flex-direction: column;
			gap: var(--custom-floating-buttons-spacing, 0.625rem);
			pointer-events: none;
		}

		/*
		 * Modifier đặt trên chính phần tử gốc → phải viết :scope.x — trong @scope, selector
		 * không có :scope chỉ khớp phần tử con. Vị trí vật lý, giữ nghĩa option cả trên site RTL.
		 */
		:scope.custom-floating-buttons--right {
			right: var(--custom-floating-buttons-margin-side, 1.25rem);
			left: auto;
			align-items: flex-end;
		}

		:scope.custom-floating-buttons--left {
			left: var(--custom-floating-buttons-margin-side, 1.25rem);
			right: auto;
			align-items: flex-start;
		}

		:scope.custom-floating-buttons--horizontal {
			flex-direction: row;
			align-items: center;
		}

		.custom-floating-buttons__button {
			--custom-floating-buttons-duration: 2s;
			--custom-floating-buttons-orbit-duration: 4s;

			/*
			 * !important chỉ cho 3 thuộc tính khung: CSS theme không-layer (vd `a { display: inline-block }`)
			 * luôn thắng CSS trong layer bất kể specificity — đã kiểm chứng bằng test trình duyệt.
			 * display đọc qua biến để layer utilities ẩn nút mà không cần thêm !important
			 * (với !important, layer khai báo TRƯỚC thắng — base sẽ đè utilities).
			 * text-decoration: gạch chân của theme vẽ từ chính thẻ <a>, con không tắt được —
			 * lộ rõ khi nút hiện số điện thoại dạng chữ (đã kiểm chứng bằng test).
			 */
			text-decoration: none !important;
			display: var(--custom-floating-buttons-display, flex) !important;
			inline-size: var(--custom-floating-buttons-inline-size, var(--custom-floating-buttons-size, 3rem)) !important;
			block-size: var(--custom-floating-buttons-size, 3rem) !important;
			position: relative;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			border: 1px solid rgb(255 255 255 / 0.25);
			border-radius: var(--custom-floating-buttons-radius, 50%);
			background: var(--custom-floating-buttons-button-bg, rgb(255 255 255 / 0.15));
			box-shadow: var(--custom-floating-buttons-shadow);
			backdrop-filter: blur(8px);
			pointer-events: auto;
			transition: transform 0.3s ease, box-shadow 0.3s ease;
			will-change: transform;
			animation: custom-floating-buttons-shake 0.6s ease-in-out backwards;

			&:hover,
			&:focus-visible {
				transform: scale(var(--custom-floating-buttons-hover-scale, 1.1));
			}

			&:focus-visible {
				outline: 2px solid var(--custom-floating-buttons-color, currentColor);
				outline-offset: 3px;
			}
		}

		.custom-floating-buttons__icon {
			position: relative;
			z-index: 2;
			display: block;
			flex-shrink: 0;
			inline-size: var(--custom-floating-buttons-icon-size, 100%);
			block-size: var(--custom-floating-buttons-icon-size, 100%);
			border-radius: 50%;
			object-fit: cover;
		}

		.custom-floating-buttons__button--speed-slow {
			--custom-floating-buttons-duration: 3s;
			--custom-floating-buttons-orbit-duration: 6s;
		}

		.custom-floating-buttons__button--speed-fast {
			--custom-floating-buttons-duration: 1s;
			--custom-floating-buttons-orbit-duration: 2s;
		}

		/* ── Nhãn số điện thoại (chỉ hiện khi kiểu desktop bật, xem khối @media bên dưới) ── */
		.custom-floating-buttons__label {
			display: var(--custom-floating-buttons-label-display, none);
			flex-direction: column;
			justify-content: center;
			box-sizing: border-box;
			max-inline-size: var(--custom-floating-buttons-label-max, none);
			overflow: hidden;
			padding-inline: var(--custom-floating-buttons-label-pad, 0.625rem 0.875rem);
			color: var(--custom-floating-buttons-pill-fg, #fff);
			font-family: var(--wp--preset--font-family--body, inherit);
			line-height: 1.15;
			white-space: nowrap;
			transition: max-inline-size 0.35s ease, padding-inline 0.35s ease;
			animation: var(--custom-floating-buttons-label-animation, none);
		}

		.custom-floating-buttons__number {
			font-size: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);
			font-weight: 700;
			letter-spacing: 0.02em;
			font-variant-numeric: tabular-nums;
		}

		.custom-floating-buttons__caption {
			color: color-mix(in srgb, currentColor 85%, transparent);
			font-size: 0.6875rem;
			font-weight: 500;
			letter-spacing: 0.03em;
		}

		/* Kiểu nút Gọi trên desktop — mobile giữ nút tròn. */
		@media (width >= 64rem) {
			.custom-floating-buttons__button--desktop-pill,
			.custom-floating-buttons__button--desktop-collapsed,
			.custom-floating-buttons__button--desktop-two-line {
				--custom-floating-buttons-inline-size: auto;
				--custom-floating-buttons-radius: 999px;
				--custom-floating-buttons-button-bg: var(--custom-floating-buttons-pill-bg, #0073aa);
				--custom-floating-buttons-icon-size: calc(var(--custom-floating-buttons-size, 3rem) - 0.5rem);
				--custom-floating-buttons-label-display: flex;
				--custom-floating-buttons-tooltip-display: none;
				--custom-floating-buttons-hover-scale: 1.04;

				justify-content: flex-start;
				padding-inline: 0.25rem;
				backdrop-filter: none;
			}

			.custom-floating-buttons__button--desktop-collapsed {
				--custom-floating-buttons-label-max: 0;
				--custom-floating-buttons-label-pad: 0;

				&:hover,
				&:focus-visible {
					--custom-floating-buttons-label-max: 16rem;
					--custom-floating-buttons-label-pad: 0.625rem 0.875rem;
				}
			}

			/* Tự bung 1 lần sau khi tải trang rồi thu lại — thuần CSS, không JS. */
			.custom-floating-buttons__button--peek {
				--custom-floating-buttons-label-animation: custom-floating-buttons-peek 5s ease 2.5s 1;
			}
		}

		/* ── Tooltip ── */
		.custom-floating-buttons__tooltip {
			display: var(--custom-floating-buttons-tooltip-display, block);
			position: absolute;
			inset-block-start: 50%;
			z-index: 3;
			translate: 0 -50%;
			padding: 0.3125rem 0.625rem;
			border-radius: 0.3125rem;
			background: var(--custom-floating-buttons-tooltip-bg);
			color: var(--custom-floating-buttons-tooltip-fg);
			font-family: var(--wp--preset--font-family--body, inherit);
			font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
			font-weight: 500;
			line-height: 1.3;
			white-space: nowrap;
			pointer-events: none;
			opacity: 0;
			transition: opacity 0.2s;

			&::after {
				content: "";
				position: absolute;
				inset-block-start: 50%;
				translate: 0 -50%;
				border: 0.3125rem solid transparent;
			}

			:hover > &,
			:focus-visible > & {
				opacity: 1;
			}
		}

		.custom-floating-buttons__tooltip--left {
			right: calc(100% + 0.625rem);

			&::after {
				left: 100%;
				border-left-color: var(--custom-floating-buttons-tooltip-bg);
			}
		}

		.custom-floating-buttons__tooltip--right {
			left: calc(100% + 0.625rem);

			&::after {
				right: 100%;
				border-right-color: var(--custom-floating-buttons-tooltip-bg);
			}
		}
	}
}

/* ── Effects ──────────────────────────────────────────────────────────────── */
@layer custom-floating-buttons.effects {
	@scope (.custom-floating-buttons) {
		.custom-floating-buttons__button--pulse {
			animation: custom-floating-buttons-pulse var(--custom-floating-buttons-duration) infinite ease-out 0.6s;
		}

		.custom-floating-buttons__button--rainbow-pulse {
			animation: custom-floating-buttons-rainbow-pulse var(--custom-floating-buttons-duration) infinite cubic-bezier(0.1, 0.7, 0.3, 1) 0.6s;
		}

		/*
		 * Orbit: span __orbit là vòng viền (mask), giữ nguyên hình nút; ::before bên trong là hình vuông
		 * gradient gấp đôi kích thước, chỉ xoay bằng `rotate`. Không phụ thuộc @property — bộ tối ưu CSS
		 * (LiteSpeed Minify/UCSS…) có loại @property thì viền vẫn quay.
		 */
		.custom-floating-buttons__button--orbit {
			--custom-floating-buttons-orbit-gradient: conic-gradient(
				from 90deg,
				transparent 0%,
				var(--custom-floating-buttons-color) 30%,
				transparent 50%
			);
		}

		.custom-floating-buttons__button--rainbow-orbit {
			--custom-floating-buttons-orbit-gradient: conic-gradient(
				var(--custom-floating-buttons-rb1) 0%,
				var(--custom-floating-buttons-rb2) 33%,
				var(--custom-floating-buttons-rb3) 66%,
				var(--custom-floating-buttons-rb1) 100%
			);
		}

		.custom-floating-buttons__orbit {
			position: absolute;
			z-index: -1;
			inset: calc(-1 * var(--custom-floating-buttons-orbit-width, 4px));
			box-sizing: border-box;
			overflow: hidden;
			padding: var(--custom-floating-buttons-orbit-width, 4px);
			border-radius: inherit;
			pointer-events: none;
			-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
			-webkit-mask-composite: xor;
			mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
			mask-composite: exclude;

			&::before {
				content: "";
				position: absolute;
				inset-block-start: 50%;
				inset-inline-start: 50%;
				inline-size: 200%;
				aspect-ratio: 1;
				translate: -50% -50%;
				background: var(--custom-floating-buttons-orbit-gradient);
				animation: custom-floating-buttons-orbit-spin var(--custom-floating-buttons-orbit-duration) linear infinite;
			}
		}
	}
}

/* ── Utilities ────────────────────────────────────────────────────────────── */
@layer custom-floating-buttons.utilities {
	@scope (.custom-floating-buttons) {
		/* Breakpoint theo viewport (thiết bị), không phải kích thước container → @media là đúng công cụ. */
		@media (width >= 64rem) {
			.custom-floating-buttons__button--hide-desktop {
				--custom-floating-buttons-display: none;
			}
		}

		@media (width < 64rem) {
			.custom-floating-buttons__button--hide-mobile {
				--custom-floating-buttons-display: none;
			}
		}
	}
}

/* Keyframes không thuộc layer/scope — tên đã namespace theo plugin. */
@keyframes custom-floating-buttons-shake {
	0%,
	100% { transform: translateX(0); }
	25%,
	75% { transform: translateX(-2px); }
	50% { transform: translateX(2px); }
}

@keyframes custom-floating-buttons-pulse {
	0% { box-shadow: var(--custom-floating-buttons-shadow), 0 0 0 0 var(--custom-floating-buttons-color); }
	70% { box-shadow: var(--custom-floating-buttons-shadow), 0 0 0 0.75rem transparent; }
	100% { box-shadow: var(--custom-floating-buttons-shadow), 0 0 0 0 transparent; }
}

@keyframes custom-floating-buttons-rainbow-pulse {
	0% { box-shadow: var(--custom-floating-buttons-shadow), 0 0 0 0 var(--custom-floating-buttons-rb1); }
	33% { box-shadow: var(--custom-floating-buttons-shadow), 0 0 0 0.375rem var(--custom-floating-buttons-rb2); }
	66% { box-shadow: var(--custom-floating-buttons-shadow), 0 0 0 0.75rem var(--custom-floating-buttons-rb3); }
	100% { box-shadow: var(--custom-floating-buttons-shadow), 0 0 0 1.125rem transparent; }
}

@keyframes custom-floating-buttons-orbit-spin {
	to { rotate: 360deg; }
}

@keyframes custom-floating-buttons-peek {
	0%,
	100% {
		max-inline-size: 0;
		padding-inline: 0;
	}

	15%,
	85% {
		max-inline-size: 16rem;
		padding-inline: 0.625rem 0.875rem;
	}
}