/**
 * Plávajúce tlačidlo „Vybrať box“ – len na mobile.
 *
 * Plum je vo farbách značky vyhradená pre výzvy k akcii, krémový text na nej
 * má 7,8:1. Selektory začínajú „body a.“: Elementor farbí všetky odkazy
 * (.elementor-kit-N a) aj ich písmo a inak by prebil farbu aj font.
 *
 * @package TulipoBox\FloatingCta
 */

.tlpb-float-cta {
	display: none;
}

@media screen and ( max-width: 767px ) {
	body {
		--tlpb-float-cta-h: 52px;   /* dotykový cieľ, rovnako ako tlačidlá v pokladni */
		--tlpb-float-cta-gap: var( --tlpb-space-4 );
	}

	body a.tlpb-float-cta {
		position: fixed;
		right: var( --tlpb-float-cta-gap );
		/* Na iPhone nad domovskou lištou. */
		bottom: calc( var( --tlpb-float-cta-gap ) + env( safe-area-inset-bottom, 0px ) );
		/*
		 * Tesne pod hlavičkou (Elementor jej dáva z-index 999). Hlavička je
		 * vlastná vrstva, takže panel košíka a menu v nej by s vyšším číslom
		 * skončili pod tlačidlom, aj keď majú samy 9998. Vyskakovacie okná
		 * (9999) sú nad ním tak či tak.
		 */
		z-index: 998;
		display: inline-flex;
		align-items: center;
		gap: var( --tlpb-space-2 );
		min-height: var( --tlpb-float-cta-h );
		padding: 0 var( --tlpb-space-5 );
		border: 2px solid var( --tlpb-apricot );
		border-radius: var( --tlpb-radius-pill );
		background: var( --tlpb-plum );
		box-shadow: var( --tlpb-shadow-card );
		color: var( --tlpb-on-accent );
		font-family: var( --tlpb-font-heading );
		font-size: var( --tlpb-text-body );
		font-weight: 800;
		letter-spacing: 0.04em;
		line-height: 1;
		text-decoration: none;
		text-transform: uppercase;
		white-space: nowrap;
		-webkit-tap-highlight-color: transparent;
		animation: tlpb-float-cta-in 0.3s ease-out both;
	}

	body a.tlpb-float-cta:hover,
	body a.tlpb-float-cta:focus,
	body a.tlpb-float-cta:visited {
		color: var( --tlpb-on-accent );
		text-decoration: none;
	}

	body a.tlpb-float-cta:active {
		filter: brightness( 1.12 );
	}

	body a.tlpb-float-cta:focus-visible {
		outline: 2px solid var( --tlpb-plum );
		outline-offset: 3px;
	}

	.tlpb-float-cta__icon {
		flex: 0 0 auto;
	}

	/* Miesto na konci stránky, aby tlačidlo nezakrylo pätu (výška + oba okraje). */
	body.tlpb-has-float-cta {
		padding-bottom: calc( var( --tlpb-float-cta-h ) + 2 * var( --tlpb-float-cta-gap ) + env( safe-area-inset-bottom, 0px ) );
	}
}

@keyframes tlpb-float-cta-in {
	from {
		opacity: 0;
		transform: translateY( 12px );
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	body a.tlpb-float-cta {
		animation: none;
	}
}