/* ปุ่มติดต่อลอย (Floating Action Button) — widget-fab.php */

.fab-contact {
	position: fixed;
	right: 20px;
	bottom: 72px; /* เว้นที่ให้ปุ่มเลื่อนขึ้นด้านบน (scroll-to-top) ของธีม */
	z-index: 1035;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	font-family: 'Sarabun', sans-serif;
}

.fab-contact__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 20px 6px 6px;
	background: rgba(255, 255, 255, 0.94);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(15, 23, 42, 0.06);
	border-radius: 999px;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
	color: #1f2937 !important;
	text-decoration: none !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	animation: fab-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.fab-contact__item:nth-child(2) { animation-delay: 0.08s; }
.fab-contact__item:nth-child(3) { animation-delay: 0.16s; }

.fab-contact__item:hover,
.fab-contact__item:focus-visible {
	transform: translateX(-4px);
	box-shadow: 0 12px 30px rgba(15, 23, 42, 0.22);
	color: #111827 !important;
}

.fab-contact__item:focus-visible {
	outline: 3px solid rgba(37, 99, 235, 0.45);
	outline-offset: 2px;
}

.fab-contact__icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	color: #FFF;
	font-size: 19px;
}

.fab-contact__item--phone .fab-contact__icon {
	background: linear-gradient(135deg, #ffa24c, #ff6a00);
}

.fab-contact__item--messenger .fab-contact__icon {
	background: linear-gradient(135deg, #00c6ff, #0068ff);
	font-size: 21px;
}

.fab-contact__item--line .fab-contact__icon {
	background: #06C755;
	font-size: 23px;
}

/* วงคลื่นรอบปุ่มโทร ให้ดูน่ากด */
.fab-contact__item--phone .fab-contact__icon::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(255, 122, 0, 0.55);
	animation: fab-pulse 2.2s ease-out infinite;
}

.fab-contact__text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
	min-width: 0;
}

.fab-contact__text small {
	font-size: 12px;
	color: #6b7280;
}

.fab-contact__text strong {
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
}

@keyframes fab-in {
	from { opacity: 0; transform: translateX(24px); }
	to { opacity: 1; transform: none; }
}

@keyframes fab-pulse {
	0% { box-shadow: 0 0 0 0 rgba(255, 122, 0, 0.55); }
	70%, 100% { box-shadow: 0 0 0 12px rgba(255, 122, 0, 0); }
}

/* มือถือ: แถบติดต่อด้านล่างจอ */
@media (max-width: 767px) {
	:root {
		--fab-bar-h: 62px;
	}

	body {
		padding-bottom: calc(var(--fab-bar-h) + env(safe-area-inset-bottom, 0px));
	}

	.fab-contact {
		left: 0;
		right: 0;
		bottom: 0;
		flex-direction: row;
		align-items: stretch;
		gap: 0;
		padding-bottom: env(safe-area-inset-bottom, 0px);
		background: #FFF;
		border-radius: 18px 18px 0 0;
		box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.12);
	}

	.fab-contact__item {
		flex: 1 1 0;
		min-width: 0;
		height: var(--fab-bar-h);
		flex-direction: column;
		justify-content: center;
		gap: 3px;
		padding: 6px 4px;
		background: transparent;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		animation: none;
	}

	.fab-contact__item + .fab-contact__item {
		border-left: 1px solid #eef0f3;
	}

	.fab-contact__item:hover,
	.fab-contact__item:focus-visible {
		transform: none;
		box-shadow: none;
		background: #f8fafc;
	}

	.fab-contact__icon {
		width: 30px;
		height: 30px;
		font-size: 15px;
	}

	.fab-contact__item--messenger .fab-contact__icon { font-size: 16px; }
	.fab-contact__item--line .fab-contact__icon { font-size: 18px; }

	.fab-contact__text {
		align-items: center;
		max-width: 100%;
	}

	.fab-contact__text small {
		display: none;
	}

	.fab-contact__text strong {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 12.5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fab-contact__item,
	.fab-contact__item--phone .fab-contact__icon::after {
		animation: none;
	}
}