/* =========================================================
   Winkelwagen-melding (toast) — Chocolaterie Fleur-huisstijl.
   Functionaliteit + markup zit in de parent-core (sellabees-shops-core v1.0.0:
   assets/js/sellabees-shops-core.js + inc/cart-toast.php); hier alleen de opmaak.

   Core-markup (v1.0.0): één element per melding —
     <div class="sellabees-toast sellabees-toast--<positie> [sellabees-toast--has-icon]">
        <span class="sellabees-toast__icon" style="background/color inline"><img></span>
        <span class="sellabees-toast__text">…</span>
     </div>
   Positie + kleuren komen via het filter sellabees_toast_settings (functions.php)
   en Site-instellingen → Winkelwagen-melding.
   ========================================================= */

.sellabees-toast {
	position: fixed;
	z-index: 9999;
	max-width: 360px;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	background: #fff;
	color: var(--fleur-aubergine, #4c3d45);
	border-radius: 10px;
	border-top: 3px solid var(--fleur-pink, #e06283); /* merk-accent (bovenrand) */
	box-shadow: 0 12px 30px rgba(76, 61, 69, .20);
	font-family: var(--fleur-font-sans);
	font-size: 15px;
	line-height: 1.4;
	animation: fleur-toast-in .25s ease both;
}

/* Plaatsing — de core zet de positie-modifier op het element zelf. */
.sellabees-toast--top-right    { top: 24px;    right: 24px; }
.sellabees-toast--bottom-right { bottom: 24px; right: 24px; }
.sellabees-toast--top-center    { top: 24px;    left: 50%; transform: translateX(-50%); }
.sellabees-toast--bottom-center { bottom: 24px; left: 50%; transform: translateX(-50%); }

/* Icoon-badge (achtergrond/kleur worden inline gezet via het filter, met
   deze Fleur-fallbacks als er niets is ingesteld). */
.sellabees-toast__icon {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--fleur-pink-soft, #f6bddd);
	color: var(--fleur-aubergine, #4c3d45);
}
.sellabees-toast__icon img {
	width: 22px;
	height: 22px;
	display: block;
}

.sellabees-toast__text {
	font-weight: 600;
}

@keyframes fleur-toast-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@media (max-width: 480px) {
	.sellabees-toast {
		left: 16px;
		right: 16px;
		max-width: none;
	}
	.sellabees-toast--top-center,
	.sellabees-toast--bottom-center { transform: none; }
}