From 886b1556e905f37922cbe2d828353777e2caeaf4 Mon Sep 17 00:00:00 2001
From: Mohamed Maher <maher94mo@gmail.com>
Date: Sat, 22 Aug 2026 21:29:28 +0000
Subject: [PATCH] Update styles.css

---
 styles.css | 33 +++++++++++++++++++++++----------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/styles.css b/styles.css
index 475fc91..cee228c 100644
--- a/styles.css
+++ b/styles.css
@@ -605,6 +605,18 @@ button, input, select, textarea { font-family: inherit; }
 .tl-item .tl-title { font-size: 13px; font-weight: 700; color: var(--text-main); }
 .tl-item .tl-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
 .tl-item .tl-price { font-size: 12.5px; font-weight: 700; color: var(--burgundy); float: left; }
+.tl-edit-btn {
+  margin-top: 8px;
+  border: 1px solid var(--dusty-rose-soft);
+  background: #fff;
+  color: var(--burgundy);
+  font-size: 11px;
+  font-weight: 700;
+  padding: 5px 12px;
+  border-radius: var(--radius-sm, 8px);
+  cursor: pointer;
+}
+.tl-edit-btn:active { background: var(--dusty-rose-soft); }
 
 /* ---------- Utilities ---------- */
 .hidden { display: none !important; }
@@ -626,32 +638,33 @@ button, input, select, textarea { font-family: inherit; }
 }
 
 @media (min-width: 900px) {
-  #app { flex-direction: row; }
+  #app { flex-direction: row; padding-inline-end: 240px; }
   .app-header {
     position: fixed;
     top: 0; right: 0;
     width: 240px;
-    height: 100vh;
+    height: 150px;
     flex-direction: column;
     align-items: flex-start;
-    justify-content: flex-start;
+    justify-content: center;
     padding: 24px 18px;
-    gap: 20px;
+    gap: 12px;
+    border-bottom: 1px solid rgba(217,163,179,0.3);
   }
   .bottom-nav {
     position: fixed;
-    top: 0; right: 0;
+    top: 150px; right: 0;
     width: 240px;
-    height: 100vh;
+    height: calc(100vh - 150px);
     flex-direction: column;
-    padding-top: 150px;
+    padding-top: 16px;
     border-top: none;
     border-inline-start: 1px solid rgba(217,163,179,0.3);
   }
   .nav-btn { flex-direction: row; justify-content: flex-start; gap: 10px; padding-inline: 22px; font-size: 13px; min-height: 50px; }
   .nav-btn.active::after { display: none; }
   .nav-btn.active { background: var(--dusty-rose-soft); border-radius: var(--radius-sm); margin-inline: 10px; }
-  .app-main { margin-inline-end: 240px; max-width: 640px; padding-top: 24px; }
-  .sticky-order-bar, .toast { left: 260px; right: 20px; transform: none; }
-  .toast { left: 50%; margin-inline-end: 240px; transform: translateX(-50%); }
+  .app-main { margin: 0 auto; max-width: 640px; padding-top: 24px; }
+  .sticky-order-bar { right: 260px; left: 20px; transform: none; }
+  .toast { left: calc(50% - 120px); transform: translateX(-50%); }
 }