/**
 * CTA Button Guide — floating "Click to Call" button.
 *
 * Colors inherit the BrandApp theme's injected CSS custom properties
 * (--brand-primary / --brand-accent / --font-display ...), with hard-coded
 * fallbacks so the button still looks right if those vars are absent.
 * Admin "custom" colors override via --ctabg-bg / --ctabg-text (set inline).
 */

.ctabg-btn {
	--ctabg-interval: 4s; /* overridden inline per settings */
	--ctabg-tx: 0; /* base horizontal transform; -50% for centered position */

	position: fixed;
	z-index: 99990;
	bottom: 20px;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	max-width: calc(100vw - 32px);
	padding: 13px 20px;
	border-radius: 999px;
	background: var(--ctabg-bg, var(--brand-primary, #be1622));
	color: var(--ctabg-text, #fff);
	font-family: var(--font-display, "DM Sans", "Segoe UI", system-ui, sans-serif);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-decoration: none;
	text-transform: uppercase;
	box-shadow: var(--shadow-card, 0 12px 30px -8px rgba(0, 0, 0, 0.35));
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease,
		padding 0.35s ease, gap 0.35s ease;
	-webkit-tap-highlight-color: transparent;
}

.ctabg-btn:hover,
.ctabg-btn:focus {
	background: var(--ctabg-bg-hover, var(--brand-accent, #8b0000));
	color: var(--ctabg-text, #fff);
	transform: translateX(var(--ctabg-tx, 0)) translateY(-2px);
	box-shadow: 0 16px 34px -8px rgba(0, 0, 0, 0.45);
}

/* Pause the looping attention animation while the visitor interacts. */
.ctabg-btn:hover,
.ctabg-btn:focus {
	animation-play-state: paused;
}

.ctabg-btn:focus-visible {
	outline: 3px solid rgba(255, 255, 255, 0.85);
	outline-offset: 2px;
}

.ctabg-icon {
	display: inline-flex;
	flex: 0 0 auto;
}

.ctabg-icon svg {
	display: block;
}

.ctabg-label {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 360px;
	opacity: 1;
	transition: max-width 0.35s ease, opacity 0.3s ease, margin 0.35s ease;
}

/* ---- Scroll-reveal: collapsed circle -> full button ---- */

/* Collapsed = just the icon in a perfect circle. Padding is EQUAL on all four
   sides (so width == height with the square icon) and the selectors carry
   enough specificity (.ctabg-btn.ctabg-collapsed) to beat the responsive
   `padding: 12px 16px` shorthand — otherwise the circle renders as an oval on
   mobile. No fixed width, so the unfold still animates when JS removes it. */
.ctabg-btn.ctabg-collapsed {
	gap: 0;
	padding: 14px;
	justify-content: center;
}

.ctabg-collapsed .ctabg-label {
	max-width: 0;
	opacity: 0;
	margin: 0;
}

.ctabg-btn.ctabg-size-small.ctabg-collapsed {
	padding: 12px;
}

.ctabg-btn.ctabg-size-large.ctabg-collapsed {
	padding: 17px;
}

/* Animation variant: Bounce — springy overshoot easing on the unfold. */
.ctabg-anim-bounce.ctabg-btn {
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease,
		padding 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), gap 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ctabg-anim-bounce .ctabg-label {
	transition: max-width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease, margin 0.5s ease;
}

/* Animation variant: Fade — gentler, the label fades in as it widens. */
.ctabg-anim-fade .ctabg-label {
	transition: max-width 0.5s ease, opacity 0.6s ease, margin 0.5s ease;
}

/* Animation variant: Pop — the icon springs in as the button unfolds. */
.ctabg-anim-pop .ctabg-icon {
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ctabg-anim-pop.ctabg-collapsed .ctabg-icon {
	transform: scale(0.78);
}

.ctabg-anim-pop.ctabg-expanded .ctabg-icon {
	transform: scale(1);
}

/* Positions — desktop (>=601px) uses .ctabg-pos-*, mobile (<=600px) uses
   .ctabg-pos-m-*, so the button can sit differently on each (e.g. bottom-right
   on desktop, bottom-center on mobile). Each rule resets the opposite edge and
   sets --ctabg-tx so the attention animations stay correctly anchored. */
@media (min-width: 601px) {
	.ctabg-pos-bottom-right {
		right: 20px;
		left: auto;
		--ctabg-tx: 0;
	}

	.ctabg-pos-bottom-left {
		left: 20px;
		right: auto;
		--ctabg-tx: 0;
	}

	.ctabg-pos-bottom-center {
		left: 50%;
		right: auto;
		--ctabg-tx: -50%;
		transform: translateX(var(--ctabg-tx));
	}
}

@media (max-width: 600px) {
	.ctabg-pos-m-bottom-right {
		right: 16px;
		left: auto;
		--ctabg-tx: 0;
	}

	.ctabg-pos-m-bottom-left {
		left: 16px;
		right: auto;
		--ctabg-tx: 0;
	}

	.ctabg-pos-m-bottom-center {
		left: 50%;
		right: auto;
		--ctabg-tx: -50%;
		transform: translateX(var(--ctabg-tx));
	}
}

/* Sizes */
.ctabg-size-small {
	padding: 10px 16px;
	font-size: 13px;
}

.ctabg-size-large {
	padding: 16px 26px;
	font-size: 17px;
}

.ctabg-size-large .ctabg-icon svg {
	width: 24px;
	height: 24px;
}

/* Device visibility */
@media (max-width: 600px) {
	.ctabg-hide-mobile {
		display: none !important;
	}
}

@media (min-width: 601px) {
	.ctabg-hide-desktop {
		display: none !important;
	}

	/* Slightly more compact on desktop (mobile-first emphasis). */
	.ctabg-btn {
		font-size: 14px;
	}
}

/* On small screens: lift above bottom bars and keep the long label readable by
   trimming font size, letter-spacing and horizontal padding so the text fits
   instead of being clipped with an ellipsis. */
@media (max-width: 600px) {
	.ctabg-btn {
		bottom: 16px;
		padding: 12px 16px;
		gap: 7px;
		font-size: 13px;
		letter-spacing: 0.01em;
		max-width: calc(100vw - 16px);
	}

	/* Let a non-collapsed label use the available width (animatable value, so
	   the scroll-reveal unfold still works) and wrap rather than clip if the
	   text is too long. :not(.ctabg-collapsed) keeps the circle a circle. */
	.ctabg-btn:not(.ctabg-collapsed) .ctabg-label {
		max-width: calc(100vw - 70px);
		white-space: normal;
		text-align: center;
		text-overflow: clip;
	}
}

/* Very narrow phones: trim a little more. */
@media (max-width: 360px) {
	.ctabg-btn {
		padding: 11px 13px;
		font-size: 12px;
	}

	.ctabg-btn:not(.ctabg-collapsed) .ctabg-label {
		max-width: calc(100vw - 62px);
	}
}

/* ---- Attention animations (looping, to draw the eye) ----
   Every transform keyframe is composed with translateX(var(--ctabg-tx)) so the
   same animation works for left/right AND the centered position without a
   separate variant. One cycle lasts --ctabg-interval; "burst" styles stay still
   for most of the cycle then animate near the end, giving a pause between hits. */

.ctabg-attn-pulse {
	animation: ctabg-pulse var(--ctabg-interval) ease-in-out infinite;
}

.ctabg-attn-bounce {
	animation: ctabg-bounce var(--ctabg-interval) ease-in-out infinite;
}

.ctabg-attn-shake {
	animation: ctabg-shake var(--ctabg-interval) ease-in-out infinite;
}

.ctabg-attn-heartbeat {
	animation: ctabg-heartbeat var(--ctabg-interval) ease-in-out infinite;
}

.ctabg-attn-glow {
	animation: ctabg-glow var(--ctabg-interval) ease-in-out infinite;
}

/* Smooth, continuous breathing — the default. */
@keyframes ctabg-pulse {
	0%, 100% { transform: translateX(var(--ctabg-tx)) scale(1); }
	50% { transform: translateX(var(--ctabg-tx)) scale(1.06); }
}

/* Vertical hop, then rest. */
@keyframes ctabg-bounce {
	0%, 65%, 100% { transform: translateX(var(--ctabg-tx)) translateY(0); }
	75% { transform: translateX(var(--ctabg-tx)) translateY(-8px); }
	85% { transform: translateX(var(--ctabg-tx)) translateY(-3px); }
	92% { transform: translateX(var(--ctabg-tx)) translateY(0); }
}

/* Wiggle burst, then rest. */
@keyframes ctabg-shake {
	0%, 82%, 100% { transform: translateX(var(--ctabg-tx)) rotate(0); }
	85% { transform: translateX(var(--ctabg-tx)) rotate(-7deg); }
	88% { transform: translateX(var(--ctabg-tx)) rotate(6deg); }
	91% { transform: translateX(var(--ctabg-tx)) rotate(-5deg); }
	94% { transform: translateX(var(--ctabg-tx)) rotate(4deg); }
	97% { transform: translateX(var(--ctabg-tx)) rotate(-2deg); }
}

/* Double beat, then rest. */
@keyframes ctabg-heartbeat {
	0%, 55%, 100% { transform: translateX(var(--ctabg-tx)) scale(1); }
	65% { transform: translateX(var(--ctabg-tx)) scale(1.12); }
	75% { transform: translateX(var(--ctabg-tx)) scale(1); }
	85% { transform: translateX(var(--ctabg-tx)) scale(1.08); }
}

/* Soft expanding ring in the brand color — no transform, very smooth. */
@keyframes ctabg-glow {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba(var(--brand-primary-rgb, 190, 22, 34), 0.45),
			var(--shadow-card, 0 12px 30px -8px rgba(0, 0, 0, 0.35));
	}
	50% {
		box-shadow: 0 0 0 12px rgba(var(--brand-primary-rgb, 190, 22, 34), 0),
			var(--shadow-card, 0 12px 30px -8px rgba(0, 0, 0, 0.35));
	}
}

/* Respect reduced-motion: drop all looping/expand animation, no hover lift. */
@media (prefers-reduced-motion: reduce) {
	.ctabg-attn-pulse,
	.ctabg-attn-bounce,
	.ctabg-attn-shake,
	.ctabg-attn-heartbeat,
	.ctabg-attn-glow {
		animation: none;
	}

	.ctabg-btn,
	.ctabg-anim-bounce.ctabg-btn {
		transition: background-color 0.18s ease;
	}

	/* Snap the reveal instead of animating it. */
	.ctabg-label,
	.ctabg-anim-bounce .ctabg-label,
	.ctabg-anim-fade .ctabg-label,
	.ctabg-anim-pop .ctabg-icon {
		transition: none;
	}

	.ctabg-btn:hover,
	.ctabg-btn:focus {
		transform: translateX(var(--ctabg-tx, 0));
	}
}