/* Base + mobile bar. Selectors: only names from alovesinh_cta_get_class_names(). Custom properties:
	only those PHP mints (channel colour, dock and back-to-top offsets). Theme tokens --alv-* carry NO fallback:
	the sheet is enqueued behind the token sheet (alovesinh_cta_enqueue_base_style()) and is never on a page without it. */
.alv-cta {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: var(--alv-z-1);
}

.alv-cta-dock,
.alv-cta-list {
	display: flex;
	flex-direction: row;
	gap: var(--alv-sp-0d);
}

.alv-cta-dock {
	width: auto;
	padding: var(--alv-sp-1) var(--alv-sp-1)
		calc(var(--alv-sp-1) + env(safe-area-inset-bottom, 0px));
	background: var(--alv-c-white);
	border: 0;
	border-top: var(--alv-bd-hairline) solid var(--alv-c-border);
	border-radius: 0;
	box-shadow: 0 calc(-1 * var(--alv-sp-1a)) var(--alv-sp-3b) var(--alv-c-ink-film);
}

.alv-cta-mobile-off .alv-cta-dock {
	display: none;
}

.alv-cta-title {
	display: none;
	margin: 0;
	padding-block: var(--alv-sp-0d) var(--alv-sp-1);
	padding-inline: var(--alv-sp-1c);
	color: var(--alv-c-text-2);
	font-size: var(--alv-fs-1a);
	font-weight: var(--alv-fw-bold);
}

.alv-cta-label {
	display: none;
}

.alv-cta-list {
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.alv-cta-item,
.alv-cta-call {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--alv-sp-0e);
	height: var(--alv-touch);
	min-height: var(--alv-touch);
	border-radius: var(--alv-r-2);
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--alv-dur-1) ease;
}

.alv-cta-item {
	flex: 1 0 auto;
	scroll-snap-align: start;
	padding: 0 var(--alv-sp-0d);
	color: var(--alv-c-text-2);
	font-size: var(--alv-fs-0a);
	font-weight: var(--alv-fw-semibold);
}

.alv-cta-item:hover,
.alv-cta-item:focus-visible {
	background: var(--alv-c-brand-wash);
}

.alv-cta-icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--alv-sp-4);
	height: var(--alv-sp-4);
	border-radius: var(--alv-r-circle);
	background: var(--alv-cta-color);
	color: var(--alv-c-white);
}

.alv-cta-item .alv-cta-icon {
	width: auto;
	height: auto;
	background: none;
	color: var(--alv-cta-color);
}

.alv-cta-icon svg {
	display: block;
	width: var(--alv-sp-3a);
	height: var(--alv-sp-3a);
}

.alv-cta-top svg {
	display: block;
	width: var(--alv-sp-2d);
	height: var(--alv-sp-2d);
}

.alv-cta-short {
	display: block;
}

.alv-cta-call {
	flex: 0 0 auto;
	margin-top: 0;
	padding-inline: var(--alv-sp-2);
	background: var(--alv-c-accent-wash);
	color: var(--alv-c-ink);
	font-size: var(--alv-fs-1);
	font-weight: var(--alv-fw-bold);
}

.alv-cta-call .alv-cta-icon {
	width: auto;
	height: auto;
	background: none;
	color: var(--alv-c-accent);
}

.alv-cta-icons .alv-cta-dock {
	width: auto;
}

.alv-cta-icons .alv-cta-item {
	justify-content: center;
}

.alv-cta-icons .alv-cta-label,
.alv-cta-icons .alv-cta-title {
	display: none;
}

/* Out of flow, so the fixed container never grows a tap-blocking strip above the bar. */
.alv-cta-top {
	position: absolute;
	right: var(--alv-cta-top-edge);
	bottom: calc(100% + var(--alv-cta-top-bottom));
	display: none;
	align-items: center;
	justify-content: center;
	width: var(--alv-touch);
	height: var(--alv-touch);
	border: var(--alv-bd-hairline) solid var(--alv-c-border);
	border-radius: var(--alv-r-1);
	background: var(--alv-c-white);
	color: var(--alv-c-brand-deep);
	box-shadow: 0 var(--alv-sp-1) var(--alv-sp-2c) var(--alv-c-ink-dew);
	opacity: 0;
	pointer-events: none;
	transform: translateY(var(--alv-sp-1a));

	/* opacity alone leaves the hidden button in the Tab order; visibility drops it once the fade ends. */
	visibility: hidden;
	transition:
		opacity var(--alv-dur-1) ease,
		transform var(--alv-dur-1) ease,
		visibility var(--alv-dur-1),
		background var(--alv-dur-1) ease,
		color var(--alv-dur-1) ease;
}

.alv-cta-top-visible {
	opacity: 1;
	pointer-events: auto;
	transform: none;
	visibility: visible;
}

.alv-cta-top-left {
	right: auto;
	left: var(--alv-cta-top-edge);
}

.alv-cta-top-mobile {
	display: flex;
}

.alv-cta-top:hover,
.alv-cta-top:focus-visible {
	border-color: var(--alv-c-brand-strong);
	background: var(--alv-c-brand-strong);
	color: var(--alv-c-white);
}

.alv-cta-item:focus-visible,
.alv-cta-call:focus-visible,
.alv-cta-top:focus-visible {
	outline: var(--alv-bd-thick) solid var(--alv-c-brand-strong);
	outline-offset: var(--alv-sp-0b);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

@media (prefers-reduced-motion: reduce) {
	.alv-cta-item,
	.alv-cta-call,
	.alv-cta-top {
		transition: none;
	}
}