From 4643ec65cb48aada782aec2c2ff7f805db3a999b Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Tue, 24 Feb 2026 16:20:59 -0500
Subject: [PATCH] steering modal updates

---
 src/digital-components/modal/modal.vue        |  1 -
 .../cancel-claim-modal/cancel-claim-modal.vue |  4 +-
 .../steering-modal/steering-modal.vue         | 62 ++++++++-----------
 3 files changed, 30 insertions(+), 37 deletions(-)

diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue
index 19ba0e4b..85b26b58 100644
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@@ -222,7 +222,6 @@ export default {
             .modal-content {
                 margin: 1.5rem auto 0 auto;
                 .modal-body {
-                    color: #4d4e53;
                     padding: 0 1.5rem 0 1.5rem;
                     .col {
                         max-width: 100%;
diff --git a/src/layouts/coverage-statement/cancel-claim-modal/cancel-claim-modal.vue b/src/layouts/coverage-statement/cancel-claim-modal/cancel-claim-modal.vue
index b294f4db..57bae07e 100644
--- a/src/layouts/coverage-statement/cancel-claim-modal/cancel-claim-modal.vue
+++ b/src/layouts/coverage-statement/cancel-claim-modal/cancel-claim-modal.vue
@@ -90,9 +90,11 @@ export default {
     .cancel-link {
         text-decoration: underline;
     }
-
     .modal-footer {
         padding-bottom: 1rem;
     }
+    .modal-body {
+        color: #4d4e53;
+    }
 }
 </style>
diff --git a/src/layouts/provider-preference/steering-modal/steering-modal.vue b/src/layouts/provider-preference/steering-modal/steering-modal.vue
index 9e9bdd50..e93f1feb 100644
--- a/src/layouts/provider-preference/steering-modal/steering-modal.vue
+++ b/src/layouts/provider-preference/steering-modal/steering-modal.vue
@@ -1,21 +1,24 @@
 <template>
-    <modal
-        :ref="ModalName"
-        :modalId="ModalName"
-        :footerButtonText="ModalCloseButtonText"
-        @footerButtonEvent="footerButtonClick">
-        <h5 class="text-center mb-4">
-        {{ ModalHeadline }}
-        </h5>
-        <div>
-            <div
-                class="mb-4"
-                v-html="ModalBodyText"></div>
-            <div
-                v-if="ModalSubBodyText"
-                v-html="ModalSubBodyText"></div>
-        </div>
-    </modal>
+    <div class="steering-modal-container">
+        <modal
+            :ref="ModalName"
+            :modalId="ModalName"
+            :footerButtonText="ModalCloseButtonText"
+            @footerButtonEvent="footerButtonClick">
+            <h5 class="text-center mb-4 headline-text">
+            {{ ModalHeadline }}
+            </h5>
+            <div>
+                <div
+                    class="mb-4"
+                    v-html="ModalBodyText"></div>
+                <div
+                    class="mb-4"
+                    v-if="ModalSubBodyText"
+                    v-html="ModalSubBodyText"></div>
+            </div>
+        </modal>
+    </div>
 </template>
 
 <script>
@@ -74,24 +77,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.modal {
-    &.modal-component {
-        .modal-dialog {
-            .modal-content {
-                .modal-body {
-                    .modal-sub-body {
-                        color: $gray-600;
-                    }
-                    ul {
-                        margin-bottom: 0;
-                    }
-                    p {
-                        &:last-child {
-                            margin-bottom: 0;
-                        }
-                    }
-                }
-            }
+:deep(.modal) {
+    .modal-footer {
+        justify-content: center;
+        button {
+            background-color: #167cac;
+            color: $white;
+            width: 71%;
         }
     }
 }