/* Install invite of the app (VRD_PWA, assets/js/pwa.js). Colours of the redesign (wavy-child/assets/css/redesign.css). */

.vrd-pwa-banner {
	position: fixed;
	left: 50%;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	z-index: 9999;
	display: flex;
	align-items: center;
	gap: 12px;
	width: min(440px, calc(100% - 32px));
	padding: 12px 10px 12px 12px;
	border: 1px solid #EEE2DC;
	border-radius: 18px;
	background: #fff;
	color: #4A3A46;
	font-family: "League Spartan", "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.35;
	box-shadow: 0 16px 40px -14px rgba(50, 1, 49, .45);
	opacity: 0;
	transform: translate(-50%, 16px);
	transition: opacity .25s ease, transform .25s ease;
}

.vrd-pwa-banner.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

.vrd-pwa-banner-icon {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 11px;
}

.vrd-pwa-banner-body {
	flex: 1;
	min-width: 0;
}

.vrd-pwa-banner-body strong {
	display: block;
	color: var(--rd-ink, #320131);
	font-weight: 700;
}

.vrd-pwa-banner-body p {
	margin: 2px 0 0;
	font-size: 14px;
}

.vrd-pwa-banner button {
	font-family: inherit;
	cursor: pointer;
}

.vrd-pwa-banner-install {
	flex: none;
	padding: 9px 16px;
	border: 0;
	border-radius: 999px;
	background: var(--rd-berry, #B31E6F);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
}

.vrd-pwa-banner-install:hover,
.vrd-pwa-banner-install:focus-visible {
	background: var(--rd-berry-dark, #8E1858);
}

.vrd-pwa-banner-close {
	flex: none;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #74636F;
}

.vrd-pwa-banner-close:hover,
.vrd-pwa-banner-close:focus-visible {
	background: var(--rd-neutral, #F1EAE4);
	color: var(--rd-ink, #320131);
}

@media (prefers-reduced-motion: reduce) {
	.vrd-pwa-banner { transition: none; }
}