/**
 * Midwest Armor Notify — Lead Time PDP line
 * Variation E — inline minimal treatment under the price.
 *
 * Two axes carry the state:
 *   - Fill   → do we have units? (solid = yes, hollow ring = none)
 *   - Motion → urgency? (radiate → still). Motion scales DOWN
 *              as availability drops, then stops.
 *
 * Color is reinforcement, not the sole signal — survives
 * colorblind users and greyscale.
 *
 * Light mode = Mist (#141416 ink).
 * Dark mode  = Slate, via html[data-mw-mode="night"] OR .dark on
 *              an ancestor — kept compatible with the Midwest
 *              theme's day/night switcher.
 */

.estock {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	line-height: 1.3;
	flex-wrap: wrap;
	margin: 14px 0;
}

.estock .lab {
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 11.5px;
	letter-spacing: 1.4px;
	font-weight: 700;
}

.estock .sep {
	color: rgba(20, 20, 22, 0.4);
}

.estock .body {
	color: #141416;
	font-size: 13px;
}

.estock .body b {
	font-weight: 600;
}

/* ── state colors (light / Mist) ───────────────────────────── */
.estock.in       .lab,
.estock.in       .body b { color: #2d7a4a; }
.estock.low      .lab,
.estock.low      .body b { color: #C76A1A; }
.estock.backorder .lab,
.estock.backorder .body b { color: #B07418; }
.estock.out      .lab,
.estock.out      .body b { color: #A8323A; }

/* ── state colors (dark / Slate) ───────────────────────────── */
/* v0.11.7: removed the `html[data-mw-mode="night"]` selectors.
 * That attribute is set globally by the Midwest theme based on the
 * OS-level prefers-color-scheme media query — but the surrounding
 * buy-box stays light. Our text was flipping near-white against a
 * white background and disappearing. Only the explicit `.dark`
 * ancestor (set by intentional toggles) flips the palette now. */
.dark .estock .sep                { color: rgba(238, 239, 241, 0.35); }
.dark .estock .body               { color: #EEEFF1; }
.dark .estock.in  .lab,
.dark .estock.in  .body b         { color: #5BBE85; }
.dark .estock.low .lab,
.dark .estock.low .body b         { color: #E59A45; }
.dark .estock.out .lab,
.dark .estock.out .body b         { color: #E0686F; }

/* ── the signal dot ────────────────────────────────────────── */
.estock .dot {
	position: relative;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex-shrink: 0;
}

.estock.in       .dot { background: #2d7a4a; }
.estock.low      .dot { background: #C76A1A; }
.estock.backorder .dot { background: #B07418; }
.estock.out      .dot {
	background: transparent;
	border: 1.5px solid #A8323A;
}

.dark .estock.in       .dot { background: #5BBE85; }
.dark .estock.low      .dot { background: #E59A45; }
.dark .estock.backorder .dot { background: #D49447; }
.dark .estock.out      .dot { background: transparent; border-color: #E0686F; }

/* IN — pulse positive: solid dot + radiating ring (2s loop) */
.estock.in .dot::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	background: #2d7a4a;
	opacity: .4;
	animation: mwa-lt-radiate 2s ease-out infinite;
}
.dark .estock.in .dot::after { background: #5BBE85; }

/* LOW — urgent breathe: opacity pulses faster (1.3s) */
.estock.low .dot { animation: mwa-lt-breathe 1.3s ease-in-out infinite; }

/* OUT — static hollow: no motion */

@keyframes mwa-lt-radiate {
	0%   { transform: scale(1);   opacity: .4; }
	100% { transform: scale(2.6); opacity: 0;  }
}
@keyframes mwa-lt-breathe {
	0%, 100% { opacity: 1;   }
	50%      { opacity: .25; }
}

/* Respect reduced-motion users — kill animations, keep visuals. */
@media (prefers-reduced-motion: reduce) {
	.estock.in .dot::after,
	.estock.low .dot {
		animation: none;
	}
	.estock.in .dot::after {
		opacity: 0;
	}
}