From ef8ff581d5a65025f78f7465592dfe1893c6dcfc Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Thu, 5 Mar 2026 15:05:35 -0500
Subject: [PATCH 1/2] CASH-2378 - CSS updates

---
 .../multi-location-modal.vue                  |  10 +-
 .../multi-location-radio.vue                  | 155 +++++++-----------
 src/styles/mixins/customMixins.scss           |   5 +
 src/styles/ux-variables.scss                  |   6 +
 4 files changed, 82 insertions(+), 94 deletions(-)

diff --git a/src/layouts/schedule/multi-location-modal/multi-location-modal.vue b/src/layouts/schedule/multi-location-modal/multi-location-modal.vue
index 012e8a15d..2ca7176e9 100644
--- a/src/layouts/schedule/multi-location-modal/multi-location-modal.vue
+++ b/src/layouts/schedule/multi-location-modal/multi-location-modal.vue
@@ -300,13 +300,15 @@ export default {
             .modal-content {
                 .modal-header {
                     flex-direction: column;
+                    text-align: center;
+                    padding: 0 1rem;
+
                     & > span {
                         color: $red;
-                        font-size: $font-size-14;
                         font-weight: $font-weight-600;
                         text-transform: uppercase;
+                        font-family: $font-family-sans-serif-semibold;
                     }
-
                     .modal-title {
                         font-size: $font-size-20;
                         font-weight: $font-weight-normal;
@@ -315,6 +317,10 @@ export default {
                 .modal-body {
                     padding: 0.5rem 1rem;
 
+                    .button-question {
+                        margin-top: 0.75rem;
+                    }
+
                     .modal-body-inner {
                         ul {
                             list-style: none;
diff --git a/src/layouts/schedule/multi-location-modal/multi-location-radio/multi-location-radio.vue b/src/layouts/schedule/multi-location-modal/multi-location-radio/multi-location-radio.vue
index 64c8e3ce2..0adabf9cc 100644
--- a/src/layouts/schedule/multi-location-modal/multi-location-radio/multi-location-radio.vue
+++ b/src/layouts/schedule/multi-location-modal/multi-location-radio/multi-location-radio.vue
@@ -1,26 +1,25 @@
 <template>
     <baseInputButton v-bind="$props" @buttonClicked="handleAnswerChange" v-model="selectedValue">
-        <div class="location-label" for="testradio">
+        <div class="radio-label" for="testradio">
             <div class="location-specs">
                 <div class="row">
                     <div class="col md-6">
                         <p class="m-0">
                             <span v-html="this.buttonLabel"></span>
                         </p>
-                        <span v-html="this.buttonAuxillaryCopy"></span>
+                        <span class="service-tag" v-html="this.buttonAuxillaryCopy"></span>
                         <p
                             class="sub-label m-0"
                             v-if="this.buttonLabelSubCopy"
                             v-html="this.buttonLabelSubCopy"></p>
-                    </div>
-                    <hr />
+                    </div> 
                     <div class="col md-6 location-info">
                         <div
                             class="location-info-label"
                             v-if="this.buttonBodyCopy"
                             v-html="this.buttonBodyCopy"></div>
                     </div>
-                    <div class="time-info" v-html="this.buttonFooterCopy"></div>
+                    <div class="col md-6 time-info" v-html="this.buttonFooterCopy"></div>
                 </div>
             </div>
         </div>
@@ -83,17 +82,6 @@ export default {
     &:last-child {
         margin: 1rem 0 0 0;
     }
-    @include media-breakpoint-up(md) {
-        margin: 1rem 0.5rem 0 0.5rem;
-        display: flex;
-        flex-direction: column;
-        &:first-child {
-            margin: 1rem 0.5rem 0 0;
-        }
-        &:last-child {
-            margin: 1rem 0 0 0.5rem;
-        }
-    }
 
     label {
         display: block;
@@ -108,7 +96,7 @@ export default {
         position: absolute;
         left: -9999px;
 
-        + .location-label {
+        + .radio-label {
             display: flex;
             align-items: flex-start;
             position: relative;
@@ -124,7 +112,6 @@ export default {
             min-height: 52px;
             max-height: 126px;
             @include media-breakpoint-up(md) {
-                max-height: 500px;
                 padding-bottom: 3rem;
             }
             transition: max-height 0.25s ease-in;
@@ -158,7 +145,7 @@ export default {
         }
 
         &:hover {
-            + .location-label {
+            + .radio-label {
                 &:before {
                     border: 1px solid #8e9292;
                     box-shadow:
@@ -169,35 +156,27 @@ export default {
         }
 
         &:checked {
-            + .location-label {
-                .location-specs {
-                    max-height: 1000px;
-                }
-            }
-            + .location-label {
+            + .radio-label {
                 .location-specs {
                     .hide-when-closed {
                         display: block;
                     }
-                    p:first-child {
-                        font-weight: 600;
+                    .service-tag {
+                        background: $blue;
+                        color: $blue-150;
                     }
                 }
             }
-            + .location-label {
+            + .radio-label {
                 border: 1px solid $blue;
-                max-height: 500px;
                 background-color: $blue-100;
-                .special-save-box {
-                    background-color: $green-200;
-                }
             }
-            + .location-label {
+            + .radio-label {
                 &:before {
                     box-shadow: 0px 0px 0px 1px $blue;
                 }
             }
-            + .location-label {
+            + .radio-label {
                 &:after {
                     background: $blue;
                 }
@@ -205,7 +184,7 @@ export default {
         }
 
         &:focus {
-            + .location-label {
+            + .radio-label {
                 &:before {
                     border: 2px solid $blue;
                 }
@@ -213,77 +192,69 @@ export default {
         }
     }
 
-    .package-footer {
-        color: $red;
-        font-weight: 600;
-    }
-
     .location-specs {
         display: flex;
         flex-direction: column;
         width: 100%;
         transition: all 0.5s ease;
-        @include media-breakpoint-up(md) {
-            max-height: 500px;
-        }
 
         .row {
             align-items: center;
+
+            .col {
+                flex: 1 0 100%;
+            }
+
+            .service-tag {
+                font-size: $font-size-12;
+                font-family: $font-family-sans-serif-semibold;
+                position: absolute;
+                top: 0;
+                right: 0;
+                background: $blue-150;
+                color: $blue;
+                padding: 0.25rem 0.5rem;
+                border-radius: 1rem;
+                margin: 0.5rem;
+            }
+            p {
+                font-size: $font-size-14;
+
+                & > span {
+                    color: $black;
+                    font-family: $font-family-sans-serif-semibold;
+                    font-weight: $font-weight-bold;
+                    font-size: $font-size-base;
+                }
+            }
+            .sub-label {
+                margin-bottom: 0.5rem !important;
+                border-bottom: 1px solid $gray-1000;
+            }
         }
 
-        .pricing-info .insurance-pricing span {
-            font-size: 0.875rem;
-            font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
+        .location-info-label, .time-info {
+            font-family: $font-family-sans-serif;
+            font-size: $font-size-12;
         }
-
-        p {
-            font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
+        .location-info-label {
             display: flex;
-            justify-content: space-between;
             align-items: center;
-            white-space: nowrap;
-            &:first-child {
-                font-weight: 400;
-            }
-            span {
-                &.pricing-info {
-                    color: $green;
-                    font-size: 0.875rem;
-                    font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
-                    @include media-breakpoint-up(md) {
-                        position: absolute;
-                        bottom: 0.75rem;
-                        left: 0;
-                        width: 100%;
-                        margin-left: 1.25rem;
-                    }
-                    span.strikethrough-price {
-                        text-decoration: line-through;
-                        font-size: 0.75rem;
-                        font-weight: 400;
-                        color: $gray-550;
-                        padding-right: 8px;
-                    }
-                }
-            }
-            &.sub-label {
-                color: $green;
-                text-transform: uppercase;
-                font-size: 0.75rem;
-            }
-        }
 
-        ul {
-            margin: 1rem 0 0 -5px;
-            padding: 0;
-            li {
-                font-size: 0.875rem;
-                line-height: 1.714;
-                color: $gray-550;
-                a {
-                    line-height: 1.714;
-                    padding: 0;
-                }
+            &:before {
+                content: "";
+                display: inline-block;
+                position: relative;
+                top: 0;
+                margin-right: 0.375rem;
+                width: 0.75rem;
+                height: 1rem;
+                background-image: url(~@/assets/img/icons/location-pin.svg);
+                background-repeat: no-repeat;
+                background-position: 0 50%;
+                background-size: 0.75rem auto;
+                padding: 0 0.75rem 0 0;
+                @include blue-filter();
             }
         }
 
diff --git a/src/styles/mixins/customMixins.scss b/src/styles/mixins/customMixins.scss
index 62abcc82d..2a5d3add3 100644
--- a/src/styles/mixins/customMixins.scss
+++ b/src/styles/mixins/customMixins.scss
@@ -20,3 +20,8 @@
 }
 // Usage: @include responsive-font-size-md(mobile-font-size-in-rem, desktop-font-size-in-rem);
 // Example: @include responsive-font-size-md(0.875rem, 1rem);
+
+// Filter to use on SVG elements that are background
+@mixin blue-filter {
+    filter: brightness(0) saturate(100%) invert(31%) sepia(68%) saturate(1676%) hue-rotate(186deg) brightness(93%) contrast(110%);
+}
\ No newline at end of file
diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss
index 76035c6ca..9ad9381a7 100644
--- a/src/styles/ux-variables.scss
+++ b/src/styles/ux-variables.scss
@@ -127,6 +127,12 @@ $body-color: $gray-600;
 $font-family-sans-serif: UrbanistRegular, Arial, Helvetica, sans-serif;
 $font-family-monospace:
     UrbanistRegular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+$font-family-sans-serif-semibold: UrbanistSemibold, Arial, Helvetica, sans-serif;
+$font-family-sans-serif-bold: UrbanistBold, Arial, Helvetica, sans-serif;
+$font-family-sans-serif-extrabold: UrbanistExtraBold, Arial, Helvetica, sans-serif;
+$font-family-sans-serif-medium-italic: UrbanistMedium_Italic, Arial, Helvetica, sans-serif;
+$font-family-sans-serif-bold-italic: UrbanistBold_Italic, Arial, Helvetica, sans-serif;
+
 // stylelint-enable value-keyword-case
 $font-family-base: $font-family-sans-serif;
 $font-family-code: $font-family-monospace;

From 980fb39b8087ff3bf8388a8cca8457bedf2ae305 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Thu, 5 Mar 2026 15:23:30 -0500
Subject: [PATCH 2/2] CASH-2378 prettier fixes

---
 .../multi-location-radio/multi-location-radio.vue            | 5 +++--
 src/styles/mixins/customMixins.scss                          | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/layouts/schedule/multi-location-modal/multi-location-radio/multi-location-radio.vue b/src/layouts/schedule/multi-location-modal/multi-location-radio/multi-location-radio.vue
index 0adabf9cc..00c7f5016 100644
--- a/src/layouts/schedule/multi-location-modal/multi-location-radio/multi-location-radio.vue
+++ b/src/layouts/schedule/multi-location-modal/multi-location-radio/multi-location-radio.vue
@@ -12,7 +12,7 @@
                             class="sub-label m-0"
                             v-if="this.buttonLabelSubCopy"
                             v-html="this.buttonLabelSubCopy"></p>
-                    </div> 
+                    </div>
                     <div class="col md-6 location-info">
                         <div
                             class="location-info-label"
@@ -233,7 +233,8 @@ export default {
             }
         }
 
-        .location-info-label, .time-info {
+        .location-info-label,
+        .time-info {
             font-family: $font-family-sans-serif;
             font-size: $font-size-12;
         }
diff --git a/src/styles/mixins/customMixins.scss b/src/styles/mixins/customMixins.scss
index 2a5d3add3..4ee56d5f1 100644
--- a/src/styles/mixins/customMixins.scss
+++ b/src/styles/mixins/customMixins.scss
@@ -23,5 +23,6 @@
 
 // Filter to use on SVG elements that are background
 @mixin blue-filter {
-    filter: brightness(0) saturate(100%) invert(31%) sepia(68%) saturate(1676%) hue-rotate(186deg) brightness(93%) contrast(110%);
-}
\ No newline at end of file
+    filter: brightness(0) saturate(100%) invert(31%) sepia(68%) saturate(1676%) hue-rotate(186deg)
+        brightness(93%) contrast(110%);
+}