From e186d4f93053e80027827f81ee68dd39adca669a Mon Sep 17 00:00:00 2001
From: Azmat Ali <azmat.ali@qualyval.com>
Date: Mon, 9 Mar 2026 15:21:38 +0530
Subject: [PATCH] update(css): added btn-spinner, refactored btn-primary class

---
 assets/css/cart.css     | 20 --------------------
 assets/css/checkout.css |  1 +
 assets/css/styles.css   | 31 +++++++++++++++++++++++++++----
 3 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/assets/css/cart.css b/assets/css/cart.css
index c5e1f82..0be40f2 100644
--- a/assets/css/cart.css
+++ b/assets/css/cart.css
@@ -396,21 +396,9 @@ body {
 
 /* CTA buttons */
 .btn-checkout {
-	display: flex;
-	align-items: center;
 	justify-content: center;
-	gap: var(--space-2);
-	background: var(--blue);
-	color: white;
-	border: none;
-	border-radius: var(--radius-md);
-	padding: var(--space-4) var(--space-6);
 	font-size: var(--text-xl);
-	font-weight: 700;
-	cursor: pointer;
-	font-family: inherit;
 	width: 100%;
-	transition: background 0.2s, transform 0.15s;
 }
 
 .btn-checkout:hover {
@@ -418,10 +406,6 @@ body {
 	transform: translateY(-0.0625rem);
 }
 
-.btn-checkout::after {
-	content: "→";
-}
-
 .btn-continue {
 	display: flex;
 	align-items: center;
@@ -445,10 +429,6 @@ body {
 	background: var(--blue-light);
 }
 
-.btn-continue::before {
-	content: "←";
-}
-
 .btn-clear {
 	display: flex;
 	align-items: center;
diff --git a/assets/css/checkout.css b/assets/css/checkout.css
index 0afd221..2a775a1 100644
--- a/assets/css/checkout.css
+++ b/assets/css/checkout.css
@@ -112,6 +112,7 @@ body {
 }
 
 .checkout-continue {
+	justify-content: center;
 	margin-top: var(--space-4);
 }
 
diff --git a/assets/css/styles.css b/assets/css/styles.css
index 61abc98..4effd4b 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -556,12 +556,12 @@ nav {
 	gap: var(--space-2);
 	background: var(--blue);
 	color: white;
-	padding: var(--space-4) var(--space-6);
+	border: none;
 	border-radius: var(--radius-md);
+	padding: var(--space-4) var(--space-6);
 	font-size: var(--text-md);
 	font-weight: 700;
 	transition: all 0.2s;
-	border: none;
 	cursor: pointer;
 	font-family: inherit;
 }
@@ -571,8 +571,31 @@ nav {
 	transform: translateY(-0.0625rem);
 }
 
-.btn-primary::after {
-	content: "→";
+.btn-spinner {
+	display: none;
+	width: 18px;
+	height: 18px;
+	border: 2px solid rgba(255, 255, 255, 0.4);
+	border-top: 2px solid white;
+	border-radius: 50%;
+	animation: spin 0.7s linear infinite;
+}
+
+.btn-primary.loading .btn-text {
+	display: none;
+}
+
+.btn-primary.loading .btn-spinner {
+	display: inline-block;
+}
+
+@keyframes spin {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
 }
 
 /* HERO CTA PREMIUM EFFECT */