style postcode form

assets/postcode_modal.css

@@ -15,6 +15,9 @@
         transition:
             opacity 0.3s ease,
             display 0.3s allow-discrete;
+        @starting-style {
+            opacity: 0;
+        }
     }
 
     h2 {
@@ -40,6 +43,7 @@
         caret-color: var(--wp--preset--color--vivid-red);
         background: hsl(0 1 80);
         border: none;
+        text-transform: uppercase;
 
         &:focus,
         &:valid,
@@ -50,14 +54,17 @@
         }
     }
 
-    button {
+    #postcode_modal_submit {
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr;
+        place-items: center;
         font-size: 1.2rem;
         font-weight: 700;
         color: hsl(233 100 100);
         padding: 0.4rem 1rem;
         background: var(--wp--preset--color--vivid-red);
         border: 1px var(--wp--preset--color--vivid-red) solid;
-        margin: 0 0 0 0.3rem;
         transition: 0.2s all linear;
         padding: 0.2em 2.5em;
         &:hover {
@@ -65,16 +72,23 @@
             background: hsl(344 98 100);
             cursor: pointer;
         }
+
+        &:hover > .btn_loader > svg > circle {
+            fill: var(--wp--preset--color--vivid-red);
         }
 
+        .btn_loader,
+        .btn_text {
+            transition: 0.2s opacity linear;
+            grid-row: 1 / -1;
+            grid-column: 1 / -1;
+        }
+    }
     .form_fields {
         display: flex;
-        justify-content: space-between;
+        justify-content: center;
         align-items: center;
-        div {
+        gap: 0.5rem;
-            display: flex;
-            gap: 1.5rem;
-        }
     }
 
     &::backdrop {
@@ -87,3 +101,27 @@
         color: var(--wp--preset--color--vivid-red);
     } /* HTML: <div class="loader"></div> */
 }
+
+/* HTML: <div class="loader"></div> */
+.btn_loader {
+    opacity: 0;
+    svg {
+        height: 0.4rem;
+    }
+    circle {
+        fill: white;
+        transition: 0.2s fill linear;
+        animation: loader-pulse 1.5s ease-in-out infinite;
+        animation-delay: calc((var(--i, 0)) * 0.2s);
+    }
+}
+
+@keyframes loader-pulse {
+    0%,
+    100% {
+        opacity: 0.3; /* Dim state */
+    }
+    50% {
+        opacity: 1; /* Bright state */
+    }
+}