/* Floating contact FAB — bottom-right, expands on tap. Below modals (z 900). */
.contact-fab {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 900;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

/* Channel list — always visible, stacked (no toggle needed) */
.contact-fab-list {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
}

/* Channel buttons */
.contact-btn {
	position: relative;
	width: 52px;
	height: 52px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
	transition: transform .18s ease;
}
.contact-btn:hover { transform: scale(1.08); }
.contact-btn-icon { display: flex; }
.contact-btn-icon svg { width: 27px; height: 27px; }
.contact-zalo-word { font-weight: 700; font-size: 15px; letter-spacing: -.02em; }

/* Hover/focus label pill (desktop) */
.contact-btn-label {
	position: absolute;
	right: 62px;
	white-space: nowrap;
	background: rgba(23, 21, 15, .92);
	color: var(--ink);
	font-size: 13px;
	font-weight: 500;
	padding: 6px 11px;
	border-radius: 8px;
	border: 1px solid var(--line-2);
	opacity: 0;
	transform: translateX(6px);
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease;
}
.contact-btn:hover .contact-btn-label,
.contact-btn:focus-visible .contact-btn-label { opacity: 1; transform: none; }

/* Brand colours */
.contact-btn--zalo { background: #0068ff; }
.contact-btn--messenger { background: linear-gradient(135deg, #00b2ff, #006aff); }
.contact-btn--whatsapp { background: #25d366; }
.contact-btn--telegram { background: #29a9eb; }
.contact-btn--email { background: #ea4335; }
.contact-btn--phone { background: var(--acc); color: #17150f; }

/* Main toggle */
.contact-fab-toggle {
	position: relative;
	width: 60px;
	height: 60px;
	border: 0;
	border-radius: 999px;
	background: var(--acc);
	color: #17150f;
	cursor: pointer;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .4);
	display: none; /* always-visible mode: channels show directly, no toggle */
	align-items: center;
	justify-content: center;
}
.contact-fab-icon, .contact-fab-x {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity .2s ease, transform .2s ease;
}
.contact-fab-icon svg { width: 30px; height: 30px; }
.contact-fab-x { font-size: 24px; font-weight: 700; opacity: 0; transform: rotate(-45deg); }
.contact-fab.is-open .contact-fab-icon { opacity: 0; transform: rotate(45deg); }
.contact-fab.is-open .contact-fab-x { opacity: 1; transform: none; }

/* Emphasis on the Create Custom page — a gentle attention pulse */
.contact-fab--emphasis:not(.is-open) .contact-fab-toggle {
	animation: contact-pulse 2.2s ease-out infinite;
}
@keyframes contact-pulse {
	0% { box-shadow: 0 8px 22px rgba(0, 0, 0, .4), 0 0 0 0 color-mix(in srgb, var(--acc) 55%, transparent); }
	70% { box-shadow: 0 8px 22px rgba(0, 0, 0, .4), 0 0 0 16px color-mix(in srgb, var(--acc) 0%, transparent); }
	100% { box-shadow: 0 8px 22px rgba(0, 0, 0, .4), 0 0 0 0 transparent; }
}

@media (max-width: 640px) {
	.contact-fab { right: 16px; bottom: 16px; }
	.contact-fab-toggle { width: 54px; height: 54px; }
	.contact-btn { width: 48px; height: 48px; }
	.contact-btn-icon svg { width: 25px; height: 25px; }
	/* On touch there's no hover — keep labels hidden, rely on brand icons */
	.contact-btn-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.contact-fab--emphasis .contact-fab-toggle { animation: none; }
}