/* ---------- Floating Action Button (แสดงตลอด ไม่ต้อง toggle) ---------- */
.md-fab{
	position:fixed; right:18px; bottom:18px; z-index:9990;
	display:flex; flex-direction:column; gap:10px; align-items:flex-end;
	font-family:"Prompt",sans-serif;
}
.md-fab-item{
	display:flex; align-items:center; gap:10px;
	min-width:210px; padding:8px 16px 8px 8px;
	background:rgba(255,255,255,.97);
	-webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
	border:1px solid rgba(0,97,225,.12); border-radius:999px;
	box-shadow:0 10px 28px rgba(16,38,77,.16);
	color:#10264d; text-decoration:none !important;
	transition:transform .2s ease, box-shadow .2s ease;
	animation:mdFabIn .45s ease both;
}
.md-fab-item:nth-child(2){animation-delay:.06s;}
.md-fab-item:nth-child(3){animation-delay:.12s;}
.md-fab-item:nth-child(4){animation-delay:.18s;}
.md-fab-item:hover, .md-fab-item:focus-visible{transform:translateX(-4px); box-shadow:0 14px 32px rgba(16,38,77,.24); color:#10264d;}
.md-fab-item:focus-visible{outline:3px solid #0061e1; outline-offset:2px;}
.md-fab-icon{
	flex:0 0 40px; width:40px; height:40px; border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	color:#FFF; font-size:17px;
	background:linear-gradient(135deg,#ff9a1f,#ff6a00);
}
.fab-call .md-fab-icon{background:linear-gradient(135deg,#ff9a1f,#ff6a00);}
.fab-call2 .md-fab-icon{background:linear-gradient(135deg,#ffb347,#f57c00);}
.fab-mail .md-fab-icon{background:linear-gradient(135deg,#19c37d,#0a9e5c);}
.fab-mail2 .md-fab-icon{background:linear-gradient(135deg,#2bd4a4,#0a9e7a);}
.fab-call .md-fab-icon i{animation:mdFabRing 2.6s ease-in-out infinite;}
.md-fab-text{display:flex; flex-direction:column; line-height:1.2; min-width:0;}
.md-fab-text small{font-size:11px; color:#6b7a90;}
.md-fab-text strong{font-size:14px; font-weight:500 !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:190px;}
.md-fab-short{display:none;}

@keyframes mdFabIn{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}}
@keyframes mdFabRing{0%,70%,100%{transform:rotate(0);} 75%{transform:rotate(-14deg);} 80%{transform:rotate(14deg);} 85%{transform:rotate(-10deg);} 90%{transform:rotate(10deg);}}

/* มือถือ / แท็บเล็ต : แถบติดต่อด้านล่างจอ */
@media (max-width: 767px){
	body{padding-bottom:74px;}
	.md-fab{
		left:0; right:0; bottom:0; gap:0;
		flex-direction:row; align-items:stretch;
		padding:6px 6px calc(6px + env(safe-area-inset-bottom));
		background:rgba(255,255,255,.94);
		-webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
		box-shadow:0 -6px 20px rgba(16,38,77,.12);
	}
	.md-fab-item{
		flex:1 1 0; min-width:0; flex-direction:column; gap:3px;
		padding:4px 2px; background:none; border:0; box-shadow:none; border-radius:10px;
		-webkit-backdrop-filter:none; backdrop-filter:none; animation:none;
	}
	.md-fab-item:hover, .md-fab-item:focus-visible{transform:none; box-shadow:none; background:#F2F6FC;}
	.md-fab-icon{flex-basis:auto; width:36px; height:36px; font-size:15px;}
	.md-fab-text{align-items:center; width:100%;}
	.md-fab-text small, .md-fab-value{display:none;}
	.md-fab-short{display:block; font-size:11px !important; max-width:100%;}
}

@media (prefers-reduced-motion: reduce){
	.md-fab-item, .fab-call .md-fab-icon i{animation:none;}
}
@media print{ .md-fab{display:none;} }
