diff --git a/qorder.php b/qorder.php
index 21dbf28..1df23b3 100644
--- a/qorder.php
+++ b/qorder.php
@@ -67,10 +67,11 @@ foreach ($variants_raw as $v) {
       body { font-family: var(--primary-font); background-color: #f8f9fa; padding-bottom: 80px; }
       body.lang-ar { font-family: var(--arabic-font); direction: rtl; text-align: right; }
       
-      .category-nav { overflow-x: auto; white-space: nowrap; background: #fff; padding: 10px; position: sticky; top: 0; z-index: 1020; border-bottom: 1px solid #eee; }
-      .category-item { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 20px; background: #f1f3f5; margin-right: 8px; font-weight: 500; font-size: 1.1rem; cursor: pointer; border: 1px solid transparent; }
+      .category-nav { overflow-x: auto; white-space: nowrap; background: #fff; padding: 12px 10px; position: sticky; top: 0; z-index: 1020; border-bottom: 1px solid #eee; -webkit-overflow-scrolling: touch; }
+      .category-nav::-webkit-scrollbar { display: none; }
+      .category-item { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 20px; background: #f1f3f5; margin-right: 8px; font-weight: 600; font-size: 0.95rem; cursor: pointer; border: 1px solid transparent; transition: all 0.2s; vertical-align: middle; }
       .lang-ar .category-item { margin-right: 0; margin-left: 8px; }
-      .category-item.active { background: #0d6efd; color: #fff; }
+      .category-item.active { background: #0d6efd; color: #fff; border-color: #0d6efd; }
       
       .product-card { border: none; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: transform 0.2s; position: relative; }
       .product-card:active { transform: scale(0.98); }
@@ -85,13 +86,14 @@ foreach ($variants_raw as $v) {
       
       .lang-toggle { font-size: 0.8rem; font-weight: bold; cursor: pointer; padding: 4px 8px; border-radius: 4px; border: 1px solid #dee2e6; background: #f8f9fa; }
       
-      .name-en { display: block; }
+      .name-en { display: inline-block; }
       .name-ar { display: none; }
       .lang-ar .name-en { display: none; }
-      .lang-ar .name-ar { display: block; }
+      .lang-ar .name-ar { display: inline-block; }
       
       .both-names .name-en { display: block; }
-      .both-names .name-ar { display: block; font-size: 0.85em; opacity: 0.8; color: #0d6efd; margin-top: 2px; }
+      .both-names .name-ar { display: block; font-size: 0.85em; opacity: 0.8; color: inherit; margin-top: 1px; }
+      .category-item.active .both-names .name-ar { color: #fff; }
 
       .modal-header .btn-close { margin: 0; }
       .lang-ar .modal-header .btn-close { margin-right: auto; margin-left: 0; }
@@ -115,24 +117,28 @@ foreach ($variants_raw as $v) {
 
   <!-- Category Nav -->
   <div class="category-nav shadow-sm">
-      <div class="category-item active d-flex align-items-center gap-2" onclick="filterCategory('all', this)">
+      <div class="category-item active" onclick="filterCategory('all', this)">
           <i class="bi bi-grid"></i>
-          <span class="name-en">All</span>
-          <span class="name-ar">الكل</span>
+          <div class="d-inline-block">
+              <span class="name-en">All</span>
+              <span class="name-ar">الكل</span>
+          </div>
       </div>
       <?php foreach ($categories as $cat): ?>
-          <div class="category-item d-flex align-items-center gap-2" onclick="filterCategory(<?= $cat['id'] ?>, this)">
+          <div class="category-item" onclick="filterCategory(<?= $cat['id'] ?>, this)">
               <?php if (!empty($cat['image_url'])): ?>
-                  <img src="<?= htmlspecialchars(strpos($cat['image_url'], 'http') === 0 ? $cat['image_url'] : get_base_url() . $cat['image_url']) ?>" alt="" style="width: 20px; height: 20px; object-fit: cover; border-radius: 4px;">
+                  <img src="<?= htmlspecialchars(strpos($cat['image_url'], 'http') === 0 ? $cat['image_url'] : get_base_url() . $cat['image_url']) ?>" alt="" style="width: 22px; height: 22px; object-fit: cover; border-radius: 50%;">
               <?php else: ?>
                   <i class="bi bi-tag"></i>
               <?php endif; ?>
-              <span class="name-en"><?= htmlspecialchars($cat['name']) ?></span>
-              <?php if (!empty($cat['name_ar'])): ?>
-                  <span class="name-ar"><?= htmlspecialchars($cat['name_ar']) ?></span>
-              <?php else: ?>
-                  <span class="name-ar"><?= htmlspecialchars($cat['name']) ?></span>
-              <?php endif; ?>
+              <div class="d-inline-block">
+                  <span class="name-en"><?= htmlspecialchars($cat['name']) ?></span>
+                  <?php if (!empty($cat['name_ar'])): ?>
+                      <span class="name-ar"><?= htmlspecialchars($cat['name_ar']) ?></span>
+                  <?php else: ?>
+                      <span class="name-ar"><?= htmlspecialchars($cat['name']) ?></span>
+                  <?php endif; ?>
+              </div>
           </div>
       <?php endforeach; ?>
   </div>