better look

door-status.css

@@ -1,38 +1,34 @@
-/* Door Status Indicator – Button‑style visuals */
+/* door-status.css – styles the indicator as a pill‑shaped button */
 
 .door-status-indicator {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.35em;
-  font-size: 1em;
-  padding: 0.35em 0.75em;
-  border-radius: 0.6em;
-  font-weight: 600;
-  line-height: 1;
-  text-decoration: none;
-  user-select: none;
+  display:inline-flex;
+  align-items:center;
+  gap:0.4em;
+  padding:0.25em 0.75em;
+  border-radius:1em;      /* fully‑rounded corners */
+  font-size:0.95em;
+  font-weight:600;
+  line-height:1;
+  border:1px solid transparent;
+  user-select:none;
+  transition:filter .15s ease-in-out;
 }
 
-/* OPEN → light green background, dark green text */
+/* Open  = soft green background + dark green text */
 .door-status-indicator.open {
-  background: #d4edda;   /* light mint green */
-  color: #155724;        /* dark evergreen */
-  border: 1px solid #c3e6cb;
+  background:#e7f9ec;
+  color:#1e7a34;
 }
 
-/* CLOSED → light red background, dark red text */
+/* Closed = soft red background + dark red text */
 .door-status-indicator.closed {
-  background: #f8d7da;   /* blush pink */
-  color: #721c24;        /* maroon */
-  border: 1px solid #f5c6cb;
+  background:#fdeeee;
+  color:#c03c3c;
 }
 
-/* Optional hover focus states for better UX */
-.door-status-indicator.open:hover,
-.door-status-indicator.open:focus {
-  background: #c3e6cb;
-}
-.door-status-indicator.closed:hover,
-.door-status-indicator.closed:focus {
-  background: #f5c6cb;
+/* (Optional) slight hover effect */
+.door-status-indicator:hover,
+.door-status-indicator:focus {
+  filter:brightness(1.05);
+  outline:none;
 }

wp-api-consumer.php

@@ -92,7 +92,7 @@ function dsi_get_status() : bool {
 
 function dsi_shortcode() : string {
     $open  = dsi_get_status();
-    $emoji = $open ? '<div class="door-status-indicator open">Open</div>' : '<div class="door-status-indicator closed">Closed</div>';
+    $emoji = $open ? '<div class="door-status-indicator open">🟢 Open</div>' : '<div class="door-status-indicator closed">🔴 Closed</div>';
 
     return sprintf(
         '<span class="door-status-indicator" aria-label="Door is %s">%s</span>',