ui: swap Cancel and Payment button layout in Next Appointment card

Cancel is now half-width (inline with Edit/Extend), Payment is full-width spanning bottom row

frontend/src/lib/components/today/CurrentAppointment.svelte

@@ -370,22 +370,6 @@
 							</svg>
 							Edit
 						</Button>
-						<Button size="sm" onclick={handleTakePayment} class="bg-green-600 hover:bg-green-700">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="mr-2 h-4 w-4"
-								viewBox="0 0 20 20"
-								fill="currentColor"
-							>
-								<path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z" />
-								<path
-									fill-rule="evenodd"
-									d="M18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z"
-									clip-rule="evenodd"
-								/>
-							</svg>
-							Payment
-						</Button>
 						{#if isInProgress}
 							<Button size="sm" variant="outline" onclick={handleExtend}>
 								<svg
@@ -403,7 +387,7 @@
 								Extend
 							</Button>
 						{/if}
-						<Button size="sm" variant="destructive" onclick={handleCancel} class="col-span-2">
+						<Button size="sm" variant="destructive" onclick={handleCancel}>
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
 								class="mr-2 h-4 w-4"
@@ -418,6 +402,22 @@
 							</svg>
 							Cancel
 						</Button>
+						<Button size="sm" onclick={handleTakePayment} class="col-span-2 bg-green-600 hover:bg-green-700">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="mr-2 h-4 w-4"
+								viewBox="0 0 20 20"
+								fill="currentColor"
+							>
+								<path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z" />
+								<path
+									fill-rule="evenodd"
+									d="M18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z"
+									clip-rule="evenodd"
+								/>
+							</svg>
+							Payment
+						</Button>
 					</div>
 				</div>
 			</div>