tweaks for seat-chooser

public/css/seat-chooser.css

@@ -14,6 +14,12 @@
     justify-content: center;
     width: 100%;
     height: 100%;
+
+    --seat-width: 2.5rem;
+    --seat-height: var(--seat-width);
+    --seat-gap: 0.5rem;
+    --seat-border-size: 0.1rem;
+    --seat-border-radius: 0.5rem;
 }
 
 #seat-chooser .row {
@@ -29,12 +35,12 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 50px;
-    height: 50px;
-    margin: 5px;
-    border: 1px solid #000;
-    border-radius: 5px;
-    background-color: #fff;
+    width: var(--seat-width);
+    height: var(--seat-height);
+    margin: var(--seat-gap);
+    border: var(--seat-border-size) solid var(--primary-color);
+    border-radius: var(--seat-border-radius);
+    background-color: var(--second-bg);
     cursor: pointer;
 }
 
@@ -50,22 +56,39 @@
     border-left: 0;
 }
 
+#seat-chooser .row .seat.loveseat {
+    background-color: #ff3fe5;
+}
+
 #seat-chooser .row .no-seat {
     /* this seat DOES NOT EXISTS it's a filler for layout*/
     border: none;
     background-color: transparent;
     cursor: default;
-    width: 50px;
-    height: 50px;
-    margin: 5px;
+
+    width: var(--seat-width);
+    height: var(--seat-height);
+    margin: calc(var(--seat-border-size) + var(--seat-gap));
 }
 
 #seat-chooser .row .seat.selected {
-    background-color: #55f;
+    border: calc(var(--seat-gap) - 0.1rem) solid var(--primary-color);
+    margin: 0.1rem;
+    filter: brightness(1.2);
 }
 
 #seat-chooser .row .seat.reserved {
-    background-color: #f00;
+    background-color: var(--highlight-bg);
+    cursor: not-allowed;
+}
+
+#seat-chooser .row .seat.disabled {
+    background-color: var(--default-bg);
+    cursor: not-allowed;
+}
+
+#seat-chooser .row .seat.wheelchair {
+    background-color: #3498db;
 }
 
 #seat-chooser .row .seat:hover {