/**
 * Self-Hosted Web Push — opt-in widget styles.
 *
 * The accent colour is injected by PHP as the --selfpush-accent custom property.
 */

:root {
	--selfpush-accent: #2563eb;
	--selfpush-accent-contrast: #ffffff;
	--selfpush-surface: #ffffff;
	--selfpush-text: #1e1e1e;
	--selfpush-muted: #62676c;
	--selfpush-border: rgba( 0, 0, 0, 0.08 );
	--selfpush-shadow: 0 10px 30px rgba( 0, 0, 0, 0.16 );
	--selfpush-radius: 14px;
	--selfpush-gap: 20px;
	--selfpush-z: 99999;
}

@media ( prefers-color-scheme: dark ) {
	:root {
		--selfpush-surface: #1f2226;
		--selfpush-text: #f0f0f1;
		--selfpush-muted: #a7aaad;
		--selfpush-border: rgba( 255, 255, 255, 0.12 );
		--selfpush-shadow: 0 10px 30px rgba( 0, 0, 0, 0.5 );
	}
}

/* -------------------------------------------------------------------------
 * Shared positioning
 * ---------------------------------------------------------------------- */

.selfpush-bell,
.selfpush-banner,
.selfpush-toast {
	position: fixed;
	z-index: var( --selfpush-z );
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.selfpush-bell.selfpush--bottom-right,
.selfpush-banner.selfpush--bottom-right,
.selfpush-toast.selfpush--bottom-right {
	right: var( --selfpush-gap );
	bottom: var( --selfpush-gap );
}

.selfpush-bell.selfpush--bottom-left,
.selfpush-banner.selfpush--bottom-left,
.selfpush-toast.selfpush--bottom-left {
	left: var( --selfpush-gap );
	bottom: var( --selfpush-gap );
}

.selfpush-bell.selfpush--top-right,
.selfpush-banner.selfpush--top-right,
.selfpush-toast.selfpush--top-right {
	right: var( --selfpush-gap );
	top: var( --selfpush-gap );
}

.selfpush-bell.selfpush--top-left,
.selfpush-banner.selfpush--top-left,
.selfpush-toast.selfpush--top-left {
	left: var( --selfpush-gap );
	top: var( --selfpush-gap );
}

/* -------------------------------------------------------------------------
 * Floating bell
 * ---------------------------------------------------------------------- */

.selfpush-bell {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var( --selfpush-accent );
	color: var( --selfpush-accent-contrast );
	box-shadow: var( --selfpush-shadow );
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
	-webkit-appearance: none;
	appearance: none;
}

.selfpush-bell:hover,
.selfpush-bell:focus-visible {
	transform: translateY( -2px ) scale( 1.04 );
	box-shadow: 0 14px 34px rgba( 0, 0, 0, 0.22 );
}

.selfpush-bell:focus-visible {
	outline: 3px solid var( --selfpush-accent );
	outline-offset: 3px;
}

.selfpush-bell svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
	overflow: visible;
}

.selfpush-bell .selfpush-bell__dot {
	fill: #22c55e;
	stroke: var( --selfpush-accent );
	stroke-width: 2;
}

.selfpush-bell.is-active {
	background: #16a34a;
}

.selfpush-bell.is-active .selfpush-bell__dot {
	stroke: #16a34a;
}

/* One gentle nudge so the bell is noticed without being obnoxious. */
.selfpush-bell.is-nudging {
	animation: selfpush-nudge 1.1s ease-in-out 2;
}

@keyframes selfpush-nudge {
	0%, 100% { transform: rotate( 0deg ); }
	15% { transform: rotate( 12deg ); }
	30% { transform: rotate( -10deg ); }
	45% { transform: rotate( 8deg ); }
	60% { transform: rotate( -6deg ); }
	75% { transform: rotate( 3deg ); }
}

/* -------------------------------------------------------------------------
 * Slide-in banner
 * ---------------------------------------------------------------------- */

