@burdenoff/microfe-adaptercloud 2026.614.1 → 2026.625.1

package/dist/adaptercloud/pages/customer/DirectServiceBookingPage.js

@@ -48,6 +48,7 @@ function k() {
 	if (!j) return /* @__PURE__ */ w(n, {
 		title: "Cart Not Found",
 		children: /* @__PURE__ */ w(r, {
+			illustration: "empty-search",
 			icon: /* @__PURE__ */ w(h, { className: "h-12 w-12" }),
 			title: "Service not available",
 			description: "Direct service is not available for this cart.",
@@ -91,10 +92,10 @@ function k() {
 			children: [/* @__PURE__ */ w("button", {
 				type: "button",
 				onClick: () => A(`/customer/carts/${j.id}`),
-				className: "rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground transition-colors",
+				className: "rounded-md p-1 text-text-secondary hover:bg-accent hover:text-text-primary transition-colors",
 				children: /* @__PURE__ */ w(l, { className: "h-5 w-5" })
 			}), /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("span", { children: "Book Direct Service" }), /* @__PURE__ */ w("p", {
-				className: "text-xs font-normal text-muted-foreground",
+				className: "text-xs font-normal text-text-secondary",
 				children: j.name
 			})] })]
 		}),
@@ -107,13 +108,13 @@ function k() {
 					children: [/* @__PURE__ */ T("div", {
 						className: "flex flex-col items-center",
 						children: [/* @__PURE__ */ w("div", {
-							className: t("flex h-8 w-8 items-center justify-center rounded-full text-xs font-medium", r ? "bg-green-500/20 text-green-600 dark:text-green-400" : i ? "bg-foreground text-background" : "bg-muted text-muted-foreground"),
+							className: t("flex h-8 w-8 items-center justify-center rounded-full text-xs font-medium", r ? "bg-status-success-bg-subtle/20 text-status-success-text" : i ? "bg-foreground text-background" : "bg-bg-sunken text-text-secondary"),
 							children: r ? /* @__PURE__ */ w(f, { className: "h-4 w-4" }) : n + 1
 						}), /* @__PURE__ */ w("span", {
-							className: t("mt-1 text-[10px]", i ? "font-medium text-foreground" : "text-muted-foreground"),
+							className: t("mt-1 text-[10px]", i ? "font-medium text-text-primary" : "text-text-secondary"),
 							children: D[e]
 						})]
-					}), n < E.length - 1 && /* @__PURE__ */ w("div", { className: t("mx-2 h-0.5 w-8 sm:w-16", r ? "bg-green-500/30" : "bg-border") })]
+					}), n < E.length - 1 && /* @__PURE__ */ w("div", { className: t("mx-2 h-0.5 w-8 sm:w-16", r ? "bg-status-success-bg-subtle/30" : "bg-border") })]
 				}, e);
 			})
 		}), /* @__PURE__ */ T("div", {
@@ -122,23 +123,23 @@ function k() {
 				className: "lg:col-span-2",
 				children: [
 					M === "location" && /* @__PURE__ */ T("div", {
-						className: "rounded-lg border border-border bg-card p-5",
+						className: "rounded-lg border border-border-seam bg-bg-surface p-5 bg-gloss-card shadow-pop",
 						children: [
 							/* @__PURE__ */ T("h2", {
-								className: "text-base font-semibold text-foreground mb-1 flex items-center gap-2",
+								className: "text-base font-semibold text-text-primary mb-1 flex items-center gap-2",
 								children: [/* @__PURE__ */ w(_, { className: "h-4 w-4" }), "Service Location"]
 							}),
 							/* @__PURE__ */ w("p", {
-								className: "text-xs text-muted-foreground mb-5",
+								className: "text-xs text-text-secondary mb-5",
 								children: "Where should the cart come?"
 							}),
 							/* @__PURE__ */ T("div", {
 								className: "space-y-4",
 								children: [
 									/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ T("label", {
-										className: "block text-sm font-medium text-foreground mb-1.5",
+										className: "block text-sm font-medium text-text-primary mb-1.5",
 										children: ["Your Address ", /* @__PURE__ */ w("span", {
-											className: "text-red-500",
+											className: "text-status-error-text",
 											children: "*"
 										})]
 									}), /* @__PURE__ */ T("div", {
@@ -151,16 +152,16 @@ function k() {
 												...t,
 												address: e.target.value
 											})),
-											className: "flex-1 rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+											className: "flex-1 rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
 										}), /* @__PURE__ */ T("button", {
 											type: "button",
 											onClick: K,
-											className: "flex items-center gap-1.5 rounded-lg border border-border px-3 py-2 text-xs font-medium text-foreground hover:bg-accent transition-colors whitespace-nowrap",
+											className: "flex items-center gap-1.5 rounded-lg border border-border-subtle px-3 py-2 text-xs font-medium text-text-primary hover:bg-accent transition-colors whitespace-nowrap",
 											children: [/* @__PURE__ */ w(v, { className: "h-3.5 w-3.5" }), "Use Current Location"]
 										})]
 									})] }),
 									/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("label", {
-										className: "block text-sm font-medium text-foreground mb-1.5",
+										className: "block text-sm font-medium text-text-primary mb-1.5",
 										children: "Nearby Landmark"
 									}), /* @__PURE__ */ w("input", {
 										type: "text",
@@ -170,10 +171,10 @@ function k() {
 											...t,
 											landmark: e.target.value
 										})),
-										className: "w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+										className: "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
 									})] }),
 									/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("label", {
-										className: "block text-sm font-medium text-foreground mb-1.5",
+										className: "block text-sm font-medium text-text-primary mb-1.5",
 										children: "Instructions for Cart Owner"
 									}), /* @__PURE__ */ w("textarea", {
 										rows: 3,
@@ -183,17 +184,17 @@ function k() {
 											...t,
 											instructions: e.target.value
 										})),
