stylized filter offcanvas and added placeholder for active facets, added back to top button component

src/assets/css/_bootstrap.scss

@@ -20,7 +20,7 @@
 @import 'bootstrap/scss/nav';
 // @import 'bootstrap/scss/accordion';
 @import 'bootstrap/scss/alert';
-// @import 'bootstrap/scss/badge';
+@import 'bootstrap/scss/badge';
 // @import 'bootstrap/scss/breadcrumb';
 // @import 'bootstrap/scss/button-group';
 @import 'bootstrap/scss/buttons';
@@ -30,7 +30,7 @@
 @import 'bootstrap/scss/dropdown';
 @import 'bootstrap/scss/forms';
 @import 'bootstrap/scss/grid';
-// @import 'bootstrap/scss/list-group';
+@import 'bootstrap/scss/list-group';
 @import 'bootstrap/scss/modal';
 @import 'bootstrap/scss/navbar';
 @import 'bootstrap/scss/offcanvas';

src/assets/css/main.scss

@@ -8,6 +8,10 @@
   --radius: 40px;  /* Circle radius */
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 /* --------------------------------------------------
    Layout
 -------------------------------------------------- */
@@ -259,12 +263,41 @@ $tiers: (
   stroke: rgba(255,255,255,0.87);
 }
 
+.form-check-input:checked {
+  background-color: var(--bs-success);
+  border-color: var(--bs-success-border-subtle);
+}
+
+.form-check-input:focus {
+  border-color: var(--bs-success);
+  box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
+}
+
 .search-button {
   width: 2rem;
   fill: rgba(255,255,255,0.87);
   stroke: rgba(255,255,255,0.87);
 }
 
+#btn-back-to-top {
+  position: fixed;
+  bottom: 5vh;
+  right: 5vw;
+  display: none;
+}
+
+.top-icon svg {
+  width: 2rem;
+  height:2rem;
+  fill: var(--bs-info-bg-subtle);
+  stroke: var(--bs-info-bg-subtle);
+}
+
+#btn-back-to-top:hover .top-icon svg {
+  fill: var(--bs-info-border-subtle);
+  stroke: var(--bs-info-border-subtle);
+}
+
 .energy-icon svg {
   margin-top: -0.25rem;
   margin-right: -0.25rem;
@@ -314,6 +347,10 @@ $tiers: (
   font-weight: 700;
 }
 
+.fs-7 {
+  font-size: 0.9rem !important;
+}
+
 .price-label {
   font-size: 0.7rem;
   font-weight: 600;