/**
 * pwa.css — Push notification bell button + toast styles
 *
 * Loaded globally (same priority as agent-chat.css).
 *
 * @package MVB_Theme
 */

/* ------------------------------------------------------------------
 * Bell button
 * ------------------------------------------------------------------ */

.mvb-push-bell-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           34px;
	height:          34px;
	border-radius:   50%;
	border:          1px solid rgba( 255, 255, 255, 0.12 );
	background:      transparent;
	color:           rgba( 255, 255, 255, 0.55 );
	cursor:          pointer;
	transition:      color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
	flex-shrink:     0;
}

.mvb-push-bell-btn:hover,
.mvb-push-bell-btn:focus-visible {
	color:         #C6A75E;
	border-color:  rgba( 198, 167, 94, 0.5 );
	background:    rgba( 198, 167, 94, 0.08 );
	outline:       none;
}

.mvb-push-bell-btn.is-subscribed {
	color:        #C6A75E;
	border-color: rgba( 198, 167, 94, 0.4 );
}

.mvb-push-bell-btn.is-denied {
	color:        rgba( 255, 255, 255, 0.25 );
	cursor:       default;
}

/* Pulse animation on first visit to draw attention */
.mvb-push-bell-btn.is-default {
	animation: mvb-bell-pulse 2.5s 3s ease-in-out 2;
}

@keyframes mvb-bell-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba( 198, 167, 94, 0 ); }
	50%       { box-shadow: 0 0 0 6px rgba( 198, 167, 94, 0.2 ); }
}

/* ------------------------------------------------------------------
 * Category preferences modal
 * ------------------------------------------------------------------ */

.mvb-push-prefs-modal {
	box-shadow: 0 8px 32px rgba( 0, 0, 0, 0.6 );
	animation: mvb-fade-in-up 0.2s ease;
}

@keyframes mvb-fade-in-up {
	from { opacity: 0; transform: translateY( 8px ); }
	to   { opacity: 1; transform: translateY( 0 ); }
}

/* ------------------------------------------------------------------
 * Toast notifications (temporary status messages)
 * ------------------------------------------------------------------ */

.mvb-push-toast {
	animation: mvb-toast-in 0.25s ease, mvb-toast-out 0.3s ease 3.7s forwards;
}

@keyframes mvb-toast-in {
	from { opacity: 0; transform: translateX( -50% ) translateY( 12px ); }
	to   { opacity: 1; transform: translateX( -50% ) translateY( 0 ); }
}

@keyframes mvb-toast-out {
	to { opacity: 0; transform: translateX( -50% ) translateY( 12px ); }
}

/* ------------------------------------------------------------------
 * SW update banner
 * ------------------------------------------------------------------ */

.mvb-sw-update-banner {
	animation: mvb-slide-up 0.3s ease;
}

@keyframes mvb-slide-up {
	from { transform: translateY( 100% ); }
	to   { transform: translateY( 0 ); }
}