/**
 * Universal PWA install banner — premium visual design.
 * Mobile-first: floating bottom sheet. Desktop: small corner card.
 */

@keyframes upwa-fade-in-up {
	from {
		opacity: 0;
		transform: translateY( 100% );
	}
	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

@keyframes upwa-pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.45;
	}
}

.upwa-banner {
	--upwa-theme: #0b0b0b;
	--upwa-bg: #ffffff;
	--upwa-border: rgba( 0, 0, 0, 0.06 );
	--upwa-text: #15141a;
	--upwa-text-muted: #6b6a72;

	position: fixed;
	left: 12px;
	right: 12px;
	bottom: 12px;
	z-index: 999999;
	box-sizing: border-box;
	background: color-mix( in srgb, var( --upwa-bg ) 96%, transparent );
	color: var( --upwa-text );
	box-shadow:
		0 1px 2px rgba( 0, 0, 0, 0.04 ),
		0 12px 32px -8px rgba( 0, 0, 0, 0.22 ),
		0 24px 48px -16px rgba( 0, 0, 0, 0.16 );
	border: 1px solid var( --upwa-border );
	border-radius: 22px;
	padding: 18px 18px calc( 18px + env( safe-area-inset-bottom, 0px ) );
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	-webkit-backdrop-filter: blur( 20px ) saturate( 1.4 );
	backdrop-filter: blur( 20px ) saturate( 1.4 );
	opacity: 0;
	transform: translateY( 24px );
	transition: transform 0.42s cubic-bezier( 0.16, 1, 0.3, 1 ), opacity 0.32s ease-out;
	overflow: hidden;
}

.upwa-banner::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient( 90deg, var( --upwa-theme ), color-mix( in srgb, var( --upwa-theme ) 40%, transparent ) );
}

.upwa-banner--visible {
	opacity: 1;
	transform: translateY( 0 );
}

.upwa-banner__row {
	display: flex;
	align-items: center;
	gap: 14px;
}

.upwa-banner__icon {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	object-fit: cover;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.14 ), 0 0 0 1px var( --upwa-border );
}

.upwa-banner__text {
	flex: 1 1 auto;
	min-width: 0;
}

.upwa-banner__title {
	margin: 0 0 3px;
	font-size: 15px;
	font-weight: 650;
	letter-spacing: -0.01em;
	line-height: 1.3;
	color: var( --upwa-text );
}

.upwa-banner__desc {
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	color: var( --upwa-text-muted );
}

.upwa-banner__action {
	flex: 0 0 auto;
	appearance: none;
	border: none;
	border-radius: 999px;
	background: var( --upwa-theme );
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.01em;
	padding: 12px 20px;
	min-height: 44px;
	cursor: pointer;
	white-space: nowrap;
	box-shadow: 0 2px 8px color-mix( in srgb, var( --upwa-theme ) 45%, transparent );
	transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.upwa-banner__action:hover:not( :disabled ) {
	transform: translateY( -1px );
	box-shadow: 0 4px 14px color-mix( in srgb, var( --upwa-theme ) 55%, transparent );
}

.upwa-banner__action:active:not( :disabled ) {
	transform: translateY( 0 );
}

.upwa-banner__action:disabled {
	opacity: 0.55;
	cursor: default;
	box-shadow: none;
	animation: upwa-pulse 1.8s ease-in-out infinite;
}

.upwa-banner__close {
	position: absolute;
	top: 10px;
	right: 10px;
	appearance: none;
	border: none;
	background: transparent;
	width: 26px;
	height: 26px;
	line-height: 1;
	border-radius: 50%;
	color: var( --upwa-text-muted );
	cursor: pointer;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease, color 0.15s ease;
}

.upwa-banner__close:hover {
	background: rgba( 0, 0, 0, 0.06 );
	color: var( --upwa-text );
}

.upwa-banner--ios .upwa-banner__desc {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}

.upwa-share-icon {
	width: 15px;
	height: 15px;
	vertical-align: -3px;
	fill: var( --upwa-theme );
}

/* Desktop: small non-intrusive corner card instead of a full-width sheet. */
@media ( min-width: 782px ) {
	.upwa-banner {
		left: auto;
		right: 24px;
		bottom: 24px;
		width: 380px;
		border-radius: 18px;
	}
}

@media ( prefers-color-scheme: dark ) {
	.upwa-banner {
		--upwa-bg: #1c1b20;
		--upwa-border: rgba( 255, 255, 255, 0.08 );
		--upwa-text: #f3f2f5;
		--upwa-text-muted: #a7a6ad;
		box-shadow:
			0 1px 2px rgba( 0, 0, 0, 0.3 ),
			0 12px 32px -8px rgba( 0, 0, 0, 0.55 ),
			0 24px 48px -16px rgba( 0, 0, 0, 0.4 );
	}

	.upwa-banner__close:hover {
		background: rgba( 255, 255, 255, 0.08 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.upwa-banner {
		transition: opacity 0.2s ease;
		transform: none;
	}
	.upwa-banner__action:disabled {
		animation: none;
	}
}