/* ============================================================
   Joybunch — Status pills + Trust badges + Tag chips
   element 6
   References tokens.
   ============================================================ */

/* ---------- Order status pills (5-day hand-pack journey) ---------- */
.status-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: var(--joy-radius-pill);
	font: 600 var(--joy-text-xs)/1.2 var(--joy-font-body);
	letter-spacing: 0.02em;
	white-space: nowrap;
}
.status-pill .dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	flex-shrink: 0;
}

.status-pill.confirmed     { background: var(--joy-sage-light); color: var(--joy-graphite); }
.status-pill.confirmed .dot { background: var(--joy-sage); }

.status-pill.handpacking   { background: #FEF3E0; color: var(--joy-graphite); }
.status-pill.handpacking .dot { background: var(--joy-warning); animation: status-pulse 1.6s var(--ease) infinite; }

.status-pill.inspection    { background: var(--joy-coral-bg); color: var(--joy-graphite); }
.status-pill.inspection .dot { background: var(--joy-coral-dark); }

.status-pill.shipped       { background: #E0EFF5; color: var(--joy-graphite); }
.status-pill.shipped .dot { background: var(--joy-info); }

.status-pill.delivered     { background: #E8F5EE; color: var(--joy-graphite); }
.status-pill.delivered .dot { background: var(--joy-success); }

.status-pill.cancelled     { background: var(--joy-gray-light); color: var(--joy-graphite-soft); }
.status-pill.cancelled .dot { background: var(--joy-gray); }

@keyframes status-pulse {
	0%, 100% { transform: scale(1);   opacity: 1; }
	50%      { transform: scale(1.4); opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
	.status-pill .dot { animation: none !important; }
}

/* ---------- Trust badges (privacy / hand-pack / replacement / etc.) ---------- */
.trust-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: var(--joy-radius-pill);
	font: 500 var(--joy-text-xs)/1.2 var(--joy-font-body);
	white-space: nowrap;
}
.trust-badge.privacy  { background: var(--joy-sage-light); color: var(--joy-graphite); }
.trust-badge.handpack { background: var(--joy-sage-light); color: var(--joy-graphite); }
.trust-badge.replace  { background: var(--joy-coral-bg);   color: var(--joy-graphite); }
.trust-badge.ship     { background: #E0EFF5;               color: var(--joy-graphite); }
.trust-badge.lastmin  { background: #FEF3E0;               color: var(--joy-graphite); }
.trust-badge.eco      { background: var(--joy-sage-light); color: var(--joy-graphite); }
.trust-badge.useful   { background: var(--joy-sage-light); color: var(--joy-graphite); }

/* ---------- Strong call-out badges (popular / scarcity / new / featured) ---------- */
.badge-popular,
.badge-scarcity,
.badge-new,
.badge-featured {
	display: inline-block;
	padding: 4px 10px;
	border-radius: var(--joy-radius-pill);
	font: 700 11px/1.2 var(--joy-font-body);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
}
.badge-popular  { background: var(--joy-coral);   color: var(--joy-white); }
.badge-scarcity { background: var(--joy-warning); color: var(--joy-white); }
.badge-new      { background: var(--joy-sage);    color: var(--joy-white); }
.badge-featured { background: var(--joy-butter);  color: var(--joy-graphite); }

/* ---------- Filter chips (horizontal scrollable on mobile per Zomato pattern) ---------- */
.chip {
	display: inline-flex;
	align-items: center;
	background: var(--joy-gray-light);
	color: var(--joy-graphite);
	padding: 8px 16px;
	border-radius: var(--joy-radius-pill);
	font: 500 var(--joy-text-base)/1.2 var(--joy-font-body);
	white-space: nowrap;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background var(--dur-fast) var(--ease),
	            border-color var(--dur-fast) var(--ease),
	            color var(--dur-fast) var(--ease);
}
.chip:hover { background: #DCD3BD; }
.chip.is-active,
.chip[aria-pressed="true"] {
	background: var(--joy-coral-bg);
	color: var(--joy-coral-dark);
	border-color: var(--joy-coral);
	font-weight: 600;
}
.chip:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }

/* Filter chip row — horizontal scroll on mobile, hidden scrollbar */
.chips-row {
	display: flex;
	gap: var(--joy-space-sm);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	padding: 8px 0;
	scrollbar-width: none;
}
.chips-row::-webkit-scrollbar { display: none; }
.chips-row > .chip { scroll-snap-align: start; flex-shrink: 0; }

/* ---------- Tag (small inline meta — e.g. "Age 2-6", "Eco" on cards) ---------- */
.tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border-radius: var(--joy-radius-sm);
	background: var(--joy-cream-light);
	color: var(--joy-graphite-soft);
	font: 500 var(--joy-text-xs)/1.3 var(--joy-font-body);
	letter-spacing: 0.01em;
}