/* ปุ่มติดต่อลอย (_fab.php) — แสดงข้อมูลตลอด ไม่มีปุ่ม toggle
   จอใหญ่: การ์ดลอยมุมขวาล่าง / มือถือ: แถบปุ่มติดด้านล่างจอ */
:root {
	--fab-red: #CE0001;
	--fab-red-dark: #8D0104;
	--fab-line: #06C755;
	--fab-bar-h: 0px; /* ความสูงแถบปุ่มบนมือถือ (แบนเนอร์คุกกี้ใช้ค่านี้หลบแถบ) */
}

.fab-contact {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 1040;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
}

.fab-item {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 210px;
	padding: 7px 22px 7px 7px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .97);
	border: 1px solid rgba(0, 0, 0, .06);
	box-shadow: 0 10px 28px rgba(20, 20, 20, .16), 0 2px 6px rgba(20, 20, 20, .08);
	text-decoration: none !important;
	transition: transform .2s ease, box-shadow .2s ease;
}

.fab-item:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 34px rgba(20, 20, 20, .22), 0 3px 8px rgba(20, 20, 20, .1);
}

.fab-item:focus-visible {
	outline: 3px solid #ffb400;
	outline-offset: 3px;
}

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

.fab-tel .fab-icon { background: linear-gradient(135deg, var(--fab-red) 0%, var(--fab-red-dark) 100%); }
.fab-line .fab-icon { background: var(--fab-line); font-size: 26px; }

/* วงคลื่นรอบไอคอนโทรศัพท์ ชวนให้กด */
.fab-tel .fab-icon::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	animation: fab-pulse 2.2s infinite;
}

@keyframes fab-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(206, 0, 1, .45); }
	70%  { box-shadow: 0 0 0 14px rgba(206, 0, 1, 0); }
	100% { box-shadow: 0 0 0 0 rgba(206, 0, 1, 0); }
}

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

.fab-text small {
	font-size: 12px;
	font-weight: 500;
	color: #767676;
}

.fab-text strong {
	font-size: 16px;
	font-weight: 700;
	color: #1f1f1f;
	letter-spacing: .2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ปุ่มเลื่อนขึ้นบนสุดของธีม (Porto) ย้ายไปไว้เหนือปุ่มติดต่อ ไม่ให้ทับกัน (บนมือถือธีมซ่อนปุ่มนี้อยู่แล้ว) */
html .scroll-to-top {
	right: 20px;
	bottom: 164px;
	width: 46px;
	min-width: 46px;
	height: 46px;
	padding: 0;
	border-radius: 50%;
	line-height: 46px;
	font-size: 16px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

html .scroll-to-top:not(.visible) { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
	.fab-item { transition: none; }
	.fab-tel .fab-icon::after { animation: none; }
}

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

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

	.fab-contact {
		left: 0;
		right: 0;
		bottom: 0;
		flex-direction: row;
		gap: 8px;
		padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, .94);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		border-top: 1px solid rgba(0, 0, 0, .06);
		box-shadow: 0 -6px 20px rgba(0, 0, 0, .08);
	}

	.fab-item {
		flex: 1 1 0;
		min-width: 0;
		justify-content: center;
		gap: 9px;
		padding: 5px 10px;
		border: 0;
		border-radius: 14px;
		box-shadow: none;
	}

	.fab-item:hover { transform: none; box-shadow: none; }
	.fab-tel { background: linear-gradient(135deg, var(--fab-red) 0%, var(--fab-red-dark) 100%); }
	.fab-line { background: var(--fab-line); }

	.fab-icon {
		width: 36px;
		height: 36px;
		font-size: 16px;
		background: rgba(255, 255, 255, .2) !important;
	}

	.fab-line .fab-icon { font-size: 22px; }
	.fab-tel .fab-icon::after { animation: none; }
	.fab-text small { font-size: 11px; color: rgba(255, 255, 255, .85); }
	.fab-text strong { font-size: 15px; color: #FFF; }
}