.fcb-container {
	display: flex;
	gap: var(--fcb-gap, 12px);
}

.fcb-container.fcb-floating {
	position: fixed;
}

.fcb-container.fcb-static {
	position: static;
	margin: 16px 0;
}

.fcb-corner-bottom-right { right: var(--fcb-offset-x, 20px); bottom: var(--fcb-offset-y, 20px); }
.fcb-corner-bottom-left  { left: var(--fcb-offset-x, 20px); bottom: var(--fcb-offset-y, 20px); }
.fcb-corner-top-right    { right: var(--fcb-offset-x, 20px); top: var(--fcb-offset-y, 20px); }
.fcb-corner-top-left     { left: var(--fcb-offset-x, 20px); top: var(--fcb-offset-y, 20px); }

.fcb-dir-vertical   { flex-direction: column; }
.fcb-dir-horizontal { flex-direction: row; }

.fcb-button {
	width: var(--fcb-size, 56px);
	height: var(--fcb-size, 56px);
	background: var(--fcb-bg, #2ecc71);
	color: var(--fcb-icon-color, #fff);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	transition: transform 0.2s ease;
	flex-shrink: 0;
}

.fcb-button:hover {
	transform: scale(1.08);
}

.fcb-icon {
	width: 60%;
	height: 60%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--fcb-icon-color, #fff);
}

.fcb-icon svg,
.fcb-icon .fcb-icon-img {
	width: 100%;
	height: 100%;
	fill: currentColor;
	object-fit: contain;
}

/* Effects */
.fcb-effect-pulse .fcb-button {
	animation: fcb-pulse 2s infinite;
}

@keyframes fcb-pulse {
	0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.35); }
	70% { box-shadow: 0 0 0 14px rgba(0, 0, 0, 0); }
	100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

.fcb-effect-bounce .fcb-button {
	animation: fcb-bounce 1.6s infinite;
}

@keyframes fcb-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

.fcb-effect-shake .fcb-button {
	animation: fcb-shake 2.2s infinite;
}

@keyframes fcb-shake {
	0%, 90%, 100% { transform: rotate(0deg); }
	92% { transform: rotate(-8deg); }
	94% { transform: rotate(8deg); }
	96% { transform: rotate(-6deg); }
	98% { transform: rotate(6deg); }
}

/* Visibility helpers */
@media (max-width: 768px) {
	.fcb-desktop-only { display: none !important; }
}

@media (min-width: 769px) {
	.fcb-mobile-only { display: none !important; }
}

/* Text label under icon (chỉ hiện khi dùng chế độ thanh ngang mobile) */
.fcb-label {
	display: none;
}

/* Chế độ thanh ngang cố định đáy màn hình trên mobile (giống menu app kiểu
 * Shopee/Tiki) — thay cho kiểu nổi góc, giúp tránh đè lên nội dung/nút mua
 * hàng khi cuộn trang. Desktop luôn giữ nguyên kiểu nổi góc cũ. */
@media (max-width: 768px) {
	.fcb-container.fcb-floating.fcb-barmode {
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		top: auto !important;
		width: 100%;
		flex-direction: row !important;
		justify-content: space-around;
		align-items: stretch;
		gap: 0;
		background: #ffffff;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12);
		padding: 6px max(6px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
		box-sizing: border-box;
	}

	.fcb-container.fcb-floating.fcb-barmode .fcb-button {
		width: auto;
		height: auto;
		flex: 1 1 0;
		min-width: 0;
		max-width: 120px;
		border-radius: 10px;
		box-shadow: none;
		background: transparent;
		flex-direction: column;
		gap: 2px;
		padding: 4px 2px;
		animation: none !important;
	}

	.fcb-container.fcb-floating.fcb-barmode .fcb-button:hover {
		transform: none;
	}

	.fcb-container.fcb-floating.fcb-barmode .fcb-icon {
		width: 22px;
		height: 22px;
		flex-shrink: 0;
		background: var(--fcb-bg, #2ecc71);
		color: var(--fcb-icon-color, #fff);
		border-radius: 50%;
		padding: 7px;
		box-sizing: content-box;
	}

	.fcb-container.fcb-floating.fcb-barmode .fcb-label {
		display: block;
		font-size: 11px;
		line-height: 1.2;
		color: #333333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
	}

	body.fcb-has-barmode {
		padding-bottom: calc(60px + env(safe-area-inset-bottom));
	}
}