/**
 * Badges, chips and status pills.
 * Badge = small informational pill (city tag, discount).
 * Chip  = selectable/filter element (activity types, variants).
 * Status = reservation/order state indicator.
 */

/* --- Badge --- */
.nbf-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--nbf-space-1);
	padding-block: 0.125rem;
	padding-inline: var(--nbf-space-3);
	border-radius: var(--nbf-radius-pill);
	font-size: var(--nbf-fs-xs);
	font-weight: var(--nbf-fw-bold);
	line-height: 1.6;
	background: var(--nbf-color-primary-50);
	color: var(--nbf-color-primary-700);
	white-space: nowrap;
}

.nbf-badge--solid {
	background: var(--nbf-color-primary-600);
	color: var(--nbf-color-text-inverse);
}

.nbf-badge--navy {
	background: var(--nbf-color-navy-800);
	color: var(--nbf-color-text-inverse);
}

.nbf-badge--discount {
	background: var(--nbf-color-error);
	color: var(--nbf-color-text-inverse);
}

.nbf-badge--neutral {
	background: var(--nbf-color-surface-sunken);
	color: var(--nbf-color-text-2);
}

/* Count bubble (cart badge) */
.nbf-count-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 1.25rem;
	block-size: 1.25rem;
	padding-inline: 0.25rem;
	border-radius: var(--nbf-radius-pill);
	background: var(--nbf-color-primary-600);
	color: var(--nbf-color-text-inverse);
	font-size: var(--nbf-fs-2xs);
	font-weight: var(--nbf-fw-bold);
	line-height: 1;
}

/* --- Chip (selectable) --- */
.nbf-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--nbf-space-2);
	min-block-size: var(--nbf-control-h-sm);
	padding-block: var(--nbf-space-1);
	padding-inline: var(--nbf-space-4);
	border: 1px solid var(--nbf-color-border);
	border-radius: var(--nbf-radius-pill);
	background: var(--nbf-color-surface);
	color: var(--nbf-color-text-2);
	font-size: var(--nbf-fs-sm);
	font-weight: var(--nbf-fw-medium);
	cursor: pointer;
	transition:
		background-color var(--nbf-duration) var(--nbf-ease),
		border-color var(--nbf-duration) var(--nbf-ease),
		color var(--nbf-duration) var(--nbf-ease);
}

.nbf-chip:hover {
	border-color: var(--nbf-color-primary-300);
	color: var(--nbf-color-primary-600);
}

.nbf-chip[aria-pressed="true"],
.nbf-chip[aria-selected="true"],
.nbf-chip--active {
	background: var(--nbf-color-primary-50);
	border-color: var(--nbf-color-primary-600);
	color: var(--nbf-color-primary-700);
	font-weight: var(--nbf-fw-bold);
}

.nbf-chip:disabled,
.nbf-chip[aria-disabled="true"] {
	background: var(--nbf-color-surface-sunken);
	color: var(--nbf-color-text-3);
	cursor: not-allowed;
	pointer-events: none;
}

/* --- Status pills (reservation / order states) --- */
.nbf-status {
	display: inline-flex;
	align-items: center;
	gap: var(--nbf-space-1);
	padding-block: 0.125rem;
	padding-inline: var(--nbf-space-3);
	border-radius: var(--nbf-radius-pill);
	font-size: var(--nbf-fs-xs);
	font-weight: var(--nbf-fw-bold);
	line-height: 1.6;
}

.nbf-status::before {
	content: "";
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-radius: 50%;
	background: currentColor;
}

.nbf-status--success {
	background: var(--nbf-color-success-bg);
	color: var(--nbf-color-success);
}

.nbf-status--warning {
	background: var(--nbf-color-warning-bg);
	color: var(--nbf-color-warning);
}

.nbf-status--error {
	background: var(--nbf-color-error-bg);
	color: var(--nbf-color-error);
}

.nbf-status--info {
	background: var(--nbf-color-info-bg);
	color: var(--nbf-color-primary-700);
}

.nbf-status--neutral {
	background: var(--nbf-color-surface-sunken);
	color: var(--nbf-color-text-2);
}