/*-----------------------------------------------------------------------------------

	Klient:			Michal Doležal, truhlář
	Tier:			T1 Prezentační web
	Postavil:		Riverlab (riverlab.cz)
	Verze:			0.2 (koncept)
	Dodáno:			Listopad 2026

-----------------------------------------------------------------------------------

	OBSAH

	01. Preview overlay

	Lišta „ukázka konceptu“ (Riverlab). Před spuštěním webu smazat celý soubor
	a jeho <link> v index.html.

-----------------------------------------------------------------------------------*/


/*-----------------------------------------------------------------------------------
	ZAČÁTEK: 01. Preview overlay (Riverlab, jen koncept; před spuštěním smazat)
-----------------------------------------------------------------------------------*/

/* Místo pod stránkou, aby lišta nezakryla patičku a badge. Jen dokud je lišta vidět:
   po zavření (atribut hidden) místo zmizí. Celý soubor se při spuštění webu maže. */
body:has(.rvl-preview-bar:not([hidden])) {
	padding-bottom: 12.5rem;           /* na telefonu má lišta 3 řádky a tlačítko pod nimi */
}

@media (min-width: 48rem) {
	body:has(.rvl-preview-bar:not([hidden])) {
		padding-bottom: 8.5rem;
	}
}

@media (min-width: 75rem) {
	body:has(.rvl-preview-bar:not([hidden])) {
		padding-bottom: 4.5rem;
	}
}

.rvl-preview-bar {
	--rvl-bg: #161220;
	--rvl-accent: #8B5CF6;
	--rvl-accent-light: #A78BFA;
	--rvl-text: #F5F3FF;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 10px 20px;
	padding-bottom: calc(10px + env(safe-area-inset-bottom));
	background: var(--rvl-bg);
	border-top: 3px solid var(--rvl-accent);
	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.rvl-preview-bar svg {
	width: 21px;
	height: 20px;
	flex-shrink: 0;
}

.rvl-preview-bar strong {
	color: var(--rvl-accent-light);
	font-weight: 700;
}

.rvl-preview-text {
	margin: 0;
	color: var(--rvl-text);
	font-size: clamp(12px, 2.5vw, 14px);
	line-height: 1.4;
	text-align: center;
}

.rvl-preview-close {
	position: relative;
	background: transparent;
	border: none;
	color: var(--rvl-text);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	padding: 2px 8px;
	margin-left: 4px;
	flex-shrink: 0;
	opacity: 0.65;
	transition: opacity 0.2s ease;
}

.rvl-preview-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
}

.rvl-preview-close:hover {
	opacity: 1;
}

.rvl-preview-close:focus-visible {
	outline-color: var(--rvl-accent-light);
}

@media (max-width: 480px) {
	.rvl-preview-bar {
		padding: 8px 14px;
	}
}

/*-----------------------------------------------------------------------------------
	KONEC: 01. Preview overlay
-----------------------------------------------------------------------------------*/