-										className: "w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring resize-none"
+										className: "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] resize-none"
 									})] }),
 									/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ T("label", {
-										className: "block text-sm font-medium text-foreground mb-1.5",
+										className: "block text-sm font-medium text-text-primary mb-1.5",
 										children: ["Phone Number ", /* @__PURE__ */ w("span", {
-											className: "text-red-500",
+											className: "text-status-error-text",
 											children: "*"
 										})]
 									}), /* @__PURE__ */ T("div", {
 										className: "relative",
-										children: [/* @__PURE__ */ w(y, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }), /* @__PURE__ */ w("input", {
+										children: [/* @__PURE__ */ w(y, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary" }), /* @__PURE__ */ w("input", {
 											type: "tel",
 											placeholder: "Enter your phone number",
 											value: I.phoneNumber,
@@ -201,7 +202,7 @@ function k() {
 												...t,
 												phoneNumber: e.target.value
 											})),
-											className: "w-full rounded-lg border border-border bg-card py-2 pl-9 pr-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+											className: "w-full rounded-lg border border-border-subtle bg-bg-surface py-2 pl-9 pr-3 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
 										})]
 									})] })
 								]
@@ -209,23 +210,23 @@ function k() {
 						]
 					}),
 					M === "details" && /* @__PURE__ */ T("div", {
-						className: "rounded-lg border border-border bg-card p-5",
+						className: "rounded-lg border border-border-seam bg-bg-surface p-5 bg-gloss-card shadow-pop",
 						children: [
 							/* @__PURE__ */ T("h2", {
-								className: "text-base font-semibold text-foreground mb-1 flex items-center gap-2",
+								className: "text-base font-semibold text-text-primary mb-1 flex items-center gap-2",
 								children: [/* @__PURE__ */ w(d, { className: "h-4 w-4" }), "Booking Details"]
 							}),
 							/* @__PURE__ */ w("p", {
-								className: "text-xs text-muted-foreground mb-5",
+								className: "text-xs text-text-secondary mb-5",
 								children: "Choose your preferred timing"
 							}),
 							/* @__PURE__ */ T("div", {
 								className: "space-y-4",
 								children: [
 									/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ T("label", {
-										className: "block text-sm font-medium text-foreground mb-1.5",
+										className: "block text-sm font-medium text-text-primary mb-1.5",
 										children: ["Preferred Time Slot ", /* @__PURE__ */ w("span", {
-											className: "text-red-500",
+											className: "text-status-error-text",
 											children: "*"
 										})]
 									}), /* @__PURE__ */ w("div", {
@@ -236,12 +237,12 @@ function k() {
 												...t,
 												preferredTime: e.value
 											})),
-											className: t("rounded-lg border py-2 px-2 text-xs font-medium transition-colors", R.preferredTime === e.value ? "border-foreground bg-accent text-foreground" : "border-border text-muted-foreground hover:bg-accent hover:text-foreground"),
+											className: t("rounded-lg border py-2 px-2 text-xs font-medium transition-colors", R.preferredTime === e.value ? "border-foreground bg-accent text-text-primary" : "border-border-subtle text-text-secondary hover:bg-accent hover:text-text-primary"),
 											children: e.label
 										}, e.value))
 									})] }),
 									/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("label", {
-										className: "block text-sm font-medium text-foreground mb-1.5",
+										className: "block text-sm font-medium text-text-primary mb-1.5",
 										children: "Special Instructions"
 									}), /* @__PURE__ */ w("textarea", {
 										rows: 3,
@@ -251,7 +252,7 @@ function k() {
 											...t,
 											specialInstructions: e.target.value
 										})),
