/*!
 * =============================================================================
 * GPS HEADER
 * =============================================================================
 * PURPOSE      : Stijlen voor de PWA-affordances: de install-prompt-banner
 *                ("Zet op beginscherm") en de push-opt-in-banner ("Zet
 *                meldingen aan"). Beide zijn dezelfde non-blocking, dismissbare
 *                onderbalk (conform UX-principe 1: geen alert()/confirm()).
 *
 * PATH         : wp-content/themes/sportlist/css/pwa.css
 *
 * DEPENDENCIES : style.css (root custom properties --primary-color e.d.).
 *
 * =============================================================================
 * CSS-VARIABELEN (gebruik uitsluitend deze)
 * =============================================================================
 *   --primary-color, --white-color, --black-color
 *
 * =============================================================================
 * SECTIONOVERZICHT
 * =============================================================================
 *   1. BANNER LAYOUT
 *   2. BANNER COMPONENTEN (tekst, knoppen)
 *   3. RESPONSIVE + REDUCED MOTION
 *
 * @package Sportlist
 */

/* ============================================================
   1. BANNER LAYOUT
   ============================================================ */

.sl-pwa-banner {
	position: fixed;
	left: 50%;
	bottom: calc(14px + env(safe-area-inset-bottom, 0px));
	transform: translateX(-50%) translateY(140%);
	z-index: 9998;
	width: calc(100% - 28px);
	max-width: 380px;
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 11px 14px;
	background: var(--white-color, #fff);
	border: 1px solid rgba(0, 0, 0, 0.05);
	border-radius: 16px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	opacity: 0;
	transition: transform 0.35s ease, opacity 0.35s ease;
}

.sl-pwa-banner.is-visible {
	transform: translateX(-50%) translateY(0);
	opacity: 1;
}

/* ============================================================
   2. BANNER COMPONENTEN
   ============================================================ */

.sl-pwa-banner__icon {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 74, 173, 0.07);
	font-size: 18px;
	line-height: 1;
}

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

.sl-pwa-banner__title {
	margin: 0 0 1px;
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--black-color, #1d2433);
}

.sl-pwa-banner__body {
	margin: 0;
	font-size: 0.78rem;
	line-height: 1.35;
	color: #6b7280;
}

.sl-pwa-banner__actions {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sl-pwa-banner__btn {
	border: 0;
	border-radius: 30px;
	padding: 8px 14px;
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.sl-pwa-banner__btn--primary {
	background: var(--primary-color, #004aad);
	color: var(--white-color, #fff);
}

.sl-pwa-banner__btn--primary:hover {
	box-shadow: 0 3px 10px rgba(0, 74, 173, 0.3);
}

.sl-pwa-banner__btn--ghost {
	background: transparent;
	color: #6b7280;
	padding: 6px 10px;
}

.sl-pwa-banner__btn--ghost:hover {
	color: var(--black-color, #1d2433);
}

/* ============================================================
   3. RESPONSIVE + REDUCED MOTION
   ============================================================ */

@media (max-width: 480px) {
	.sl-pwa-banner {
		gap: 10px;
		padding: 12px 14px;
	}
	.sl-pwa-banner__actions {
		flex-direction: column;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sl-pwa-banner {
		transition: opacity 0.2s ease;
		transform: translateX(-50%) translateY(0);
	}
}