/*
 * Beyond School Toolkit — Supply List Builder frontend styles.
 *
 * Same design language and accessibility approach as
 * budget-calculator.css / classroom-estimator.css (see those files'
 * own docblocks for the full reasoning) — mobile-first, visible focus
 * states, color-independent error styling, 44px minimum touch
 * targets, motion respecting prefers-reduced-motion. This tool's own
 * additions are the step progress indicator and the step-transition
 * treatment, which the other two tools don't need.
 */

.bs-supply-list-builder {
	--bs-slb-color-text: #1d2327;
	--bs-slb-color-muted: #50575e;
	--bs-slb-color-border: #c3c4c7;
	--bs-slb-color-primary: #2c5f7c;
	--bs-slb-color-primary-hover: #1f4759;
	--bs-slb-color-error: #a52222;
	--bs-slb-color-error-bg: #fbeaea;
	--bs-slb-color-surface: #ffffff;
	--bs-slb-color-surface-alt: #f6f7f7;
	--bs-slb-color-success: #1e6b3c;
	--bs-slb-radius: 6px;
	--bs-slb-spacing: 1rem;

	box-sizing: border-box;
	max-width: 640px;
	margin: 0 auto;
	color: var( --bs-slb-color-text );
	font-size: 1rem;
	line-height: 1.5;
}

.bs-supply-list-builder *,
.bs-supply-list-builder *::before,
.bs-supply-list-builder *::after {
	box-sizing: inherit;
}

.bs-slb__widget-title {
	margin: 0 0 0.5rem;
}

.bs-slb__widget-description {
	margin: 0 0 var( --bs-slb-spacing );
	color: var( --bs-slb-color-muted );
}

/* --- Progress indicator: a horizontally-scrolling row on narrow
   screens (mobile-first), a full row once there's room. --- */

.bs-slb__progress {
	margin-bottom: 1.25rem;
	overflow-x: auto;
}

.bs-slb__progress ol {
	display: flex;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: max-content;
}

.bs-slb__progress-item {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.6rem;
	border-radius: 999px;
	background: var( --bs-slb-color-surface-alt );
	color: var( --bs-slb-color-muted );
	font-size: 0.8125rem;
	white-space: nowrap;
}

.bs-slb__progress-item.is-complete {
	background: #e4efe8;
	color: var( --bs-slb-color-success );
}

.bs-slb__progress-item.is-current {
	background: var( --bs-slb-color-primary );
	color: #ffffff;
	font-weight: 600;
}

.bs-slb__progress-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.12 );
	font-size: 0.6875rem;
}

.bs-slb__progress-item.is-current .bs-slb__progress-number {
	background: rgba( 255, 255, 255, 0.28 );
}

/* Labels are hidden on the narrowest screens (mobile-first: numbers
   alone are enough there) and shown once there's room — but always
   present in the DOM (via the JS-untouched aria-current attribute and
   the always-rendered <span>, never display:none in a way that would
   remove them from an accessibility tree) for a screen reader. */
.bs-slb__progress-label {
	display: none;
}

@media ( min-width: 480px ) {
	.bs-slb__progress-label {
		display: inline;
	}
}

/* --- Status / error regions --- */

.bs-slb__status {
	min-height: 1.25rem;
	margin-bottom: 0.5rem;
	color: var( --bs-slb-color-muted );
	font-size: 0.9375rem;
}

.bs-slb__error {
	margin: 0.35rem 0 0;
	padding: 0.5rem 0.75rem;
	border-radius: var( --bs-slb-radius );
	background: var( --bs-slb-color-error-bg );
	color: var( --bs-slb-color-error );
	font-size: 0.9375rem;
}

/* Never rely on color alone: every error also gets a leading symbol. */
.bs-slb__error::before {
	content: '\26A0 ';
}

/* --- Steps --- */

.bs-slb__step-heading {
	margin: 0 0 0.75rem;
	font-size: 1.125rem;
}

/* Focusable via tabindex="-1" (set in the template) so JS can move
   keyboard/screen-reader focus here on every step change, without
   this being part of the normal Tab order otherwise. */
.bs-slb__step-heading:focus {
	outline: 2px solid var( --bs-slb-color-primary );
	outline-offset: 2px;
}

.bs-slb__step-hint {
	margin: 0 0 0.75rem;
	color: var( --bs-slb-color-muted );
	font-size: 0.9375rem;
}

.bs-slb__field {
	margin-bottom: var( --bs-slb-spacing );
}

.bs-slb__label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
}

