/**
 * The install prompt, and nothing else.
 *
 * Dependency-free on purpose, exactly like `pa-loading.css`: this card is appended to <body> by
 * JavaScript, so it lands outside every shell the theme scopes its tokens to — and it must also
 * survive on /panel, which dequeues both `parsaccess` stylesheets. Every custom property below
 * therefore carries a literal fallback rather than trusting `:root` to have been defined.
 *
 * It floats ABOVE the mobile bottom bar rather than over it. `.pa-botnav` owns the bottom 72px at
 * ≤767px and publishes its own height as `--pa-tabbar-clear`; that token is read here instead of
 * the number being written down a second place, because the bar has already been resized once.
 */

.pa-pwa-install {
	position: fixed;
	z-index: 95;                       /* over .pa-botnav (90), under sheets and toasts */
	inset-inline: 16px;
	inset-block-end: 24px;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 420px;
	margin-inline: auto;
	padding: 12px 14px;
	border: 1px solid var(--hairline, #E3E6F5);
	border-radius: 18px;
	background: var(--surface, #FFFFFF);
	box-shadow: 0 16px 40px rgba(35, 45, 110, .18);
	color: var(--ink, #2E2F6E);
	font-family: 'IRANSansX', Tahoma, system-ui, sans-serif;
	/* Start state for the entrance; `.is-shown` is added a frame after insertion. */
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .22s ease, transform .22s ease;
}

.pa-pwa-install.is-shown {
	opacity: 1;
	transform: none;
}

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

@media (max-width: 767px) {
	/* Clear the floating quick-nav. The fallback repeats the bar's geometry (72px tall, 12px off
	   the bottom) only for the case where main.css never loaded at all. */
	.pa-pwa-install {
		inset-block-end: calc(var(--pa-tabbar-clear, calc(84px + env(safe-area-inset-bottom, 0px))) + 12px);
	}
}

.pa-pwa-install__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--accent-glow, rgba(114, 198, 193, .22));
	color: var(--accent-text, #1F7C76);
}

.pa-pwa-install__icon svg { width: 22px; height: 22px; }

.pa-pwa-install__body {
	flex: 1 1 auto;
	min-width: 0;                      /* so long Persian text wraps instead of stretching the card */
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pa-pwa-install__title {
	font-size: 14px;
	font-weight: 800;
	line-height: 1.6;
}

.pa-pwa-install__text {
	font-size: 12px;
	line-height: 1.85;
	color: var(--muted, #616487);
}

/* The iOS Share glyph sits inline inside a sentence, so it has to sit on the text baseline. */
.pa-pwa-install__glyph {
	display: inline-grid;
	place-items: center;
	width: 1.25em;
	height: 1.25em;
	vertical-align: -.28em;
	color: var(--accent-text, #1F7C76);
}

.pa-pwa-install__glyph svg { width: 100%; height: 100%; }

.pa-pwa-install__cta {
	flex: 0 0 auto;
	order: 3;
	min-height: 40px;
	padding-inline: 18px;
	border: 0;
	border-radius: 12px;
	background: var(--accent, #72C6C1);
	color: var(--accent-contrast, #2E2F6E);
	font: inherit;
	font-size: 13px;
	font-weight: 800;
	cursor: pointer;
}

.pa-pwa-install__cta:disabled { opacity: .6; cursor: default; }

.pa-pwa-install__close {
	position: absolute;
	inset-block-start: 6px;
	inset-inline-start: 8px;           /* RTL: the inline start is the LEFT edge */
	width: 26px;
	height: 26px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--muted, #616487);
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
}

.pa-pwa-install__close:hover { background: var(--hairline, #E3E6F5); }

/* The iOS variant is an instruction, not an offer: no button, so the text may use the full width
   and needs room under the close control. */
.pa-pwa-install--ios { padding-block: 14px; }
.pa-pwa-install--ios .pa-pwa-install__body { padding-inline-start: 22px; }

[data-theme="dark"] .pa-pwa-install {
	border-color: var(--hairline, #262D45);
	background: var(--surface, #151B2E);
	color: var(--ink, #E9EDF8);
	box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
}