/**
 * Secondary process chips on the part card header. Each chip shows a
 * process's state and opens the secondary processes modal.
 */

.quoteandcut-secondary-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	margin-top: 6px;
}

.quoteandcut-secondary-chips__label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--quoteandcut-text-muted, #6b7280);
	margin-right: 2px;
}

.quoteandcut-secondary-chips__list {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
}

.quoteandcut-secondary-chip {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	padding: 4px 11px;
	border-radius: 999px;
	border: 1px solid var(--quoteandcut-border-strong, #cbd5e1);
	background: var(--quoteandcut-card-bg, #fff);
	color: var(--quoteandcut-text-primary, #1f2937);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.quoteandcut-secondary-chip:hover,
.quoteandcut-secondary-chip:focus {
	border-color: var(--quoteandcut-border-strong, #64748b);
	background: var(--quoteandcut-bg-color, #f1f5f9);
}

.quoteandcut-secondary-chip.is-teaser {
	color: var(--quoteandcut-text-muted, #94a3b8);
	border-style: dashed;
	background: var(--quoteandcut-bg-color, #f8fafc);
}

.quoteandcut-secondary-chip.is-muted {
	color: var(--quoteandcut-text-muted, #9aa3af);
	border-color: var(--quoteandcut-border-color, #e2e8f0);
	background: var(--quoteandcut-bg-color, #f8fafc);
	cursor: help;
}

.quoteandcut-secondary-chip.is-muted[data-secondary-chip="hole_ops"] {
	border-color: var(--quoteandcut-warning-border, #f0c36d);
	background: var(--quoteandcut-warning-soft, #fffbeb);
	color: var(--quoteandcut-warning-text, #92400e);
	cursor: pointer;
}

.quoteandcut-secondary-chip.is-muted[data-secondary-chip="hole_ops"]:hover,
.quoteandcut-secondary-chip.is-muted[data-secondary-chip="hole_ops"]:focus {
	border-color: var(--quoteandcut-warning-color, #d97706);
	background: var(--quoteandcut-warning-soft, #fef3c7);
}

/*
 * The process needs customer input before it can be priced, e.g. confirming
 * hanging holes for powder coating.
 */
.quoteandcut-secondary-chip.is-attention {
	border-color: var(--quoteandcut-warning-border, #f0c36d);
	background: var(--quoteandcut-warning-soft, #fffbeb);
	color: var(--quoteandcut-warning-text, #92400e);
}

.quoteandcut-secondary-chip.is-attention:hover,
.quoteandcut-secondary-chip.is-attention:focus {
	border-color: var(--quoteandcut-warning-color, #d97706);
	background: var(--quoteandcut-warning-soft, #fef3c7);
}

/*
 * Kept neutral because an orange accent (the default) would look like the
 * amber attention state. The accent shows on hover and focus.
 */
.quoteandcut-secondary-chip.is-ready {
	border-color: var(--quoteandcut-border-strong, #8c94a0);
	color: var(--quoteandcut-text-primary, #1f2937);
	background: var(--quoteandcut-card-bg, #fff);
}

.quoteandcut-secondary-chip.is-ready:hover,
.quoteandcut-secondary-chip.is-ready:focus {
	border-color: var(--quoteandcut-accent-ink, var(--quoteandcut-accent-primary, #ff7618));
	color: var(--quoteandcut-accent-ink, var(--quoteandcut-accent-primary, #ff7618));
	background: var(--quoteandcut-accent-soft, color-mix(in srgb, var(--quoteandcut-accent-primary, #ff7618) 10%, #ffffff));
}

.quoteandcut-secondary-chip.is-set {
	border-color: var(--quoteandcut-success-color, #38a169);
	color: var(--quoteandcut-success-text, var(--quoteandcut-success-color, #38a169));
	background: var(--quoteandcut-success-soft, color-mix(in srgb, var(--quoteandcut-success-color, #38a169) 10%, #ffffff));
}

.quoteandcut-secondary-chip.is-set:hover,
.quoteandcut-secondary-chip.is-set:focus {
	background: var(--quoteandcut-success-soft, #dcfce7);
}

.quoteandcut-step-review-slot:empty {
	display: none;
}

.quoteandcut-step-review-slot .quoteandcut-step-card {
	margin: 8px 0 0;
}

/* Studio form style. */

.quoteandcut-form-style-studio .quoteandcut-secondary-chips {
	margin-top: 0;
}

.quoteandcut-form-style-studio .quoteandcut-secondary-chips__label {
	color: var(--quoteandcut-text-muted, #687281);
	font-size: var(--quoteandcut-text-xs, 0.75rem);
	font-weight: var(--quoteandcut-weight-semibold, 600);
	letter-spacing: 0;
	text-transform: none;
}

.quoteandcut-form-style-studio .quoteandcut-secondary-chip {
	min-height: 28px;
}

/*
 * Hidden inputs read by the collector and core reset logic. Hidden visually
 * rather than with display, because each card's display signals availability.
 */
.quoteandcut-secondary-processes--transport {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	pointer-events: none;
}

/* Swatch dot for the chosen powder colour. */
.quoteandcut-secondary-chip.has-swatch {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.quoteandcut-secondary-chip__swatch {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	border: 1px solid rgba(15, 23, 42, 0.25);
	border-radius: 50%;
}