/**
 * WCO Toast Notification Styles
 *
 * Dark card toasts with colored left borders, progress bar countdown,
 * slide animations, and responsive bottom-center positioning on mobile.
 */

/* ==========================================================================
   Container
   ========================================================================== */

#wco-toast-container {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	z-index: 99999;
	display: flex;
	flex-direction: column-reverse; /* newest toast at bottom, stack grows upward */
	gap: 0.625rem;
	pointer-events: none; /* clicks pass through container gaps */
	max-width: 420px;
	width: calc(100% - 3rem);
}

/* ==========================================================================
   Toast card base
   ========================================================================== */

.wco-toast {
	pointer-events: auto; /* re-enable clicks on individual cards */
	background: #1e1e2e;
	border-radius: 10px;
	border-left: 4px solid;
	padding: 0.875rem 1rem;
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
	position: relative;
	overflow: hidden; /* for progress bar */
	opacity: 0;
	transform: translateY(1rem);
	/* Transition for swipe-to-dismiss support (Plan 02) — only active when not animating */
	transition: transform 0.15s ease;
}

/* Disable transition during CSS animations to prevent conflicts */
.wco-toast.wco-toast--visible,
.wco-toast.wco-toast--exit {
	transition: none;
}

/* ==========================================================================
   Type-specific border colors
   ========================================================================== */

.wco-toast--success { border-left-color: #6fcf97; }
.wco-toast--error   { border-left-color: #e74c3c; }
.wco-toast--info    { border-left-color: #5b9bd5; }
.wco-toast--warning { border-left-color: #c9a84c; }

/* ==========================================================================
   Icon
   ========================================================================== */

.wco-toast__icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 1px; /* optical vertical alignment with text */
}

.wco-toast__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Icon color matches border per type */
.wco-toast--success .wco-toast__icon { color: #6fcf97; }
.wco-toast--error   .wco-toast__icon { color: #e74c3c; }
.wco-toast--info    .wco-toast__icon { color: #5b9bd5; }
.wco-toast--warning .wco-toast__icon { color: #c9a84c; }

/* ==========================================================================
   Content area
   ========================================================================== */

.wco-toast__content {
	flex: 1;
	min-width: 0; /* allow text truncation / wrapping */
}

.wco-toast__message {
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.9rem;
	line-height: 1.4;
	margin: 0;
}

.wco-toast__message a {
	color: #c9a84c; /* gold accent for links */
	text-decoration: underline;
}

.wco-toast__message a:hover {
	color: #e0be72;
}

/* ==========================================================================
   Dismiss button
   ========================================================================== */

.wco-toast__dismiss {
	flex-shrink: 0;
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.5);
	font-size: 1.25rem;
	cursor: pointer;
	padding: 0;
	line-height: 1;
	transition: color 0.2s;
	align-self: flex-start;
}

.wco-toast__dismiss:hover,
.wco-toast__dismiss:focus {
	color: rgba(255, 255, 255, 0.9);
	outline: none;
}

/* ==========================================================================
   Progress bar
   ========================================================================== */

.wco-toast__progress {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: rgba(255, 255, 255, 0.1);
}

.wco-toast__progress-bar {
	height: 100%;
	width: 100%;
	transform-origin: left;
	/* animation set inline by JS: animation: wco-toast-countdown Xms linear forwards */
}

/* Progress bar color per type (fallback — JS also sets background inline) */
.wco-toast--success .wco-toast__progress-bar { background: #6fcf97; }
.wco-toast--error   .wco-toast__progress-bar { background: #e74c3c; }
.wco-toast--info    .wco-toast__progress-bar { background: #5b9bd5; }
.wco-toast--warning .wco-toast__progress-bar { background: #c9a84c; }

/* ==========================================================================
   Animations
   ========================================================================== */

/* Enter: slide up + fade in */
.wco-toast--visible {
	animation: wco-toast-enter 0.3s ease-out forwards;
}

@keyframes wco-toast-enter {
	from {
		opacity: 0;
		transform: translateY(1rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Exit: slide down + fade out */
.wco-toast--exit {
	animation: wco-toast-exit 0.25s ease-in forwards;
}

@keyframes wco-toast-exit {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(0.5rem);
	}
}

/* Progress bar countdown */
@keyframes wco-toast-countdown {
	from { transform: scaleX(1); }
	to   { transform: scaleX(0); }
}

/* ==========================================================================
   WC notice hiding — active when toast JS loads successfully
   ========================================================================== */

/* Hide WC notices that have been intercepted and converted to toasts.
   The [data-wco-intercepted] attribute is set by toast.js after extracting
   the message.  We do NOT blanket-hide by class because that races with the
   MutationObserver — AJAX-injected notices would be display:none before the
   observer can read their content.
   The [hidden] attribute alone handles most cases, but !important is needed
   to override any theme styles that set display on these selectors. */
[data-wco-intercepted] {
	display: none !important;
}

/* ==========================================================================
   Phase 32.1 D-07: Sticky toast variant — no auto-dismiss, no countdown bar.
   ========================================================================== */

.wco-toast--sticky .wco-toast__progress {
	display: none;
}

/* ==========================================================================
   Responsive — bottom-center on mobile
   ========================================================================== */

@media (max-width: 480px) {
	#wco-toast-container {
		right: 0.75rem;
		left: 0.75rem;
		bottom: 1rem;
		max-width: none;
		width: auto;
	}
}

/* --------------------------------------------------------------------------
   Phase 34 D-24 — sticky bar coexistence
   --------------------------------------------------------------------------
   When the WCO_Upsell_Popups sticky bar (POPUP-02) is visible, Plan 04 JS
   adds the `wco-sticky-bar-visible` class to <body> and writes the bar's
   measured height to `--wco-sticky-bar-height` on the documentElement. This
   rule lifts the toast container above the bar so toasts remain visible
   (and not occluded by the bar) on product pages where both surfaces coexist.

   Fallback to 48px matches the bar's intrinsic height in upsell-popups.css —
   so even if JS hasn't written the var (or the bar is mid-animation), the
   toast still clears.
   -------------------------------------------------------------------------- */
body.wco-sticky-bar-visible #wco-toast-container {
	bottom: calc(var(--wco-sticky-bar-height, 48px) + 12px);
}

/* Mobile-nav coexistence — when both the sticky bar and the site's bottom nav
   (.bnav-bar, 60px) are present on touch devices, the toast must clear both. */
@media (hover: none) and (pointer: coarse) {
	body.wco-sticky-bar-visible:has(.bnav-bar) #wco-toast-container {
		bottom: calc(var(--wco-sticky-bar-height, 48px) + 60px + 12px);
	}
}