/**
 * PWA install prompt — inc/pwa-install-prompt.php.
 *
 * Standalone sheet, loaded only when the prompt can render.
 *
 * Placement is dictated by what already floats on these pages: Chaty sits
 * bottom-right, the CookieYes revisit button bottom-left, the lead-magnet
 * "Free tools" tab on the right edge. The card therefore clears the bottom
 * corners entirely via --pwa-install-bottom rather than sitting flush, and is
 * left-anchored on desktop so it never covers the chat bubble.
 *
 * z-index is deliberately BELOW the lead-magnet modal (1000001) and the exit
 * popup (999999): an install nudge must never cover a conversion surface.
 */

.wdm-pwa-install {
	--pwa-lime: #d3fb52;
	--pwa-lime-dark: #a1de3b;
	--pwa-ink: #0b0b0b;
	--pwa-bottom: 96px;
	--pwa-ease: cubic-bezier(0.22, 1, 0.36, 1);

	position: fixed;
	z-index: 99990;
	bottom: var(--pwa-bottom);
	left: 16px;
	width: calc(100% - 32px);
	max-width: 380px;
	box-sizing: border-box;
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 16px;
	border-radius: 16px;
	border: 1px solid rgba(211, 251, 82, 0.22);
	background: var(--pwa-ink);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
	color: #f9ffe6;
	font-family: "Onest", sans-serif;
	line-height: 1.45;

	/* Animated in by .is-visible; starts off-screen so it never flashes. */
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.28s var(--pwa-ease), transform 0.28s var(--pwa-ease);
}

.wdm-pwa-install[hidden] {
	display: none;
}

.wdm-pwa-install.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.wdm-pwa-install__icon {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border-radius: 11px;
	display: block;
}

.wdm-pwa-install__body {
	flex: 1 1 auto;
	min-width: 0;
}

.wdm-pwa-install__title {
	margin: 0 0 2px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.2px;
	color: #fff;
}

.wdm-pwa-install__text {
	margin: 0 0 12px;
	font-size: 13px;
	color: #b2b2b2;
}

.wdm-pwa-install__actions {
	display: flex;
	gap: 8px;
	align-items: center;
}

.wdm-pwa-install button {
	font-family: inherit;
	margin: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	border: 0;
}

.wdm-pwa-install__accept {
	background: var(--pwa-lime);
	color: #010708;
	font-size: 13px;
	font-weight: 600;
	padding: 9px 18px;
	border-radius: 999px;
	transition: background 0.2s var(--pwa-ease);
}

.wdm-pwa-install__accept:hover {
	background: var(--pwa-lime-dark);
}

.wdm-pwa-install__dismiss {
	background: none;
	color: #868c8c;
	font-size: 13px;
	padding: 9px 10px;
	border-radius: 999px;
	transition: color 0.2s var(--pwa-ease);
}

.wdm-pwa-install__dismiss:hover {
	color: #f9ffe6;
}

.wdm-pwa-install__close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	color: #868c8c;
	border-radius: 50%;
	line-height: 0;
	transition: color 0.2s var(--pwa-ease), background 0.2s var(--pwa-ease);
}

.wdm-pwa-install__close:hover {
	color: #f9ffe6;
	background: rgba(255, 255, 255, 0.07);
}

.wdm-pwa-install :focus-visible {
	outline: 2px solid var(--pwa-lime);
	outline-offset: 2px;
}

/* Clear the iOS home indicator when the browser chrome is hidden. */
@supports (padding: max(0px)) {
	.wdm-pwa-install {
		bottom: max(var(--pwa-bottom), calc(env(safe-area-inset-bottom) + 72px));
	}
}

@media (max-width: 575px) {
	.wdm-pwa-install {
		left: 12px;
		width: calc(100% - 24px);
		max-width: none;
	}
}

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