/* sections/call-button.php */
a.cb-button {
	position: fixed; z-index: 90; /* under the header (100) and its open menu */
	right: var(--space-4);
	bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
	box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--space-3);
	border-radius: var(--radius-pill); color: var(--c-heading);
	font-family: var(--f-body); line-height: 1.2; text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	animation: cb-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.8s backwards;
	transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
a.cb-button *, a.cb-button *::before, a.cb-button *::after { box-sizing: border-box; }
a.cb-button:hover, a.cb-button:focus { color: var(--c-heading); transform: translateY(-3px); }
a.cb-button:active { transform: scale(0.94); transition-duration: 0.08s; }
a.cb-button:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; }

/* Red round badge with two rings going out, one after the other */
.cb-icon {
	position: relative; display: grid; place-items: center; flex: none; width: 3.5rem; height: 3.5rem;
	border: 2px solid var(--c-surface); border-radius: 50%; background: var(--c-accent); color: var(--c-on-accent);
	box-shadow: var(--shadow-lg); transition: background-color 0.25s;
}
.cb-icon::before, .cb-icon::after {
	content: ""; position: absolute; inset: -2px; border: 2px solid var(--c-accent); border-radius: 50%;
	animation: cb-ring 2.4s ease-out infinite; pointer-events: none;
}
.cb-icon::after { animation-delay: 1.2s; }
.cb-button:hover .cb-icon, .cb-button:focus-visible .cb-icon { background: var(--c-accent-hover); }
.cb-svg { width: 1.5rem; height: 1.5rem; transform-origin: 50% 50%; animation: cb-shake 4s ease-in-out infinite; }
.cb-button:hover .cb-svg { animation-duration: 1.2s; }

.cb-text { display: none; }
.cb-label { display: block; color: var(--c-accent); font-size: var(--fs-xs); font-weight: 700; }
.cb-number { display: block; font-size: var(--fs-base); font-weight: 800; white-space: nowrap; }

@keyframes cb-in { from { opacity: 0; transform: translateY(1.5rem) scale(0.9); } }
/* Stays within the 1rem margin of the window: never widens the page */
@keyframes cb-ring { from { opacity: 0.7; transform: scale(1); } to { opacity: 0; transform: scale(1.45); } }
@keyframes cb-shake {
	0%, 24%, 100% { transform: rotate(0deg); }
	4%, 12%, 20% { transform: rotate(-14deg); }
	8%, 16% { transform: rotate(14deg); }
}

@media (min-width: 768px) {
	/* The pill: badge, label and number */
	a.cb-button {
		padding: var(--space-1) var(--space-5) var(--space-1) var(--space-1);
		border: 1px solid var(--c-border); background: var(--c-surface); box-shadow: var(--shadow-lg);
	}
	a.cb-button:hover, a.cb-button:focus { border-color: var(--c-accent); background: var(--c-surface); }
	.cb-icon { width: 3rem; height: 3rem; border: 0; box-shadow: none; }
	.cb-icon::before, .cb-icon::after { inset: 0; }
	.cb-svg { width: 1.375rem; height: 1.375rem; }
	.cb-text { display: block; }
}
@media (prefers-reduced-motion: reduce) {
	a.cb-button, .cb-svg { animation: none; transition: none; }
	.cb-icon::before, .cb-icon::after { display: none; }
}
@media print {
	a.cb-button { display: none; }
}