.bs-slb__select,
.bs-slb__input,
.bs-slb__quantity-input {
	width: 100%;
	min-height: 44px;
	padding: 0.5rem 0.65rem;
	border: 1px solid var( --bs-slb-color-border );
	border-radius: var( --bs-slb-radius );
	background: var( --bs-slb-color-surface );
	color: var( --bs-slb-color-text );
	font-size: 1rem;
}

.bs-slb__fieldset {
	margin: 0 0 var( --bs-slb-spacing );
	padding: 0;
	border: 0;
}

.bs-slb__legend {
	padding: 0;
	margin-bottom: 0.5rem;
	font-weight: 600;
}

.bs-slb__radio-list,
.bs-slb__checkbox-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.bs-slb__radio,
.bs-slb__checkbox {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.4rem 0.6rem;
	border: 1px solid var( --bs-slb-color-border );
	border-radius: var( --bs-slb-radius );
	cursor: pointer;
}

.bs-slb__radio input,
.bs-slb__checkbox input {
	width: 1.15rem;
	height: 1.15rem;
	flex-shrink: 0;
}

/* --- Recommended products (Step 4) --- */

.bs-slb__product-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.bs-slb__product {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	min-height: 44px;
	padding: 0.5rem 0.65rem;
	border: 1px solid var( --bs-slb-color-border );
	border-radius: var( --bs-slb-radius );
	cursor: pointer;
}

.bs-slb__product input {
	width: 1.15rem;
	height: 1.15rem;
	flex-shrink: 0;
}

.bs-slb__product-info {
	display: flex;
	flex-direction: column;
}

.bs-slb__product-title {
	font-weight: 600;
}

.bs-slb__product-price {
	color: var( --bs-slb-color-muted );
	font-size: 0.875rem;
}

/* --- Quantities (Step 5) --- */

.bs-slb__quantity-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.6rem;
}

.bs-slb__quantity-label {
	flex: 1;
}

.bs-slb__quantity-input {
	width: 5rem;
}

/* --- Cost summary (Step 6) / Compare (Step 8) --- */

.bs-slb__cost-items,
.bs-slb__compare-list {
	margin: 0 0 0.75rem;
	padding: 0;
	list-style: none;
}

.bs-slb__cost-items li,
.bs-slb__compare-list li {
	padding: 0.4rem 0;
	border-bottom: 1px solid var( --bs-slb-color-border );
}

.bs-slb__total {
	font-size: 1.0625rem;
	font-weight: 600;
}

/* --- Navigation buttons --- */

.bs-slb__nav-buttons {
	display: flex;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

.bs-slb__back,
.bs-slb__next,
.bs-slb__finish {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.6rem 1.25rem;
	border-radius: var( --bs-slb-radius );
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}

.bs-slb__back {
	background: var( --bs-slb-color-surface-alt );
	color: var( --bs-slb-color-text );
	border: 1px solid var( --bs-slb-color-border );
}

.bs-slb__next,
.bs-slb__finish {
	margin-left: auto;
	background: var( --bs-slb-color-primary );
	color: #ffffff;
	border: 1px solid var( --bs-slb-color-primary );
}

.bs-slb__next:hover,
.bs-slb__finish:hover {
	background: var( --bs-slb-color-primary-hover );
}

.bs-slb__back:disabled,
.bs-slb__next:disabled,
.bs-slb__finish:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.bs-slb__spinner {
	width: 1rem;
	height: 1rem;
	border: 2px solid rgba( 255, 255, 255, 0.4 );
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: bs-slb-spin 0.7s linear infinite;
}

@keyframes bs-slb-spin {
	to {
		transform: rotate( 360deg );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.bs-slb__spinner {
		animation-duration: 1.6s;
	}
}

/* --- Keyboard focus: every interactive element gets a visible ring,
   never relying on the browser default alone (some browsers suppress
   it for mouse users but MUST still show it for keyboard users —
   :focus-visible is the correct, modern way to express exactly that
   distinction). --- */

.bs-slb__select:focus-visible,
.bs-slb__input:focus-visible,
.bs-slb__quantity-input:focus-visible,
.bs-slb__radio input:focus-visible,
.bs-slb__checkbox input:focus-visible,
.bs-slb__product input:focus-visible,
.bs-slb__back:focus-visible,
.bs-slb__next:focus-visible,
.bs-slb__finish:focus-visible {
	outline: 2px solid var( --bs-slb-color-primary );
	outline-offset: 2px;
}

/* --- Wider viewports: a little more breathing room, buttons stay
   left-aligned rather than stretching full width. --- */
@media ( min-width: 640px ) {
	.bs-supply-list-builder {
		font-size: 1.0625rem;
	}
}