/**
 * Sweet Prints Sheet Builder — Styles
 * Mobile-first, BEM-ish naming with .spsb- prefix.
 */

/* ── Reset / base ─────────────────────────────────────────────────────────── */

.spsb-builder *,
.spsb-builder *::before,
.spsb-builder *::after {
	box-sizing: border-box;
}

.spsb-builder {
	max-width: 860px;
	margin: 0 auto;
	padding: 1rem;
	font-family: inherit;
	color: #333;
}

/* ── Sections ────────────────────────────────────────────────────────────── */

.spsb-section {
	margin-bottom: 2.5rem;
}

.spsb-section__title {
	font-size: 1.2rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
	color: #222;
}

.spsb-section__hint {
	font-size: 0.9rem;
	color: #666;
	margin-bottom: 1rem;
}

/* ── Size cards ──────────────────────────────────────────────────────────── */

.spsb-size-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.spsb-size-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	padding: 1rem 1.5rem;
	border: 2px solid #ddd;
	border-radius: 8px;
	cursor: pointer;
	min-width: 120px;
	text-align: center;
	transition: border-color 0.15s, background 0.15s;
	user-select: none;
}

.spsb-size-card input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.spsb-size-card:hover,
.spsb-size-card:focus-within {
	border-color: #7BBFC2;
}

.spsb-size-card.is-selected {
	border-color: #7BBFC2;
	background: #EAF6FF;
}

.spsb-size-card__icon {
	font-size: 0.6rem;
	color: #7BBFC2;
}

.spsb-size-card__name {
	font-weight: 700;
	font-size: 1rem;
}

.spsb-size-card__detail {
	font-size: 0.8rem;
	color: #666;
}

/* ── Search ──────────────────────────────────────────────────────────────── */

.spsb-search-wrap {
	position: relative;
	max-width: 480px;
}

.spsb-search-input {
	width: 100%;
	padding: 0.6rem 2.5rem 0.6rem 0.75rem;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 1rem;
	outline: none;
	transition: border-color 0.15s;
}

.spsb-search-input:focus {
	border-color: #7BBFC2;
	box-shadow: 0 0 0 3px rgba(5, 96, 107, 0.15);
}

.spsb-search-spinner {
	position: absolute;
	right: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	border: 2px solid #ddd;
	border-top-color: #7BBFC2;
	border-radius: 50%;
	animation: spsb-spin 0.7s linear infinite;
}

@keyframes spsb-spin {
	to { transform: translateY(-50%) rotate(360deg); }
}

.spsb-search-results {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1rem;
}

.spsb-no-results {
	color: #888;
	font-size: 0.9rem;
}

/* ── Result cards ────────────────────────────────────────────────────────── */

.spsb-result-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	width: 130px;
	padding: 0.5rem;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	background: #fff;
	text-align: center;
}

.spsb-result-card__img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 4px;
	background: #f5f5f5;
}

.spsb-result-card__name {
	font-size: 0.78rem;
	line-height: 1.3;
	word-break: break-word;
	max-height: 3rem;
	overflow: hidden;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.spsb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.45rem 1rem;
	border: none;
	border-radius: 5px;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, opacity 0.15s;
}

.spsb-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.spsb-btn--add {
	background: #FF9AA2;
	color: #fff;
	width: 100%;
	font-size: 0.8rem;
	padding: 0.35rem 0.5rem;
}

.spsb-btn--add:hover:not(:disabled) {
	background: #7BBFC2;
}

.spsb-btn--primary {
	background: #FF9AA2;
	color: #fff;
	font-size: 1.05rem;
	padding: 0.75rem 2rem;
	border-radius: 6px;
}

.spsb-btn--primary:hover:not(:disabled) {
	background: #7BBFC2;
}

/* ── Sheet panels ────────────────────────────────────────────────────────── */

.spsb-sheets-container {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.spsb-sheet-panel {
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
}

.spsb-sheet-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.6rem 1rem;
	background: #EAF6FF;
	border-bottom: 1px solid #A8DADC;
}

.spsb-sheet-title {
	font-weight: 700;
	font-size: 0.95rem;
}

.spsb-sheet-type {
	font-size: 0.75rem;
	padding: 0.15rem 0.5rem;
	border-radius: 10px;
	font-weight: 600;
}

.spsb-sheet-type--single {
	background: #d4efdf;
	color: #196f3d;
}

