.bec-pwa-install-wrap {
	align-items: center;
	flex-wrap: wrap;
	gap: .65rem .85rem;
	margin-top: 1.25rem;
}

.bec-pwa-install-wrap:not([hidden]) {
	display: flex;
}

.bec-pwa-install-button {
	align-items: center;
	background: transparent;
	border: 1px solid rgb(255 255 255 / .22);
	border-radius: .55rem;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: .78rem;
	font-weight: 700;
	gap: .55rem;
	min-height: 2.5rem;
	padding: .65rem .9rem;
	transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.bec-pwa-install-button:hover {
	background: rgb(255 255 255 / .07);
	border-color: #d71932;
	color: #fff;
}

.bec-pwa-install-button svg {
	fill: none;
	height: 1rem;
	stroke: #ef2942;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
	width: 1rem;
}

.bec-pwa-install-note {
	color: rgb(255 255 255 / .58);
	font-size: .7rem;
	line-height: 1.5;
}

.bec-pwa-mobile-install .bec-pwa-install-wrap {
	border-top: 1px solid var(--hairline, #e4e5e8);
	margin-top: .5rem;
	padding-top: 1rem;
}

.bec-pwa-mobile-install .bec-pwa-install-button {
	border-color: var(--hairline-strong, #cfd1d5);
	color: var(--foreground, #161719);
}

.bec-pwa-mobile-install .bec-pwa-install-button:hover {
	background: var(--surface, #f6f7f8);
	color: var(--brand, #d71932);
}

.bec-pwa-mobile-install .bec-pwa-install-note {
	color: var(--muted-foreground, #64666b);
}

.bec-pwa-toast {
	align-items: center;
	background: #17181b;
	border: 1px solid rgb(255 255 255 / .12);
	border-radius: .8rem;
	bottom: max(5.25rem, env(safe-area-inset-bottom));
	box-shadow: 0 20px 50px -20px rgb(0 0 0 / .7);
	color: #fff;
	display: flex;
	gap: 1rem;
	inset-inline: 1rem;
	justify-content: space-between;
	margin-inline: auto;
	max-width: 34rem;
	padding: .9rem 1rem;
	position: fixed;
	z-index: 100000;
}

.bec-pwa-toast span {
	font-size: .8rem;
	font-weight: 650;
	line-height: 1.55;
}

.bec-pwa-toast button {
	background: #d71932;
	border: 0;
	border-radius: .5rem;
	color: #fff;
	cursor: pointer;
	flex: 0 0 auto;
	font: inherit;
	font-size: .75rem;
	font-weight: 750;
	padding: .6rem .85rem;
}

.bec-pwa-dialog {
	background: rgb(0 0 0 / .58);
	border: 0;
	height: 100%;
	inset: 0;
	margin: 0;
	max-height: none;
	max-width: none;
	padding: 1rem;
	position: fixed;
	width: 100%;
	z-index: 100001;
}

.bec-pwa-dialog[open] {
	align-items: center;
	display: flex;
	justify-content: center;
}

.bec-pwa-dialog-card {
	background: #fff;
	border-radius: 1rem;
	box-shadow: 0 30px 80px -30px rgb(0 0 0 / .7);
	color: #161719;
	max-width: 28rem;
	padding: 1.5rem;
	width: 100%;
}

.bec-pwa-dialog-card h2 {
	font-size: 1.15rem;
	margin: 0;
}

.bec-pwa-dialog-card p {
	color: #5d6066;
	font-size: .9rem;
	line-height: 1.8;
	margin: .85rem 0 1.2rem;
}

.bec-pwa-dialog-card button {
	background: #d71932;
	border: 0;
	border-radius: .5rem;
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-size: .8rem;
	font-weight: 750;
	padding: .65rem 1rem;
}

.bec-pwa-form-status {
	border-radius: .55rem;
	font-size: .78rem;
	font-weight: 650;
	line-height: 1.6;
	margin-bottom: .85rem;
	padding: .7rem .85rem;
}

.bec-pwa-form-status[data-state="offline"] {
	background: #fff0f1;
	color: #9d1021;
}

.bec-pwa-form-status[data-state="online"] {
	background: #edf9f1;
	color: #176634;
}

@media (min-width: 768px) {
	.bec-pwa-toast {
		bottom: 2rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bec-pwa-install-button,
	.bec-pwa-toast {
		transition: none;
	}
}