/* Prime PWA front-end styles: install banner, connectivity indicator, pull-to-refresh. */

:root {
	--prime-pwa-radius: 16px;
	--prime-pwa-shadow: 0 8px 30px rgba(0, 0, 0, 0.16);
	--prime-pwa-surface: rgba(255, 255, 255, 0.86);
	--prime-pwa-surface-solid: #ffffff;
	--prime-pwa-text: #1d1d1f;
	--prime-pwa-subtext: #6e6e73;
	--prime-pwa-accent: #0a84ff;
	--prime-pwa-border: rgba(0, 0, 0, 0.06);
}

@media (prefers-color-scheme: dark) {
	:root {
		--prime-pwa-surface: rgba(28, 28, 30, 0.86);
		--prime-pwa-surface-solid: #1c1c1e;
		--prime-pwa-text: #f5f5f7;
		--prime-pwa-subtext: #98989d;
		--prime-pwa-border: rgba(255, 255, 255, 0.08);
	}
}

/* ---------------------------------------------------------------------
 * Install banner - iOS-style card, works as a bottom sheet on mobile and
 * a corner card on desktop.
 * ------------------------------------------------------------------- */

.prime-pwa-install-banner {
	position: fixed;
	left: 50%;
	bottom: 16px;
	transform: translate(-50%, 120%);
	width: min(420px, calc(100% - 32px));
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: var(--prime-pwa-surface);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid var(--prime-pwa-border);
	border-radius: var(--prime-pwa-radius);
	box-shadow: var(--prime-pwa-shadow);
	z-index: 999999;
	transition: transform 0.42s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.42s ease;
	opacity: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

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

.prime-pwa-install-icon {
	width: 44px;
	height: 44px;
	border-radius: 11px;
	flex: 0 0 auto;
	object-fit: cover;
}

.prime-pwa-install-copy {
	flex: 1 1 auto;
	min-width: 0;
}

.prime-pwa-install-copy strong {
	display: block;
	font-size: 0.95rem;
	color: var(--prime-pwa-text);
	margin-bottom: 2px;
}

.prime-pwa-install-copy p {
	margin: 0;
	font-size: 0.82rem;
	color: var(--prime-pwa-subtext);
	line-height: 1.35;
}

.prime-pwa-install-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

.prime-pwa-install-accept {
	appearance: none;
	border: none;
	border-radius: 999px;
	background: var(--prime-pwa-accent);
	color: #fff;
	font-size: 0.85rem;
	font-weight: 600;
	padding: 8px 16px;
	cursor: pointer;
	white-space: nowrap;
}

.prime-pwa-install-accept:active {
	opacity: 0.8;
}

.prime-pwa-install-dismiss {
	appearance: none;
	border: none;
	background: transparent;
	color: var(--prime-pwa-subtext);
	font-size: 1.1rem;
	line-height: 1;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	cursor: pointer;
}

.prime-pwa-install-dismiss:hover {
	background: var(--prime-pwa-border);
}

@media (min-width: 640px) {
	.prime-pwa-install-banner {
		left: auto;
		right: 20px;
		bottom: 20px;
		transform: translateY(120%);
	}
	.prime-pwa-install-banner.is-visible {
		transform: translateY(0);
	}
}

/* ---------------------------------------------------------------------
 * Connectivity indicator - default floating pill ("toast"), or an opt-in
 * full-width bar pinned to the top or bottom.
 * ------------------------------------------------------------------- */

.prime-pwa-banner {
	position: fixed;
	left: 50%;
	bottom: 16px;
	transform: translate(-50%, 140%);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	max-width: calc(100% - 32px);
	background: var(--prime-pwa-surface);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid var(--prime-pwa-border);
	border-radius: 999px;
	box-shadow: var(--prime-pwa-shadow);
	color: var(--prime-pwa-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 0.85rem;
	z-index: 999998;
	transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}

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

.prime-pwa-banner-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #8e8e93;
	flex: 0 0 auto;
}

.prime-pwa-banner.is-offline .prime-pwa-banner-dot {
	background: #ff453a;
}

.prime-pwa-banner.is-online .prime-pwa-banner-dot {
	background: #30d158;
}

/* Full-width bar variant */
.prime-pwa-banner--bar {
	left: 0;
	right: 0;
	bottom: auto;
	top: auto;
	max-width: none;
	width: 100%;
	border-radius: 0;
	border-left: none;
	border-right: none;
	justify-content: center;
	padding: 10px 16px;
}

.prime-pwa-banner--bar.prime-pwa-banner--top {
	top: 0;
	transform: translateY(-100%);
	padding-top: calc(10px + env(safe-area-inset-top));
	border-top: none;
}

.prime-pwa-banner--bar.prime-pwa-banner--bottom {
	bottom: 0;
	transform: translateY(100%);
	padding-bottom: calc(10px + env(safe-area-inset-bottom));
	border-bottom: none;
}

.prime-pwa-banner--bar.is-visible {
	transform: translateY(0);
}

/* ---------------------------------------------------------------------
 * Pull-to-refresh
 *
 * Mirrors the real mechanism SuperPWA's add-on uses (it vendors the
 * open-source PullToRefresh.js library): a real block element inserted at
 * the very top of <body> whose height grows with the pull distance,
 * genuinely pushing page content down to reveal the icon - not a
 * `position: fixed` overlay drawn on top of static content. That's what
 * makes it read as a small icon physically following the finger rather
 * than fighting the browser's own overscroll/reload gesture.
 * ------------------------------------------------------------------- */

.prime-pwa-ptr-box {
	height: 0;
	overflow: hidden;
	width: 100%;
	transition: height 0.3s ease;
}

.prime-pwa-ptr-box.is-pulling {
	transition: none;
}

.prime-pwa-ptr-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	height: 100%;
	padding-bottom: 10px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.prime-pwa-ptr-spinner {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--prime-pwa-surface);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid var(--prime-pwa-border);
	box-shadow: var(--prime-pwa-shadow);
	transition: transform 0.2s ease;
}

