Add a border between the display selected service and provider provider

application/views/components/booking_final_step.php

@@ -32,6 +32,7 @@
         <?php endif; ?>
     </div>
 
+    <div class="d-flex justify-content-center">
     <?php if ($display_terms_and_conditions): ?>
         <div class="form-check mb-3">
             <input type="checkbox" class="required form-check-input" id="accept-to-terms-and-conditions">
@@ -59,6 +60,7 @@
             </label>
         </div>
     <?php endif ?>
+    </div>
 
     <div class="command-buttons">
         <button type="button" id="button-back-4" class="btn button-back btn-outline-secondary"

application/views/components/booking_header.php

@@ -15,11 +15,11 @@
         </span>
         
         <div class="d-flex justify-content-center justify-content-md-start">
-            <span class="display-selected-service me-2 invisible">
-                [<?= lang('service') ?>]
+            <span class="display-selected-service me-1 pe-1 border-end invisible">
+                <?= lang('service') ?>
             </span>
             <span class="display-selected-provider invisible">
-                [<?= lang('provider') ?>]
+                <?= lang('provider') ?>
             </span>
         </div>
     </div>

application/views/components/company_color_style.php

@@ -32,6 +32,7 @@
     #book-appointment-wizard #company-name .display-selected-service, 
     #book-appointment-wizard #company-name .display-selected-provider {
         color: <?= $company_color ?>;
+        border-color: <?= $company_color ?> !important;
         filter: brightness(50%);
     }
 

assets/css/layouts/booking_layout.scss

@@ -61,6 +61,7 @@ body {
     .display-selected-service,
     .display-selected-provider {
         color: #225d4d;
+        border-color: #225d4d;
         font-size: 60%;
         font-weight: normal;
     }