-										className: "w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring resize-none"
+										className: "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] resize-none"
 									})] }),
 									/* @__PURE__ */ T("label", {
 										className: "flex items-center gap-2 cursor-pointer",
@@ -262,9 +263,9 @@ function k() {
 												...t,
 												isUrgent: e.target.checked
 											})),
-											className: "h-4 w-4 rounded border-border"
+											className: "h-4 w-4 rounded border-border-subtle"
 										}), /* @__PURE__ */ w("span", {
-											className: "text-sm text-muted-foreground",
+											className: "text-sm text-text-secondary",
 											children: "This is urgent (additional charges may apply)"
 										})]
 									})
@@ -273,23 +274,23 @@ function k() {
 						]
 					}),
 					M === "payment" && /* @__PURE__ */ T("div", {
-						className: "rounded-lg border border-border bg-card p-5",
+						className: "rounded-lg border border-border-seam bg-bg-surface p-5 bg-gloss-card shadow-pop",
 						children: [
 							/* @__PURE__ */ T("h2", {
-								className: "text-base font-semibold text-foreground mb-1 flex items-center gap-2",
+								className: "text-base font-semibold text-text-primary mb-1 flex items-center gap-2",
 								children: [/* @__PURE__ */ w(m, { className: "h-4 w-4" }), "Advance Payment"]
 							}),
 							/* @__PURE__ */ w("p", {
-								className: "text-xs text-muted-foreground mb-5",
+								className: "text-xs text-text-secondary mb-5",
 								children: "Select your payment method"
 							}),
 							/* @__PURE__ */ T("div", {
 								className: "space-y-4",
 								children: [
 									/* @__PURE__ */ T("div", {
-										className: "flex items-start gap-2 rounded-lg border border-blue-500/20 bg-blue-500/5 p-3",
-										children: [/* @__PURE__ */ w(c, { className: "h-4 w-4 text-blue-600 dark:text-blue-400 shrink-0 mt-0.5" }), /* @__PURE__ */ T("p", {
-											className: "text-xs text-blue-700 dark:text-blue-300",
+										className: "flex items-start gap-2 rounded-lg border border-accent-blue-subtle/20 bg-accent-blue-subtle/5 p-3",
+										children: [/* @__PURE__ */ w(c, { className: "h-4 w-4 text-accent-blue shrink-0 mt-0.5" }), /* @__PURE__ */ T("p", {
+											className: "text-xs text-accent-blue",
 											children: [
 												"You need to pay ",
 												i(100, { minimumFractionDigits: 0 }),
@@ -322,24 +323,24 @@ function k() {
 										].map(({ value: e, label: n, sub: r, Icon: i }) => /* @__PURE__ */ T("button", {
 											type: "button",
 											onClick: () => V(e),
-											className: t("rounded-lg border p-3 text-center transition-colors", B === e ? "border-foreground bg-accent" : "border-border hover:bg-accent"),
+											className: t("rounded-lg border p-3 text-center transition-colors", B === e ? "border-foreground bg-accent" : "border-border-subtle hover:bg-accent"),
 											children: [
-												/* @__PURE__ */ w(i, { className: "mx-auto h-5 w-5 text-muted-foreground mb-1" }),
+												/* @__PURE__ */ w(i, { className: "mx-auto h-5 w-5 text-text-secondary mb-1" }),
 												/* @__PURE__ */ w("p", {
-													className: "text-sm font-medium text-foreground",
+													className: "text-sm font-medium text-text-primary",
 													children: n
 												}),
 												/* @__PURE__ */ w("p", {
-													className: "text-[10px] text-muted-foreground",
+													className: "text-[10px] text-text-secondary",
 													children: r
 												})
 											]
 										}, e))
 									}),
 									/* @__PURE__ */ T("div", {
-										className: "rounded-lg bg-muted p-4",
+										className: "rounded-lg bg-bg-sunken p-4",
 										children: [/* @__PURE__ */ w("h3", {
-											className: "text-sm font-medium text-foreground mb-2",
+											className: "text-sm font-medium text-text-primary mb-2",
 											children: "Payment Summary"
 										}), /* @__PURE__ */ T("div", {
 											className: "space-y-2 text-sm",
@@ -347,34 +348,34 @@ function k() {
 												/* @__PURE__ */ T("div", {
 													className: "flex justify-between",
 													children: [/* @__PURE__ */ w("span", {
-														className: "text-muted-foreground",
+														className: "text-text-secondary",
 														children: "Advance Payment:"
 													}), /* @__PURE__ */ w("span", {
-														className: "text-foreground",
+														className: "text-text-primary",
 														children: i(100, { minimumFractionDigits: 0 })
 													})]
 												}),
 												/* @__PURE__ */ T("div", {
 													className: "flex justify-between",
 													children: [/* @__PURE__ */ w("span", {
-														className: "text-muted-foreground",
+														className: "text-text-secondary",
 														children: "Service Fee:"
 													}), /* @__PURE__ */ w("span", {
-														className: "text-foreground",
+														className: "text-text-primary",
 														children: i(50, { minimumFractionDigits: 0 })
 													})]
 												}),
 												/* @__PURE__ */ T("div", {
-													className: "flex justify-between text-muted-foreground",
+													className: "flex justify-between text-text-secondary",
 													children: [/* @__PURE__ */ w("span", { children: "Balance Payment (at arrival):" }), /* @__PURE__ */ w("span", { children: i(50, { minimumFractionDigits: 0 }) })]
 												}),
 												/* @__PURE__ */ T("div", {
-													className: "flex justify-between border-t border-border pt-2 font-semibold",
+													className: "flex justify-between border-t border-border-subtle pt-2 font-semibold",
 													children: [/* @__PURE__ */ w("span", {
-														className: "text-foreground",
+														className: "text-text-primary",
 														children: "Total Amount:"
 													}), /* @__PURE__ */ w("span", {
-														className: "text-foreground",
+														className: "text-text-primary",
 														children: i(150, { minimumFractionDigits: 0 })
 													})]
 												})
@@ -386,117 +387,117 @@ function k() {
 						]
 					}),
 					M === "confirmation" && H && /* @__PURE__ */ T("div", {
-						className: "rounded-lg border border-border bg-card p-5",
+						className: "rounded-lg border border-border-seam bg-bg-surface p-5 bg-gloss-card shadow-pop",
 						children: [
 							/* @__PURE__ */ T("div", {
 								className: "text-center mb-6",
 								children: [
 									/* @__PURE__ */ w("div", {
-										className: "mx-auto mb-3 flex h-14 w-14 items-center justify-center rounded-full bg-green-500/10",
-										children: /* @__PURE__ */ w(f, { className: "h-7 w-7 text-green-600 dark:text-green-400" })
+										className: "mx-auto mb-3 flex h-14 w-14 items-center justify-center rounded-full bg-status-success-bg-subtle/10",
+										children: /* @__PURE__ */ w(f, { className: "h-7 w-7 text-status-success-text" })
 									}),
 									/* @__PURE__ */ w("h2", {
-										className: "text-lg font-semibold text-foreground mb-1",
+										className: "text-lg font-semibold text-text-primary mb-1",
 										children: "Booking Confirmed!"
 									}),
 									/* @__PURE__ */ w("p", {
-										className: "text-sm text-muted-foreground",
+										className: "text-sm text-text-secondary",
 										children: "Your direct service booking has been confirmed and payment processed."
 									})
 								]
 							}),
 							/* @__PURE__ */ T("div", {
-								className: "rounded-lg bg-muted p-4 mb-4",
+								className: "rounded-lg bg-bg-sunken p-4 mb-4",
 								children: [/* @__PURE__ */ w("h3", {
-									className: "text-sm font-medium text-foreground mb-3",
+									className: "text-sm font-medium text-text-primary mb-3",
 									children: "Booking Details"
 								}), /* @__PURE__ */ T("div", {
 									className: "grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm",
 									children: [
 										/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("span", {
-											className: "text-xs text-muted-foreground",
+											className: "text-xs text-text-secondary",
 											children: "Booking ID"
 										}), /* @__PURE__ */ w("p", {
-											className: "font-mono text-xs text-foreground",
+											className: "font-mono text-xs text-text-primary",
 											children: H.bookingId
 										})] }),
 										/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("span", {
-											className: "text-xs text-muted-foreground",
+											className: "text-xs text-text-secondary",
 											children: "Est. Arrival"
 										}), /* @__PURE__ */ w("p", {
-											className: "text-foreground",
+											className: "text-text-primary",
 											children: new Date(H.estimatedArrival).toLocaleTimeString([], {
 												hour: "2-digit",
 												minute: "2-digit"
 											})
 										})] }),
 										/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("span", {
-											className: "text-xs text-muted-foreground",
+											className: "text-xs text-text-secondary",
 											children: "Location"
 										}), /* @__PURE__ */ w("p", {
-											className: "text-foreground truncate",
+											className: "text-text-primary truncate",
 											children: I.address
 										})] }),
 										/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("span", {
-											className: "text-xs text-muted-foreground",
+											className: "text-xs text-text-secondary",
 											children: "Phone"
 										}), /* @__PURE__ */ w("p", {
-											className: "text-foreground",
+											className: "text-text-primary",
 											children: I.phoneNumber
 										})] })
 									]
 								})]
 							}),
 							/* @__PURE__ */ T("div", {
-								className: "rounded-lg border border-green-500/20 bg-green-500/5 p-4 mb-4",
+								className: "rounded-lg border border-status-success-border/20 bg-status-success-bg-subtle/5 p-4 mb-4",
 								children: [/* @__PURE__ */ T("h3", {
-									className: "text-sm font-medium text-green-600 dark:text-green-400 mb-2 flex items-center gap-2",
+									className: "text-sm font-medium text-status-success-text mb-2 flex items-center gap-2",
 									children: [/* @__PURE__ */ w(f, { className: "h-4 w-4" }), "Payment Processed"]
 								}), /* @__PURE__ */ T("div", {
 									className: "grid grid-cols-2 gap-3 text-sm",
 									children: [
 										/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("span", {
-											className: "text-xs text-muted-foreground",
+											className: "text-xs text-text-secondary",
 											children: "Transaction ID"
 										}), /* @__PURE__ */ w("p", {
-											className: "font-mono text-xs text-foreground",
+											className: "font-mono text-xs text-text-primary",
 											children: H.transactionId
 										})] }),
 										/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("span", {
-											className: "text-xs text-muted-foreground",
+											className: "text-xs text-text-secondary",
 											children: "Advance Paid"
 										}), /* @__PURE__ */ w("p", {
-											className: "font-medium text-foreground",
+											className: "font-medium text-text-primary",
 											children: i(100, { minimumFractionDigits: 0 })
 										})] }),
 										/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("span", {
-											className: "text-xs text-muted-foreground",
+											className: "text-xs text-text-secondary",
 											children: "Method"
 										}), /* @__PURE__ */ w("p", {
-											className: "capitalize text-foreground",
+											className: "capitalize text-text-primary",
 											children: B
 										})] }),
 										/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("span", {
-											className: "text-xs text-muted-foreground",
+											className: "text-xs text-text-secondary",
 											children: "Status"
 										}), /* @__PURE__ */ w("p", {
-											className: "font-medium text-green-600 dark:text-green-400",
+											className: "font-medium text-status-success-text",
 											children: "Paid"
 										})] })
 									]
 								})]
 							}),
 							/* @__PURE__ */ T("div", {
-								className: "rounded-lg border border-blue-500/20 bg-blue-500/5 p-4 mb-6",
+								className: "rounded-lg border border-accent-blue-subtle/20 bg-accent-blue-subtle/5 p-4 mb-6",
 								children: [/* @__PURE__ */ w("h3", {
-									className: "text-sm font-medium text-blue-600 dark:text-blue-400 mb-2",
+									className: "text-sm font-medium text-accent-blue mb-2",
 									children: "Next Steps"
 								}), /* @__PURE__ */ T("div", {
-									className: "space-y-2 text-xs text-blue-700 dark:text-blue-300",
+									className: "space-y-2 text-xs text-accent-blue",
 									children: [
 										/* @__PURE__ */ T("div", {
 											className: "flex items-start gap-2",
-											children: [/* @__PURE__ */ w(f, { className: "h-3.5 w-3.5 text-green-600 mt-0.5 shrink-0" }), /* @__PURE__ */ T("span", { children: [
+											children: [/* @__PURE__ */ w(f, { className: "h-3.5 w-3.5 text-status-success-text mt-0.5 shrink-0" }), /* @__PURE__ */ T("span", { children: [
 												"Payment confirmed -",
 												" ",
 												i(100, { minimumFractionDigits: 0 }),
@@ -536,7 +537,7 @@ function k() {
 								}), /* @__PURE__ */ w("button", {
 									type: "button",
 									onClick: () => A("/customer/carts"),
-									className: "flex-1 rounded-lg border border-border px-4 py-2.5 text-sm font-medium text-foreground hover:bg-accent transition-colors",
+									className: "flex-1 rounded-lg border border-border-subtle px-4 py-2.5 text-sm font-medium text-text-primary hover:bg-accent transition-colors",
 									children: "Browse More"
 								})]
 							})
@@ -548,7 +549,7 @@ function k() {
 							type: "button",
 							onClick: X,
 							disabled: M === "location",
-							className: t("flex items-center gap-2 rounded-lg border border-border px-4 py-2.5 text-sm font-medium text-foreground transition-colors", M === "location" ? "opacity-40 cursor-not-allowed" : "hover:bg-accent"),
+							className: t("flex items-center gap-2 rounded-lg border border-border-subtle px-4 py-2.5 text-sm font-medium text-text-primary transition-colors", M === "location" ? "opacity-40 cursor-not-allowed" : "hover:bg-accent"),
 							children: [/* @__PURE__ */ w(l, { className: "h-4 w-4" }), "Previous"]
 						}), /* @__PURE__ */ w("button", {
 							type: "button",
@@ -562,10 +563,10 @@ function k() {
 			}), /* @__PURE__ */ w("div", {
 				className: "lg:col-span-1",
 				children: /* @__PURE__ */ T("div", {
-					className: "sticky top-6 rounded-lg border border-border bg-card p-5",
+					className: "sticky top-6 rounded-lg border border-border-seam bg-bg-surface p-5 bg-gloss-card shadow-pop",
 					children: [
 						/* @__PURE__ */ w("h3", {
-							className: "text-base font-semibold text-foreground mb-4",
+							className: "text-base font-semibold text-text-primary mb-4",
 							children: "Service Summary"
 						}),
 						/* @__PURE__ */ T("div", {
@@ -575,37 +576,37 @@ function k() {
 								alt: j.name,
 								className: "h-12 w-12 rounded-lg object-cover"
 							}), /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
-								className: "text-sm font-medium text-foreground",
+								className: "text-sm font-medium text-text-primary",
 								children: j.name
 							}), /* @__PURE__ */ w("p", {
-								className: "text-xs text-muted-foreground",
+								className: "text-xs text-text-secondary",
 								children: j.category
 							})] })]
 						}),
 						/* @__PURE__ */ T("div", {
-							className: "space-y-2 text-sm border-t border-border pt-3",
+							className: "space-y-2 text-sm border-t border-border-subtle pt-3",
 							children: [/* @__PURE__ */ T("div", {
 								className: "flex justify-between",
 								children: [/* @__PURE__ */ w("span", {
-									className: "text-muted-foreground",
+									className: "text-text-secondary",
 									children: "Service Fee:"
 								}), /* @__PURE__ */ w("span", {
-									className: "text-foreground",
+									className: "text-text-primary",
 									children: i(50, { minimumFractionDigits: 0 })
 								})]
 							}), /* @__PURE__ */ T("div", {
 								className: "flex justify-between",
 								children: [/* @__PURE__ */ w("span", {
-									className: "text-muted-foreground",
+									className: "text-text-secondary",
 									children: "Advance Payment:"
 								}), /* @__PURE__ */ w("span", {
-									className: "font-medium text-foreground",
+									className: "font-medium text-text-primary",
 									children: i(100, { minimumFractionDigits: 0 })
 								})]
 							})]
 						}),
 						/* @__PURE__ */ T("div", {
-							className: "flex items-center gap-2 mt-3 pt-3 border-t border-border text-green-600 dark:text-green-400",
+							className: "flex items-center gap-2 mt-3 pt-3 border-t border-border-subtle text-status-success-text",
 							children: [/* @__PURE__ */ w(f, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ w("span", {
 								className: "text-xs",
 								children: "Pay remaining amount at cart"