/* Bangkok Contact FAB — frontend style v1.0.0 */
.bcf-wrap{
	--bcf-main:#16A34A; --bcf-main2:#0EA5E9;
	--bcf-size:60px; --bcf-x:20px; --bcf-y:20px;
	--bcf-ico:calc(var(--bcf-size) * .82);
	position:fixed; bottom:var(--bcf-y); right:var(--bcf-x);
	z-index:99990;
	display:flex; flex-direction:column; align-items:flex-end;
	font-family:inherit; line-height:1.4;
	-webkit-font-smoothing:antialiased;
}
.bcf-wrap.bcf-pos-left{right:auto; left:var(--bcf-x); align-items:flex-start}
.bcf-wrap.bcf-inline{position:static; margin:24px 0}
.bcf-wrap *,.bcf-wrap *::before,.bcf-wrap *::after{box-sizing:border-box}

/* ---------- รายการช่องทาง ---------- */
.bcf-items{
	position:absolute; bottom:100%; right:0;
	margin:0 0 14px; padding:0; list-style:none;
	display:flex; flex-direction:column-reverse; gap:12px; align-items:flex-end;
}
.bcf-pos-left .bcf-items{right:auto; left:0; align-items:flex-start}

.bcf-item{
	opacity:0; transform:translateY(16px) scale(.4);
	pointer-events:none;
	transition:opacity .28s ease, transform .34s cubic-bezier(.34,1.56,.64,1);
	transition-delay:0s;
}
.bcf-open .bcf-item{
	opacity:1; transform:none; pointer-events:auto;
	transition-delay:calc((var(--i) - 1) * 45ms);
}

.bcf-link{
	display:flex; align-items:center; gap:10px;
	text-decoration:none; border:0; outline:0;
}
.bcf-pos-left .bcf-link{flex-direction:row-reverse}

.bcf-link .bcf-ico{
	width:var(--bcf-ico); height:var(--bcf-ico);
	display:flex; align-items:center; justify-content:center;
	border-radius:50%;
	background:var(--c,#16A34A); color:#fff;
	box-shadow:0 6px 18px -4px rgba(15,23,42,.35), 0 2px 6px rgba(15,23,42,.12);
	transition:transform .2s ease, box-shadow .2s ease;
}
.bcf-shape-rounded .bcf-link .bcf-ico{border-radius:30%}
.bcf-link:hover .bcf-ico{transform:scale(1.1); box-shadow:0 10px 24px -4px rgba(15,23,42,.45)}
.bcf-link:active .bcf-ico{transform:scale(.94)}
.bcf-link svg{width:52%; height:52%; display:block}

/* ---------- ป้ายชื่อช่องทาง ---------- */
.bcf-tip{
	background:rgba(17,24,39,.92); color:#fff;
	font-size:13px; font-weight:500; letter-spacing:.01em;
	padding:6px 12px; border-radius:9px; white-space:nowrap;
	box-shadow:0 4px 14px -2px rgba(15,23,42,.3);
	opacity:0; transform:translateX(8px);
	transition:opacity .2s ease, transform .2s ease;
	pointer-events:none;
}
.bcf-pos-left .bcf-tip{transform:translateX(-8px)}
.bcf-tip-hover .bcf-link:hover .bcf-tip,
.bcf-tip-hover .bcf-link:focus-visible .bcf-tip,
.bcf-tip-always .bcf-open .bcf-tip,
.bcf-tip-always.bcf-open .bcf-tip{opacity:1; transform:none}
.bcf-tip-none .bcf-tip{display:none}

/* ---------- ปุ่มหลัก ---------- */
.bcf-toggle{
	position:relative;
	width:var(--bcf-size); height:var(--bcf-size);
	border:0; padding:0; cursor:pointer;
	border-radius:50%;
	background:linear-gradient(135deg,var(--bcf-main),var(--bcf-main2));
	color:#fff;
	box-shadow:0 12px 28px -8px rgba(15,23,42,.5), 0 4px 10px rgba(15,23,42,.18);
	transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
	display:flex; align-items:center; justify-content:center;
	-webkit-tap-highlight-color:transparent;
}
.bcf-shape-rounded .bcf-toggle{border-radius:32%}
.bcf-toggle:hover{transform:translateY(-2px) scale(1.05)}
.bcf-toggle:active{transform:scale(.94)}
.bcf-toggle:focus-visible{outline:3px solid #fff; outline-offset:3px}

.bcf-toggle .bcf-ico{
	position:absolute; inset:0;
	display:flex; align-items:center; justify-content:center;
	transition:opacity .25s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.bcf-toggle svg{width:46%; height:46%; display:block}
.bcf-ico-close{opacity:0; transform:rotate(-90deg) scale(.4)}
.bcf-open .bcf-ico-open{opacity:0; transform:rotate(90deg) scale(.4)}
.bcf-open .bcf-ico-close{opacity:1; transform:none}

/* ---------- เอฟเฟกต์กระเพื่อม ---------- */
.bcf-has-pulse .bcf-toggle::after{
	content:""; position:absolute; inset:0; z-index:-1;
	border-radius:inherit; background:var(--bcf-main);
	animation:bcf-pulse 2.4s cubic-bezier(.4,0,.6,1) infinite;
}
.bcf-open .bcf-toggle::after{animation:none; opacity:0}
@keyframes bcf-pulse{
	0%{transform:scale(1); opacity:.6}
	70%{transform:scale(1.75); opacity:0}
	100%{transform:scale(1.75); opacity:0}
}

/* ---------- ข้อความใต้ปุ่ม ---------- */
.bcf-mainlabel{
	margin-top:8px; font-size:12px; font-weight:600;
	background:#fff; color:#111827;
	padding:4px 11px; border-radius:99px; white-space:nowrap;
	box-shadow:0 4px 12px -2px rgba(15,23,42,.22);
}

/* ---------- กล่องทักทาย ---------- */
.bcf-greet{
	position:absolute; bottom:100%; right:0; margin-bottom:14px;
	width:max-content; max-width:min(260px,58vw);
	background:#fff; color:#111827;
	font-size:14px; padding:12px 34px 12px 14px;
	border-radius:16px 16px 4px 16px;
	box-shadow:0 14px 34px -10px rgba(15,23,42,.4), 0 2px 8px rgba(15,23,42,.1);
	opacity:0; transform:translateY(10px) scale(.9); transform-origin:bottom right;
	transition:opacity .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
	pointer-events:none;
}
.bcf-pos-left .bcf-greet{right:auto; left:0; border-radius:16px 16px 16px 4px; transform-origin:bottom left; padding:12px 34px 12px 14px}
.bcf-greet.is-show{opacity:1; transform:none; pointer-events:auto}
.bcf-open .bcf-greet{opacity:0; transform:translateY(10px) scale(.9); pointer-events:none}
.bcf-greet-close{
	position:absolute; top:6px; right:8px;
	background:none; border:0; cursor:pointer;
	font-size:17px; line-height:1; color:#9CA3AF; padding:2px 4px;
}
.bcf-greet-close:hover{color:#374151}

/* ---------- การแสดงผลตามอุปกรณ์ ---------- */
.bcf-dev-desktop{display:none}
.bcf-dev-mobile{display:flex}
@media (min-width:782px){
	.bcf-dev-desktop{display:flex}
	.bcf-dev-mobile{display:none}
}
@media (max-width:480px){
	.bcf-wrap{--bcf-size:min(56px,var(--bcf-size))}
	.bcf-tip{font-size:12px; padding:5px 10px}
}
@media (prefers-reduced-motion:reduce){
	.bcf-wrap *{animation:none !important; transition-duration:.01ms !important}
}