/* Container: left‑aligned rows that wrap naturally */
.cbb-container{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:16px;
	padding:10px 16px;
	background:#fff;
	border-bottom:1px solid #1a1a1a;
	font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;
}

/* Button */
.cbb-button{
	display:flex;               /* icon + label side‑by‑side */
	align-items:center;
	gap:6px;
	padding:8px 12px;
	background:#3a3a3a;
	color:#ccc;
	border-radius:4px;
	text-decoration:none;
	position:relative;
	transition:background .3s,color .3s;
	white-space:nowrap;         /* keeps each button intact */
}
.cbb-button:hover,
.cbb-button:focus{background:#555;color:#fff}

/* Icon span / img */
.cbb-icon{
	font-size:18px;
	width:18px;height:18px;
	display:inline-block;
	line-height:1;
}

/* Optional dot separator */
.cbb-button:not(:last-child)::after{
	content:"•";
	position:absolute;
	right:-12px;
	top:50%;
	transform:translateY(-50%);
	color:#1a1a1a;
	font-size:14px;
}

/* Mobile: hide text, show only icon */
@media(max-width:768px){
	.cbb-label{display:none}
	.cbb-mobile-only{display:inline-flex !important}
	.cbb-desktop-only{display:none !important}
}

/* Desktop: respect desktop‑only */
@media(min-width:769px){
	.cbb-mobile-only{display:none !important}
}