.selfpush-banner {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	width: min( 380px, calc( 100vw - 2 * var( --selfpush-gap ) ) );
	padding: 18px 44px 18px 18px;
	border: 1px solid var( --selfpush-border );
	border-radius: var( --selfpush-radius );
	background: var( --selfpush-surface );
	color: var( --selfpush-text );
	box-shadow: var( --selfpush-shadow );
	opacity: 0;
	visibility: hidden;
	transform: translateY( 16px );
	transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
}

.selfpush-banner.selfpush--top-right,
.selfpush-banner.selfpush--top-left {
	transform: translateY( -16px );
}

.selfpush-banner.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY( 0 );
}

.selfpush-banner__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var( --selfpush-accent );
	color: #fff;
}

.selfpush-banner__icon svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.selfpush-banner__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 auto;
	min-width: 0;
}

.selfpush-banner__text strong {
	font-size: 15px;
	line-height: 1.3;
	font-weight: 600;
}

.selfpush-banner__text span {
	font-size: 13px;
	line-height: 1.45;
	color: var( --selfpush-muted );
}

.selfpush-banner__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 0 0 auto;
	align-self: center;
}

.selfpush-banner__close {
	position: absolute;
	top: 8px;
	right: 10px;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var( --selfpush-muted );
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.selfpush-banner__close:hover {
	background: var( --selfpush-border );
	color: var( --selfpush-text );
}

.selfpush-banner--ios {
	padding-left: 18px;
}

/* -------------------------------------------------------------------------
 * Buttons
 * ---------------------------------------------------------------------- */

.selfpush-btn {
	padding: 8px 16px;
	border: 1px solid transparent;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: filter 0.15s ease, background-color 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.selfpush-btn--primary {
	background: var( --selfpush-accent );
	color: var( --selfpush-accent-contrast );
}

.selfpush-btn--primary:hover {
	filter: brightness( 1.08 );
}

.selfpush-btn--ghost {
	background: transparent;
	border-color: var( --selfpush-border );
	color: var( --selfpush-muted );
}

.selfpush-btn--ghost:hover {
	background: var( --selfpush-border );
	color: var( --selfpush-text );
}

.selfpush-btn:focus-visible {
	outline: 2px solid var( --selfpush-accent );
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Toast
 * ---------------------------------------------------------------------- */

.selfpush-toast {
	max-width: min( 320px, calc( 100vw - 2 * var( --selfpush-gap ) ) );
	margin-bottom: 76px;
	padding: 12px 16px;
	border-radius: 10px;
	background: #1e1e1e;
	color: #fff;
	font-size: 13px;
	line-height: 1.4;
	box-shadow: var( --selfpush-shadow );
	opacity: 0;
	transform: translateY( 10px );
	transition: opacity 0.25s ease, transform 0.25s ease;
	pointer-events: none;
}

.selfpush-toast.is-visible {
	opacity: 1;
	transform: translateY( 0 );
}

.selfpush-toast.is-error {
	background: #b32d2e;
}

.selfpush-toast.selfpush--top-right,
.selfpush-toast.selfpush--top-left {
	margin-bottom: 0;
	margin-top: 76px;
}

/* -------------------------------------------------------------------------
 * Small screens & motion preferences
 * ---------------------------------------------------------------------- */

@media ( max-width: 480px ) {
	:root {
		--selfpush-gap: 14px;
	}

	.selfpush-banner {
		flex-wrap: wrap;
	}

	.selfpush-banner__actions {
		flex-direction: row;
		width: 100%;
	}

	.selfpush-banner__actions .selfpush-btn {
		flex: 1 1 auto;
	}

	.selfpush-bell {
		width: 50px;
		height: 50px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.selfpush-bell,
	.selfpush-banner,
	.selfpush-toast {
		transition: none;
	}

	.selfpush-bell.is-nudging {
		animation: none;
	}
}

@media print {
	.selfpush-bell,
	.selfpush-banner,
	.selfpush-toast {
		display: none !important;
	}
}