.spsb-sheet-type--mix {
	background: #fde8d8;
	color: #a04000;
}

.spsb-sheet-slots {
	margin-left: auto;
	font-size: 0.85rem;
	color: #666;
}

/* Progress bar */
.spsb-progress-bar {
	height: 6px;
	background: #e0e0e0;
}

.spsb-progress-bar__fill {
	height: 100%;
	background: #FF9AA2;
	transition: width 0.25s ease;
}

/* ── Design rows ─────────────────────────────────────────────────────────── */

.spsb-designs-list {
	padding: 0.5rem 0;
}

.spsb-design-row {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0.6rem 1rem;
	border-bottom: 1px solid #f0f0f0;
}

.spsb-design-row:last-child {
	border-bottom: none;
}

.spsb-design-row__thumb-wrap {
	flex-shrink: 0;
}

.spsb-design-row__thumb {
	width: 50px;
	height: 50px;
	object-fit: cover;
	border-radius: 4px;
	background: #f5f5f5;
}

.spsb-design-row__info {
	flex: 1;
	min-width: 100px;
}

.spsb-design-row__name {
	font-size: 0.9rem;
	font-weight: 600;
	display: block;
}

/* Qty stepper */
.spsb-qty-stepper {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin-left: auto;
}

.spsb-qty-btn {
	width: 28px;
	height: 28px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #f5f5f5;
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background 0.12s;
}

.spsb-qty-btn:hover:not(:disabled) {
	background: #e0e0e0;
}

.spsb-qty-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.spsb-qty-value {
	min-width: 1.8rem;
	text-align: center;
	font-weight: 700;
}

/* Remove button */
.spsb-design-row__remove {
	background: none;
	border: none;
	color: #c0392b;
	cursor: pointer;
	font-size: 1rem;
	padding: 0.25rem;
	line-height: 1;
	border-radius: 4px;
	transition: background 0.12s;
	flex-shrink: 0;
}

.spsb-design-row__remove:hover {
	background: #fde8e6;
}

/* Text mod accordion */
.spsb-text-mod-wrap {
	width: 100%;
	padding-top: 0.25rem;
}

.spsb-text-mod-fields {
	margin-top: 0.5rem;
	padding: 0.75rem;
	background: #fafafa;
	border-radius: 6px;
	border: 1px solid #e0e0e0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* HF6.1.2.1.3 — `display: flex` above beats the UA `[hidden]` default of
   `display: none`, so the JS toggle (which adds/removes the [hidden] attr
   on this div based on the "Modify or add text" checkbox) had no visible
   effect — text inputs always rendered. Same root cause as HF3.2.3 for
   the category pill cloud. Force-hide here. */
.spsb-text-mod-fields[hidden] {
	display: none !important;
}

.spsb-text-input {
	width: 100%;
	padding: 0.5rem 0.75rem;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 0.9rem;
}

.spsb-textarea {
	width: 100%;
	padding: 0.5rem 0.75rem;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 0.9rem;
	resize: vertical;
}

.spsb-proof-warning {
	color: #e67e22;
	font-size: 0.82rem;
}

/* HF6.1.2.30 — email-approval flag for the per-design "Modify or add text".
   Mirrors .spv-notice--warning on the catalogue / custom product templates. */
.spsb-email-proof-label {
	margin-top: 0.25rem;
}

.spsb-email-warning {
	margin: 0.15rem 0 0;
	padding: 0.5rem 0.65rem;
	font-size: 0.82rem;
	line-height: 1.4;
	color: #8a5a00;
	background: rgba( 255, 154, 162, 0.15 );
	border-left: 4px solid #FF9AA2;
	border-radius: 4px;
}

/* Parent .spsb-text-mod-fields is display:flex, but this <p> isn't a flex
   container; still, force-hide for consistency with the other [hidden] toggles. */
.spsb-email-warning[hidden] {
	display: none !important;
}

/* ── Checkboxes ──────────────────────────────────────────────────────────── */

.spsb-checkbox-label {
	display: inline-flex;
	align-items: flex-start;
	gap: 0.4rem;
	cursor: pointer;
	font-size: 0.9rem;
}

.spsb-checkbox {
	margin-top: 2px;
	flex-shrink: 0;
	accent-color: #7BBFC2;
}

.spsb-price-tag {
	color: #7BBFC2;
	font-weight: 600;
}

/* ── Options / summary ───────────────────────────────────────────────────── */

.spsb-option-row {
	margin-bottom: 1rem;
}

.spsb-precut-price-hint {
	color: #888;
	font-size: 0.85rem;
}

.spsb-price-breakdown {
	margin: 1rem 0;
}

.spsb-sheet-price-row {
	padding: 0.75rem;
	border: 1px solid #e8e8e8;
	border-radius: 6px;
	margin-bottom: 0.75rem;
	background: #fafafa;
	font-size: 0.9rem;
}

.spsb-price-list {
	list-style: none;
	padding: 0;
	margin: 0.4rem 0 0 0;
}

.spsb-price-list li {
	padding: 0.15rem 0;
	color: #555;
}

.spsb-price-list__subtotal {
	border-top: 1px solid #e0e0e0;
	margin-top: 0.3rem;
	padding-top: 0.3rem;
	color: #222;
}

.spsb-total-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 0;
	border-top: 2px solid #A8DADC;
	font-size: 1.15rem;
	font-weight: 700;
}

