/* Modern floating action button — replaces vendor/floating-action-button (kc.fab).
   Self-contained: no jQuery plugin, no external CSS. Paired with js/fab.js. */

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

/* ---------- action items ---------- */
.dsc-fab-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dsc-fab-item {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	opacity: 0;
	transform: translateY(14px) scale(.85);
	pointer-events: none;
	transition: opacity .22s ease, transform .32s cubic-bezier(.22, 1.4, .4, 1);
	transition-delay: 0s;
}

.kc_fab_wrapper.is-open .dsc-fab-item {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

/* staggered reveal, bottom-most first */
.kc_fab_wrapper.is-open .dsc-fab-item:nth-last-child(1) { transition-delay: .02s; }
.kc_fab_wrapper.is-open .dsc-fab-item:nth-last-child(2) { transition-delay: .07s; }
.kc_fab_wrapper.is-open .dsc-fab-item:nth-last-child(3) { transition-delay: .12s; }
.kc_fab_wrapper.is-open .dsc-fab-item:nth-last-child(4) { transition-delay: .17s; }

.dsc-fab-label {
	background: rgba(255, 255, 255, .92);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: #23282d;
	font-size: 14px;
	line-height: 1;
	white-space: nowrap;
	padding: 10px 14px;
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .13), 0 1px 3px rgba(0, 0, 0, .08);
	transition: transform .18s ease;
}

.dsc-fab-icon {
	width: 48px;
	height: 48px;
	flex: 0 0 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 19px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .2), 0 2px 4px rgba(0, 0, 0, .12);
	transition: transform .18s ease, box-shadow .18s ease;
}

.dsc-fab-item:hover .dsc-fab-icon,
.dsc-fab-item:focus-visible .dsc-fab-icon {
	transform: scale(1.09);
	box-shadow: 0 10px 22px rgba(0, 0, 0, .26), 0 3px 6px rgba(0, 0, 0, .14);
}

.dsc-fab-item:hover .dsc-fab-label {
	transform: translateX(-2px);
}

/* ---------- main trigger ---------- */
.dsc-fab-main {
	position: relative;
	width: 60px;
	height: 60px;
	border: 0;
	padding: 0;
	border-radius: 50%;
	cursor: pointer;
	color: #fff;
	font-size: 24px;
	background: linear-gradient(135deg, var(--color-primary-3, #00b500), var(--color-primary, #006800));
	box-shadow: 0 10px 26px -6px rgba(0, 104, 0, .55), 0 4px 10px rgba(0, 0, 0, .18);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .25s cubic-bezier(.22, 1.4, .4, 1), box-shadow .25s ease;
	-webkit-tap-highlight-color: transparent;
}

.dsc-fab-main:hover,
.dsc-fab-main:focus-visible {
	transform: translateY(-3px) scale(1.04);
	box-shadow: 0 16px 32px -8px rgba(0, 104, 0, .6), 0 6px 14px rgba(0, 0, 0, .2);
	outline: none;
}

.dsc-fab-main:active { transform: translateY(-1px) scale(.97); }

.dsc-fab-main i {
	transition: transform .3s cubic-bezier(.22, 1.4, .4, 1), opacity .18s ease;
}

.dsc-fab-main .dsc-fab-close {
	position: absolute;
	opacity: 0;
	transform: rotate(-90deg) scale(.5);
}

.kc_fab_wrapper.is-open .dsc-fab-main .dsc-fab-open {
	opacity: 0;
	transform: rotate(90deg) scale(.5);
}

.kc_fab_wrapper.is-open .dsc-fab-main .dsc-fab-close {
	opacity: 1;
	transform: rotate(0) scale(1);
}

/* attention pulse while collapsed */
.dsc-fab-main::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--color-primary-3, #00b500);
	opacity: 0;
	animation: dsc-fab-pulse 2.6s ease-out infinite;
}

.kc_fab_wrapper.is-open .dsc-fab-main::after,
.dsc-fab-main:hover::after { animation: none; opacity: 0; }

@keyframes dsc-fab-pulse {
	0%   { transform: scale(1);    opacity: .55; }
	70%  { transform: scale(1.45); opacity: 0; }
	100% { transform: scale(1.45); opacity: 0; }
}

/* ---------- responsive / a11y ---------- */
@media (max-width: 575px) {
	.kc_fab_wrapper { right: 16px; bottom: 16px; gap: 10px; }
	.dsc-fab-main { width: 54px; height: 54px; font-size: 21px; }
	.dsc-fab-icon { width: 44px; height: 44px; flex-basis: 44px; font-size: 17px; }
	.dsc-fab-label { font-size: 13px; padding: 8px 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.kc_fab_wrapper *,
	.dsc-fab-main::after {
		transition-duration: .01ms !important;
		animation: none !important;
	}
}