/* Base + desktop dock. 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: var( --alv-cta-dock-edge );
	bottom: var( --alv-cta-dock-bottom );
	z-index: 999;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var( --alv-sp-1 );
}

.alv-cta-left {
	right: auto;
	left: var( --alv-cta-dock-edge );
	align-items: flex-start;
}

.alv-cta-dock,
.alv-cta-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.alv-cta-dock {
	width: 208px;
	padding: var( --alv-sp-1 );
	background: var( --alv-c-white );
	border: var( --alv-bd-hairline ) solid var( --alv-c-border );
	border-radius: var( --alv-r-4 );
	box-shadow: 0 16px 40px color-mix( in srgb, var( --alv-c-ink ) 14%, transparent );
}

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

.alv-cta-title {
	margin: 0;
	padding: 4px 10px var( --alv-sp-1 );
	color: var( --alv-c-text-2 );
	font-size: 12px;
	font-weight: var( --alv-fw-bold );
}

.alv-cta-item,
.alv-cta-call {
	display: flex;
	align-items: center;
	gap: var( --alv-sp-2 );
	min-height: var( --alv-touch );
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
	transition: background var( --alv-dur-1 ) ease;
}

.alv-cta-item {
	padding: 0 10px;
	border-radius: var( --alv-r-1 );
	color: var( --alv-c-ink );
	font-weight: var( --alv-fw-semibold );
}

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

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

.alv-cta-icon svg,
.alv-cta-top svg {
	display: block;
	width: 18px;
	height: 18px;
}

/* The bar's short label stays in the DOM for the mobile sheet; hidden in the dock. */
.alv-cta-short {
	display: none;
}

/* The dock's radius less the dock's padding, or the call slot's corners stop nesting inside the dock's. */
.alv-cta-call {
	justify-content: center;
	margin-top: 4px;
	border-radius: calc( var( --alv-r-4 ) - var( --alv-sp-1 ) );
	background: var( --alv-cta-color );
	color: var( --alv-c-white );
	font-weight: var( --alv-fw-bold );
}

.alv-cta-call:hover,
.alv-cta-call:focus-visible {
	background: var( --alv-c-accent-hover );
}

.alv-cta-call .alv-cta-icon {
	width: auto;
	height: auto;
	background: none;
}

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

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

/* Icons only: the label leaves the layout but stays the link's accessible name. */
.alv-cta-icons .alv-cta-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
}

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

.alv-cta-top {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	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 6px 16px color-mix( in srgb, var( --alv-c-ink ) 8%, transparent );
	opacity: 0;
	pointer-events: none;
	transform: translateY( 8px );

	/* 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-float {
	position: fixed;
	right: var( --alv-cta-top-edge );
	bottom: var( --alv-cta-top-bottom );
}

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

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

.alv-cta-item:focus-visible,
.alv-cta-call:focus-visible,
.alv-cta-top:focus-visible {
	outline: 2px solid var( --alv-c-brand );
	outline-offset: 2px;
}

@media ( prefers-reduced-motion: reduce ) {

	.alv-cta-item,
	.alv-cta-call,
	.alv-cta-top {
		transition: none;
	}
}