.spsb-grand-total {
	color: #7BBFC2;
	font-size: 1.4rem;
}

/* ── Add to cart / feedback ──────────────────────────────────────────────── */

.spsb-section--cta {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	align-items: flex-start;
}

.spsb-cart-feedback {
	font-size: 0.95rem;
	padding: 0.6rem 0.9rem;
	border-radius: 6px;
}

.spsb-cart-feedback--success {
	background: #d4efdf;
	color: #196f3d;
}

.spsb-cart-feedback--error {
	background: #fde8e6;
	color: #c0392b;
	border: 1px solid #f5c6c4;
	border-left: 4px solid #c0392b;
	padding: 0.85rem 1rem;
	font-size: 0.95rem;
	line-height: 1.5;
	animation: spsbErrorFadeIn 0.25s ease;
}

@keyframes spsbErrorFadeIn {
	from { opacity: 0; transform: translateY( -4px ); }
	to   { opacity: 1; transform: translateY( 0 ); }
}

/* ── Empty state ─────────────────────────────────────────────────────────── */

.spsb-sheets-empty p {
	color: #888;
	font-size: 0.9rem;
}

/* ── Overflow hint ───────────────────────────────────────────────────────── */

.spsb-overflow-hint {
	background: #fff9e6;
	border: 1px solid #f7dc6f;
	border-radius: 6px;
	padding: 0.6rem 1rem;
	font-size: 0.9rem;
	color: #7d6608;
	margin-bottom: 1rem;
}

/* ── Browse header ───────────────────────────────────────────────────────── */

.spsb-browse-header {
	margin-bottom: 0.5rem;
}

.spsb-browse-header__label {
	font-size: 0.9rem;
	font-weight: 600;
	color: #555;
}

/* ── Category pills ──────────────────────────────────────────────────────── */

.spsb-category-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
}

/* HF3.2.3 — explicit [hidden] override. The author rule above (display:flex)
   wins over the UA stylesheet's [hidden]{display:none} so the pill cloud
   would render even when the toggle was collapsed. This rule restores the
   intended hidden behaviour with !important to beat the base display:flex. */
.spsb-category-pills[hidden] {
	display: none !important;
}

.spsb-pills-loading {
	font-size: 0.85rem;
	color: #888;
}

.spsb-category-pill {
	padding: 0.35rem 0.85rem;
	border: 1px solid #A8DADC;
	border-radius: 20px;
	background: #fff;
	color: #7BBFC2;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
	line-height: 1;
}

.spsb-category-pill:hover {
	background: #EAF6FF;
	border-color: #7BBFC2;
}

.spsb-category-pill.is-active {
	background: #FF9AA2;
	border-color: #7BBFC2;
	color: #fff;
}

/* ── Product grid ────────────────────────────────────────────────────────── */

.spsb-product-grid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 0.75rem;
	margin-bottom: 1rem;
}

/* Search results grid shares the same layout */
.spsb-search-results {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 0.75rem;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.spsb-product-card {
	display: flex;
	flex-direction: column;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	cursor: pointer;
	transition: box-shadow 0.15s, transform 0.15s;
}

.spsb-product-card:hover {
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.1 );
	transform: translateY( -2px );
}

.spsb-product-card__img-wrap {
	width: 100%;
	padding-bottom: 100%; /* 1:1 aspect ratio */
	position: relative;
	background: #f5f5f5;
	overflow: hidden;
}

