/* =========================================
   ORDERS PAGE — MOBILE HEADER FIX
   ========================================= */

@media (max-width: 768px) {

  html, body {
    width: 100%;
    overflow-x: hidden;
  }

  /* =============================
     HEADER = 2 แถวชัดเจน
  ============================== */

  header.header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 12px !important;
  }

  /* ---------- แถวบน ---------- */

  .header-left {
    display: flex;
    align-items: center;
    gap: 6px;
    order: 1;
  }

  .header-icons {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin-left: auto;   /* ดันไปขวาสุด */
    order: 2;
  }

  /* ---------- แถวล่าง (search) ---------- */

  .header-search {
    order: 3;
    width: 100%;
    margin-top: 6px;
  }

  .header-search .search-box {
    display: flex;
    width: 100%;
    gap: 6px;
  }

  .header-search input {
    flex: 1;
    height: 38px;
    font-size: 14px;
  }

  .header-search button {
    height: 38px;
    padding: 0 12px;
  }

  /* =============================
     ปรับปุ่มให้เล็กลง
  ============================== */

  .nav-pill {
    padding: 6px 10px;
    font-size: 13px;
  }

  .header-icon {
    padding: 6px 8px;
    font-size: 18px;
    display: flex;
    align-items: center;
  }

  .header-phone span {
    display: none;   /* ซ่อนข้อความเบอร์ */
  }

  .icon-transport {
    display: inline-block !important;
    font-size: 20px !important;
    line-height: 1 !important;
  }

  .header-icons .badge {
    min-width: 18px;
    height: 18px;
    font-size: 11px;
    line-height: 18px;
  }

}