style(spa): display total price in accordion header instead of submit button

apps/spa/src/pages/CheckoutPage.tsx

@@ -358,13 +358,9 @@ export default function CheckoutPage() {
               <button 
                 type="submit"
                 disabled={loading || loadingSettings}
-                className="w-full py-4 px-6 bg-spa-forest text-white font-bold rounded-xl tracking-widest uppercase hover:bg-spa-stone hover:shadow-lg transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed flex lg:hidden justify-between items-center mt-4"
+                className="w-full py-4 bg-spa-forest text-white font-bold rounded-xl tracking-widest uppercase hover:bg-spa-stone hover:shadow-lg transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed flex lg:hidden justify-center items-center gap-2 mt-4"
               >
-                <div className="flex items-center gap-2">
+                {loading ? <Loader2 className="w-5 h-5 animate-spin" /> : 'Confirm Order'}
-                  {loading && <Loader2 className="w-5 h-5 animate-spin" />}
-                  <span>Confirm Order</span>
-                </div>
-                <span className="text-sm border-l border-white/20 pl-4">{formatPrice(total)}</span>
               </button>
             </form>
           </div>
@@ -378,9 +374,12 @@ export default function CheckoutPage() {
                 className={`w-full flex items-center justify-between text-xl font-bold uppercase tracking-widest text-spa-forest pb-4 ${isSummaryExpanded ? 'border-b border-spa-stone/10 mb-6' : ''} lg:pointer-events-none lg:border-b lg:border-spa-stone/10 lg:mb-6 transition-all`}
               >
                 <span>Order Summary</span>
-                <span className="lg:hidden text-spa-stone">
+                <span className="lg:hidden flex items-center gap-3">
+                  {!isSummaryExpanded && <span className="text-sm font-bold text-rose-500 normal-case">{formatPrice(total)}</span>}
+                  <span className="text-spa-stone">
                     <svg className={`w-5 h-5 transform transition-transform ${isSummaryExpanded ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path></svg>
                   </span>
+                </span>
               </button>
               
               <div className={`overflow-hidden transition-all duration-300 ${isSummaryExpanded ? 'max-h-[2000px] opacity-100' : 'max-h-0 opacity-0 lg:max-h-[2000px] lg:opacity-100'}`}>
@@ -524,13 +523,9 @@ export default function CheckoutPage() {
                 form="checkout-form"
                 type="submit"
                 disabled={loading || loadingSettings}
-                className="w-full mt-8 py-4 px-6 bg-spa-forest text-white font-bold rounded-xl tracking-widest uppercase hover:bg-spa-stone hover:shadow-lg transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed hidden lg:flex justify-between items-center"
+                className="w-full mt-8 py-4 bg-spa-forest text-white font-bold rounded-xl tracking-widest uppercase hover:bg-spa-stone hover:shadow-lg transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed hidden lg:flex justify-center items-center gap-2"
               >
-                <div className="flex items-center gap-2">
+                {loading ? <Loader2 className="w-5 h-5 animate-spin" /> : 'Confirm Order'}
-                  {loading && <Loader2 className="w-5 h-5 animate-spin" />}
-                  <span>Confirm Order</span>
-                </div>
-                <span className="text-sm border-l border-white/20 pl-4">{formatPrice(total)}</span>
               </button>
             </div>
           </div>