/* =========================================================
   territory-workflow.css
   Styles for the multi-step territory claim workflow that the
   theme's main stylesheet does not already provide (steps bar,
   cart/territory cards, summary aside, chips, layout grids).
   Mirrors the design tokens from the static export stylesheet.
   ========================================================= */

/* ---- Hidden utility ---- */
.is-hidden { display: none !important; }

/* ---- Chips ---- */
.chip {
	display: inline-flex; align-items: center; gap: 0.4rem;
	border: 1px solid var(--color-border, #e6e8ef); border-radius: 9999px;
	background: #fff; padding: 0.4rem 0.85rem; font-size: 0.8rem;
}
.chip-primary { background: rgba(47, 91, 255, 0.1); color: var(--color-primary, #2f5bff); border-color: rgba(47, 91, 255, 0.2); }
.chip-success { background: var(--color-success-bg, #ecfdf5); color: var(--color-success, #16a34a); border-color: rgba(22, 163, 74, 0.25); }
.chip-list { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }

/* ---- Multi-step progress bar ---- */
.steps-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.step-pill { display: flex; flex-direction: column; align-items: center; text-align: center; }
.step-circle {
	width: 2.5rem; height: 2.5rem; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 0.9rem; border: 2px solid var(--color-border, #e6e8ef);
	color: var(--color-muted-fg, #6b7280); background: #fff; transition: all .2s;
}
.step-pill.is-active .step-circle { border-color: var(--color-primary, #2f5bff); color: var(--color-primary, #2f5bff); background: rgba(47, 91, 255, 0.1); }
.step-pill.is-done .step-circle { background: var(--gradient-brand, linear-gradient(135deg, #2f5bff, #ec4899)); color: #fff; border-color: transparent; }
.step-pill .step-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted-fg, #6b7280); margin-top: 0.5rem; }
.step-pill.is-active .step-label,
.step-pill.is-done .step-label { color: var(--color-fg, #0f172a); }

/* ---- Summary aside ---- */
.summary-row { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.4rem 0; font-size: 0.9rem; }
.summary-row .label { color: var(--color-muted-fg, #6b7280); }
.summary-row .value { font-weight: 600; }
.summary-total {
	margin-top: 1.25rem; background: var(--gradient-brand, linear-gradient(135deg, #2f5bff, #ec4899)); color: #fff;
	border-radius: var(--radius, 0.875rem); padding: 1.25rem;
}
.summary-total .total-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.8; }
.summary-total .total-value { font-family: var(--font-display, inherit); font-size: 2rem; font-weight: 800; }

/* ---- Layout with sticky aside ---- */
.sticky-aside { position: relative; }
@media (min-width: 1024px) {
	.sticky-aside { position: sticky; top: 6rem; }
	.layout-with-aside,
	.layout-form-aside { display: grid; grid-template-columns: 1fr 360px; gap: 2.5rem; align-items: start; }
}

/* ---- Territory (cart) cards ---- */
.territory-card { position: relative; }
.territory-card .remove-btn {
	position: absolute; top: 0.75rem; right: 0.75rem;
	width: 1.75rem; height: 1.75rem; border-radius: 0.4rem;
	background: #fff; border: 1px solid var(--color-border, #e6e8ef);
	color: var(--color-muted-fg, #6b7280); display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer;
}
.territory-card .remove-btn:hover { color: var(--color-danger, #dc2626); border-color: var(--color-danger, #dc2626); }

/* ---- Card highlight / status variants (in case the theme lacks them) ---- */
.card-highlight { border-color: rgba(47, 91, 255, 0.4); }
.card-success { border-color: rgba(22, 163, 74, 0.4); }
.card-danger { border-color: rgba(220, 38, 38, 0.3); }
.check-list-2col { display: grid; gap: 0.6rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .check-list-2col { grid-template-columns: 1fr 1fr; } }