From aa4f9c2dc7a4e2f4b223b072723318ab98cf61bd Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Wed, 18 Feb 2026 16:19:22 -0500
Subject: [PATCH] banner styling updates

---
 .../afterpay-modal-banner.vue                 | 31 +++++++++----------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/layouts/coverage-statement/afterpay-modal-banner/afterpay-modal-banner.vue b/src/layouts/coverage-statement/afterpay-modal-banner/afterpay-modal-banner.vue
index 54ecc441..a56de829 100644
--- a/src/layouts/coverage-statement/afterpay-modal-banner/afterpay-modal-banner.vue
+++ b/src/layouts/coverage-statement/afterpay-modal-banner/afterpay-modal-banner.vue
@@ -3,20 +3,20 @@
         <component
             :is="'script'">
             src="https://js.squarecdn.com/square-marketplace.js"
-            async></component>
+            async>
+        </component>
         <div class="afterpay-content">
-            <span class="afterpay-header" v-html="afterpayHeaderCopy"></span>
-            <span class="afterpay-amount">{{ afterpayPaymentAmount }}</span>
-            <span class="afterpay-subheader" v-html="afterpaySubheaderCopy"></span>
+            <span class="afterpay-copy" v-html="afterpayCopy"></span>
+            <span class="afterpay-copy">{{ afterpayPaymentAmount }}</span>
+            <span class="afterpay-copy" v-html="afterpayCopyTwo"></span>
             <img :src="imageUrl" class="image"/>
-            <span>. &nbsp;</span>
+            <span class="afterpay-copy">. &nbsp;</span>
             <a
                 id="afterpay-learnmore"
                 href="#"
                 data-afterpay-modal="en_US"
                 data-bind="click:afterpayLearnMore"
-                class="afterpay-learn-more"
-                >Learn more
+                class="afterpay-learn-more">Learn more
             </a>
         </div>
     </div>
@@ -72,10 +72,10 @@ export default {
         imageUrl() {
             return this.getCmsContent(this.cmsWidgetName, widgetFields.CONTENT_GROUP_WIDGET.IMAGE);
         },
-        afterpayHeaderCopy() {
+        afterpayCopy() {
             return this.getCmsContent(this.cmsWidgetName, widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT);
         },
-        afterpaySubheaderCopy() {
+        afterpayCopyTwo() {
             return this.getCmsContent(this.cmsWidgetName, widgetFields.CONTENT_GROUP_WIDGET.SUBHEADER_TEXT);
         },
         modalName() {
@@ -114,33 +114,32 @@ export default {
 }
 
 .afterpay-content {
-    display: flex;
-    flex-direction: column;
+    display: block;
+    text-align: center;
 }
 
 .afterpay-copy {
     font-size: 0.875rem;
     color: $blue-700;
     font-weight: $font-weight-bold;
-    text-align: center;
-    flex-direction: column;
 }
 
 .image-and-link {
-    display: flex;
     justify-content: center;
     align-items: center;
 }
 
 .image {
-    flex-direction: column;
     border: 0;
+    height: 20px;
+    width: 83px;
 }
 
-:deep(a.learn-more-link) {
+:deep(a.afterpay-learn-more) {
     color: $blue-700;
     fill: $blue-700;
     text-decoration: underline;
+    font-size: 0.875rem;
 }
 
 .afterpay-modal {