From 2fa950f32f550ef7fd813e69e3d1ecc1f060ecf6 Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Tue, 10 Feb 2026 15:48:15 -0500
Subject: [PATCH] styling updates

---
 .../service-package-radio.vue                 | 59 +++++++++++--------
 1 file changed, 36 insertions(+), 23 deletions(-)

diff --git a/src/layouts/service-packages/service-package-question/service-package-radio/service-package-radio.vue b/src/layouts/service-packages/service-package-question/service-package-radio/service-package-radio.vue
index 4f3ad667..4e1cf8f1 100644
--- a/src/layouts/service-packages/service-package-question/service-package-radio/service-package-radio.vue
+++ b/src/layouts/service-packages/service-package-question/service-package-radio/service-package-radio.vue
@@ -10,9 +10,6 @@
                 <div>
                     <p class="m-0">
                         <span v-html="buttonLabel"></span>
-                        <span
-                            class="pricing-info"
-                            v-html="buttonAuxiliaryCopy"></span>
                     </p>
                     <p
                         v-if="buttonLabelSubCopy"
@@ -57,6 +54,11 @@
                         v-html="buttonFooterCopy"></div>
                 </div>
             </div>
+            <div class="pricing-info">
+                <span
+                    class="price float-right"
+                    v-html="buttonAuxiliaryCopy"></span>
+            </div>
         </div>
     </baseInputButton>
 </template>
@@ -142,7 +144,7 @@ export default {
                     cursor: pointer;
                     width: 100%;
                     padding: 1rem;
-                    border: 1px solid $gray-300;
+                    border: 0.666667px solid $gray-300;
                     //box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.15), 0px 4px 24px -8px rgba(0, 0, 0, 0.2);
                     box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
                     border-radius: 0.5rem;
@@ -163,7 +165,7 @@ export default {
                         top: 5px;
                         margin-right: 1rem;
                         border-radius: 50%;
-                        border: 1px solid $gray-500;
+                        border: 0.666667px solid $gray-500;
                         width: 16px;
                         height: 16px;
                         min-width: 16px;
@@ -184,7 +186,7 @@ export default {
                 &:hover {
                     + .package-label {
                         &:before {
-                            border: 1px solid #8e9292;
+                            border: 0.666667px solid #8e9292;
                             box-shadow: 0px 0px 0px 4px #9fcee6, 0px 1px 4px rgba(0, 0, 0, 0.2);
                         }
                     }
@@ -206,20 +208,20 @@ export default {
                     }
 
                     + .package-label {
-                        background-color: $blue-100;
-                        border: 1px solid $blue;
+                        background-color: $background-color-selected;
+                        border: 0.666667px solid $heritage-blue-secondary;
                         max-height: 500px;
                     }
 
                     + .package-label {
                         &:before {
-                            box-shadow: 0px 0px 0px 1px $blue;
+                            box-shadow: 0px 0px 0px 1px $heritage-blue-secondary;
                         }
                     }
 
                     + .package-label {
                         &:after {
-                            background: $blue;
+                            background: $heritage-blue-secondary;
                         }
                     }
                 }
@@ -227,16 +229,18 @@ export default {
                 &:focus {
                     + .package-label {
                         &:before {
-                            border: 2px solid $blue;
+                            border: 2px solid $heritage-blue-secondary;
                         }
                     }
                 }
             }
 
             .package-footer {
-                color: $red;
-                font-weight: $font-weight-bold; // 600 in fmg
-                margin-top: 0.5rem; // not in fmg
+                color: #af2117;
+                font-weight: $font-weight-bold;
+                margin-top: 20px;
+                font-size: 0.875rem;
+                line-height: 21px;
             }
 
             .package-specs {
@@ -249,32 +253,29 @@ export default {
                     max-height: 500px;
                 }
                 p {
-                    font-weight: $font-weight-bold; // 600 in fmg
+                    color: #4d4e53;
+                    font-weight: 600;
                     display: flex;
                     justify-content: space-between;
 
-                    span {
-                        &.pricing-info {
-                            color: $green;
-                            font-size: 0.875rem;
-                        }
-                    }
-
                     &.sub-label {
                         color: $green;
                         text-transform: uppercase;
                         font-size: 0.75rem;
+                        font-weight: $font-weight-bold;
                     }
                 }
 
                 ul {
-                    margin: 1rem 0 0 -.6rem; // .9375rem in fmg
+                    margin:0.5rem 0 0 -.6rem; // .9375rem in fmg
                     padding: 0;
+                    color: $darker-gray;
 
                     li {
                         margin-bottom: 0.5rem;
                         font-size: 0.875rem;
                         line-height: 1.5rem;
+                        color: $darker-gray;
 
                         a {
                             line-height: 1.5rem;
@@ -302,6 +303,18 @@ export default {
                     }
                 }
             }
+
+            .pricing-info {
+                display: block;
+                span {
+                    &.price {
+                        color: #075f35;
+                        font-size: 0.875rem;
+                        font-weight: $font-weight-bold;
+                        display: inline-block;
+                    }
+                }
+            }
         }
     }
 </style>