.prime-pwa-ptr-spinner::before {
	content: "";
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid var(--prime-pwa-border);
	border-top-color: var(--prime-pwa-accent);
}

.prime-pwa-ptr-box.is-released .prime-pwa-ptr-spinner {
	transform: rotate(180deg);
}

.prime-pwa-ptr-box.is-refreshing .prime-pwa-ptr-spinner::before {
	animation: prime-pwa-spin 0.7s linear infinite;
}

.prime-pwa-ptr-text {
	color: var(--prime-pwa-subtext);
	font-size: 0.8em;
}

@keyframes prime-pwa-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* Suppress the browser's own competing overscroll/pull-to-refresh gesture,
 * but only while genuinely scrolled to the very top (mirrors SuperPWA's
 * own technique) - scoped to a class the JS only adds when this feature
 * is enabled, so sites that don't use pull-to-refresh see zero change to
 * normal scroll/touch behavior. */
html.prime-pwa-ptr-enabled.prime-pwa-ptr-at-top,
html.prime-pwa-ptr-enabled.prime-pwa-ptr-at-top body {
	touch-action: pan-x pan-down pinch-zoom;
	overscroll-behavior-y: contain;
}

/* ---------------------------------------------------------------------
 * Instant loading overlay - full-screen, shown the instant a visitor
 * taps a qualifying link inside the installed (standalone) PWA. Uses the
 * same .is-visible + transition toggle convention as the connectivity
 * banner / install banner above, rather than inline style manipulation.
 * ------------------------------------------------------------------- */

.prime-pwa-loading-overlay {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.55);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 9999999;
	transition: opacity 0.15s ease, visibility 0s linear 0.15s;
}

.prime-pwa-loading-overlay.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.15s ease, visibility 0s linear 0s;
}

.prime-pwa-loading-overlay-gif {
	max-width: min(160px, 40vw);
	max-height: min(160px, 40vw);
	object-fit: contain;
}

/* CSS-mode preloader default (used whenever loading-overlay.js resolves
 * PRELOADER_TYPE to 'css' - Universal mode, iOS in Device-Specific mode, or
 * no GIF uploaded yet). The admin's own Custom CSS (Appearance tab, printed
 * immediately after this stylesheet via wp_add_inline_style) can freely
 * override the color/timing here, or add pseudo-element decoration, to
 * theme this without touching this file - e.g. a holiday theme.
 *
 * loading-overlay.js also adds a `prime-pwa-loading-overlay--gif` or
 * `--css` modifier class to the outer overlay element depending on which
 * preloader type is active, as a scoping hook for custom CSS that should
 * only apply to one variant - intentionally left as bare hooks with no
 * rules of their own here. */

.prime-pwa-loading-overlay-pulse {
	width: min(72px, 20vw);
	height: min(72px, 20vw);
	border-radius: 50%;
	background: var(--prime-pwa-accent);
	animation: prime-pwa-loading-pulse 1s ease-in-out infinite;
}

@keyframes prime-pwa-loading-pulse {
	0%, 100% {
		transform: scale(0.75);
		opacity: 0.35;
	}
	50% {
		transform: scale(1);
		opacity: 1;
	}
}