/* ®WISE MY ACCOUNT: the site-wide install + enable-notifications toasts (see class-push.php render_toasts()).
   Deliberately self-contained - loaded on every page, including ones that never load account.css - so it never
   depends on that file's own variables existing. --wmya-accent/--wmya-radius are injected per-request as an inline
   style right alongside this file (the site's real admin-chosen colour/roundness, not a hardcoded guess). */

.wmya-toast {
	--wmya-ink: #111111;
	--wmya-ink-2: #5d5a55;
	--wmya-line: #ebe5db;
	--wmya-accent: #db1215;
	--wmya-radius: 16px;
	font-family: 'Albert Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
	position: fixed;
	right: 16px;
	bottom: 16px;
	left: 16px;
	z-index: 2147483000;
	max-width: 360px;
	margin-left: auto;
	background: #fff;
	border: 1px solid var(--wmya-line);
	border-radius: var(--wmya-radius);
	box-shadow: 0 16px 40px rgba(13, 13, 15, .16);
	padding: 16px;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	animation: wmya-toast-in .35s cubic-bezier(.2, .75, .2, 1);
}
@media (min-width: 640px) {
	.wmya-toast { left: auto; width: 360px; }
}
@keyframes wmya-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .wmya-toast { animation: none; } }

.wmya-toast__icon { flex: none; width: 36px; height: 36px; border-radius: 9px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #f6f2eb; color: var(--wmya-accent); }
.wmya-toast__icon img { width: 100%; height: 100%; object-fit: cover; display: block; }

.wmya-toast__body { flex: 1; min-width: 0; }
.wmya-toast__body b { display: block; font-size: 14px; font-weight: 800; color: var(--wmya-ink); line-height: 1.3; }
.wmya-toast__url { display: block; font-size: 11.5px; color: var(--wmya-ink-2); margin-bottom: 6px; }
.wmya-toast__body p { margin: 0 0 4px; font-size: 13px; line-height: 1.5; color: var(--wmya-ink-2); }
.wmya-toast__eyebrow { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 4px !important; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--wmya-ink-2); }
.wmya-toast__eyebrow::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--wmya-accent); flex: none; }
.wmya-toast__ios { display: block; margin-top: 2px; font-size: 12px; color: var(--wmya-ink-2); }
.wmya-toast__blocked { font-size: 12px; color: var(--wmya-ink-2); }

.wmya-toast__actions { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.wmya-toast__btn {
	height: 38px; padding: 0 18px; border: 0; border-radius: calc(var(--wmya-radius) - 4px);
	background: var(--wmya-ink); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
	transition: background .15s ease;
}
.wmya-toast__btn:hover { background: var(--wmya-accent); }
.wmya-toast__btn.is-on { background: #0e8a4f; cursor: default; }
.wmya-toast__dismiss { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--wmya-ink-2); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.wmya-toast__dismiss:hover { color: var(--wmya-ink); }

@media (max-width: 900px) {
	/* 72px clears the theme's own fixed mobile bottom nav bar (Shop/Wishlist/Cart) - the exact value already
	   established elsewhere on this site (account.css, the install prompt's own earlier account-only version)
	   for this same "content hides behind the bottom bar" problem, now needed site-wide too. */
	.wmya-toast { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); padding: 14px; }
}