.spsb-product-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.spsb-product-card__name {
	padding: 0.5rem 0.6rem;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.3;
	color: #333;
	/* Clamp to 2 lines */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ── Grid spinner (3-dot bounce) ─────────────────────────────────────────── */

.spsb-grid-spinner {
	display: flex;
	justify-content: center;
	gap: 0.4rem;
	padding: 1.5rem 0;
}

.spsb-grid-spinner__dot {
	width: 10px;
	height: 10px;
	background: #FF9AA2;
	border-radius: 50%;
	animation: spsb-bounce 1.1s ease-in-out infinite both;
}

.spsb-grid-spinner__dot:nth-child(1) { animation-delay: -0.32s; }
.spsb-grid-spinner__dot:nth-child(2) { animation-delay: -0.16s; }
.spsb-grid-spinner__dot:nth-child(3) { animation-delay: 0s; }

@keyframes spsb-bounce {
	0%, 80%, 100% { transform: scale( 0 ); }
	40%           { transform: scale( 1 ); }
}

/* ── Load more ───────────────────────────────────────────────────────────── */

.spsb-load-more-wrap {
	text-align: center;
	padding: 0.5rem 0 1rem;
}

.spsb-btn--outline {
	background: none;
	border: 2px solid #A8DADC;
	color: #7BBFC2;
	padding: 0.5rem 1.5rem;
	border-radius: 5px;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.spsb-btn--outline:hover {
	background: #FF9AA2;
	color: #fff;
}

/* ── Modal ───────────────────────────────────────────────────────────────── */

body.spsb-modal-open {
	overflow: hidden;
}

/* Explicitly suppress display:flex when hidden attribute is present.
 * The HTML [hidden] attribute maps to display:none in the browser's
 * built-in stylesheet, but any CSS class rule with display overrides it
 * due to specificity. This restores the expected hidden-by-default behaviour. */
.spsb-modal[hidden] {
	display: none !important;
}

.spsb-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.spsb-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.55 );
}

.spsb-modal__panel {
	position: relative;
	background: #fff;
	border-radius: 10px;
	width: 100%;
	max-width: 540px;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 8px 32px rgba( 0, 0, 0, 0.2 );
}

.spsb-modal__close {
	position: absolute;
	top: 0.6rem;
	right: 0.75rem;
	background: none;
	border: none;
	font-size: 1.1rem;
	cursor: pointer;
	color: #888;
	line-height: 1;
	padding: 0.25rem;
	z-index: 1;
	border-radius: 4px;
	transition: color 0.12s, background 0.12s;
}

.spsb-modal__close:hover {
	color: #333;
	background: #f0f0f0;
}

.spsb-modal__images {
	display: flex;
	gap: 0.5rem;
	padding: 1rem 1rem 0;
}

.spsb-modal__img {
	flex: 1;
	min-width: 0;
	max-height: 220px;
	object-fit: contain;
	border-radius: 6px;
	background: #f5f5f5;
}

/* Hide second image when src is empty */
.spsb-modal__img:not([src]),
.spsb-modal__img[src=""] {
	display: none;
}

.spsb-modal__body {
	padding: 1rem;
}

.spsb-modal__name {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0 0 1rem;
	padding-right: 1.5rem; /* avoid overlap with close btn */
}

.spsb-modal__qty-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}

.spsb-modal__qty-label {
	font-size: 0.9rem;
	color: #555;
}

.spsb-modal__slots-remaining {
	font-size: 0.85rem;
	color: #888;
}

