/*
 * Iššokanti žinutė (inc/popups.php, assets/js/scroll-note.js): a card fixed bottom left, under the
 * header (z-index 50) and its mobile menu (1000). Hidden until scroll-note.js adds .is-open.
 */

.rk-note {
	position: fixed;
	inset-inline: 16px;
	inset-block-end: 16px;
	z-index: 40;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 12px 8px;
	align-items: start;
	padding: 20px 16px 20px 20px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--media);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	box-shadow: 0 12px 32px color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent);
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity var(--wp--custom--motion--duration) var(--wp--custom--motion--ease),
		transform var(--wp--custom--motion--duration) var(--wp--custom--motion--ease);
}

.rk-note[hidden] {
	display: none;
}

.rk-note.is-open {
	opacity: 1;
	transform: none;
}

.rk-note__text {
	margin: 0;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.4;
}

.rk-note__link {
	grid-column: 1 / -1;
	justify-self: start;
	gap: 8px;
}

.rk-note__icon {
	font-size: 18px;
}

.rk-note__close {
	grid-row: 1;
	grid-column: 2;
	display: inline-grid;
	place-items: center;
	inline-size: 32px;
	block-size: 32px;
	margin: -6px -4px 0 0;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-size: 20px;
	cursor: pointer;
}

.rk-note__close:hover {
	background: var(--wp--preset--color--surface-2);
}

.rk-note__close:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

@media (min-width: 768px) {
	.rk-note {
		inset-inline: 24px auto;
		inset-block-end: 24px;
		max-inline-size: 360px;
		padding: 24px 20px 24px 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rk-note {
		transition: none;
		transform: none;
	}
}