/**
 * CEC PWA — install prompt modal (Android) + iOS instructions.
 * Self-contained; does not depend on Bootstrap JS. Kept lightweight.
 */

.cec-pwa-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: rgba( 15, 23, 42, 0.55 );
	padding: 16px;
	animation: cecPwaFade 0.18s ease-out;
}

@keyframes cecPwaFade {
	from { opacity: 0; }
	to { opacity: 1; }
}

.cec-pwa-modal {
	position: relative;
	width: 100%;
	max-width: 420px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 18px 48px rgba( 0, 0, 0, 0.28 );
	padding: 22px 20px 18px;
	animation: cecPwaSlide 0.22s ease-out;
}

@keyframes cecPwaSlide {
	from { transform: translateY( 24px ); opacity: 0; }
	to { transform: translateY( 0 ); opacity: 1; }
}

@media ( min-width: 576px ) {
	.cec-pwa-overlay { align-items: center; }
}

.cec-pwa-x {
	position: absolute;
	top: 8px;
	right: 10px;
	border: 0;
	background: transparent;
	font-size: 26px;
	line-height: 1;
	color: #94a3b8;
	cursor: pointer;
	padding: 4px 8px;
}

.cec-pwa-x:hover { color: #475569; }

.cec-pwa-head {
	font-size: 1.15rem;
	font-weight: 700;
	color: #1f2937;
	margin: 0 24px 8px 0;
}

.cec-pwa-body {
	font-size: 0.95rem;
	line-height: 1.5;
	color: #475569;
	margin: 0 0 18px;
}

.cec-pwa-hint {
	font-size: 0.85rem;
	line-height: 1.4;
	color: #64748b;
	margin: -10px 0 18px;
}

.cec-pwa-share {
	vertical-align: middle;
	color: #2c5f7c;
	margin: 0 2px;
}

.cec-pwa-actions {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	flex-wrap: wrap;
}

.cec-pwa-btn {
	border: 0;
	border-radius: 10px;
	padding: 11px 18px;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
}

.cec-pwa-btn-primary {
	background: var( --primary-color, #2c5f7c );
	color: #fff;
}

.cec-pwa-btn-primary:hover { filter: brightness( 0.94 ); }

.cec-pwa-btn-ghost {
	background: #f1f5f9;
	color: #475569;
}

.cec-pwa-btn-ghost:hover { background: #e2e8f0; }