.spsb-btn--full {
	width: 100%;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media ( min-width: 480px ) {
	.spsb-product-grid,
	.spsb-search-results {
		grid-template-columns: repeat( 3, 1fr );
	}
}

@media ( min-width: 600px ) {
	.spsb-size-cards {
		flex-wrap: nowrap;
	}

	.spsb-size-card {
		flex: 1;
	}

	.spsb-design-row {
		align-items: center;
	}

	.spsb-text-mod-wrap {
		padding-left: calc( 50px + 0.5rem ); /* align with name, past thumb */
	}

	.spsb-modal__img {
		max-height: 260px;
	}
}

@media ( min-width: 700px ) {
	.spsb-product-grid,
	.spsb-search-results {
		grid-template-columns: repeat( 4, 1fr );
	}
}

@media ( min-width: 860px ) {
	.spsb-result-card {
		width: 140px;
	}
}

/* ════════════════════════════════════════════════════════════════════════
   Category dropdown (Step 2) — visible on all viewports (Phase 3 HF3.1.2).
   On desktop the pill cloud is collapsed behind an accordion toggle; the
   dropdown is the always-visible default. On mobile the toggle is hidden.
════════════════════════════════════════════════════════════════════════ */

.spsb-category-select-wrap {
	display: block;
	margin: .5rem 0 1rem;
}


.spsb-category-select {
	width: 100%;
	max-width: 480px;
	padding: .65rem 2.4rem .65rem .85rem;
	border: 1px solid #ccc;
	border-radius: 6px;
	background-color: #fff;
	background-image: url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%237BBFC2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 12px;
	font-size: 1rem;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.spsb-category-select:focus {
	border-color: #7BBFC2;
	box-shadow: 0 0 0 3px rgba(5, 96, 107, 0.15);
	outline: none;
}

/* ════════════════════════════════════════════════════════════════════════
   Mobile-only refinements (≤ 599px)
   - Step 1 size cards: 1-column horizontal-compact layout, all 3 visible.
   - Step 2: hide pill cloud, show <select> dropdown instead.
════════════════════════════════════════════════════════════════════════ */

@media ( max-width: 599px ) {

	/* Step 1 — compact horizontal cards, all 3 fit in one viewport. */
	.spsb-size-cards {
		flex-direction: column;
		gap: .5rem;
	}

	.spsb-size-card {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: .65rem;
		padding: .55rem .85rem;
		min-width: 0;
		min-height: 56px;          /* ≥44px touch target */
		text-align: left;
	}

	.spsb-size-card__icon {
		font-size: .55rem;
		flex: 0 0 auto;
	}

	.spsb-size-card__name {
		font-size: .95rem;
		flex: 0 0 auto;
	}

	.spsb-size-card__detail {
		font-size: .8rem;
		margin-left: auto;          /* push detail to right edge */
		text-align: right;
	}

	/* Step 2 — dropdown is enough on phone; hide accordion toggle + pills. */
	.spsb-pillcloud-toggle {
		display: none !important;
	}

	.spsb-category-pills,
	.spsb-category-pills.is-expanded {
		display: none !important;
	}
}

/* ════════════════════════════════════════════════════════════════════════
   Floating progress indicator (Phase 3.2)
   - Desktop: fixed bottom-right, ~260px wide, soft shadow
   - Mobile:  fixed bottom edge, full-width banner
   - Hidden until Step 1 size selection (.is-visible class added by JS)
════════════════════════════════════════════════════════════════════════ */

.spsb-progress {
	position: fixed;
	z-index: 9990;
	right: 1rem;
	bottom: 1rem;
	width: 260px;
	background: #fff;
	border: 1px solid rgba(123, 191, 194, 0.4);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	overflow: hidden;
	font-size: .85rem;
	transform: translateY(120%);
	opacity: 0;
	transition: transform .25s ease, opacity .25s ease;
	pointer-events: none;
}

.spsb-progress.is-visible {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}

.spsb-progress__inner {
	padding: .75rem .9rem;
}

.spsb-progress__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: .5rem;
	margin-bottom: .35rem;
}

.spsb-progress__label {
	color: #555;
	font-weight: 500;
}

.spsb-progress__value {
	color: #05606B;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.spsb-progress__bar {
	margin-top: .35rem;
	height: 6px;
	background: #EAF6FF;
	border-radius: 999px;
	overflow: hidden;
}

.spsb-progress__fill {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, #A8DADC 0%, #7BBFC2 100%);
	border-radius: 999px;
	transition: width .25s ease, background .25s ease;
}

.spsb-progress__fill.is-complete {
	background: linear-gradient(90deg, #88C9A1 0%, #4FA66B 100%);
}

.spsb-progress__toast {
	background: #4FA66B;
	color: #fff;
	font-weight: 600;
	padding: .5rem .75rem;
	font-size: .8rem;
	text-align: center;
	animation: spsb-toast-in .2s ease;
}

@keyframes spsb-toast-in {
	from { transform: translateY(100%); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}

/* Mobile: full-width banner anchored to bottom edge. */
@media ( max-width: 599px ) {
	.spsb-progress {
		right: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		border-radius: 0;
		border-left: none;
		border-right: none;
		border-bottom: none;
		box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.10);
		font-size: .8rem;
	}

	.spsb-progress__inner {
		padding: .55rem .85rem;
	}

	.spsb-progress__row {
		margin-bottom: .2rem;
	}
}

/* ════════════════════════════════════════════════════════════════════════
   Step 2 help tooltip (HF3.1.1) — expandable inline panel.
   Desktop variant + mobile variant share one toggle button.
════════════════════════════════════════════════════════════════════════ */

/* HF3.2.2 — overrides browser/theme default button bg on click/active. The
   parent theme adds a dark background to <button> elements on :active that
   was making the help-toggle illegible mid-tap. !important is necessary
   because the theme rule itself uses high specificity. */
.spsb-help-toggle,
.spsb-help-toggle:hover,
.spsb-help-toggle:focus,
.spsb-help-toggle:focus-visible,
.spsb-help-toggle:active {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	-webkit-tap-highlight-color: transparent;
}

.spsb-help-toggle {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin: .25rem 0 .85rem;
	padding: .4rem .6rem;
	color: #4A4A4A !important;
	font-size: .95rem;
	cursor: pointer;
	border-radius: 4px;
	transition: color .15s;
}

.spsb-help-toggle:hover {
	color: #05606B !important;
}

.spsb-help-toggle:focus-visible {
	outline: 2px solid #A8DADC;
	outline-offset: 2px;
}

.spsb-help-toggle .spsb-help-label {
	text-decoration: underline;
	text-decoration-color: #7BBFC2;
	text-underline-offset: 3px;
}

.spsb-help-icon {
	font-size: 1.05rem;
	color: #7BBFC2;
}

.spsb-help-arrow {
	font-size: .7rem;
	transition: transform .2s;
}

.spsb-help-toggle[aria-expanded="true"] .spsb-help-arrow {
	transform: rotate(180deg);
}

.spsb-help-content {
	margin: 0 0 1.25rem;
	padding: 1rem 1.15rem;
	background: #f7f8f9;
	border-left: 3px solid #7BBFC2;
	border-radius: 6px;
	font-size: .92rem;
	line-height: 1.55;
}

.spsb-help-content p { margin: 0 0 .65rem; }
.spsb-help-content p:last-child { margin-bottom: 0; }
.spsb-help-content ol { margin: .25rem 0 .75rem 1.25rem; padding: 0; }
.spsb-help-content li { margin-bottom: .35rem; }

/* Show desktop variant by default; mobile variant only ≤599px. */
.spsb-help--mobile  { display: none; }
.spsb-help--desktop { display: block; }

@media ( max-width: 599px ) {
	.spsb-help--desktop { display: none; }
	.spsb-help--mobile  { display: block; }
}

/* ════════════════════════════════════════════════════════════════════════
   Pill-cloud accordion toggle (HF3.1.2) — desktop only, hidden on mobile.
════════════════════════════════════════════════════════════════════════ */

.spsb-pillcloud-toggle {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin: .35rem 0 .65rem;
	padding: .5rem .9rem;
	background: #fff;
	color: #05606B;
	border: 1px solid #7BBFC2;
	border-radius: 999px;
	font-size: .9rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s, color .15s;
}

.spsb-pillcloud-toggle:hover,
.spsb-pillcloud-toggle:focus {
	background: #EAF6FF;
	outline: none;
}

.spsb-pillcloud-toggle__arrow {
	font-size: .7rem;
	transition: transform .2s;
}

.spsb-pillcloud-toggle[aria-expanded="true"] .spsb-pillcloud-toggle__arrow {
	transform: rotate(180deg);
}

/* When expanded, override the [hidden] attribute. */
.spsb-category-pills.is-expanded {
	display: flex !important;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: .5rem;
}

/* ════════════════════════════════════════════════════════════════════════
   Back-to-top coordination (HF3.1.3) — hide while progress banner active.
   The body class .spsb-progress-active is added by spsb-builder.js when the
   floating progress indicator becomes visible (after Step 1 size selection).
════════════════════════════════════════════════════════════════════════ */

body.spsb-progress-active #sp-btt,
body.spsb-progress-active .sp-back-to-top,
body.spsb-progress-active .back-to-top,
body.spsb-progress-active .scroll-to-top,
body.spsb-progress-active .gp-back-to-top {
	display: none !important;
}