/* ============================================================
   Floating Action Button — ช่องทางติดต่อ
   ใช้แทนปลั๊กอิน kc_fab เดิม
   ============================================================ */

.vfab{
	position: fixed;
	right: 16px;
	bottom: 16px;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
	font-family: 'Prompt', sans-serif;
}

/* ---------- ฉากหลังตอนเปิด ---------- */
.vfab__scrim{
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	border: 0;
	padding: 0;
	background: rgba(15, 23, 42, .38);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	visibility: hidden;
	cursor: default;
	transition: opacity .25s ease, visibility .25s ease;
}
.vfab[data-open="true"] .vfab__scrim{
	opacity: 1;
	visibility: visible;
}

/* ---------- รายการช่องทางติดต่อ ---------- */
.vfab__menu{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	/* ต้อง positioned ไม่งั้นถูก .vfab__scrim (position:fixed) วาดทับ */
	position: relative;
}

.vfab__item{
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	opacity: 0;
	transform: translateY(10px) scale(.92);
	pointer-events: none;
	transition: opacity .22s ease, transform .22s cubic-bezier(.34, 1.56, .64, 1);
}
.vfab[data-open="true"] .vfab__item{
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

/* ไล่จังหวะให้เด้งทีละปุ่ม (นับจากปุ่มล่างสุดที่อยู่ใกล้นิ้วก่อน) */
.vfab[data-open="true"] .vfab__item:nth-last-child(1){ transition-delay: .02s; }
.vfab[data-open="true"] .vfab__item:nth-last-child(2){ transition-delay: .06s; }
.vfab[data-open="true"] .vfab__item:nth-last-child(3){ transition-delay: .10s; }
.vfab[data-open="true"] .vfab__item:nth-last-child(4){ transition-delay: .14s; }
.vfab[data-open="true"] .vfab__item:nth-last-child(5){ transition-delay: .18s; }

/* ป้ายชื่อ — โชว์ตลอดตอนเปิด ไม่ต้อง hover (สำคัญมากบนมือถือ) */
.vfab__label{
	background: #fff;
	color: #1f2937;
	font-size: 14px;
	line-height: 1.2;
	font-weight: 500;
	padding: 9px 14px;
	border-radius: 999px;
	white-space: nowrap;
	box-shadow: 0 4px 14px rgba(15, 23, 42, .16);
}

.vfab__icon{
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 20px;
	box-shadow: 0 6px 16px rgba(15, 23, 42, .22);
	transition: transform .18s ease;
}
.vfab__item:hover .vfab__icon,
.vfab__item:focus-visible .vfab__icon{ transform: scale(1.08); }
.vfab__item:focus-visible{ outline: none; }
.vfab__item:focus-visible .vfab__label{ box-shadow: 0 0 0 3px rgba(11, 113, 225, .45); }

/* สีตามแบรนด์จริง */
.vfab__icon--line{ background: #06C755; }
.vfab__icon--messenger{ background: linear-gradient(135deg, #00B2FF 0%, #006AFF 60%, #A033FF 100%); }
.vfab__icon--tel{ background: linear-gradient(135deg, #FF8A2B, #F2670A); }

/* ---------- ปุ่มหลัก ---------- */
.vfab__toggle{
	width: 60px;
	height: 60px;
	border: 0;
	border-radius: 50%;
	padding: 0;
	cursor: pointer;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: linear-gradient(135deg, #0b71e1, #0959b0);
	-webkit-tap-highlight-color: transparent;
	box-shadow: 0 8px 24px rgba(11, 113, 225, .42), 0 0 0 0 rgba(11, 113, 225, .45);
	animation: vfab-ring 2.6s ease-out infinite;
	transition: transform .25s ease;
}
.vfab__toggle:hover{ transform: translateY(-2px); }
.vfab__toggle:focus-visible{ outline: 3px solid #fff; outline-offset: 3px; }
.vfab[data-open="true"] .vfab__toggle{ animation: none; }

/* วงแหวนกระเพื่อมเรียกความสนใจ */
@keyframes vfab-ring{
	0%   { box-shadow: 0 8px 24px rgba(11,113,225,.42), 0 0 0 0    rgba(11,113,225,.45); }
	70%  { box-shadow: 0 8px 24px rgba(11,113,225,.42), 0 0 0 18px rgba(11,113,225,0); }
	100% { box-shadow: 0 8px 24px rgba(11,113,225,.42), 0 0 0 0    rgba(11,113,225,0); }
}

/* สลับไอคอน chat <-> กากบาท */
.vfab__toggle i{
	position: absolute;
	font-size: 24px;
	transition: opacity .2s ease, transform .28s ease;
}
.vfab__toggle .vfab__ico-close{ opacity: 0; transform: rotate(-90deg) scale(.6); }
.vfab[data-open="true"] .vfab__toggle .vfab__ico-open{ opacity: 0; transform: rotate(90deg) scale(.6); }
.vfab[data-open="true"] .vfab__toggle .vfab__ico-close{ opacity: 1; transform: none; }

/* ---------- จอเล็ก ---------- */
@media (max-width: 575px){
	.vfab{ right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
	.vfab__label{ font-size: 13px; padding: 8px 12px; }
	.vfab__icon{ width: 46px; height: 46px; font-size: 19px; }
	.vfab__toggle{ width: 56px; height: 56px; }
	.vfab__toggle i{ font-size: 22px; }
}

/* ---------- เคารพการตั้งค่าลดการเคลื่อนไหว ---------- */
@media (prefers-reduced-motion: reduce){
	.vfab__toggle{ animation: none; }
	.vfab__item,
	.vfab__icon,
	.vfab__toggle,
	.vfab__toggle i,
	.vfab__scrim{ transition-duration: .01ms !important; }
	.vfab[data-open="true"] .vfab__item{ transition-delay: 0s !important; }
}

@media print{ .vfab{ display: none !important; } }