/* Installable PWA — floating install popup */
.ipwa-popup {
	--ipwa-accent: #4f46e5;
	--ipwa-btn: #4f46e5;
	--ipwa-btn-text: #fff;
	--ipwa-bg: #fff;
	--ipwa-text: #111827;
	--ipwa-radius: 18px;
	--ipwa-btn-radius: 10px;

	position: fixed;
	z-index: 2147483000;
	box-sizing: border-box;
	width: min(420px, calc(100vw - 24px));
	padding: 18px 18px 16px;
	background: var(--ipwa-bg);
	color: var(--ipwa-text);
	border-radius: var(--ipwa-radius);
	border-top: 3px solid var(--ipwa-accent);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 12px 40px -8px rgba(0, 0, 0, .28);
	font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	text-align: left;
	opacity: 0;
	transition: opacity .28s ease, transform .38s cubic-bezier(.2, .9, .3, 1.15);
}
.ipwa-popup *, .ipwa-popup *::before, .ipwa-popup *::after { box-sizing: border-box; }
.ipwa-popup[hidden] { display: none !important; }

.ipwa-pos-bottom-center { left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translate(-50%, 24px); }
.ipwa-pos-bottom-left   { left: 12px; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateY(24px); }
.ipwa-pos-bottom-right  { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateY(24px); }
.ipwa-pos-top-center    { left: 50%; top: max(12px, env(safe-area-inset-top)); transform: translate(-50%, -24px); }

.ipwa-popup.ipwa-show { opacity: 1; }
.ipwa-pos-bottom-center.ipwa-show, .ipwa-pos-top-center.ipwa-show { transform: translate(-50%, 0); }
.ipwa-pos-bottom-left.ipwa-show, .ipwa-pos-bottom-right.ipwa-show { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
	.ipwa-popup { transition: opacity .2s ease; }
}

/* Reset theme button styles inside the popup */
.ipwa-popup .ipwa-btn {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	border: 0;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	font: inherit;
	line-height: 1.2;
	cursor: pointer;
	min-height: 0;
	width: auto;
}

.ipwa-close {
	position: absolute;
	top: 8px;
	right: 8px;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border-radius: 50% !important;
	background: transparent !important;
	color: var(--ipwa-text) !important;
	opacity: .45;
	transition: opacity .15s, background-color .15s;
}
.ipwa-close:hover, .ipwa-close:focus-visible { opacity: .9; background: color-mix(in srgb, var(--ipwa-text) 8%, transparent) !important; }

.ipwa-row { display: flex; gap: 14px; align-items: center; padding-right: 22px; }

.ipwa-icon-wrap { flex: 0 0 auto; position: relative; width: 56px; height: 56px; }
.ipwa-icon, .ipwa-icon-fallback {
	display: block;
	width: 56px;
	height: 56px;
	border-radius: calc(var(--ipwa-radius) * .7 + 4px);
	box-shadow: 0 0 0 2px var(--ipwa-bg), 0 0 0 4px color-mix(in srgb, var(--ipwa-accent) 35%, transparent);
	object-fit: cover;
	margin: 0;
	max-width: none;
}
.ipwa-icon-fallback {
	display: grid;
	place-items: center;
	background: var(--ipwa-accent);
	color: #fff;
	font-weight: 700;
	font-size: 24px;
}
.ipwa-icon[hidden], .ipwa-icon-fallback[hidden] { display: none; }

.ipwa-copy { min-width: 0; }
.ipwa-popup p { margin: 0; padding: 0; }
.ipwa-title { font-weight: 700; font-size: 16px; line-height: 1.3; letter-spacing: -.01em; color: var(--ipwa-text); }
.ipwa-text { margin-top: 3px !important; font-size: 14px; opacity: .75; color: var(--ipwa-text); }

.ipwa-ios {
	display: none;
	margin-top: 14px !important;
	padding: 10px 12px !important;
	font-size: 14px;
	border-radius: calc(var(--ipwa-btn-radius) + 2px);
	background: color-mix(in srgb, var(--ipwa-accent) 9%, var(--ipwa-bg));
	color: var(--ipwa-text);
}
.ipwa-share { display: inline-block; vertical-align: -3px; margin: 0 2px; color: var(--ipwa-accent); }

.ipwa-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

.ipwa-later {
	padding: 10px 14px !important;
	border-radius: var(--ipwa-btn-radius) !important;
	background: transparent !important;
	color: var(--ipwa-text) !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	opacity: .7;
}
.ipwa-later:hover, .ipwa-later:focus-visible { opacity: 1; background: color-mix(in srgb, var(--ipwa-text) 7%, transparent) !important; }

.ipwa-install, .ipwa-install-btn {
	padding: 10px 20px !important;
	border-radius: var(--ipwa-btn-radius) !important;
	background: var(--ipwa-btn) !important;
	color: var(--ipwa-btn-text) !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	transition: filter .15s, transform .1s;
}
.ipwa-install:hover, .ipwa-install-btn:hover { filter: brightness(1.08); }
.ipwa-install:active, .ipwa-install-btn:active { transform: scale(.97); }
.ipwa-popup .ipwa-btn:focus-visible, .ipwa-install-btn:focus-visible { outline: 2px solid var(--ipwa-accent); outline-offset: 2px; }

.ipwa-later-ios { display: none; }

.ipwa-manual { display: none; }

/* iOS + menu-instruction modes: instructions instead of the native install button */
.ipwa-popup[data-mode="ios"] .ipwa-ios,
.ipwa-popup[data-mode="manual"] .ipwa-manual {
	display: block;
	margin-top: 14px !important;
	padding: 10px 12px !important;
	font-size: 14px;
	border-radius: calc(var(--ipwa-btn-radius) + 2px);
	background: color-mix(in srgb, var(--ipwa-accent) 9%, var(--ipwa-bg));
	color: var(--ipwa-text);
}
.ipwa-popup[data-mode="ios"] .ipwa-install,
.ipwa-popup[data-mode="manual"] .ipwa-install,
.ipwa-popup[data-mode="ios"] .ipwa-later-default,
.ipwa-popup[data-mode="manual"] .ipwa-later-default { display: none; }
.ipwa-popup[data-mode="ios"] .ipwa-later-ios,
.ipwa-popup[data-mode="manual"] .ipwa-later-ios { display: inline; }
.ipwa-popup[data-mode="ios"] .ipwa-later,
.ipwa-popup[data-mode="manual"] .ipwa-later { opacity: 1; background: var(--ipwa-btn) !important; color: var(--ipwa-btn-text) !important; padding: 10px 20px !important; }

/* Shortcode button */
.ipwa-install-btn { display: inline-flex; align-items: center; border: 0; cursor: pointer; font-family: inherit; line-height: 1.2; }
.ipwa-install-btn[hidden] { display: none !important; }

/* Admin preview */
.ipwa-popup.ipwa-is-preview { position: absolute; width: calc(100% - 20px); }