/**
 * Site-wide styles.
 *
 * Loaded on every front-end request, so keep it lean: only rules that apply
 * broadly, or that belong to a component which can appear on any page (like
 * the app download popup below). Page-specific styling belongs in style.css or
 * in an Elementor template instead.
 *
 * Sections
 *   1. App download popup
 */

/* -------------------------------------------------------------------------
 * 1. App download popup
 *
 * Layered over the page on a dimmed backdrop: white card, promo copy, the two
 * store badges and a close button in the top-right corner. All presentation is
 * driven by the custom properties on .np-app-popup so the popup can be
 * rethemed without editing the rules below.
 * ---------------------------------------------------------------------- */

.np-app-popup {
	--np-app-popup-overlay: rgba(8, 10, 12, .72);
	--np-app-popup-surface: #fff;
	--np-app-popup-text: #1b1b1b;
	--np-app-popup-radius: 0;
	--np-app-popup-padding: 18px 16px 12px;
	--np-app-popup-width: 21.5rem;
	--np-app-popup-gap: 1rem;
	--np-app-popup-badge-height: 2.875rem;
	--np-app-popup-z-index: 9999;

	position: fixed;
	inset: 0;
	z-index: var(--np-app-popup-z-index);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: var(--np-app-popup-overlay);
}

.np-app-popup,
.np-app-popup *,
.np-app-popup *::before,
.np-app-popup *::after {
	box-sizing: border-box;
}

.np-app-popup[hidden] {
	display: none;
}

/* Lock page scrolling while the dialog is open. */
html.np-app-popup-open,
html.np-app-popup-open body {
	overflow: hidden;
}

.np-app-popup__card {
	position: relative;
	width: min(var(--np-app-popup-width), 100%);
	padding: var(--np-app-popup-padding);
	background: var(--np-app-popup-surface);
	color: var(--np-app-popup-text);
	border-radius: var(--np-app-popup-radius);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
	opacity: 0;
	transform: translateY(6px) scale(.98);
	transition: opacity .22s ease, transform .22s ease;
}

.np-app-popup.is-visible .np-app-popup__card {
	opacity: 1;
	transform: none;
}

.np-app-popup__message {
	margin: 0;
	padding-right: 1.5rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.3;
	text-wrap: pretty;
}

.np-app-popup__stores {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .625rem;
	margin-top: var(--np-app-popup-gap);
}

.np-app-popup__store {
	display: inline-flex;
	line-height: 0;
	border-radius: 8px;
	transition: transform .18s ease;
}

.np-app-popup__store img {
	display: block;
	width: auto;
	height: var(--np-app-popup-badge-height);
	max-width: 100%;
}

a.np-app-popup__store:hover {
	transform: translateY(-1px);
}

a.np-app-popup__store:focus-visible {
	outline: 2px solid var(--np-app-popup-text);
	outline-offset: 2px;
}

.np-app-popup__close {
	position: absolute;
	top: .5rem;
	right: .5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--np-app-popup-text);
	opacity: .85;
	cursor: pointer;
}

.np-app-popup__close:hover {
	background: rgba(0, 0, 0, .06);
	opacity: 1;
}

.np-app-popup__close svg {
	display: block;
	width: 1rem;
	height: 1rem;
}

.np-app-popup__close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

@media (max-width: 400px) {
	.np-app-popup {
		--np-app-popup-padding: 18px 14px 14px;
		--np-app-popup-badge-height: 2.625rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.np-app-popup__card,
	.np-app-popup__store {
		transition: none;
	}

	.np-app-popup__card {
		transform: none;
	}
}